/* frontend/css/style.css（移动优先重构 - 深蓝金主题） */

/* --- 1. 字体与全局设置 --- */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Noto+Serif+SC&display=swap');

:root {
    /* 暗色主题 - 黑蓝金 */
    --font-primary: 'MedievalSharp', 'Noto Serif SC', serif;
    --font-secondary: 'Noto Serif SC', serif;
    --color-background: #0C1220;
    --color-parchment: #141C2E;
    --color-wood: #C9A84C;
    --color-text-dark: #C8D4E6;
    --color-text-light: #E2E8F0;
    --color-text: #C8D4E6;
    --color-text-muted: #8B9BB0;
    --color-border: #1E2D42;
    --color-accent: #4A90D9;
    --color-header: #080E1A;
    --box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);

    /* 品质颜色变量 - 在暗色背景上更鲜明 */
    --color-quality-common: #A0A0A0;
    --color-quality-rare: #4FA8E8;
    --color-quality-exquisite: #B44FD0;
    --color-quality-legendary: #FFB030;
    --color-quality-epic: #FFD54F;
    --color-quality-mysterious: #9E7B6B;
    --color-quality-world-shattering: #FF5252;
    --color-quality-fentian-world-shattering: #FFB347;
    --accent-color: #4FA8E8;
    --final-angle: 0deg;
    --tx: 0px;
    --ty: 0px;

    /* 移动端布局变量 */
    --bottom-nav-height: 0px;
    --top-bar-height: 44px;

    color-scheme: dark;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-overflow-scrolling: touch;
}

/* 暗色滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

body {
    font-family: var(--font-secondary);
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text-dark);

    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* --- 2. 核心App布局 --- */

/* 顶部状态栏 */
#top-bar {
    height: var(--top-bar-height);
    background-color: var(--color-header);
    color: var(--color-text-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    z-index: 10;
    gap: 15px;
    border-bottom: 1px solid var(--color-border);
}
#core-resources-display {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
#core-resources-display > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#core-resources-display .item-pixel-icon-wrap,
#core-resources-display .item-pixel-icon {
    width: 22px;
    height: 22px;
}

#notification-display {
    flex-grow: 1;
    text-align: center;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 通知栏 */
#notification-bar {
    background-color: var(--color-header);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    z-index: 9;
}
#notification-current {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 15px;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    min-height: 30px;
    transition: background-color 0.2s;
}
#notification-current:hover {
    background-color: rgba(255,255,255,0.05);
}
#notification-current #notification-display {
    font-size: 14px;
    color: var(--color-text-light);
}
#notification-current .notification-toggle-icon {
    font-size: 10px;
    color: var(--color-text-muted, #6B7D8F);
    transition: transform 0.3s;
}
#notification-bar.expanded .notification-toggle-icon {
    transform: rotate(180deg);
}
#notification-history {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--color-border);
    background-color: rgba(0,0,0,0.2);
}
#notification-history:not(.hidden) {
    transform-origin: top center;
    animation: dropdown-slide-down 0.24s ease-out;
}
#notification-history.hidden {
    display: none;
}
#notification-history-list {
    list-style: none;
    margin: 0;
    padding: 5px 15px;
}
#notification-history-list li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    padding: 4px 0;
    font-size: 12px;
    color: var(--color-text-muted, #8B9BB0);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#notification-history-list li:last-child {
    border-bottom: none;
}
#notification-history-list li .notif-time {
    color: #4A5A6A;
    margin-right: 6px;
}
#notification-history-list li.notif-success { color: #4CAF50; }
#notification-history-list li.notif-error { color: #f44336; }
#notification-history-list li.notif-info { color: var(--color-text-light); }
/* 最新消息颜色 */
#notification-current.notif-success #notification-display { color: #4CAF50; }
#notification-current.notif-error #notification-display { color: #f44336; }
#notification-current.notif-info #notification-display { color: var(--color-text-light); }

/* 主内容区 */
#main-content-section {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
    padding: 15px;
    padding-bottom: 80px; /* 为手机浏览器底部栏留空间 */
    /* 暗色纹理叠加 */
    background: linear-gradient(rgba(12, 18, 32, 0.95), rgba(12, 18, 32, 0.95));
}

/* 底部导航栏 (已移除) */
#bottom-nav { display: none; }

/* --- 顶部工具栏下拉菜单 --- */
#top-bar-utils {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.top-bar-icon-btn {
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: 18px;
    padding: 6px 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.top-bar-icon-btn:hover { opacity: 1; }
#top-bar-dropdown,
#top-bar-material-dropdown,
#top-bar-attribute-source-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 100;
    min-width: 180px;
    overflow: hidden;
}
#top-bar-dropdown.hidden,
#top-bar-material-dropdown.hidden,
#top-bar-attribute-source-dropdown.hidden {
    display: none;
}
#top-bar-material-dropdown {
    min-width: min(340px, calc(100vw - 24px));
    max-height: min(460px, calc(100vh - var(--top-bar-height) - 24px));
    overflow-y: auto;
    padding: 10px;
}
#top-bar-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
}
#top-bar-dropdown a:hover { background: rgba(255,255,255,0.06); }
#top-bar-dropdown a i { width: 18px; text-align: center; color: var(--color-accent); }
#top-bar-dropdown a.danger-link { color: #f44336; }
#top-bar-dropdown a.danger-link i { color: #f44336; }
.top-bar-material-title {
    color: var(--color-wood);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 2px 4px 8px;
    border-bottom: 1px solid rgba(183, 150, 104, 0.18);
}
.top-bar-material-list {
    display: grid;
    gap: 5px;
    padding-top: 8px;
}
.top-bar-material-row {
    display: grid;
    grid-template-columns: 20px minmax(96px, 1fr) minmax(92px, auto);
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(183, 150, 104, 0.12);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(183, 150, 104, 0.08), rgba(18, 13, 11, 0.2));
}
.top-bar-material-row i {
    color: var(--color-accent);
    text-align: center;
}
.top-bar-material-name {
    color: var(--color-text-dark);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-bar-material-row strong {
    color: var(--color-text-light);
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* --- 主页三等分布局 --- */
.home-section {
    margin-bottom: 12px;
}
.home-section-title {
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px 4px;
}
.home-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.home-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px;
    background: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-light);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    font-family: var(--font-secondary);
}
.home-nav-btn:hover {
    border-color: var(--color-wood);
    background: rgba(201, 168, 76, 0.08);
    transform: translateY(-1px);
}
.home-nav-btn:active {
    transform: translateY(0);
}
.home-nav-btn i {
    font-size: 16px;
    color: var(--color-accent);
}
.home-nav-btn .home-pixel-icon {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42));
    user-select: none;
}
.home-nav-btn span {
    font-size: 10px;
    white-space: nowrap;
}

/* 主页核心属性面板 */
.home-stats-panel {
    background: var(--color-parchment);
    border: 2px solid var(--color-wood);
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: var(--box-shadow);
}
.home-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 10px;
}
.home-stats-header .char-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.home-stats-header .char-name {
    font-family: var(--font-primary);
    font-size: 18px;
    color: var(--color-quality-epic);
}
.home-stats-header .char-title {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.25;
}
.home-stats-header .char-level {
    font-size: 13px;
    color: var(--color-text-muted);
}
.home-stats-header .char-level-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.home-stats-header .char-uid {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.home-stats-xp {
    margin-bottom: 0;
}
.home-stats-score {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.home-stats-score strong {
    display: inline-block;
    color: var(--color-quality-epic);
    font-size: 20px;
    line-height: 1.15;
}
.home-stats-score small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* --- 子视图返回按钮 --- */
.view-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: 12px;
    background: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-light);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.view-back-btn:hover {
    border-color: var(--color-wood);
}
#inventory-view > .inventory-sticky-back {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
}


/* --- 3. 视图管理与通用组件 --- */

/* 视图切换 */
.view {
    display: none;
    width: 100%;
    min-height: 100%;
}
.view.active {
    display: block;
}

/* 面板 (Panel) */
.panel {
    background-color: var(--color-parchment);
    border: 2px solid var(--color-wood);
    border-radius: 8px;
    padding: 15px;
    box-shadow: var(--box-shadow);
    margin-bottom: 15px;
}
.panel:last-child {
    margin-bottom: 0;
}
.panel h3, .panel h4 {
    font-family: var(--font-primary);
    margin-top: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    color: var(--color-wood);
}

/* 按钮 (Button) */
button {
    font-family: var(--font-primary);
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: 1px solid var(--color-wood);
    border-radius: 5px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 16px;
    width: 100%;
    -webkit-appearance: none;
}
button:active {
    background-color: var(--color-wood);
}
button:disabled {
    background-color: #1E2838;
    cursor: wait;
    opacity: 0.7;
    color: #6B7D8F;
}

/* 输入框 (Input) */
input[type="text"], input[type="password"], input[type="number"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #0D1520;
    color: var(--color-text-dark);
    font-family: var(--font-secondary);
    -webkit-appearance: none;
}
input::placeholder {
    color: #4A5A6A;
}

/* 标签页 (Tabs) */
.inventory-tabs {
    display: flex;
    overflow-x: auto;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-border);
}
.tab-btn {
    font-family: var(--font-primary);
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 16px;
    color: var(--color-accent);
    transition: color 0.3s;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.tab-btn.active {
    color: var(--color-quality-epic);
    border-bottom: 3px solid var(--color-quality-epic);
}
.tab-content { display: none; }
.tab-content.active { display: block; }


/* --- 4. 特定视图与组件样式 --- */

/* 认证与角色选择视图 */
#auth-view, #character-select-view {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.auth-container, .character-select-container {
    width: 100%;
    max-width: 400px;
}

/* 表单内联错误提示 */
.auth-error {
    background-color: rgba(198, 40, 40, 0.2);
    border: 1px solid #e57373;
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #EF5350;
    line-height: 1.4;
    animation: auth-error-shake 0.4s ease;
}
.auth-error.hidden {
    display: none;
}
@keyframes auth-error-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.character-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-bottom: 10px;
}
.character-list-item button {
    width: auto;
    padding: 8px 15px;
    font-size: 14px;
}

/* 副本列表 - 卡片式 */
.dungeon-stage {
    background-color: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dungeon-stage .stage-info {
    flex-grow: 1;
}
.dungeon-stage h4 { margin: 0 0 5px 0; }
.dungeon-stage p { margin: 0; font-size: 14px; color: #8B9BB0; }
.dungeon-stage .start-dungeon-btn {
    flex-shrink: 0;
    width: 100%;
    margin-top: 10px;
}

/* 手风琴效果 (Accordion) for Dungeons */
.dungeon-chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--color-parchment);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}
.dungeon-chapter-header h3 {
    margin: 0;
    border: none;
    padding: 0;
}
.chapter-toggle-icon {
    transition: transform 0.3s ease;
}
.dungeon-chapter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    background-color: rgba(0,0,0,0.15);
}
.dungeon-chapter-wrapper.active .dungeon-chapter-content {
    max-height: 2000px;
    padding: 15px;
}
.dungeon-chapter-wrapper.active .chapter-toggle-icon {
    transform: rotate(180deg);
}

.dungeon-story-category {
    margin-bottom: 18px;
}

.dungeon-story-panel-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dungeon-story-stage-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dungeon-story-selector {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 10px;
    border: 1px solid rgba(183, 150, 104, 0.45);
    border-radius: 8px 8px 0 0;
    padding: 12px;
    background:
        linear-gradient(135deg, rgba(80, 31, 26, 0.82), rgba(27, 34, 48, 0.88)),
        var(--color-parchment);
    box-shadow: var(--box-shadow);
}

.dungeon-chapter-nav-btn {
    width: 44px;
    min-width: 44px;
    height: auto;
    min-height: 76px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.dungeon-chapter-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dungeon-story-current {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: #f4e4bf;
}

.story-chapter-kicker,
.story-chapter-progress {
    font-size: 12px;
    color: rgba(244, 228, 191, 0.76);
}

.void-abyss-tier-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    color: inherit;
}

.void-abyss-tier-input-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.void-abyss-tier-jump input {
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    height: 36px;
    margin: 0;
    padding: 4px 8px;
    text-align: center;
    color: #ffe3a5;
    border: 1px solid rgba(255, 217, 139, 0.45);
    border-radius: 6px;
    background: rgba(12, 10, 12, 0.55);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

.void-abyss-tier-jump input::-webkit-inner-spin-button,
.void-abyss-tier-jump input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.void-abyss-tier-jump button {
    flex: 0 0 auto;
    min-width: 68px;
    height: 36px;
    margin: 0;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.dungeon-story-current h3 {
    margin: 0;
    padding: 0;
    border: 0;
    color: #ffd98b;
    font-family: var(--font-primary);
    font-size: 20px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.raid-shop-warning-list {
    margin: 10px 0 12px;
    padding-left: 18px;
    line-height: 1.7;
    color: #f4e4bf;
}

.dungeon-story-chapter-content {
    max-height: none;
    overflow: visible;
    padding: 15px;
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background-color: rgba(0, 0, 0, 0.15);
}

/* 物品列表项 */
.inventory-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    gap: 15px;
}
.inventory-item.is-expandable {
    cursor: pointer;
}
.inventory-item.is-expandable:active {
    background-color: rgba(255,255,255,0.05);
}
.inventory-item:last-child {
    border-bottom: none;
}
.item-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background-color: rgba(255,255,255,0.07);
    border-radius: 4px;
    flex-shrink: 0;
}
/* 替代图片的图标徽章 */
.item-icon-badge {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.07);
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 16px;
    color: #7A8FA5;
    border: 1px solid rgba(255,255,255,0.1);
}
.item-pixel-icon {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
    user-select: none;
}
.item-pixel-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.item-pixel-icon-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 14px;
    max-width: 28px;
    height: 14px;
    padding: 0 2px;
    overflow: hidden;
    border: 1px solid rgba(255, 238, 182, 0.78);
    border-radius: 3px;
    background: rgba(21, 17, 27, 0.94);
    color: #fff0b8;
    font: 700 9px/12px var(--font-secondary);
    letter-spacing: 0;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.item-icon-badge.border-quality-common { border-color: var(--color-quality-common, gray); }
.item-icon-badge.border-quality-rare { border-color: var(--color-quality-rare, #4488ff); }
.item-icon-badge.border-quality-exquisite { border-color: var(--color-quality-exquisite, #aa44ff); }
.item-icon-badge.border-quality-legendary { border-color: var(--color-quality-legendary, orange); }
.item-icon-badge.border-quality-epic { border-color: var(--color-quality-epic, gold); }
.item-icon-badge.border-quality-mysterious { border-color: var(--color-quality-mysterious, brown); }
.item-icon-badge.border-quality-world-shattering { border-color: var(--color-quality-world-shattering, red); }
.item-icon-badge.border-quality-fentian-world-shattering {
    border-color: var(--color-quality-fentian-world-shattering, #ffb347);
    color: #ffd995;
    background: linear-gradient(145deg, rgba(112, 27, 19, .52), rgba(48, 28, 20, .7));
    box-shadow: inset 0 0 10px rgba(255, 123, 57, .2), 0 0 10px rgba(255, 92, 40, .14);
}
/* 商店卡片图标徽章 */
.item-card-icon-badge {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.07);
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 18px;
    color: #7A8FA5;
    border: 1px solid rgba(255,255,255,0.1);
}
.item-name {
    flex-grow: 1;
    font-size: 15px;
}
.guardian-stone-attrs {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.35;
}
.guardian-attr-filter.active,
.guardian-attr-disassemble.active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: rgba(183, 150, 104, 0.16);
}
.guardian-attr-disassemble-controls {
    align-items: flex-start;
    flex-wrap: wrap;
}
.guardian-attr-disassemble-control {
    display: flex;
    flex: 1 1 78px;
    min-width: 72px;
    flex-direction: column;
    gap: 4px;
}
.guardian-attr-disassemble-control button {
    width: 100%;
}
.guardian-attr-threshold {
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
    font-size: 11px;
    text-align: center;
}
.title-system-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.title-current-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: rgba(255,255,255,0.04);
}
.title-current-card strong {
    color: var(--color-quality-epic);
}
.title-current-card em {
    color: var(--color-text-muted);
    font-style: normal;
    font-size: 12px;
}
.title-compose-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.title-compose-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.title-compose-row button {
    grid-column: 1 / -1;
}
.title-divination-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(183, 150, 104, 0.36);
    border-radius: 8px;
    padding: 14px;
    background:
        radial-gradient(circle at 12% 22%, rgba(242, 211, 139, 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 18%, rgba(149, 213, 255, 0.22) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 74%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px),
        linear-gradient(135deg, rgba(17, 13, 24, 0.98), rgba(34, 22, 36, 0.94) 52%, rgba(17, 15, 28, 0.98));
    box-shadow: inset 0 0 34px rgba(0,0,0,0.35), 0 0 18px rgba(183, 150, 104, 0.08);
}
.title-divination-panel::before,
.title-divination-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.title-divination-panel::before {
    opacity: 0.65;
    background-image:
        radial-gradient(circle at 18% 64%, rgba(255,255,255,0.9) 0 1px, transparent 1.8px),
        radial-gradient(circle at 33% 34%, rgba(242,211,139,0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle at 52% 78%, rgba(149,213,255,0.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 68% 42%, rgba(255,255,255,0.65) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 28%, rgba(242,211,139,0.7) 0 1px, transparent 1.8px);
    animation: titleStarTwinkle 3.2s ease-in-out infinite;
}
.title-divination-panel::after {
    opacity: 0.24;
    background: linear-gradient(120deg, transparent, rgba(242,211,139,0.18), transparent);
    transform: translateX(-100%);
    animation: titleStarSweep 6s ease-in-out infinite;
}
.title-crystal-stage {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 88px;
    height: 92px;
    pointer-events: none;
    z-index: 1;
}
.title-crystal-ball {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border: 1px solid rgba(214, 185, 126, 0.45);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.9), rgba(255,255,255,0.12) 18%, transparent 28%),
        radial-gradient(circle at 58% 64%, rgba(149, 213, 255, 0.46), transparent 38%),
        radial-gradient(circle at 50% 52%, rgba(183, 150, 104, 0.26), rgba(31, 24, 48, 0.82) 72%);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.18),
        0 0 18px rgba(183, 150, 104, 0.22);
}
.title-crystal-core {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: rgba(242, 211, 139, 0.42);
    filter: blur(2px);
}
.title-crystal-shine {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.75), rgba(242,211,139,0.28) 34%, transparent 64%);
}
.title-crystal-base {
    width: 56px;
    height: 14px;
    margin: -3px auto 0;
    border: 1px solid rgba(183, 150, 104, 0.36);
    border-radius: 50%;
    background: rgba(30, 20, 16, 0.88);
}
.title-crystal-ball.is-flashing {
    animation: titleCrystalPulse 1200ms ease-out;
}
.title-crystal-ball.is-flashing .title-crystal-shine {
    animation: titleCrystalShine 1200ms ease-out;
}
@keyframes titleCrystalPulse {
    0% { transform: scale(1); box-shadow: inset 0 0 18px rgba(255,255,255,0.18), 0 0 18px rgba(183, 150, 104, 0.22); }
    20% { transform: scale(1.08); box-shadow: inset 0 0 32px rgba(255,255,255,0.52), 0 0 44px rgba(242, 211, 139, 0.88); }
    48% { transform: scale(1.03); box-shadow: inset 0 0 28px rgba(149,213,255,0.42), 0 0 36px rgba(149, 213, 255, 0.62); }
    100% { transform: scale(1); box-shadow: inset 0 0 18px rgba(255,255,255,0.18), 0 0 18px rgba(183, 150, 104, 0.22); }
}
@keyframes titleCrystalShine {
    0% { opacity: 0; transform: scale(0.72); }
    24% { opacity: 1; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.52); }
}
@keyframes titleStarTwinkle {
    0%, 100% { opacity: 0.35; }
    45% { opacity: 0.9; }
    70% { opacity: 0.55; }
}
@keyframes titleStarSweep {
    0%, 38% { transform: translateX(-100%); }
    62%, 100% { transform: translateX(100%); }
}
.title-divination-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 2;
    padding-right: 104px;
}
.title-divination-head h4 {
    margin: 0 0 4px;
    border: none;
    padding: 0;
    color: var(--color-accent);
}
.title-divination-head span {
    color: var(--color-text-muted);
    font-size: 12px;
}
.title-divination-head button {
    width: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
}
.title-divination-result {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-radius: 6px;
    background: rgba(10, 8, 18, 0.56);
    backdrop-filter: blur(2px);
}
.title-divination-lines {
    display: grid;
    gap: 6px;
}
.title-divination-lines p {
    margin: 0;
    min-height: 1.55em;
    line-height: 1.55;
    color: var(--color-text);
}
.title-divination-lines p.is-typing::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: rgba(242, 211, 139, 0.82);
    animation: titleTypingCursor 560ms steps(1) infinite;
}
.title-divination-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    transition: opacity 180ms ease;
}
.title-divination-meta.is-waiting {
    opacity: 0;
}
.title-divination-meta span {
    color: var(--color-text-muted);
    font-size: 12px;
}
.title-divination-meta strong {
    color: var(--color-quality-epic);
}
.title-divination-empty {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    padding: 10px;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    font-size: 13px;
}
@keyframes titleTypingCursor {
    50% { opacity: 0; }
}
@media (max-width: 560px) {
    .title-divination-panel {
        padding: 12px;
    }
    .title-crystal-stage {
        position: relative;
        top: auto;
        right: auto;
        width: 84px;
        height: 88px;
        margin: 0 auto 10px;
    }
    .title-crystal-ball {
        width: 66px;
        height: 66px;
    }
    .title-crystal-core {
        inset: 20px;
    }
    .title-divination-head {
        padding-right: 0;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .title-divination-head button {
        width: 100%;
    }
    .title-divination-result {
        padding: 10px;
    }
    .title-divination-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Platinum raid map interaction override */
.platinum-raid-battlefield {
    display: grid;
    grid-template-columns: minmax(420px, 1.08fr) minmax(340px, 0.92fr);
    grid-template-rows: minmax(520px, auto) auto;
    grid-template-areas:
        "map detail"
        "pressure pressure";
    gap: 16px;
    align-items: stretch;
}

.platinum-raid-war-map {
    grid-area: map;
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border: 1px solid rgba(222, 121, 54, 0.48);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 222, 148, 0.12), transparent 18%),
        radial-gradient(circle at 50% 50%, rgba(178, 48, 31, 0.26), transparent 44%),
        linear-gradient(145deg, rgba(20, 11, 11, 0.94), rgba(8, 10, 13, 0.96));
    box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.62), 0 14px 30px rgba(0, 0, 0, 0.32);
}

.platinum-raid-war-map::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.26;
    pointer-events: none;
    background:
        repeating-linear-gradient(120deg, transparent 0 21px, rgba(255, 204, 128, 0.05) 22px 23px),
        linear-gradient(90deg, transparent 49%, rgba(255, 188, 87, 0.12) 50%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(218, 74, 40, 0.12) 50%, transparent 51%);
}

.raid-map-title {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 215, 160, 0.12);
}

.raid-map-title span {
    color: #ba8e6d;
    font-size: 12px;
}

.raid-map-title strong {
    color: #ffe0a2;
    font-size: 14px;
}

.raid-map-stage {
    position: relative;
    z-index: 1;
    height: calc(100% - 49px);
    min-height: 470px;
}

.raid-map-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255, 205, 126, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.raid-map-orbit.orbit-one {
    width: min(68%, 360px);
    aspect-ratio: 1;
    animation: platinumDomainRotate 24s linear infinite;
}

.raid-map-orbit.orbit-two {
    width: min(88%, 470px);
    aspect-ratio: 1;
    border-color: rgba(218, 74, 40, 0.2);
    animation: platinumDomainRotate 36s linear infinite reverse;
}

.raid-map-node {
    position: absolute;
    z-index: 2;
    width: 168px;
    min-height: 76px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(222, 121, 54, 0.44);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    text-align: left;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 188, 87, 0.14), transparent 28%),
        linear-gradient(145deg, rgba(45, 21, 17, 0.94), rgba(10, 11, 14, 0.9));
    color: #f6dfbd;
    box-shadow: inset 0 1px 0 rgba(255, 220, 166, 0.08), 0 10px 22px rgba(0, 0, 0, 0.3);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.raid-map-node:hover,
.raid-map-node.active {
    border-color: rgba(255, 218, 139, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 230, 176, 0.16), 0 0 22px rgba(230, 94, 41, 0.36);
    filter: brightness(1.08);
}

.raid-map-node span {
    color: #c99a72;
    font-size: 12px;
}

.raid-map-node strong {
    color: #ffe0a2;
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.2;
}

.raid-map-node em {
    color: #e2b179;
    font-size: 12px;
    font-style: normal;
}

.map-node-fear {
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
}

.map-node-fear:hover,
.map-node-fear.active {
    transform: translateX(-50%);
}

.map-node-hatred {
    left: 8%;
    top: 46%;
}

.map-node-pride {
    right: 8%;
    top: 46%;
}

.map-node-domain {
    left: 50%;
    top: 50%;
    width: 210px;
    min-height: 104px;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
    border-color: rgba(255, 205, 126, 0.62);
    background:
        radial-gradient(circle at center, rgba(255, 221, 147, 0.24), transparent 48%),
        linear-gradient(145deg, rgba(75, 23, 16, 0.96), rgba(13, 9, 9, 0.94));
}

.map-node-domain:hover,
.map-node-domain.active {
    transform: translate(-50%, -50%);
}

.map-node-domain strong {
    font-size: 22px;
}

.map-node-pressure {
    left: 50%;
    bottom: 9%;
    width: 230px;
    transform: translateX(-50%);
    border-color: rgba(186, 74, 48, 0.58);
}

.map-node-pressure:hover,
.map-node-pressure.active {
    transform: translateX(-50%);
}

.platinum-raid-detail-panel {
    grid-area: detail;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 188, 87, 0.52);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 205, 126, 0.12), transparent 32%),
        linear-gradient(160deg, rgba(40, 18, 15, 0.95), rgba(9, 10, 13, 0.96));
    box-shadow: inset 0 0 52px rgba(0, 0, 0, 0.48), 0 14px 30px rgba(0, 0, 0, 0.32);
}

.raid-detail-card {
    display: none;
    min-height: 100%;
    padding: 22px;
    animation: raidDetailIn 180ms ease-out;
}

.raid-detail-card.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.raid-detail-kicker {
    color: #c79062;
    font-size: 12px;
    letter-spacing: 1px;
}

.raid-detail-card h3 {
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 218, 169, 0.14);
    color: #fff0bb;
    font-family: var(--font-primary);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    text-shadow: 0 0 18px rgba(239, 88, 42, 0.42);
}

.raid-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.raid-detail-stats span,
.raid-detail-reward {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid rgba(216, 126, 58, 0.36);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #f2bf82;
    font-size: 13px;
}

.raid-detail-mechanic,
.raid-detail-domain-boss p {
    margin: 0;
    color: #e1c8a8;
    line-height: 1.65;
    font-size: 15px;
}

.raid-detail-transform {
    margin-top: auto;
    padding: 12px;
    border-left: 2px solid rgba(255, 199, 121, 0.62);
    background: rgba(255, 181, 83, 0.08);
}

.raid-detail-transform span,
.raid-detail-domain-boss span {
    display: block;
    color: #aa8b72;
    font-size: 12px;
}

.raid-detail-transform strong,
.raid-detail-domain-boss strong {
    display: block;
    margin-top: 4px;
    color: #ffe0a2;
    font-size: 18px;
}

.raid-detail-card button,
.raid-detail-domain-boss button {
    min-height: 38px;
    border-color: rgba(255, 215, 160, 0.18);
    background: linear-gradient(135deg, rgba(51, 42, 37, 0.9), rgba(82, 68, 57, 0.7));
    color: #cfc0ad;
}

.raid-detail-domain-list {
    display: grid;
    gap: 12px;
}

.raid-detail-domain-boss {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255, 205, 126, 0.25);
    border-radius: 7px;
    background: rgba(5, 7, 10, 0.55);
}

.raid-detail-domain-boss.final {
    border-color: rgba(255, 222, 155, 0.46);
    background: linear-gradient(135deg, rgba(82, 23, 17, 0.62), rgba(5, 7, 10, 0.62));
}

.platinum-raid-pressure-bar {
    grid-area: pressure;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.44fr);
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(186, 74, 48, 0.5);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 50%, rgba(206, 58, 40, 0.22), transparent 28%),
        linear-gradient(90deg, rgba(32, 14, 13, 0.96), rgba(10, 11, 14, 0.94));
}

.platinum-raid-pressure-bar > div:first-child span {
    display: block;
    color: #ba8e6d;
    font-size: 12px;
}

.platinum-raid-pressure-bar > div:first-child strong {
    display: block;
    margin-top: 4px;
    color: #ffcf8e;
    font-size: 17px;
}

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

@media (max-width: 1080px) {
    .platinum-raid-battlefield {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "map"
            "detail"
            "pressure";
    }

    .platinum-raid-war-map,
    .platinum-raid-detail-panel {
        min-height: auto;
    }

    .raid-map-stage {
        height: 480px;
    }
}

@media (max-width: 640px) {
    .platinum-raid-battlefield {
        gap: 12px;
    }

    .raid-map-stage {
        min-height: 520px;
        height: 520px;
    }

    .raid-map-node {
        width: 145px;
        min-height: 70px;
        padding: 9px;
    }

    .raid-map-node strong {
        font-size: 15px;
    }

    .map-node-domain {
        width: 178px;
    }

    .map-node-domain strong {
        font-size: 18px;
    }

    .map-node-hatred {
        left: 4%;
    }

    .map-node-pride {
        right: 4%;
    }

    .platinum-raid-pressure-bar {
        grid-template-columns: 1fr;
    }

    .raid-detail-card {
        padding: 16px;
    }
}
.title-shop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.title-shop-section {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    background-color: rgba(255,255,255,0.03);
}
.title-shop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.title-shop-head h4 {
    margin: 0 0 4px;
    border: none;
    padding: 0;
}
.title-shop-head span,
.title-shop-head em {
    color: var(--color-text-muted);
    font-size: 12px;
    font-style: normal;
}
.title-part-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
    max-height: 292px;
    overflow-y: auto;
    padding-right: 3px;
}
.title-part-item {
    display: flex;
    min-height: 94px;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(0,0,0,0.12);
}
.title-part-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.title-part-name strong {
    color: var(--color-quality-epic);
    font-size: 15px;
}
.title-part-name span {
    color: var(--color-text-muted);
    font-size: 12px;
}
.title-part-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.title-part-buy span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-accent);
    font-size: 12px;
    white-space: nowrap;
}
.title-part-buy button {
    width: auto;
    min-width: 54px;
    padding: 5px 8px;
    font-size: 12px;
}
.title-shop-empty {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: rgba(0,0,0,0.1);
}
.title-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.title-preview-list span,
.rank-title-suffix {
    color: var(--color-quality-epic);
    font-size: 12px;
}
.skill-edit-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
    color: var(--color-text-muted);
    font-size: 13px;
}
.skill-edit-summary strong {
    color: var(--color-accent);
}
.skill-edit-rows {
    display: grid;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.skill-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
}
.skill-edit-row.changed {
    border-color: rgba(183, 150, 104, 0.58);
    background: rgba(183, 150, 104, 0.1);
}
.skill-edit-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.skill-edit-info strong {
    color: var(--color-quality-epic);
}
.skill-edit-info span {
    color: var(--color-text-muted);
    font-size: 12px;
}
.skill-edit-controls {
    display: grid;
    grid-template-columns: 32px 58px 32px;
    gap: 6px;
    align-items: center;
}
.skill-edit-controls button {
    width: 32px;
    min-width: 32px;
    padding: 5px 0;
}
.skill-edit-level-input {
    width: 58px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
.skill-edit-level-input::-webkit-outer-spin-button,
.skill-edit-level-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.skill-edit-error-box {
    margin: 8px 0;
    padding: 8px 10px;
    color: var(--color-danger);
    border: 1px solid rgba(201, 76, 76, 0.45);
    border-radius: 6px;
    background: rgba(201, 76, 76, 0.08);
}
.skill-edit-error-box ul {
    margin: 6px 0 0 18px;
    padding: 0;
}
.skill-edit-ok {
    margin: 8px 0;
    color: var(--color-text-muted);
    font-size: 13px;
}
.skill-edit-actions {
    margin-top: 12px;
}
.item-expand-indicator,
.slot-expand-indicator {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1;
}
.item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.item-actions button {
    width: auto;
    padding: 6px 10px;
    font-size: 13px;
}
.treasure-item-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.treasure-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.treasure-decompose-row .batch-use-controls {
    justify-content: flex-end;
}
/* 批量使用控件 */
.batch-use-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.batch-use-controls .batch-use-input {
    width: 52px;
    padding: 4px 6px;
    text-align: center;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: rgba(255,255,255,0.07);
    color: var(--color-text);
    -moz-appearance: textfield;
}
.batch-use-controls .batch-use-input::-webkit-inner-spin-button,
.batch-use-controls .batch-use-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.batch-use-controls .batch-use-btn {
    padding: 4px 8px;
    font-size: 11px;
    min-width: unset;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-light);
    cursor: pointer;
}
.batch-use-controls .batch-use-btn:hover {
    background: rgba(255,255,255,0.2);
}
.auxiliary-fill-energy-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inventory-pagination,
.ranking-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pagination-actions,
.ranking-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pagination-actions button,
.ranking-pagination button {
    width: auto;
    min-width: 72px;
    padding: 6px 10px;
}

.inventory-item-detail {
    margin: 8px 0 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(8, 14, 26, 0.65);
    overflow: hidden;
    transform-origin: top center;
    animation: dropdown-slide-down 0.24s ease-out;
}

.inventory-item-detail.detail-hidden {
    display: none;
}

.inventory-item-detail.detail-opening {
    animation: dropdown-slide-down 0.24s ease-out;
}

.inventory-item-detail.is-collapsing {
    pointer-events: none;
    animation: dropdown-slide-up 0.22s ease-in forwards;
}

.skill-inline-detail,
.guardian-inline-detail {
    width: 100%;
}

.inline-detail-actions {
    margin-top: 12px;
    display: flex;
}

.inline-detail-actions button {
    width: 100%;
}

.item-detail-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-detail-panel {
    background-color: var(--color-parchment);
    color: var(--color-text-dark);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--color-wood);
    box-shadow: var(--box-shadow);
    font-size: 13px;
    line-height: 1.6;
}

.item-detail-panel h4 {
    font-family: var(--font-primary);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.item-detail-panel p {
    margin: 8px 0;
}

.item-detail-panel hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 10px 0;
}

.item-detail-panel ul {
    margin: 8px 0;
    padding-left: 18px;
}

/* Territory latest mobile-frame fix: must stay as the final override. */
html:has(#territory-view.active),
body.territory-wide-view {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #app,
body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active,
body.territory-wide-view .territory-app,
body.territory-wide-view .territory-feature-workspace,
.territory-dungeon-board,
.territory-dungeon-growth,
.territory-dungeon-panel,
.territory-dungeon-atlas,
.territory-city-scene,
.territory-city-map-shell,
.territory-city-panel-stack,
.territory-city-dock-body {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active {
    max-width: 450px !important;
}

.territory-dungeon-board,
.territory-dungeon-growth,
.territory-city-scene {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.territory-dungeon-canvas-wrap,
.territory-city-map-viewport {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.territory-dungeon-canvas-wrap {
    overflow: hidden !important;
}

.territory-city-map-viewport {
    overflow: auto !important;
    overscroll-behavior-x: contain;
}

.territory-dungeon-canvas-wrap .territory-dungeon-canvas,
.territory-dungeon-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 300px !important;
}

.territory-city-grid-map {
    flex: 0 0 auto !important;
}

.territory-relic-slots {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
}

.territory-relic-slot {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    min-width: 0 !important;
    padding: 7px !important;
}

.territory-relic-slot strong,
.territory-relic-slot span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

.territory-relic-inventory {
    display: none !important;
}

.territory-dungeon-upgrades .territory-card-grid.compact {
    grid-template-columns: minmax(0, 1fr) !important;
}

.territory-dungeon-upgrade-next {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.territory-city-residence-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.territory-city-residence-cell {
    position: relative;
    display: grid !important;
    grid-template-rows: auto auto auto;
    place-items: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 5px 3px;
    border: 1px solid rgba(210, 175, 100, 0.22);
    border-radius: 7px;
    background: rgba(18, 22, 20, 0.72);
    color: #f6e7bd;
    cursor: pointer;
}

.territory-city-residence-cell.empty {
    border-style: dashed;
    color: #bfb39c;
    background: rgba(21, 22, 19, 0.48);
}

.territory-city-residence-cell.active {
    border-color: rgba(255, 222, 139, 0.78);
    box-shadow: 0 0 0 1px rgba(255, 222, 139, 0.2), 0 8px 16px rgba(0, 0, 0, 0.18);
}

.territory-city-residence-cell i {
    font-size: 14px;
    line-height: 1;
}

.territory-city-residence-cell strong,
.territory-city-residence-cell span,
.territory-city-residence-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-residence-cell strong {
    font-size: 12px;
    color: #fff0bd;
}

.territory-city-residence-detail {
    display: grid;
    gap: 8px;
    box-sizing: border-box;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(18, 22, 20, 0.72);
}

.territory-city-residence-detail.empty {
    border-style: dashed;
    background: rgba(24, 24, 20, 0.5);
}

.territory-city-residence-detail header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.territory-city-residence-detail header i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.1);
    color: #ffe7a7;
}

.territory-city-residence-detail strong {
    display: block;
    color: #fff1c4;
    font-size: 14px;
    line-height: 1.2;
}

.territory-city-residence-detail header span,
.territory-city-residence-detail p,
.territory-city-residence-hint {
    display: block;
    color: #c7bda8;
    font-size: 12px;
    line-height: 1.35;
}

.territory-city-residence-detail .territory-cost-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.territory-city-residence-detail button {
    width: 100%;
    min-height: 34px;
}

/* Territory phone-frame restore: desktop uses the same 450px mobile layout. */
body.territory-wide-view {
    width: 100vw !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    border-right: 1px solid var(--color-border) !important;
    border-left: 1px solid var(--color-border) !important;
}

body.territory-wide-view #main-content-section {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

body.territory-wide-view #territory-view.active {
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto !important;
}

body.territory-wide-view .territory-app {
    width: 100% !important;
    max-width: 100% !important;
}

body.territory-wide-view .territory-dungeon-board,
.territory-dungeon-board,
.territory-dungeon-growth,
.territory-explore-layout,
.territory-map-layout,
.territory-explore-mode .territory-map-layout {
    grid-template-columns: 1fr !important;
}

body.territory-wide-view .territory-dungeon-canvas,
.territory-dungeon-canvas {
    height: 320px !important;
}

body.territory-wide-view .territory-dungeon-side {
    max-height: none !important;
    overflow: visible !important;
}

body.territory-wide-view .territory-feature-workspace,
#territory-view.active .territory-feature-workspace,
#territory-view.active .territory-feature-workspace:has(.territory-dungeon-board) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#territory-view.active .territory-dungeon-board,
#territory-view.active .territory-dungeon-canvas-wrap,
#territory-view.active .territory-dungeon-side {
    justify-self: stretch !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
}

body.territory-wide-view .territory-feature-workspace,
#territory-view.active .territory-feature-workspace,
#territory-view.active .territory-feature-workspace:has(.territory-dungeon-board) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#territory-view.active .territory-dungeon-board,
#territory-view.active .territory-dungeon-canvas-wrap,
#territory-view.active .territory-dungeon-side {
    justify-self: stretch !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
}

.territory-relic-inventory {
    display: grid;
    gap: 6px;
}

.territory-relic-inventory article {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.055);
}

.territory-relic-inventory article.better {
    border-color: rgba(145, 200, 120, 0.38);
    background: rgba(94, 126, 70, 0.16);
}

.territory-relic-inventory i {
    color: #d9b663;
}

.territory-relic-inventory strong,
.territory-relic-inventory span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-relic-inventory strong {
    color: #fff1c4;
    font-size: 12px;
}

.territory-relic-inventory span {
    color: #d5c8ad;
    font-size: 10px;
}

.territory-relic-inventory b {
    color: #91c878;
    font-size: 11px;
}

.territory-relic-slot span {
    white-space: normal !important;
}

.territory-explore-mode .territory-sandtable {
    min-height: 180px !important;
    aspect-ratio: 1.2 / 1 !important;
}

.territory-explore-map-column {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.territory-explore-board {
    grid-template-columns: repeat(var(--explore-cols, 13), 38px) !important;
    grid-auto-rows: 38px !important;
    justify-content: start !important;
    width: max-content !important;
    min-width: max-content !important;
    padding: 12px !important;
}

.territory-explore-cell {
    inline-size: 38px !important;
    block-size: 38px !important;
    font-size: 10px !important;
}

.territory-explore-cell.empty.locked {
    opacity: 0.35;
    pointer-events: none;
}

.territory-explore-side,
.territory-landing-preview-grid {
    grid-template-columns: 1fr !important;
}

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

.immortal-demon-exclusive-equipment-effect {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 201, 92, 0.52);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 220, 128, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(92, 45, 15, 0.72), rgba(62, 35, 86, 0.68));
    color: #fff3c4;
    box-shadow: 0 0 16px rgba(255, 190, 88, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.immortal-demon-exclusive-equipment-effect strong,
.immortal-demon-exclusive-equipment-effect span {
    display: block;
}

.immortal-demon-exclusive-equipment-effect strong {
    color: #ffe29a;
    margin-bottom: 5px;
}

.exclusive-attack-multiplier {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 220, 128, 0.16);
    border: 1px solid rgba(255, 220, 128, 0.26);
}

.exclusive-attack-multiplier b {
    color: #fff;
    font-size: 1.18em;
    text-shadow: 0 0 10px rgba(255, 224, 128, 0.72);
}


/* --- 5. 模态框与Tooltip --- */

/* 全局模态框 */
#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}
#modal-overlay.hidden {
    display: none;
}
#modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

/* Tooltip */
#tooltip-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
}

#tooltip-backdrop.hidden {
    display: none;
}

#tooltip, #tooltip-comparison-container {
    position: absolute;
    z-index: 1001;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.2s;
    visibility: hidden;
}
#tooltip:not(.hidden), #tooltip-comparison-container:not(.hidden) {
    opacity: 1;
    visibility: visible;
}
#tooltip {
    background-color: var(--color-parchment);
    color: var(--color-text-dark);
    padding: 15px;
    border-radius: 5px;
    border: 2px solid var(--color-wood);
    box-shadow: var(--box-shadow);
    font-size: 14px;
    max-width: 300px;
    line-height: 1.5;
}
#tooltip h4 {
    font-family: var(--font-primary);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
#tooltip p {
    margin: 8px 0;

}

.tooltip-mobile-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 0;
    max-height: inherit;
}

.tooltip-mobile-body {
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    max-height: inherit;
    overscroll-behavior: contain;
    padding-right: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tooltip-close-btn {
    align-self: flex-end;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
}

@media (max-width: 767px) {
    #tooltip,
    #tooltip-comparison-container {
        position: fixed;
        left: 8px !important;
        right: 8px;
        top: auto !important;
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--top-bar-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    }

    #tooltip {
        padding: 12px;
        font-size: 13px;
    }

    #tooltip-comparison-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #tooltip.touch-tooltip,
    #tooltip-comparison-container.touch-tooltip {
        display: flex;
        flex-direction: column;
        padding: 12px;
    }

    #tooltip.touch-tooltip .tooltip-mobile-shell,
    #tooltip-comparison-container.touch-tooltip .tooltip-mobile-shell {
        max-height: calc(100vh - var(--top-bar-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px) - 40px);
    }

    #tooltip.touch-tooltip .tooltip-mobile-body,
    #tooltip-comparison-container.touch-tooltip .tooltip-mobile-body {
        max-height: calc(100vh - var(--top-bar-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px) - 88px);
    }

    #tooltip-comparison-container.touch-tooltip .tooltip-mobile-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tooltip-panel {
        width: 100%;
        max-width: none;
        padding: 12px;
        font-size: 13px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .tooltip-close-btn {
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(20, 28, 46, 0.96);
    }
}

#tooltip h4,
#tooltip p,
#tooltip li,
#tooltip-comparison-container h4,
#tooltip-comparison-container p,
#tooltip-comparison-container li,
.tooltip-panel h4,
.tooltip-panel p,
.tooltip-panel li {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* --- 6. 适配大屏幕 --- */
@media (min-width: 768px) {
    body {
        max-width: 450px;
        margin: 0 auto;
        border-left: 1px solid var(--color-border);
        border-right: 1px solid var(--color-border);
        height: 100vh;
    }
}

#role-character-panel .character-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
#role-character-panel h3 {
    margin: 0;
    border: none;
    font-size: 24px;
}
#role-character-panel .character-level {
    text-align: right;
}
.xp-bar-container {
    width: 120px;
    height: 18px;
    background-color: var(--color-border);
    border-radius: 9px;
    position: relative;
    margin-top: 5px;
    border: 1px solid var(--color-wood);
}
.xp-bar {
    height: 100%;
    background-color: var(--color-quality-epic);
    border-radius: 9px;
    transition: width 0.5s;
    position: relative;
    overflow: hidden;
}
.xp-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 10px;
    line-height: 18px;
    color: var(--color-text-light);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.core-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
.stat-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    padding: 5px 0;
    border-bottom: 1px dashed var(--color-border);
}
.stat-item .stat-name {
    flex: 0 0 auto;
}
.stat-item .stat-value {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}
.stat-item-rich .stat-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.25;
}
.stat-item-rich {
    flex-direction: column;
    gap: 3px;
}
.stat-item-rich .stat-value {
    width: 100%;
}
.stat-item-rich .stat-value strong {
    font-weight: 700;
    color: var(--color-text-light);
}
.stat-subvalue {
    color: #ffcf7a;
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}
.home-stats-drawer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
}
.home-stats-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    color: var(--color-text-muted);
    font-size: 12px;
    user-select: none;
}
.home-stats-drawer summary::-webkit-details-marker {
    display: none;
}
.home-stats-drawer summary i {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.home-stats-drawer[open] summary i {
    transform: rotate(180deg);
}
.home-stats-drawer-grid {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 12px;
    color: #8B9BB0;
}
.home-stats-drawer[open] .home-stats-drawer-grid {
    display: grid;
}
.home-stats-drawer-grid span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.home-stats-drawer-grid b {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-weight: 500;
}
.home-stats-drawer-grid em {
    min-width: 0;
    text-align: right;
    font-style: normal;
    overflow-wrap: anywhere;
}
.home-stats-drawer-grid .wide {
    grid-column: 1 / -1;
}
.secondary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    font-size: 13px;
    color: #8B9BB0;
    margin-top: 10px;
}
.secondary-stats span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.secondary-stats .super-crit-multiplier {
    display: inline-block;
    margin-left: 4px;
    color: #ffcf7a;
    font-style: normal;
    white-space: nowrap;
}

/* 已穿戴装备面板 */
#role-equipment-panel .equipped-grid,
.equipped-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    justify-items: center;
}
.equipped-slot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 100%;
    padding: 4px 0;
}
.equipped-slot-item.active .slot-icon-container {
    box-shadow: 0 0 0 1px rgba(255, 248, 240, 0.08), 0 0 0 3px rgba(183, 150, 104, 0.18);
    transform: translateY(-1px);
}
.slot-icon-container {
    width: 60px;
    height: 60px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,0.07);
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.slot-icon {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
.slot-icon-text {
    font-size: 22px;
    color: #7A8FA5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.slot-icon-container .item-pixel-icon-wrap,
.slot-icon-container .item-pixel-icon {
    width: 46px;
    height: 46px;
}
.slot-icon-text.empty {
    color: #3A4858;
    opacity: 0.5;
}
.slot-name {
    font-size: 12px;
    color: var(--color-text-dark);
}
.slot-expand-indicator {
    margin-top: 4px;
}

.equipped-detail-panel {
    margin-top: 15px;
    overflow: hidden;
    transform-origin: top center;
    animation: dropdown-slide-down 0.24s ease-out;
}

.equipped-detail-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.equipped-detail-actions button {
    width: auto;
    min-width: 120px;
}
/* 品质边框颜色 */
.border-quality-common { border-color: var(--color-quality-common); }
.border-quality-rare { border-color: var(--color-quality-rare); }
.border-quality-exquisite { border-color: var(--color-quality-exquisite); }
.border-quality-legendary { border-color: var(--color-quality-legendary); }
.border-quality-epic { border-color: var(--color-quality-epic); }
.border-quality-world-shattering { border-color: var(--color-quality-world-shattering); }
.border-quality-fentian-world-shattering { border-color: var(--color-quality-fentian-world-shattering); }

.slot-icon-container.border-quality-common {
    background: linear-gradient(180deg, rgba(164, 154, 139, 0.05), rgba(255,255,255,0.04));
    box-shadow: inset 0 0 8px rgba(164, 154, 139, 0.08), 0 0 4px rgba(164, 154, 139, 0.04);
    animation: equipped-breathe-common 4.8s ease-in-out infinite;
}
.slot-icon-container.border-quality-rare {
    background: radial-gradient(circle at 50% 35%, rgba(148, 168, 184, 0.16), rgba(255,255,255,0.03) 68%);
    box-shadow: inset 0 0 12px rgba(148, 168, 184, 0.16), 0 0 10px rgba(148, 168, 184, 0.10);
    animation: equipped-breathe-rare 3.8s ease-in-out infinite;
}
.slot-icon-container.border-quality-exquisite {
    background: radial-gradient(circle at 50% 35%, rgba(164, 143, 182, 0.18), rgba(255,255,255,0.03) 68%);
    box-shadow: inset 0 0 14px rgba(164, 143, 182, 0.20), 0 0 12px rgba(164, 143, 182, 0.12);
    animation: equipped-breathe-exquisite 3.4s ease-in-out infinite;
}
.slot-icon-container.border-quality-legendary {
    background: radial-gradient(circle at 50% 35%, rgba(243, 188, 99, 0.24), rgba(255,255,255,0.03) 70%);
    box-shadow: inset 0 0 18px rgba(243, 188, 99, 0.24), 0 0 14px rgba(243, 188, 99, 0.18);
    animation: equipped-breathe-legendary 2.6s ease-in-out infinite;
}
.slot-icon-container.border-quality-epic {
    background: radial-gradient(circle at 50% 35%, rgba(255, 228, 138, 0.30), rgba(255,255,255,0.03) 70%);
    box-shadow: inset 0 0 20px rgba(255, 228, 138, 0.28), 0 0 16px rgba(255, 228, 138, 0.22);
    animation: equipped-breathe-epic 2.1s ease-in-out infinite;
}
.slot-icon-container.border-quality-world-shattering {
    background: radial-gradient(circle at 50% 35%, rgba(184, 111, 104, 0.30), rgba(255,255,255,0.03) 70%);
    box-shadow: inset 0 0 20px rgba(184, 111, 104, 0.28), 0 0 16px rgba(184, 111, 104, 0.20);
    animation: equipped-breathe-world-shattering 1.9s ease-in-out infinite;
}
.slot-icon-container.border-quality-fentian-world-shattering {
    background: radial-gradient(circle at 50% 30%, rgba(255, 194, 91, .36), rgba(118, 31, 24, .32) 48%, rgba(255,255,255,.03) 72%);
    box-shadow: inset 0 0 22px rgba(255, 110, 50, .32), 0 0 17px rgba(255, 92, 40, .24);
    animation: equipped-breathe-world-shattering 1.65s ease-in-out infinite;
}

.equipped-slot-item.active .slot-icon-container.border-quality-common {
    animation: equipped-breathe-common-active 3.6s ease-in-out infinite;
}
.equipped-slot-item.active .slot-icon-container.border-quality-rare {
    animation: equipped-breathe-rare-active 2.8s ease-in-out infinite;
}
.equipped-slot-item.active .slot-icon-container.border-quality-exquisite {
    animation: equipped-breathe-exquisite-active 2.5s ease-in-out infinite;
}
.equipped-slot-item.active .slot-icon-container.border-quality-legendary {
    animation: equipped-breathe-legendary-active 2s ease-in-out infinite;
}
.equipped-slot-item.active .slot-icon-container.border-quality-epic {
    animation: equipped-breathe-epic-active 1.7s ease-in-out infinite;
}
.equipped-slot-item.active .slot-icon-container.border-quality-world-shattering {
    animation: equipped-breathe-world-shattering-active 1.5s ease-in-out infinite;
}
.equipped-slot-item.active .slot-icon-container.border-quality-fentian-world-shattering {
    animation: equipped-breathe-world-shattering-active 1.3s ease-in-out infinite;
}

@keyframes equipped-breathe-common {
    0%, 100% { box-shadow: inset 0 0 8px rgba(164, 154, 139, 0.08), 0 0 4px rgba(164, 154, 139, 0.04); }
    50% { box-shadow: inset 0 0 10px rgba(164, 154, 139, 0.12), 0 0 6px rgba(164, 154, 139, 0.07); }
}
@keyframes equipped-breathe-rare {
    0%, 100% { box-shadow: inset 0 0 10px rgba(148, 168, 184, 0.14), 0 0 8px rgba(148, 168, 184, 0.08); }
    50% { box-shadow: inset 0 0 14px rgba(148, 168, 184, 0.22), 0 0 16px rgba(148, 168, 184, 0.18); }
}
@keyframes equipped-breathe-exquisite {
    0%, 100% { box-shadow: inset 0 0 12px rgba(164, 143, 182, 0.16), 0 0 10px rgba(164, 143, 182, 0.10); }
    50% { box-shadow: inset 0 0 16px rgba(164, 143, 182, 0.26), 0 0 20px rgba(164, 143, 182, 0.20); }
}
@keyframes equipped-breathe-legendary {
    0%, 100% { box-shadow: inset 0 0 14px rgba(243, 188, 99, 0.18), 0 0 10px rgba(243, 188, 99, 0.12); }
    50% { box-shadow: inset 0 0 20px rgba(243, 188, 99, 0.30), 0 0 24px rgba(243, 188, 99, 0.30); }
}
@keyframes equipped-breathe-epic {
    0%, 100% { box-shadow: inset 0 0 16px rgba(255, 228, 138, 0.22), 0 0 12px rgba(255, 228, 138, 0.16); }
    50% { box-shadow: inset 0 0 24px rgba(255, 228, 138, 0.36), 0 0 30px rgba(255, 228, 138, 0.36); }
}
@keyframes equipped-breathe-world-shattering {
    0%, 100% { box-shadow: inset 0 0 16px rgba(184, 111, 104, 0.22), 0 0 12px rgba(184, 111, 104, 0.16); }
    50% { box-shadow: inset 0 0 24px rgba(184, 111, 104, 0.38), 0 0 28px rgba(184, 111, 104, 0.34); }
}

@keyframes equipped-breathe-common-active {
    0%, 100% { box-shadow: 0 0 0 1px rgba(164, 154, 139, 0.14), 0 0 8px rgba(164, 154, 139, 0.08), inset 0 0 10px rgba(164, 154, 139, 0.10); }
    50% { box-shadow: 0 0 0 1px rgba(164, 154, 139, 0.20), 0 0 12px rgba(164, 154, 139, 0.12), inset 0 0 12px rgba(164, 154, 139, 0.14); }
}
@keyframes equipped-breathe-rare-active {
    0%, 100% { box-shadow: 0 0 0 1px rgba(148, 168, 184, 0.18), 0 0 12px rgba(148, 168, 184, 0.14), inset 0 0 14px rgba(148, 168, 184, 0.14); }
    50% { box-shadow: 0 0 0 1px rgba(148, 168, 184, 0.26), 0 0 20px rgba(148, 168, 184, 0.26), inset 0 0 18px rgba(148, 168, 184, 0.24); }
}
@keyframes equipped-breathe-exquisite-active {
    0%, 100% { box-shadow: 0 0 0 1px rgba(164, 143, 182, 0.20), 0 0 14px rgba(164, 143, 182, 0.16), inset 0 0 16px rgba(164, 143, 182, 0.16); }
    50% { box-shadow: 0 0 0 1px rgba(164, 143, 182, 0.30), 0 0 24px rgba(164, 143, 182, 0.28), inset 0 0 20px rgba(164, 143, 182, 0.26); }
}
@keyframes equipped-breathe-legendary-active {
    0%, 100% { box-shadow: 0 0 0 1px rgba(243, 188, 99, 0.24), 0 0 18px rgba(243, 188, 99, 0.20), inset 0 0 18px rgba(243, 188, 99, 0.20); }
    50% { box-shadow: 0 0 0 1px rgba(243, 188, 99, 0.34), 0 0 32px rgba(243, 188, 99, 0.40), inset 0 0 24px rgba(243, 188, 99, 0.32); }
}
@keyframes equipped-breathe-epic-active {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 228, 138, 0.28), 0 0 20px rgba(255, 228, 138, 0.24), inset 0 0 20px rgba(255, 228, 138, 0.22); }
    50% { box-shadow: 0 0 0 1px rgba(255, 228, 138, 0.40), 0 0 38px rgba(255, 228, 138, 0.48), inset 0 0 28px rgba(255, 228, 138, 0.38); }
}
@keyframes equipped-breathe-world-shattering-active {
    0%, 100% { box-shadow: 0 0 0 1px rgba(184, 111, 104, 0.28), 0 0 18px rgba(184, 111, 104, 0.22), inset 0 0 20px rgba(184, 111, 104, 0.22); }
    50% { box-shadow: 0 0 0 1px rgba(184, 111, 104, 0.42), 0 0 36px rgba(184, 111, 104, 0.42), inset 0 0 28px rgba(184, 111, 104, 0.36); }
}

/* 背包面板 */
#role-inventory-panel .empty-inventory-msg {
    text-align: center;
    color: #5A6A7A;
    padding: 20px;
}

/* 主页快速通道：原装备展示入口承载的可配置系统面板 */
#equipment-display-view .system-quick-shell {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

#equipment-display-view .system-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    padding: 12px;
    border: 1px solid rgba(183, 150, 104, 0.22);
    border-radius: 8px;
    background: rgba(16, 11, 8, 0.42);
}

#equipment-display-view .system-quick-head h3 {
    margin: 0 0 4px;
}

#equipment-display-view .system-quick-head p {
    margin: 0;
    color: #AFA092;
    font-size: 13px;
}

#equipment-display-view .system-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

#equipment-display-view .system-quick-btn {
    width: 100%;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 7px 3px;
    border-radius: 11px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    text-align: center;
    white-space: normal;
}

#equipment-display-view .system-quick-btn i {
    color: #DDBF74;
    font-size: 17px;
    line-height: 1;
}

#equipment-display-view .system-quick-btn strong {
    max-width: 100%;
    color: #F3E0B4;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#equipment-display-view .system-quick-btn span {
    max-width: 100%;
    color: #AFA092;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#equipment-display-view .system-quick-btn.active {
    border-color: rgba(255, 222, 145, 0.66);
    background: linear-gradient(180deg, #C9A84C 0%, #9B7933 100%);
    color: #1B140F;
}

#equipment-display-view .system-quick-btn.active i,
#equipment-display-view .system-quick-btn.active strong,
#equipment-display-view .system-quick-btn.active span {
    color: #2D210F;
}

#equipment-display-view .system-quick-config-btn {
    width: auto;
    min-width: 72px;
    min-height: 30px;
    margin: 0;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
}

#equipment-display-view .system-quick-config-panel {
    display: grid;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 10px;
    border: 1px solid rgba(183, 150, 104, 0.24);
    border-radius: 8px;
    background: rgba(16, 11, 8, 0.52);
}

#equipment-display-view .system-quick-config-panel label {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

#equipment-display-view .system-quick-config-panel label span {
    color: #AFA092;
    font-size: 12px;
}

#equipment-display-view .system-quick-config-panel select {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 8px;
    background: #1C1511;
    color: #E8D8BE;
}

#equipment-display-view .system-quick-config-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#equipment-display-view .system-quick-config-actions button {
    width: 100%;
    min-height: 34px;
    margin: 0;
}

#equipment-display-view .system-quick-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 180px;
    overflow-x: hidden;
}

#equipment-display-view .system-quick-content > * {
    min-width: 0;
    max-width: 100%;
}

#equipment-display-view .system-quick-inline-host {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

#equipment-display-view .system-quick-content .inventory-tabs,
#equipment-display-view .system-quick-inline-host .inventory-tabs,
#equipment-display-view .system-quick-inline-host #inventory-content,
#equipment-display-view .system-quick-inline-host .tab-content {
    min-width: 0;
    max-width: 100%;
}

#equipment-display-view .system-quick-content .inventory-tabs,
#equipment-display-view .system-quick-inline-host .inventory-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
}

#equipment-display-view .system-quick-content .inventory-tabs .tab-btn,
#equipment-display-view .system-quick-inline-host .inventory-tabs .tab-btn {
    flex: 1 1 86px;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
}

#equipment-display-view .system-quick-inline-host .inventory-item {
    min-width: 0;
}

#equipment-display-view .system-quick-inline-host .item-actions {
    flex-wrap: wrap;
}

#equipment-display-view .system-quick-content .shop-grid,
#equipment-display-view .system-quick-content .hall-grid,
#equipment-display-view .system-quick-content .guild-achievement-grid {
    min-width: 0;
    max-width: 100%;
}

#equipment-display-view .guardian-granting-shell,
#equipment-display-view .guardian-granting-summary,
#equipment-display-view .guardian-granting-claims,
#equipment-display-view .guardian-granting-actions {
    min-width: 0;
    max-width: 100%;
}

#equipment-display-view .guardian-granting-board-wrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

#equipment-display-view .guardian-granting-board {
    width: max-content;
    min-width: 100%;
    max-width: none;
}

/* 快速通道内嵌页沿用独立页内容，宽布局在这里改为按容器收缩。 */
#equipment-display-view .system-quick-content {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

#equipment-display-view .system-quick-content .sword-forging-page,
#equipment-display-view .system-quick-content .guardian-granting-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#equipment-display-view .system-quick-content .sword-hero-main,
#equipment-display-view .system-quick-content .sword-console-grid,
#equipment-display-view .system-quick-content .sword-layout,
#equipment-display-view .system-quick-content .sword-summary {
    grid-template-columns: minmax(0, 1fr);
}

#equipment-display-view .system-quick-content .sword-hero-main {
    gap: 12px;
    padding: 12px;
}

#equipment-display-view .system-quick-content .sword-forge-scene {
    min-height: 180px;
}

#equipment-display-view .system-quick-content .sword-hero-copy h3 {
    font-size: 24px;
    word-break: normal;
    overflow-wrap: anywhere;
}

#equipment-display-view .system-quick-content .sword-hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
}

#equipment-display-view .system-quick-content .sword-forge-console {
    padding: 0 12px 12px;
}

#equipment-display-view .system-quick-content .sword-console-item,
#equipment-display-view .system-quick-content .sword-forge-btn {
    min-width: 0;
    min-height: 46px;
}

#equipment-display-view .system-quick-content .sword-buy-inline {
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
}

#equipment-display-view .system-quick-content .sword-billet-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

#equipment-display-view .system-quick-content .sword-billet-global-actions,
#equipment-display-view .system-quick-content .sword-billet-tools {
    grid-template-columns: minmax(0, 1fr);
}

#equipment-display-view .system-quick-content .sword-billet-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#equipment-display-view .system-quick-content .sword-iron-top {
    grid-template-columns: 72px minmax(0, 1fr);
}

#equipment-display-view .system-quick-content .sword-iron-art {
    width: 72px;
}

#equipment-display-view .system-quick-content .sword-iron-effects,
#equipment-display-view .system-quick-content .sword-luck-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
}

#equipment-display-view .guardian-granting-summary {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
}

#equipment-display-view .guardian-granting-board-wrap {
    overflow-x: visible;
}

#equipment-display-view .guardian-granting-board {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#equipment-display-view .guardian-granting-matrix {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(5, minmax(42px, 1fr)) minmax(56px, .82fr);
    grid-template-rows: repeat(5, minmax(44px, 54px)) minmax(34px, auto);
    gap: 4px;
}

#equipment-display-view .guardian-granting-cell,
#equipment-display-view .guardian-granting-line-bonus {
    padding-inline: 4px;
}

#equipment-display-view .guardian-granting-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr));
    align-items: stretch;
}

#equipment-display-view .guardian-granting-actions button {
    min-width: 0;
}

@media (max-width: 420px) {
    #equipment-display-view .system-quick-head {
        align-items: stretch;
        flex-direction: column;
    }

    #equipment-display-view .system-quick-grid {
        gap: 5px;
    }

    #equipment-display-view .system-quick-btn {
        min-height: 72px;
        padding-inline: 2px;
    }

    #equipment-display-view .system-quick-btn strong {
        font-size: 10px;
    }
}

.dungeon-category h2 {
    font-family: var(--font-primary);
    color: var(--color-wood);
    margin-left: 5px;
}

.dungeon-chapter-wrapper {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: var(--color-parchment);
}

.dungeon-chapter-header {
    padding: 15px;
    cursor: pointer;
}

.dungeon-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dungeon-stage .stage-info h4 {
    margin: 0 0 8px 0;
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: 18px;
}

.dungeon-stage .stage-desc {
    font-size: 14px;
    color: #8B9BB0;
    margin-bottom: 12px;
}

.dungeon-stage .stage-details {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-accent);
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
    padding: 8px 0;
    margin-bottom: 8px;
}

.dungeon-stage .possible-loot {
    font-size: 12px;
    color: #6B7D8F;
    font-style: italic;
}

.dungeon-stage button {
    margin-top: auto;
}

.dungeon-chapter-subtitle {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #8B9BB0;
    letter-spacing: 0;
}

.platinum-raid-chapter-wrapper {
    border: 1px solid rgba(181, 76, 35, 0.7);
    background:
        linear-gradient(135deg, rgba(95, 24, 12, 0.58), rgba(16, 17, 21, 0.96) 38%, rgba(48, 30, 20, 0.92)),
        #121216;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 195, 113, 0.16);
}

.platinum-raid-chapter-wrapper .dungeon-chapter-header {
    background:
        linear-gradient(90deg, rgba(201, 63, 25, 0.34), rgba(35, 20, 17, 0.96) 48%, rgba(226, 142, 48, 0.18)),
        #141315;
    border-bottom: 1px solid rgba(198, 82, 32, 0.5);
    color: #f9dcc1;
}

.platinum-raid-chapter-wrapper .dungeon-chapter-header h3 {
    color: #ffddb5;
    text-shadow: 0 0 16px rgba(226, 72, 28, 0.34);
}

.platinum-raid-chapter-wrapper .dungeon-chapter-subtitle {
    color: #d89d66;
}

.platinum-raid-chapter-wrapper .dungeon-chapter-content {
    background:
        radial-gradient(circle at 50% 110%, rgba(191, 53, 23, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(21, 13, 12, 0.82)),
        rgba(9, 10, 12, 0.72);
}

.platinum-raid-carousel {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: stretch;
    gap: 10px;
}

.platinum-raid-frame {
    min-width: 0;
}

.platinum-raid-nav {
    width: 38px;
    min-width: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(231, 113, 47, 0.42);
    border-radius: 8px;
    background: linear-gradient(180deg, #2c1712, #120f11);
    color: #ffba73;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 215, 165, 0.12);
}

.platinum-raid-nav:hover {
    background: linear-gradient(180deg, #4a2115, #181113);
    color: #ffd3a0;
}

.platinum-raid-kicker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    margin-bottom: 8px;
    color: #a88464;
    font-size: 12px;
}

.platinum-raid-kicker strong {
    color: #f0b46f;
    font-size: 13px;
}

.platinum-raid-selected-stage {
    min-width: 0;
}

.platinum-raid-stage {
    position: relative;
    overflow: hidden;
    min-height: 138px;
    margin-bottom: 8px;
    border: 1px solid rgba(212, 87, 35, 0.6);
    background:
        radial-gradient(circle at 92% 22%, rgba(234, 74, 31, 0.36), transparent 25%),
        linear-gradient(135deg, rgba(39, 21, 17, 0.96), rgba(13, 14, 17, 0.98) 44%, rgba(75, 31, 17, 0.95) 100%);
    color: #f1d4bd;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 191, 124, 0.16);
}

.platinum-raid-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 166, 84, 0.12), transparent 32%),
        repeating-linear-gradient(135deg, rgba(255, 127, 42, 0.08) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, transparent 0 61%, rgba(236, 98, 39, 0.22) 61% 62%, transparent 62% 100%);
}

.platinum-raid-stage .stage-info,
.platinum-raid-stage .start-dungeon-btn {
    position: relative;
    z-index: 1;
}

.platinum-raid-stage h4 {
    color: #ffd0a3;
    font-size: 19px;
    text-shadow: 0 0 12px rgba(224, 66, 28, 0.32);
}

.platinum-raid-stage .stage-desc {
    max-width: 760px;
    color: #c7a18b;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.platinum-raid-stage .stage-details {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: #e1a15d;
    border-top-color: rgba(224, 99, 40, 0.28);
    border-bottom-color: rgba(224, 99, 40, 0.28);
    margin-bottom: 6px;
}

.platinum-raid-stage .possible-loot {
    color: #9c8272;
}

.platinum-raid-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.platinum-raid-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid rgba(223, 106, 45, 0.28);
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.48);
    color: #e5c09d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.platinum-raid-meta .platinum-raid-status {
    background: rgba(195, 66, 29, 0.26);
    color: #ffb17b;
}

.platinum-raid-meta .platinum-raid-ticket {
    background: rgba(216, 148, 58, 0.16);
    color: #f0c37d;
}

.platinum-raid-stage .start-dungeon-btn {
    border-color: #9d431f;
    background: linear-gradient(135deg, #3c1710, #b43c1e 52%, #e7a34e);
    color: #fff2dc;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(176, 56, 24, 0.24);
}

.platinum-raid-stage .start-dungeon-btn:disabled {
    background: linear-gradient(135deg, #3a3434, #6f6868);
    color: #d6d1ce;
    border-color: rgba(255, 218, 186, 0.16);
    box-shadow: none;
}

.platinum-raid-stage.is-coming-soon {
    filter: grayscale(0.36);
    opacity: 0.82;
    border-color: rgba(118, 111, 108, 0.5);
    background:
        radial-gradient(circle at 92% 22%, rgba(140, 122, 112, 0.16), transparent 25%),
        linear-gradient(135deg, rgba(38, 35, 34, 0.96), rgba(16, 17, 20, 0.98) 44%, rgba(52, 45, 42, 0.94) 100%);
}

.platinum-raid-stage.is-coming-soon .stage-desc,
.platinum-raid-stage.is-coming-soon .possible-loot {
    color: #a9a09c;
}

.platinum-raid-stage.is-coming-soon h4 {
    color: #d6d0cd;
}

.platinum-raid-stage.is-coming-soon .stage-details {
    color: #b9a58d;
    border-top-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.platinum-raid-stage.is-coming-soon .platinum-raid-meta span {
    background: rgba(255, 255, 255, 0.16);
    color: #f2f2f2;
    border-color: rgba(255, 255, 255, 0.16);
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-system-select="platinum3"],
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] {
    border-color: rgba(132, 113, 163, 0.52);
    background:
        radial-gradient(circle at 78% 18%, rgba(93, 133, 98, 0.22), transparent 38%),
        linear-gradient(135deg, rgba(47, 33, 67, 0.92), rgba(20, 48, 40, 0.9));
    box-shadow: inset 0 1px 0 rgba(199, 188, 214, 0.12), 0 8px 18px rgba(12, 10, 20, 0.24);
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] i,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] i {
    color: #8fae82;
    text-shadow: 0 0 10px rgba(116, 154, 102, 0.22);
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] strong,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] strong {
    color: #d8c9e6;
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] span,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut[data-dungeon-system-select="platinum3"] span {
    color: #a8b89f;
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-system-select="platinum3"].active,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut[data-dungeon-system-select="platinum3"].active {
    border-color: rgba(150, 128, 185, 0.66);
    background:
        radial-gradient(circle at 76% 20%, rgba(105, 145, 103, 0.32), transparent 40%),
        linear-gradient(135deg, rgba(61, 43, 87, 0.96), rgba(26, 61, 50, 0.94));
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] {
    border-color: rgba(132, 113, 163, 0.58);
    background:
        radial-gradient(circle at 88% 20%, rgba(98, 134, 96, 0.26), transparent 28%),
        radial-gradient(circle at 15% 92%, rgba(79, 53, 109, 0.34), transparent 34%),
        linear-gradient(135deg, rgba(34, 24, 51, 0.97), rgba(10, 18, 20, 0.98) 45%, rgba(23, 55, 43, 0.95));
    color: #ded2e7;
    box-shadow: 0 12px 24px rgba(8, 7, 14, 0.34), inset 0 1px 0 rgba(198, 186, 216, 0.12);
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"]::before {
    background:
        linear-gradient(90deg, rgba(143, 118, 178, 0.12), transparent 34%),
        repeating-linear-gradient(135deg, rgba(114, 143, 108, 0.08) 0 1px, transparent 1px 15px),
        linear-gradient(135deg, transparent 0 60%, rgba(92, 130, 91, 0.18) 60% 61%, transparent 61% 100%);
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] h4 {
    color: #d9c7ea;
    text-shadow: 0 0 12px rgba(117, 91, 145, 0.28);
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .stage-desc {
    color: #b7acc3;
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .stage-details {
    color: #9fbd92;
    border-top-color: rgba(143, 118, 178, 0.28);
    border-bottom-color: rgba(92, 130, 91, 0.26);
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .possible-loot {
    color: #889785;
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .platinum-raid-meta span {
    border-color: rgba(132, 113, 163, 0.32);
    background: rgba(13, 15, 20, 0.5);
    color: #cfc1dc;
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .platinum-raid-meta .platinum-raid-status {
    background: rgba(77, 58, 104, 0.34);
    color: #d0bee4;
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .platinum-raid-meta .platinum-raid-ticket {
    background: rgba(58, 86, 60, 0.26);
    color: #b7cda8;
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"] .start-dungeon-btn {
    border-color: rgba(117, 96, 150, 0.72);
    background: linear-gradient(135deg, #2d2140, #465f3f 54%, #6f5f8d);
    color: #f0e9f4;
    box-shadow: 0 8px 18px rgba(34, 28, 50, 0.26);
}

#dungeon-view .platinum-raid-stage[data-stage-id="20503"].is-coming-soon {
    filter: grayscale(0.18) saturate(0.82);
    opacity: 0.86;
    border-color: rgba(109, 99, 127, 0.52);
}

.platinum-raid-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.platinum-raid-dot {
    width: 32px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(205, 96, 42, 0.34);
    border-radius: 999px;
    background: rgba(13, 13, 15, 0.7);
    color: #9d7a64;
    font-size: 12px;
    line-height: 1;
}

.platinum-raid-dot.active {
    background: linear-gradient(135deg, #6b2013, #d9672d);
    color: #ffe5c6;
    border-color: rgba(248, 178, 96, 0.72);
}

@media (min-width: 720px) {
    .platinum-raid-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 150px;
        align-items: center;
        column-gap: 18px;
    }

    .platinum-raid-stage .start-dungeon-btn {
        width: 150px;
        min-height: 52px;
        margin-top: 0;
    }
}

@media (max-width: 520px) {
    .platinum-raid-carousel {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 6px;
    }

    .platinum-raid-nav {
        width: 32px;
        min-width: 32px;
    }

    .platinum-raid-meta span {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}


#guild-view .panel {
    margin-bottom: 15px;
}

#guild-view h3 {
    font-size: 20px;
}

#guild-view h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

#guild-view ul {
    list-style: none;
    padding-left: 15px;
    margin: 0;
}

#guild-view li {
    margin-bottom: 8px;
    color: #8B9BB0;
}

#guild-view #btn-signin {
    margin-top: 10px;
}

.special-gift-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.special-gift-preview-card {
    min-height: 96px;
    padding: 10px;
    border: 1px solid rgba(200, 170, 110, 0.32);
    border-radius: 8px;
    background: rgba(20, 16, 12, 0.28);
}

.special-gift-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.special-gift-preview-head strong {
    min-width: 0;
    color: #f2d38b;
    font-size: 13px;
    line-height: 1.35;
}

.special-gift-preview-nav {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.special-gift-preview-nav button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    line-height: 1;
}

.special-gift-reward-list {
    padding-left: 0 !important;
}

.special-gift-reward-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px !important;
}

.special-gift-reward-list span,
.special-gift-empty {
    color: var(--color-text-muted);
}

@media (max-width: 620px) {
    .special-gift-preview-grid {
        grid-template-columns: 1fr;
    }
}

#guild-view #cdkey-input {
    margin-top: 10px;
}

.loading-placeholder, .error-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: #5A6A7A;
}
.error-placeholder {
    color: #EF5350;
}


/* 离线收益 */
#guild-offline .replay-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
#guild-offline .replay-controls input {
    width: 80px;
    margin-bottom: 0;
}
#guild-offline .replay-controls button {
    width: auto;
    flex-grow: 1;
}

#guild-offline .offline-preview {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid rgba(200, 170, 110, 0.35);
    border-radius: 8px;
    background: rgba(20, 16, 12, 0.35);
}

#guild-offline .offline-preview.muted {
    color: var(--color-text-muted);
}

#guild-offline .offline-preview-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

#guild-offline .offline-preview-main > div {
    padding: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

#guild-offline .offline-preview-main span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 0.9em;
}

#guild-offline .offline-preview-main strong {
    color: #f2d38b;
}

#guild-offline .offline-preview-note {
    margin: 10px 0 0;
    color: #b7e4a1;
}

#guild-offline .offline-preview-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

#guild-offline .offline-preview-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#guild-offline .offline-preview-list li:last-child {
    border-bottom: 0;
}

#guild-offline .offline-preview-list em {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-style: normal;
}

#guild-offline .offline-preview-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(242, 211, 139, 0.14);
    color: #f2d38b;
    font-size: 0.82em;
}

/* 成就系统 */
.achievement-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
#achievement-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.achievement-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.achievement-entry-card {
    width: 100%;
    min-height: 112px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    background: rgba(255,255,255,0.045);
    cursor: pointer;
}
.achievement-entry-card:hover {
    border-color: var(--color-accent);
    background: rgba(183, 150, 104, 0.12);
    transform: translateY(-1px);
}
.achievement-entry-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--color-accent);
    background: rgba(183, 150, 104, 0.14);
    font-size: 18px;
}
.achievement-entry-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}
.achievement-entry-body strong {
    font-size: 17px;
    color: var(--color-accent);
}
.achievement-entry-body em,
.achievement-entry-side em {
    color: var(--color-text-muted);
    font-style: normal;
    font-size: 12px;
}
.achievement-entry-progress {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}
.achievement-entry-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--color-accent);
}
.achievement-entry-side {
    display: flex;
    min-width: 62px;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.achievement-entry-side strong {
    color: var(--color-quality-epic);
    font-size: 16px;
}
.achievement-detail-panel {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    background-color: rgba(255,255,255,0.03);
}
.achievement-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.achievement-detail-header h4 {
    margin: 0 0 4px;
    border: none;
    padding: 0;
    color: var(--color-accent);
}
.achievement-detail-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
}
.achievement-back-btn {
    width: auto;
    flex-shrink: 0;
    padding: 6px 10px;
}
.achievement-group {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    background-color: rgba(255,255,255,0.03);
}
.achievement-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.achievement-group-header h4 {
    margin: 0;
    border: none;
    padding: 0;
}
.achievement-group-header span {
    color: var(--color-text-muted);
    font-size: 12px;
}
.achievement-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fentian-exclusive-equipment-effect {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 179, 71, .62);
    border-left: 3px solid #ff713d;
    border-radius: 6px;
    background:
        linear-gradient(120deg, rgba(82, 20, 17, .9), rgba(57, 30, 17, .86) 58%, rgba(29, 22, 31, .9));
    box-shadow: 0 0 18px rgba(255, 96, 45, .18), inset 0 1px 0 rgba(255, 230, 172, .12);
    color: #ffe7bd;
}

.fentian-exclusive-equipment-effect::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 221, 149, .14) 49%, transparent 69%);
    transform: translateX(-130%);
    animation: fentian-effect-sheen 3.2s ease-in-out infinite;
    animation-play-state: paused;
}
.fentian-exclusive-equipment-effect.is-motion-visible::after {
    animation-play-state: running;
}

.fentian-exclusive-equipment-effect strong,
.fentian-exclusive-equipment-effect span {
    position: relative;
    z-index: 1;
    display: block;
}

.fentian-exclusive-equipment-effect strong {
    margin-bottom: 6px;
    color: #ffd47d;
    text-shadow: 0 0 10px rgba(255, 112, 53, .62);
}

.fentian-exclusive-equipment-effect .exclusive-attack-multiplier {
    position: relative;
    z-index: 1;
    border-color: rgba(255, 191, 94, .34);
    background: rgba(255, 113, 61, .14);
}

@keyframes fentian-effect-sheen {
    0%, 45% { transform: translateX(-130%); }
    72%, 100% { transform: translateX(130%); }
}
.achievement-empty-state {
    margin: 0;
    padding: 12px;
    border: 1px dashed rgba(183, 150, 104, 0.28);
    border-radius: 8px;
    color: var(--color-text-muted);
    text-align: center;
}
.achievement-show-claimed-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(183, 150, 104, 0.22);
    border-radius: 10px;
    background: rgba(46, 38, 30, 0.42);
    color: var(--color-text-secondary);
}
.achievement-show-claimed-btn span { display: inline-flex; align-items: center; gap: 7px; }
.achievement-show-claimed-btn strong { color: var(--color-wood); font-size: 12px; }
.achievement-show-claimed-btn:hover { border-color: rgba(183, 150, 104, 0.42); background: rgba(61, 49, 36, 0.56); }

.achievement-claimed-section {
    border: 1px solid rgba(183, 150, 104, 0.24);
    border-radius: 8px;
    background: rgba(16, 13, 11, 0.34);
    overflow: hidden;
}
.achievement-claimed-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    cursor: pointer;
    color: var(--color-text-muted);
    list-style: none;
}
.achievement-claimed-section > summary::-webkit-details-marker { display: none; }
.achievement-claimed-section > summary span { display: inline-flex; align-items: center; gap: 7px; }
.achievement-claimed-section > summary strong { color: var(--color-wood); font-size: 12px; }
.achievement-claimed-section[open] > summary { border-bottom: 1px solid rgba(183, 150, 104, 0.18); }
.achievement-claimed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}
.achievement-claimed-list .achievement-item { opacity: 0.72; }

.achievement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: rgba(255,255,255,0.07);
}
.achievement-info h4 {
    margin: 0 0 5px 0;
    border: none;
    padding: 0;
    font-size: 16px;
}
.achievement-info p {
    margin: 0;
    font-size: 12px;
}
.achievement-reward {
    color: var(--color-accent);
    font-style: italic;
}
.achievement-action button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}

#achievement-shop {
    border-top: 2px solid var(--color-wood);
    padding-top: 15px;
}
#achievement-shop .shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
}
#achievement-shop .shop-item button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}

.contract-item {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}
.contract-item h4 {
    margin: 0 0 10px 0;
    border: none;
    padding: 0;
}
.contract-item p {
    font-size: 14px;
    color: #8B9BB0;
    margin: 5px 0 15px 0;
}

/* 万事屋 */
#guild-emporium p {
    font-size: 16px;
    line-height: 1.8;
}
#guild-emporium .danger-btn {
    background-color: #c62828;
}
#guild-emporium .danger-btn:active {
    background-color: #e53935;
}

/* 状态 */
#status-effects-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}
.effect-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 4px;
}
.effect-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.effect-name.active {
    color: #66BB6A;
    font-weight: bold;
}
.effect-name.inactive {
    color: #5A6A7A;
    text-decoration: line-through;
}
.effect-combat-state {
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.effect-combat-state.enabled {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.effect-combat-state.disabled {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.32);
}
.effect-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.effect-combat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #dbeafe;
    font-size: 13px;
    white-space: nowrap;
}
.effect-combat-toggle.disabled {
    color: #64748b;
}
.effect-item button {
    width: auto;
    padding: 5px 10px;
    font-size: 13px;
}


.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.shop-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.shop-item-card.sold-out {
    opacity: 0.6;
}

.item-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.item-card-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.item-card-name {
    font-weight: bold;
    font-size: 15px;
}

.shop-item-cost, .shop-item-limit {
    font-size: 13px;
    color: #8B9BB0;
    margin: 4px 0;
}

.shop-item-card button {
    margin-top: auto;
    width: 100%;
    padding: 8px;
    font-size: 14px;
}

/* 品质颜色 (复用) */
.color-quality-common { color: var(--color-quality-common); }
.color-quality-rare { color: var(--color-quality-rare); }
.color-quality-exquisite { color: var(--color-quality-exquisite); }
.color-quality-legendary {
    color: var(--color-quality-legendary);
    text-shadow: 0 0 10px rgba(243, 188, 99, 0.18);
}
.color-quality-epic {
    color: var(--color-quality-epic);
    text-shadow: 0 0 12px rgba(255, 228, 138, 0.26);
}
.color-quality-world-shattering { color: var(--color-quality-world-shattering); }
.color-quality-fentian-world-shattering {
    color: var(--color-quality-fentian-world-shattering);
    text-shadow: 0 0 10px rgba(255, 91, 43, .5), 0 0 18px rgba(255, 194, 91, .22);
}


#shop-special .shop-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 5px;
}
#shop-special .shop-actions-header button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}
#shop-special .shop-item-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}
#shop-special .shop-item-actions button {
    flex-grow: 1;
}

/* 邪恶商店 */
.shop-currency-display {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}



/* 余额中心 */
.balance-summary {
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: 14px;
}
.balance-summary .summary-item span:first-child {
    color: #8B9BB0;
    display: block;
}
.balance-summary .summary-item span:last-child {
    font-weight: bold;
    font-size: 18px;
}
.balance-module h4 {
    font-size: 16px;
}
.balance-module .claimable-text {
    color: #66BB6A;
    font-weight: bold;
}
.bonus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.contribution-gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.contribution-gift-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(183, 150, 104, 0.18);
    background: rgba(20, 16, 12, 0.32);
}

.contribution-gift-title,
.contribution-gift-threshold,
.contribution-gift-status,
.contribution-gift-action {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.45;
}

.contribution-gift-title {
    color: var(--color-text);
    font-weight: 700;
    font-size: 15px;
}

.contribution-gift-threshold,
.contribution-gift-status {
    color: var(--color-text-muted);
}

.contribution-gift-action button {
    width: 100%;
    min-height: 34px;
    margin: 0;
}

.contribution-gift-rewards {
    min-width: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(183, 150, 104, 0.12);
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    border-radius: 3px;
}
.bonus-item button {
    width: auto;
    padding: 5px 10px;
    font-size: 13px;
}

/* 拍卖行 */
#auction-house-content h4 {
    font-size: 18px;
    margin-top: 20px;
}
#auction-house-content h5 {
    margin: 0;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#auction-house-content .auction-item-pixel-icon,
#auction-house-content .auction-item-pixel-icon .item-pixel-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
#auction-house-content .auction-item-pixel-icon .item-pixel-icon-wrap,
#auction-house-content .auction-item-pixel-icon .item-pixel-icon {
    width: 30px;
    height: 30px;
}
.market-item-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.market-item-info .price {
    color: var(--color-quality-epic);
}
.market-item-trade {
    display: flex;
    gap: 10px;
}
.market-item-trade input {
    margin-bottom: 0;
}
.trade-buttons {
    display: flex;
    gap: 5px;
}
.trade-buttons button {
    width: auto;
    flex-grow: 1;
}
.mail-send select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #0D1520;
    color: var(--color-text-dark);
}
.mail-item {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
}
.mail-item:last-child {
    border-bottom: none;
}
.mail-item.claimed button {
    background-color: #1E2838;
}


/* 职业面板 */
.profession-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 5px;
}
.summary-item { text-align: center; }
.summary-item .value { font-size: 20px; font-weight: bold; color: var(--color-wood); }
.summary-item .label { font-size: 12px; }

.profession-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profession-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
}
.profession-info { flex-grow: 1; }
.profession-level { margin-right: 15px; }
.profession-actions button {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 20px;
    border-radius: 50%;
}


/* 技能队列 */
.skill-queue-container {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}
.skill-queue-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.skill-queue-slot {
    position: static;
}
.skill-queue-slot .slot-index {
    font-size: 12px;
    color: #6B7D8F;
}
.skill-queue-slot .slot-name {
    font-size: 14px;
}

.skill-queue-supreme-card {
    margin: 16px 0 20px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(244, 196, 48, 0.35);
    background: linear-gradient(135deg, rgba(34, 26, 61, 0.92), rgba(19, 25, 44, 0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.18);
}

.skill-queue-supreme-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.skill-queue-supreme-tag,
.skill-queue-supreme-level {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.skill-queue-supreme-tag {
    color: #2d2107;
    background: linear-gradient(135deg, #f4d97a, #e8b951);
}

.skill-queue-supreme-level {
    color: #f7d998;
    background: rgba(244, 196, 48, 0.12);
    border: 1px solid rgba(244, 196, 48, 0.2);
}

.skill-queue-supreme-name {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 800;
    color: #fff0bf;
    letter-spacing: 1px;
}

.skill-queue-supreme-desc {
    color: #d5d8e2;
    font-size: 14px;
    line-height: 1.7;
}

/* 技能选择模态框 */
.modal-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.modal-list-item:hover {
    background-color: rgba(255,255,255,0.07);
}
.modal-list-item .item-info p {
    font-size: 12px;
    color: #8B9BB0;
    margin: 5px 0 0 0;
}
.modal-list-item button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}


/* Rank 面板 */
#attribute-rank .condition-status {
    margin-left: 10px;
    font-weight: bold;
}

/* 守护石面板 */
.guardian-stone-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}


.hexagon-container {
    position: relative;
    width: 300px;
    height: 320px;
    margin: 0 auto;
    flex-shrink: 0;
}
.hexagon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.hexagon {
    position: absolute;
    width: 90px;
    height: 104px;
    background-color: var(--color-parchment);
    border: 2px solid var(--color-border);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
    z-index: 5;
}
.hexagon.selected {
    background-color: var(--color-wood);
    color: var(--color-text-light);
    border-color: var(--color-quality-epic);
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 0 15px rgba(255,213,79,0.3);
}

.hexagon.selected:hover {
    transform: scale(1.15);
}

.hexagon:hover {
    transform: scale(1.1);
    z-index: 5;
    border-color: var(--color-wood);
}
.hexagon.locked {
    background-color: #1A2230;
    color: #4A5A6A;
    border-color: #152030;
}

/* 六边形定位 */
.hexagon-center {
    top: 108px;
    left: 105px;
}
.hexagon-top-left {
    top: 10px;
    left: 10px;
}
.hexagon-top-right {
    top: 10px;
    right: 10px;
}
.hexagon-bottom-left {
    bottom: 40px;
    left: 10px;
}
.hexagon-bottom-right {
    bottom: 40px;
    right: 10px;
}
.hexagon-bottom {
    bottom: -10px;
    left: 105px;
}

#guardian-stone-details {
    width: 100%;
}
.hexagon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 5px;
}

.stone-name {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2px;
}
.hexagon {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
}
.stone-level {
    font-size: 10px;
    opacity: 0.8;
}
.hexagon .stone-level {
    font-size: 10px;
    color: #8B9BB0;
    margin-top: 3px;
}
.hexagon.locked {
    background-color: #1A2230;
    color: #4A5A6A;
}

#guardian-stone-details {
    width: 100%;
    min-height: 200px;
    background-color: var(--color-parchment);
    border: 2px solid var(--color-wood);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: var(--box-shadow);
}

#guardian-stone-details.guardian-inline-detail {
    min-height: 0;
    margin-top: 0;
    background: rgba(8, 14, 26, 0.65);
    border: 1px solid var(--color-border);
}
#guardian-stone-details h3 {
    margin-top: 0;
    color: var(--color-wood);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

#guardian-stone-details ul {
    padding-left: 20px;
    margin: 10px 0;
}

#guardian-stone-details li {
    margin-bottom: 5px;
    font-size: 14px;
}


/* 强化/进阶区域 */
.enhancement-ui, .upgrade-ui, .heart-guard-ui, .synthesis-ui {
    background-color: rgba(255,255,255,0.06);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.enhancement-ui p, .upgrade-ui p {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 14px;
}

/* 按钮样式微调 */
#guardian-stone-details button {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
}



/* 珍宝面板 */
.collection-progress-card {
    position: relative;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 211, 112, 0.36);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 211, 112, 0.16), rgba(104, 211, 145, 0.08) 48%, rgba(82, 163, 255, 0.11)),
        rgba(10, 18, 32, 0.82);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 0 30px rgba(255, 211, 112, 0.06);
    overflow: hidden;
}
.collection-progress-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #ffd370, #68d391, #52a3ff);
}
.collection-progress-main {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.collection-progress-eyebrow {
    color: #b9c8d8;
    font-size: 12px;
    font-weight: 700;
}
.collection-progress-level {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.collection-progress-level span {
    color: #ffe08a;
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 0 16px rgba(255, 211, 112, 0.42);
}
.collection-progress-level strong {
    color: var(--color-text);
    font-size: 14px;
}
.collection-progress-mult {
    min-width: 180px;
    text-align: right;
}
.collection-progress-mult span {
    display: block;
    color: #9fb5cc;
    font-size: 12px;
}
.collection-progress-mult strong {
    display: block;
    color: #7ee0a1;
    font-size: 26px;
    line-height: 1.1;
    margin-top: 3px;
}
.collection-progress-mult em {
    display: block;
    color: #ffd370;
    font-size: 12px;
    font-style: normal;
    margin-top: 2px;
}
.collection-progress-bar-wrap {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.collection-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd370, #68d391 58%, #52a3ff);
    box-shadow: 0 0 16px rgba(104, 211, 145, 0.52);
    transition: width 0.35s ease;
}
.collection-progress-meta,
.collection-progress-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
    color: #9fb5cc;
    font-size: 12px;
}
.collection-progress-sources span {
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.20);
    color: #d9e6f2;
}
@media (max-width: 640px) {
    .collection-progress-main {
        flex-direction: column;
    }
    .collection-progress-mult {
        min-width: 0;
        text-align: left;
    }
    .collection-progress-level span {
        font-size: 28px;
    }
}
.treasure-set { margin-bottom: 12px; }
.treasure-set-summary {
    list-style: none;
    cursor: pointer;
}
.treasure-set-summary::-webkit-details-marker { display: none; }
.treasure-set-summary-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.treasure-set-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.treasure-set-title-row h4 {
    margin: 0;
}
.treasure-set-toggle {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 12px;
}
.treasure-set[open] .treasure-set-toggle::before {
    content: "收起";
    font-size: 12px;
}
.treasure-set[open] .treasure-set-toggle {
    font-size: 0;
}
.treasure-set .treasure-set-toggle::before {
    content: "";
}
.treasure-set-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}
.treasure-level-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
    font-size: 12px;
}
.treasure-level-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.treasure-level-chip strong {
    flex-shrink: 0;
    color: #9fb5cc;
}
.treasure-level-chip.owned {
    border-color: rgba(183, 150, 104, 0.55);
    background: rgba(183, 150, 104, 0.11);
    color: var(--color-text);
}
.treasure-level-chip.owned strong {
    color: #ffd370;
}
.treasure-set-active-effect {
    color: #9edfaa;
    font-size: 13px;
    line-height: 1.45;
}
.treasure-set-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border);
}
.treasure-set-pieces {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.treasure-piece {
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-align: center;
    opacity: 0.5;
}
.treasure-piece.owned {
    opacity: 1;
    border-color: var(--color-wood);
    background-color: rgba(255, 215, 0, 0.1);
}
.treasure-piece .name { font-weight: bold; }
.treasure-piece .level { font-size: 12px; color: #8B9BB0; display: block; }
.treasure-stats { font-size: 12px; color: #b0c4de; display: block; margin-top: 2px; }
.treasure-piece.owned .treasure-stats { color: #81c784; }
.treasure-set-effects { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--color-border); }
.treasure-set-effects p { color: #5A6A7A; font-size: 14px; }
.treasure-set-effects p.active { color: #66BB6A; font-weight: bold; }


/* 装备强化模态框 */
.enhancement-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.enhancement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}
.enhancement-item span:first-child {
    font-weight: bold;
}
.enhancement-item button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
    flex-shrink: 0;
}

/* 合成 & 转化模态框 */
#synthesis-content .tab-content {
    padding-top: 15px;
}
.compose-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 15px;
}
.compose-recipe-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.compose-action-row.batch-use-controls {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.compose-item button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}
#synthesis-transform p {
    margin: 10px 0;
}

#synthesis-view .synthesis-new-shell {
    max-width: 430px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

#synthesis-view .synthesis-new-recommend-section,
#synthesis-view .synthesis-new-system-groups,
#synthesis-view .synthesis-new-system-group {
    display: grid;
    gap: 10px;
}

#synthesis-view .synthesis-new-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0 2px;
}

#synthesis-view .synthesis-new-row-head h3 {
    margin: 0;
    border: 0;
    color: #F2E1C2;
    font-size: 17px;
    line-height: 1.2;
}

#synthesis-view .synthesis-new-row-head span {
    color: #AFA092;
    font-size: 12px;
    white-space: nowrap;
}

#synthesis-view .synthesis-new-category-head {
    margin-top: 2px;
}

#synthesis-view .synthesis-new-shortcut-grid,
#synthesis-view .synthesis-new-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

#synthesis-view .synthesis-new-shortcut {
    width: 100% !important;
    min-width: 0;
    min-height: 84px;
    margin: 0;
    padding: 7px 3px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(48, 36, 28, 0.96), rgba(28, 21, 17, 0.98));
    color: #E8D8BE;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    text-align: center;
    white-space: normal;
}

#synthesis-view .synthesis-new-shortcut.active {
    border-color: rgba(255, 222, 145, 0.66);
    background: linear-gradient(180deg, #C9A84C 0%, #9B7933 100%);
    color: #1B140F;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 248, 207, 0.24);
}

#synthesis-view .synthesis-new-shortcut i {
    color: #E5C56F;
    font-size: 17px;
    line-height: 1;
}

#synthesis-view .synthesis-new-shortcut strong {
    color: #F3E0B4;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#synthesis-view .synthesis-new-shortcut span {
    color: #AFA092;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#synthesis-view .synthesis-new-shortcut em {
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.26);
    color: #B6A68F;
    font-size: 9px;
    font-style: normal;
    line-height: 1.2;
}

#synthesis-view .synthesis-new-shortcut em.ready {
    border-color: rgba(201, 168, 76, 0.38);
    background: rgba(201, 168, 76, 0.18);
    color: #F0D580;
}

#synthesis-view .synthesis-new-shortcut.active i,
#synthesis-view .synthesis-new-shortcut.active strong,
#synthesis-view .synthesis-new-shortcut.active span,
#synthesis-view .synthesis-new-shortcut.active em {
    color: #2D210F;
}

#synthesis-view .synthesis-new-system-title {
    padding: 0 2px;
    color: #F2E1C2;
    font-size: 16px;
    font-weight: 800;
}

#synthesis-view .synthesis-new-system-detail:empty {
    display: none;
}

#synthesis-view .synthesis-new-system-detail:not(:empty) {
    display: grid;
    gap: 10px;
    animation: dungeon-detail-expand 0.24s ease-out both;
}

#synthesis-view .synthesis-new-detail-card {
    border: 1px solid rgba(183, 150, 104, 0.24);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(183, 150, 104, 0.09), transparent 26%),
        linear-gradient(180deg, rgba(54, 40, 30, 0.96), rgba(35, 25, 20, 0.99));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 232, 187, 0.06);
    padding: 12px;
    overflow: hidden;
}

#synthesis-view .synthesis-new-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

#synthesis-view .synthesis-new-detail-head h4 {
    margin: 0 0 4px;
    border: 0;
    color: #F0D6A0;
}

#synthesis-view .synthesis-new-detail-head p,
#synthesis-view .synthesis-new-detail-body .compose-item p,
#synthesis-view .synthesis-new-empty {
    color: #AFA092;
}

#synthesis-view .synthesis-new-badge {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.26);
    color: #B6A68F;
    font-size: 11px;
    white-space: nowrap;
}

#synthesis-view .synthesis-new-badge.ready {
    border-color: rgba(201, 168, 76, 0.38);
    background: rgba(201, 168, 76, 0.18);
    color: #F0D580;
}

#synthesis-view .synthesis-new-detail-body {
    display: grid;
    gap: 9px;
}

#synthesis-view .synthesis-new-detail-body .compose-item {
    margin: 0;
    border: 1px solid rgba(183, 150, 104, 0.22);
    border-radius: 10px;
    background: rgba(16, 11, 8, 0.32);
}

#synthesis-view .synthesis-quick-config-btn,
#synthesis-view .synthesis-quick-config-actions button {
    width: auto;
    margin: 0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}

#synthesis-view .synthesis-quick-config-panel {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(183, 150, 104, 0.22);
    border-radius: 10px;
    background: rgba(16, 11, 8, 0.34);
}

#synthesis-view .synthesis-quick-config-panel label {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #D8C8AE;
    font-size: 12px;
}

#synthesis-view .synthesis-quick-config-panel select {
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    background: rgba(14, 10, 8, 0.52);
    color: #E8D8BE;
}

#synthesis-view .synthesis-quick-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 380px) {
    #synthesis-view .synthesis-new-shortcut-grid,
    #synthesis-view .synthesis-new-tabs {
        gap: 5px;
    }

    #synthesis-view .synthesis-new-shortcut {
        min-height: 80px;
        padding: 7px 2px;
    }
}


#combat-view.active {
    display: flex;
    padding: 10px;
    background-color: #080E18;
}

#combat-arena {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 顶部战场 - 上下排列 */
#combat-arena-top {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}
.combatant-panel {
    width: 100%;
    padding: 8px 10px;
    background-color: var(--color-parchment);
    border: 1px solid var(--color-wood);
    border-radius: 5px;
}
.vs-separator {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-quality-epic);
    text-align: center;
    padding: 2px 0;
    letter-spacing: 2px;
}
.combatant-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 8px;
}
.hp-bar-container {
    width: 100%;
    height: 22px;
    background-color: #152030;
    border-radius: 11px;
    position: relative;
    border: 1px solid var(--color-wood);
}
.hp-bar {
    height: 100%;
    width: 100%;
    background-color: #4CAF50;
    border-radius: 11px;
    transition: width 0.3s ease;
}
#enemy-combat-panel .hp-bar {
    background-color: #F44336;
}
.hp-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/* 中部日志 */
#combat-log-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* 日志头部区域 */
.combat-log-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 15px;
    background-color: rgba(255,255,255,0.06);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    min-height: 50px;
}

.combat-log-header h3 {
    margin: 0;
    border: none;
    padding: 6px 0 0;
    font-size: 18px;
}

#combat-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auto-battle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--color-text-dark);
    cursor: pointer;
    white-space: nowrap;
}

#btn-return-after-combat {
    width: auto;
    padding: 5px 15px;
    font-size: 14px;
    height: 32px;
}

/* 日志滚动区域 */
#combat-log {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    font-size: 13px;
    line-height: 1.6;
    background-color: transparent;
}
.damage-log { color: #EF5350; }
.end-log { font-weight: bold; text-align: center; margin-top: 10px; }

/* 战斗总结 */
#combat-summary-panel {
    margin-top: 10px;
}
#combat-summary-panel h3 {
    text-align: center;
    font-size: 24px;
}
#combat-summary-panel h3.victory { color: #66BB6A; }
#combat-summary-panel h3.defeat { color: #EF5350; }
#combat-summary-panel h4 { font-size: 16px; }
#combat-summary-panel ul { padding-left: 20px; }

/* 底部控制区 */
#combat-controls {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.combat-control-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.auto-battle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--color-text-dark);
    cursor: pointer;
    white-space: nowrap;
}
#btn-return-after-combat {
    width: auto;
    padding: 8px 20px;
}

.combat-effect-toggle,
.combat-auto-toggle {
    width: auto;
    height: 32px;
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid rgba(120, 140, 180, 0.55);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-dark);
}

.combat-effect-toggle.active,
.combat-auto-toggle.active {
    border-color: #d9534f;
    background: rgba(217, 83, 79, 0.18);
    color: #f1b6b4;
}

.combat-auto-toggle.active {
    border-color: rgba(92, 184, 92, 0.75);
    background: rgba(92, 184, 92, 0.18);
    color: #c9f5c9;
}

.combat-tarot-toggle {
    min-width: 130px;
}

.combat-tarot-toggle.open {
    border-color: rgba(183, 150, 104, 0.8);
    background: rgba(183, 150, 104, 0.18);
    color: #f3d79b;
}

.combat-tarot-panel {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 0;
    border: 1px solid rgba(183, 150, 104, 0.45);
    border-radius: 6px;
    background: rgba(30, 22, 18, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: combatDrawerDown 160ms ease-out;
}

.combat-tarot-panel.hidden {
    display: none;
}

.combat-tarot-drawer-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(183, 150, 104, 0.24);
    background: rgba(39, 29, 22, 0.98);
}

.combat-tarot-drawer-head strong {
    color: #f3d79b;
    font-size: 13px;
}

.combat-tarot-drawer-head span {
    color: rgba(231, 220, 199, 0.7);
    font-size: 12px;
}

.combat-tarot-list {
    display: grid;
}

.combat-tarot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(183, 150, 104, 0.18);
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.combat-tarot-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.combat-tarot-row:last-child {
    border-bottom: none;
}

.combat-tarot-row.inactive {
    opacity: 0.55;
    cursor: not-allowed;
}

.combat-tarot-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: #6fbf73;
}

.combat-tarot-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.combat-tarot-name {
    font-size: 13px;
    color: #f1e0c5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combat-tarot-uses,
.combat-tarot-empty {
    font-size: 12px;
    color: rgba(231, 220, 199, 0.72);
}

.combat-tarot-empty {
    padding: 12px 10px;
}

.combat-tarot-status {
    flex: 0 0 auto;
    font-size: 12px;
    min-width: 64px;
    text-align: right;
    color: rgba(231, 220, 199, 0.72);
}

.combat-tarot-status.enabled {
    color: #9fd99f;
}

.combat-tarot-status.disabled {
    color: #f1b6b4;
}

@keyframes combatDrawerDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 560px) {
    .combat-log-header {
        flex-direction: column;
        gap: 8px;
    }

    #combat-controls {
        width: 100%;
    }

    .combat-control-row {
        justify-content: flex-start;
    }

    .combat-tarot-status {
        min-width: 58px;
    }
}


#combat-log div {
    white-space: pre-wrap;
    padding: 2px 0;
}

.skill-queue {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    min-height: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.skill-icon-combat {
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 4px;
    background-color: var(--color-accent);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex-shrink: 0;
}
.skill-icon-combat.empty {
    background-color: var(--color-border);
}

#combat-log .log-separator {
    text-align: center;
    font-weight: bold;
    color: var(--color-quality-epic);
    margin: 8px 0;
}

#combat-log .log-action {
    padding-left: 1.5em;
    position: relative;
}

#combat-log .log-action::before {
    content: '›';
    position: absolute;
    left: 0.5em;
    color: #4A5A6A;
}

#combat-log .damage-log {
    color: #EF5350;
}

#combat-log .end-log {
    color: var(--color-wood);
    font-size: 14px;
}

#combat-log div {
    padding: 2px 0;
}

.log-separator {
    text-align: center;
    font-weight: bold;
    color: var(--color-quality-epic);
    margin: 8px 0;
}

.log-action {
    padding-left: 1.5em;
    position: relative;
    color: #8B9BB0;
}

.log-action::before {
    content: '›';
    position: absolute;
    left: 0.5em;
    color: #4A5A6A;
}

.damage-log {
    color: #EF5350;
}

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

.end-log {
    color: var(--color-wood);
    font-size: 14px;
}


#tooltip-comparison-container {
    display: flex;
    gap: 15px;
}

.tooltip-panel {
    background-color: var(--color-parchment);
    color: var(--color-text-dark);
    padding: 15px;
    border-radius: 5px;
    border: 2px solid var(--color-wood);
    box-shadow: var(--box-shadow);
    font-size: 14px;
    width: 300px;
    line-height: 1.5;
}

.tooltip-panel h4 {
    font-family: var(--font-primary);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.tooltip-panel p {
    margin: 8px 0;
}


.dungeon-options-panel {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    margin: 0 -15px -15px -15px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    max-height: 600px;
    opacity: 1;
}

.dungeon-options-panel.abyss-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-top: none;
}

.material-abyss-auto-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    margin: 8px -15px -15px -15px;
    border-top: 1px solid rgba(183, 150, 104, 0.22);
    background: rgba(0, 0, 0, 0.16);
}

.material-abyss-sweep-panel {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    margin: 8px -15px 0 -15px;
    border-bottom: 1px solid rgba(183, 150, 104, 0.16);
    background: rgba(42, 28, 16, 0.22);
}

.material-abyss-sweep-panel + .material-abyss-auto-panel {
    margin-top: 0;
    border-top: none;
}

.material-abyss-sweep-panel .material-abyss-sweep-count {
    flex: 1 1 auto;
    min-width: 0;
}

.material-abyss-sweep-panel .material-abyss-sweep-count em {
    color: rgba(255, 246, 236, 0.52);
    font-size: 11px;
    font-style: normal;
}

.material-abyss-sweep-panel .material-abyss-sweep-count input[type="number"] {
    width: 96px;
    min-width: 96px;
}

.material-abyss-sweep-panel button {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 28px;
    margin-top: 0 !important;
    padding: 4px 12px;
    font-size: 12px;
}

.material-abyss-auto-panel label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 246, 236, 0.78);
    font-size: 12px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.material-abyss-auto-panel input[type="number"] {
    width: 54px;
    min-height: 28px;
    padding: 3px 5px;
    font-size: 12px;
}

.material-abyss-auto-enable {
    color: #f0c040 !important;
    font-weight: 700;
}

.void-abyss-meta {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 9px 10px;
    border: 1px solid rgba(120, 190, 255, 0.24);
    border-radius: 8px;
    background: rgba(15, 24, 38, 0.58);
}

.void-abyss-meta-main {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: space-between;
}

.void-abyss-meta-main span {
    color: #9fc9ff;
    font-size: 12px;
    font-weight: 700;
}

.void-abyss-meta-main strong {
    color: #f3d27a;
    font-size: 13px;
}

.void-abyss-tarot-note {
    color: rgba(229, 238, 255, 0.78);
    font-size: 12px;
    line-height: 1.45;
}

.material-abyss-tarot-status {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(201, 168, 76, 0.32);
    border-radius: 8px;
    background: rgba(45, 34, 18, 0.5);
}

.material-abyss-tarot-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #f3d27a;
    font-size: 12px;
}

.material-abyss-tarot-title span {
    color: rgba(229, 238, 255, 0.68);
    font-weight: 400;
}

.material-abyss-tarot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.material-abyss-tarot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid rgba(150, 116, 220, 0.38);
    border-radius: 999px;
    background: rgba(73, 48, 112, 0.4);
    color: #eadcff;
    font-size: 12px;
}

.material-abyss-tarot-chip em {
    color: #c5b5df;
    font-size: 11px;
    font-style: normal;
}

.material-abyss-tarot-summary {
    color: #bfe69b;
    font-size: 13px;
    line-height: 1.55;
}

.material-abyss-tarot-empty {
    color: rgba(229, 238, 255, 0.62);
    font-size: 12px;
}
@media (max-width: 720px) {
    .material-abyss-auto-panel {
        justify-content: flex-start;
    }
}

.abyss-options-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin: 10px -15px -15px -15px;
    background-color: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 14px;
    color: var(--color-wood);
    font-family: var(--font-primary);
    transition: background-color 0.2s;
}

.abyss-options-toggle:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.abyss-toggle-icon {
    font-size: 12px;
    transition: transform 0.3s;
}

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

.option-group h5 {
    margin: 0 0 10px 0;
    font-family: var(--font-primary);
    color: var(--color-wood);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
    font-size: 14px;
}

.option-group label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 14px;
}

.cost-preview {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: 15px;
}

.cost-preview strong {
    color: #EF5350;
}


.combatant-panel {
    display: flex;
    flex-direction: column;
}

.combat-stats-panel {
    font-size: 12px;
    line-height: 1.4;
}
.combat-stats-panel h3 {
    font-size: 13px;
    margin: 0 0 4px 0;
}
.combat-stats-panel h4 {
    font-size: 12px;
    margin: 4px 0 2px 0;
}
.combat-stats-panel p {
    display: flex;
    justify-content: space-between;
    margin: 1px 0;
}
.combat-stats-panel .stat-label {
    font-weight: bold;
    color: #8B9BB0;
}
.combat-stats-panel hr {
    margin: 4px 0;
    border: none;
    border-top: 1px dashed var(--color-border);
}
.combat-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 8px;
    font-size: 11px;
}
.combat-stats-panel .super-crit-multiplier {
    display: inline-block;
    margin-left: 4px;
    color: #ffcf7a;
    font-style: normal;
    white-space: nowrap;
}

/* 战斗日志 */
.buff-log {
    color: #42A5F5;
}


#world-boss-view .panel {
    margin-bottom: 15px;
}

.world-boss-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}
.status-item h4 { font-size: 14px; margin-bottom: 8px; }
.status-item .value { font-size: 18px; font-weight: bold; color: var(--color-quality-epic); }

.world-boss-actions button {
    margin-top: 10px;
    padding: 15px;
    font-size: 18px;
}

/* 子系统通用 */
#world-boss-sub-content .panel {
    padding: 15px;
}
#world-boss-sub-content h3 {
    margin-top: 0;
}

/* 排名 */
.my-weekly-reward {
    background-color: rgba(255, 215, 0, 0.1);
    border-color: var(--color-quality-epic);
}
.rank-list {
    list-style: none;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}
.rank-list li {
    display: flex;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
}
.rank-pos { font-weight: bold; width: 40px; }
.rank-name { flex-grow: 1; }
.rank-damage { font-family: monospace; color: var(--color-quality-epic); }

/* 商店 & 科技 */
.shop-item, .tech-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
}
.shop-item span, .tech-item p {
    margin: 5px 0;
}
.shop-item button, .tech-item button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
}
.tech-upgrade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    flex-wrap: wrap;
}
.tech-upgrade-row label {
    font-size: 14px;
    white-space: nowrap;
}
.tech-upgrade-row input[type="number"] {
    width: 60px;
    padding: 4px 6px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #555;
    border-radius: 4px;
    background: #1a1a2e;
    color: #e0e0e0;
}
.tech-upgrade-row #wb-tech-total-cost {
    font-size: 13px;
    color: #aab;
}
.wb-shop-batch-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 5px 0;
}
.wb-shop-batch-controls label,
.wb-shop-total-cost {
    font-size: 13px;
    color: #aab;
}
.wb-shop-quantity-input {
    width: 70px;
    padding: 4px 6px;
    font-size: 14px;
    background-color: #1a1a2e;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: #e0e0e0;
}

/* 标签页内容 */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}



/* === 命运转盘 === */
.mirror-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 15px;
}
.mirror-level {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.level-label { color: var(--color-text-muted, #8B9BB0); font-size: 13px; }
.level-value { font-size: 28px; font-weight: bold; color: var(--color-quality-legendary, orange); }
.level-max { color: var(--color-text-muted, #4A5A6A); font-size: 13px; }

.mirror-energy { display: flex; align-items: center; gap: 8px; }
.energy-label { color: var(--color-text-muted, #8B9BB0); font-size: 13px; }
.energy-dots { display: flex; gap: 4px; }
.energy-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.1);
    transition: background 0.3s, box-shadow 0.3s;
}
.energy-dot.filled {
    background: #FFD700;
    box-shadow: 0 0 6px #FFD700;
}
.energy-text { color: var(--color-text-muted, #6B7D8F); font-size: 12px; }

.guaranteed-banner {
    text-align: center;
    padding: 8px;
    background: linear-gradient(90deg, rgba(255,215,0,0.15), rgba(255,215,0,0.3), rgba(255,215,0,0.15));
    border: 1px solid #FFD700;
    border-radius: 6px;
    color: #FFD700;
    font-weight: bold;
    margin-bottom: 15px;
    animation: pulse-glow 1.5s infinite;
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 15px rgba(255,215,0,0.6); }
}

.mirror-wheel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 15px 0;
}
.wheel-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px 8px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    font-size: 13px;
    transition: all 0.15s;
}
.wheel-slot i { font-size: 24px; }
.wheel-slot.slot-empty { color: #6B7D8F; }
.wheel-slot.slot-gold i { color: #FFD700; }
.wheel-slot.slot-material i { color: #8BC34A; }
.wheel-slot.slot-stone i { color: #42A5F5; }
.wheel-slot.slot-shard i { color: #AB47BC; }
.wheel-slot.slot-minor i { color: #FFA726; }
.wheel-slot.slot-major i { color: #FF7043; }
.wheel-slot.slot-jackpot { border-color: #FFD700; }
.wheel-slot.slot-jackpot i { color: #FFD700; }

.wheel-slot.active {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(255,255,255,0.3);
}
.wheel-slot.winner {
    background: rgba(255,215,0,0.2);
    border-color: #FFD700;
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(255,215,0,0.5);
    animation: winner-pulse 0.6s ease-in-out 3;
}
@keyframes winner-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 25px rgba(255,215,0,0.7); }
}

.mirror-spin-area {
    text-align: center;
    margin: 15px 0;
}
.spin-btn {
    font-size: 18px;
    padding: 12px 40px;
    background: linear-gradient(135deg, #1a5fb4, #4a90d9);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: bold;
}
.spin-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(26, 95, 180, 0.4);
}
.spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.spin-cost {
    color: var(--color-text-muted, #6B7D8F);
    font-size: 12px;
    margin-top: 8px;
}

.mirror-result {
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
}
.mirror-result.hidden { display: none; }
.mirror-result.result-normal {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
}
.mirror-result.result-major {
    background: rgba(255,112,67,0.15);
    border: 1px solid #FF7043;
}
.mirror-result.result-jackpot {
    background: rgba(255,215,0,0.15);
    border: 1px solid #FFD700;
    animation: pulse-glow 1s infinite;
}
.result-icon { font-size: 36px; margin-bottom: 8px; }
.result-text { font-size: 16px; font-weight: bold; color: var(--color-text-light); }
.result-levelup { color: #4CAF50; margin-top: 8px; font-weight: bold; }
.result-guaranteed { color: #FFD700; margin-top: 4px; font-style: italic; }


#babel-tower-view h3 {
    text-align: center;
}

.babel-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 5px;
}
.babel-status button {
    width: auto;
    padding: 8px 15px;
    font-size: 14px;
}

.babel-guardian-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(192, 167, 99, 0.32);
    background: linear-gradient(135deg, rgba(28, 34, 42, 0.92), rgba(45, 41, 34, 0.82));
}

.babel-guardian-panel h4 {
    margin: 0 0 8px;
    color: #e8d79b;
}

.babel-guardian-panel p {
    margin: 5px 0;
}

.babel-guardian-panel button {
    margin-top: 10px;
    width: auto;
    min-width: 132px;
}

.babel-guardian-jump-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.babel-guardian-jump-controls input[type="number"] {
    width: 96px;
    padding: 7px 8px;
    text-align: center;
    border: 1px solid rgba(192, 167, 99, 0.45);
    border-radius: 4px;
    background: rgba(12, 16, 22, 0.78);
    color: #f1e7c2;
}

.babel-guardian-jump-controls button {
    margin-top: 0;
    min-width: 54px;
    padding: 7px 10px;
}

.babel-challenge-controls {
    margin-top: 15px;
    text-align: center;
}
.babel-challenge-controls p {
    margin: 15px 0;
}
.babel-challenge-controls button {
    padding: 15px;
    font-size: 18px;
}
.small-text {
    font-size: 12px;
    color: #6B7D8F;
    margin-top: 10px;
}

.babel-difficulty-carousel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
}

.babel-difficulty-window {
    overflow: hidden;
    min-height: 52px;
    border: 1px solid rgba(183, 150, 104, 0.18);
    border-radius: 8px;
    background: rgba(13, 21, 32, 0.52);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
}

.babel-difficulty-track {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    transition: transform 0.24s ease;
    will-change: transform;
}

.babel-difficulty-card {
    flex: 0 0 78px;
    min-width: 78px;
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
    border: 1px solid rgba(183, 150, 104, 0.2);
    border-radius: 6px;
    color: var(--color-text-muted);
    background: rgba(255, 246, 236, 0.04);
}

.babel-difficulty-card.active {
    color: var(--color-text-light);
    border-color: var(--babel-tone-edge, var(--color-wood));
    background: linear-gradient(180deg, rgba(255, 246, 236, 0.12), rgba(255, 246, 236, 0.04));
    box-shadow: inset 0 0 14px var(--babel-tone-inner, rgba(183, 150, 104, 0.18)), 0 0 12px var(--babel-tone-outer, rgba(183, 150, 104, 0.18));
}

.babel-difficulty-arrow {
    height: 40px;
    width: 40px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    border-radius: 6px;
    border-color: rgba(183, 150, 104, 0.2);
    background: rgba(255, 246, 236, 0.06);
}

#babel-challenge {
    position: relative;
    overflow: hidden;
}

.babel-challenge-controls {
    position: relative;
    z-index: 1;
}

.babel-difficulty-aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
}

#babel-tower-view[class*="babel-tone-"] #babel-challenge {
    border-color: var(--babel-tone-edge);
    box-shadow:
        inset 0 0 28px var(--babel-tone-inner),
        inset 0 0 8px var(--babel-tone-core),
        0 0 18px var(--babel-tone-outer);
}

#babel-tower-view[class*="babel-tone-"] .babel-difficulty-aura {
    opacity: 1;
    background:
        radial-gradient(circle at 50% 0%, var(--babel-tone-core), transparent 34%),
        linear-gradient(90deg, var(--babel-tone-inner), transparent 24%, transparent 76%, var(--babel-tone-inner));
    animation: babel-aura-breathe 2.8s ease-in-out infinite;
}

#babel-tower-view[class*="babel-tone-"] .babel-challenge-controls button[data-action="start-babel-challenge"] {
    border-color: var(--babel-tone-edge);
    box-shadow: inset 0 0 16px var(--babel-tone-inner), 0 0 12px var(--babel-tone-outer);
}

#babel-tower-view.babel-tone-Hard {
    --babel-tone-edge: rgba(122, 24, 28, 0.92);
    --babel-tone-inner: rgba(86, 12, 18, 0.42);
    --babel-tone-core: rgba(178, 42, 46, 0.32);
    --babel-tone-outer: rgba(78, 10, 16, 0.32);
}

#babel-tower-view.babel-tone-Nightmare {
    --babel-tone-edge: rgba(170, 18, 24, 0.86);
    --babel-tone-inner: rgba(12, 4, 6, 0.72);
    --babel-tone-core: rgba(182, 0, 16, 0.34);
    --babel-tone-outer: rgba(126, 0, 14, 0.38);
}

#babel-tower-view.babel-tone-Legendary {
    --babel-tone-edge: rgba(173, 126, 34, 0.92);
    --babel-tone-inner: rgba(117, 77, 18, 0.42);
    --babel-tone-core: rgba(215, 156, 43, 0.34);
    --babel-tone-outer: rgba(158, 104, 18, 0.34);
}

#babel-tower-view.babel-tone-Epic {
    --babel-tone-edge: rgba(255, 210, 72, 0.95);
    --babel-tone-inner: rgba(214, 163, 35, 0.42);
    --babel-tone-core: rgba(255, 232, 126, 0.38);
    --babel-tone-outer: rgba(255, 196, 37, 0.36);
}

#babel-tower-view.babel-tone-Mythical {
    --babel-tone-edge: rgba(125, 245, 255, 0.94);
    --babel-tone-inner: rgba(113, 84, 255, 0.34);
    --babel-tone-core: rgba(255, 104, 214, 0.32);
    --babel-tone-outer: rgba(88, 232, 255, 0.34);
}

#babel-tower-view.babel-tone-Mythical #babel-challenge {
    box-shadow:
        inset 0 0 24px rgba(92, 239, 255, 0.32),
        inset 0 0 38px rgba(255, 110, 220, 0.18),
        0 0 22px rgba(130, 108, 255, 0.34);
}

#babel-tower-view.babel-tone-Extreme {
    --babel-tone-edge: rgba(119, 74, 255, 0.96);
    --babel-tone-inner: rgba(39, 112, 255, 0.38);
    --babel-tone-core: rgba(171, 72, 255, 0.34);
    --babel-tone-outer: rgba(89, 48, 255, 0.42);
}

#babel-tower-view.babel-tone-Extreme .babel-difficulty-aura {
    background:
        linear-gradient(90deg, rgba(36, 130, 255, 0.46), rgba(155, 66, 255, 0.2), transparent 48%, rgba(155, 66, 255, 0.2), rgba(36, 130, 255, 0.46)),
        radial-gradient(ellipse at 0% 50%, rgba(118, 76, 255, 0.42), transparent 38%),
        radial-gradient(ellipse at 100% 50%, rgba(0, 194, 255, 0.38), transparent 38%);
    animation: babel-extreme-flame 1.3s ease-in-out infinite alternate;
}

#babel-tower-view.babel-tone-Endless {
    --babel-tone-edge: rgba(236, 236, 236, 0.92);
    --babel-tone-inner: rgba(255, 255, 255, 0.18);
    --babel-tone-core: rgba(0, 0, 0, 0.5);
    --babel-tone-outer: rgba(255, 255, 255, 0.24);
}

#babel-tower-view.babel-tone-Endless .babel-difficulty-aura {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.62), rgba(255,255,255,0.14), transparent 50%, rgba(255,255,255,0.14), rgba(0,0,0,0.62)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 10px);
    animation: babel-endless-shift 2.6s linear infinite;
}

#babel-tower-view.babel-tone-Transcendent {
    --babel-tone-edge: rgba(156, 96, 255, 0.96);
    --babel-tone-inner: rgba(48, 214, 214, 0.26);
    --babel-tone-core: rgba(159, 89, 255, 0.34);
    --babel-tone-outer: rgba(61, 225, 212, 0.32);
}

#babel-tower-view.babel-tone-Transcendent .babel-difficulty-aura {
    background:
        radial-gradient(circle at 50% 50%, rgba(186, 134, 255, 0.28), transparent 34%),
        radial-gradient(circle at 18% 28%, rgba(75, 236, 225, 0.22), transparent 24%),
        radial-gradient(circle at 82% 72%, rgba(116, 80, 255, 0.24), transparent 26%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.055) 0 1px, transparent 1px 10px);
    animation: babel-mystic-drift 4.2s ease-in-out infinite;
}

#babel-tower-view.babel-tone-Ultimate {
    --babel-tone-edge: rgba(255, 236, 154, 0.98);
    --babel-tone-inner: rgba(203, 154, 45, 0.34);
    --babel-tone-core: rgba(255, 255, 240, 0.34);
    --babel-tone-outer: rgba(255, 214, 92, 0.42);
}

#babel-tower-view.babel-tone-Ultimate #babel-challenge {
    box-shadow:
        inset 0 0 26px rgba(255, 255, 238, 0.22),
        inset 0 0 42px rgba(226, 175, 64, 0.28),
        0 0 24px rgba(255, 214, 92, 0.38);
}

#babel-tower-view.babel-tone-Ultimate .babel-difficulty-aura {
    background:
        linear-gradient(135deg, rgba(255, 255, 236, 0.24), transparent 28%, rgba(227, 168, 46, 0.18), transparent 68%, rgba(255, 255, 236, 0.18)),
        radial-gradient(circle at 50% 12%, rgba(255, 255, 230, 0.28), transparent 32%),
        linear-gradient(90deg, rgba(190, 128, 28, 0.35), transparent 35%, transparent 65%, rgba(190, 128, 28, 0.35));
    animation: babel-supreme-radiance 3.4s ease-in-out infinite;
}

@keyframes babel-aura-breathe {
    0%, 100% { transform: scale(1); filter: brightness(0.92); }
    50% { transform: scale(1.015); filter: brightness(1.18); }
}

@keyframes babel-extreme-flame {
    0% { background-position: 0 0, 0 0, 100% 0; filter: brightness(0.95); }
    100% { background-position: 42px 0, 18px 0, calc(100% - 18px) 0; filter: brightness(1.28); }
}

@keyframes babel-endless-shift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 0, 24px 24px; }
}

@keyframes babel-mystic-drift {
    0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg) brightness(0.95); }
    50% { transform: scale(1.018) rotate(0.6deg); filter: hue-rotate(16deg) brightness(1.22); }
}

@keyframes babel-supreme-radiance {
    0%, 100% { opacity: 0.82; filter: brightness(0.96) saturate(1); }
    50% { opacity: 1; filter: brightness(1.28) saturate(1.18); }
}

#disassemble-by-quality-section {
    margin-top: 20px;
}

.quick-disassemble-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.quick-disassemble-buttons button {
    padding: 8px;
    font-size: 13px;
}

/* 品质按钮颜色 */
[data-quality="稀有"] { background-color: var(--color-quality-rare); }
[data-quality="精致"] { background-color: var(--color-quality-exquisite); }
[data-quality="传说"] { background-color: var(--color-quality-legendary); }
[data-quality="史诗"] { background-color: var(--color-quality-epic); }

/* 一键分解按钮 - 5个一排 */
.function-buttons {
    display: flex;
    gap: 4px;
}
.function-buttons button {
    flex: 1;
    padding: 4px 2px;
    font-size: 11px;
    white-space: nowrap;
    min-width: 0;
}
.guardian-attr-action-row {
    margin-top: 6px;
}
.guardian-attr-action-row button {
    flex: 0 0 auto;
    padding: 4px 10px;
}

.small-text {
    font-size: 12px;
    color: #6B7D8F;
    margin-top: 10px;
    text-align: center;
}


#treasure-land-view .panel {
    text-align: center;
}

/* 过关斩将 */
#gauntlet-view {
    background:
        linear-gradient(135deg, rgba(18, 24, 22, 0.96), rgba(42, 35, 28, 0.92)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px);
}

.gauntlet-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gauntlet-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(218, 184, 113, 0.35);
    border-radius: 8px;
    background:
        linear-gradient(120deg, rgba(17, 31, 30, 0.88), rgba(69, 43, 33, 0.82)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 22px);
}

.gauntlet-kicker {
    display: block;
    margin-bottom: 4px;
    color: #e0c27c;
    font-size: 13px;
}

.gauntlet-hero h3 {
    margin: 0;
    color: #fff4d2;
}

.gauntlet-reward-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.gauntlet-reward-strip span {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    color: #d7e5dc;
    font-size: 13px;
}

.gauntlet-reward-strip strong {
    color: #ffe08a;
}

.gauntlet-reward-strip button {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 12px;
}

.gauntlet-guide-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.gauntlet-guide-card {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(218, 184, 113, 0.22);
    border-radius: 8px;
    background: rgba(12, 16, 18, 0.58);
}

.gauntlet-guide-card strong {
    color: #ffe08a;
    font-size: 13px;
}

.gauntlet-guide-card span {
    color: #b9c8c0;
    font-size: 12px;
    line-height: 1.45;
}

.gauntlet-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.gauntlet-chapter-pill {
    min-height: 54px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 16, 18, 0.72);
    color: #dfe8e2;
    text-align: left;
}

.gauntlet-chapter-pill span,
.gauntlet-chapter-pill em {
    display: block;
}

.gauntlet-chapter-pill em {
    margin-top: 3px;
    color: #9fb0aa;
    font-size: 12px;
    font-style: normal;
}

.gauntlet-chapter-pill.active {
    border-color: rgba(255, 209, 112, 0.72);
    box-shadow: inset 0 0 16px rgba(255, 198, 82, 0.12), 0 0 12px rgba(255, 198, 82, 0.14);
}

.gauntlet-chapter-pill.cleared {
    border-color: rgba(104, 205, 150, 0.5);
}

.gauntlet-board {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(218, 184, 113, 0.3);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 18%, rgba(103, 147, 118, 0.2), transparent 26%),
        radial-gradient(circle at 86% 24%, rgba(196, 86, 52, 0.16), transparent 28%),
        linear-gradient(160deg, rgba(9, 18, 21, 0.96), rgba(36, 32, 27, 0.94));
}

.gauntlet-board-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.04) 22px 23px),
        linear-gradient(90deg, rgba(255,255,255,0.04), transparent 18%, transparent 82%, rgba(255,255,255,0.04));
    opacity: 0.8;
}

.gauntlet-tone-fire { box-shadow: inset 0 0 28px rgba(190, 62, 36, 0.2); }
.gauntlet-tone-forest { box-shadow: inset 0 0 28px rgba(64, 138, 86, 0.22); }
.gauntlet-tone-wind { box-shadow: inset 0 0 28px rgba(93, 166, 168, 0.2); }
.gauntlet-tone-mountain { box-shadow: inset 0 0 28px rgba(155, 128, 82, 0.22); }
.gauntlet-tone-shadow { box-shadow: inset 0 0 28px rgba(90, 78, 128, 0.24); }
.gauntlet-tone-thunder { box-shadow: inset 0 0 28px rgba(186, 166, 62, 0.22); }

.gauntlet-board-head,
.gauntlet-route {
    position: relative;
    z-index: 1;
}

.gauntlet-board-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.gauntlet-board-head h4 {
    margin: 0 0 4px;
    color: #ffe6a3;
}

.gauntlet-board-head p {
    margin: 0;
    color: #b9c8c0;
}

.gauntlet-board-head > span {
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #f4d486;
    white-space: nowrap;
}

.gauntlet-route {
    display: grid;
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.gauntlet-boss-node {
    min-height: 214px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(6, 10, 13, 0.68);
}

.gauntlet-node-orb {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: radial-gradient(circle, rgba(255,255,255,0.2), rgba(84, 123, 113, 0.5) 55%, rgba(9, 13, 15, 0.95));
    color: #fff;
    font-weight: 700;
}

.gauntlet-boss-node.medium .gauntlet-node-orb {
    width: 64px;
    height: 64px;
    border-color: rgba(255, 194, 93, 0.58);
    background: radial-gradient(circle, rgba(255,232,165,0.32), rgba(147, 92, 44, 0.72) 58%, rgba(20, 12, 8, 0.95));
}

.gauntlet-boss-node.large .gauntlet-node-orb {
    width: 78px;
    height: 78px;
    border-color: rgba(255, 104, 104, 0.72);
    background: radial-gradient(circle, rgba(255, 244, 199, 0.4), rgba(185, 58, 45, 0.78) 55%, rgba(22, 8, 8, 0.98));
    box-shadow: 0 0 18px rgba(224, 80, 54, 0.28);
}

.gauntlet-node-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
}

.gauntlet-node-title strong,
.gauntlet-node-title em {
    display: block;
}

.gauntlet-node-title strong {
    color: #fff1d0;
    font-size: 14px;
    line-height: 1.25;
}

.gauntlet-node-title em {
    color: #d8bb77;
    font-style: normal;
    font-size: 12px;
}

.gauntlet-node-body p {
    min-height: 34px;
    margin: 0;
    color: #aec0b7;
    font-size: 12px;
    line-height: 1.4;
}

.gauntlet-node-stats {
    display: grid;
    gap: 4px;
    color: #d3e4dc;
    font-size: 12px;
}

.gauntlet-node-body button {
    margin-top: auto;
    min-height: 34px;
}

.gauntlet-boss-node.defeated {
    border-color: rgba(101, 210, 142, 0.42);
    background: rgba(24, 54, 38, 0.52);
}

.gauntlet-entry-stage {
    border-color: rgba(218, 184, 113, 0.36);
    background:
        linear-gradient(135deg, rgba(36, 57, 53, 0.9), rgba(73, 48, 35, 0.88)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 16px);
}

.gauntlet-entry-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.gauntlet-entry-actions button,
.gauntlet-entry-actions .start-dungeon-btn {
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.2;
}

@media (max-width: 1100px) {
    .gauntlet-route {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 720px) {
    .gauntlet-hero,
    .gauntlet-board-head {
        flex-direction: column;
        align-items: stretch;
    }

    .gauntlet-reward-strip {
        justify-content: flex-start;
    }

    .gauntlet-guide-strip {
        grid-template-columns: 1fr;
    }

    .gauntlet-entry-actions {
        grid-template-columns: 1fr;
    }
}

.gauntlet-chapter-stepper {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    min-height: 78px;
    padding: 10px;
    border: 1px solid rgba(218, 184, 113, 0.28);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(10, 18, 20, 0.86), rgba(56, 40, 30, 0.78), rgba(10, 18, 20, 0.86));
}

.gauntlet-chapter-arrow {
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 214, 132, 0.42);
    background: radial-gradient(circle, rgba(255, 221, 134, 0.2), rgba(28, 20, 14, 0.92));
    color: #ffe6a3;
}

.gauntlet-chapter-arrow:disabled {
    opacity: 0.35;
}

.gauntlet-chapter-current {
    min-width: 0;
    text-align: center;
}

.gauntlet-chapter-current span,
.gauntlet-chapter-current em {
    display: block;
    color: #b8c7c0;
    font-style: normal;
    font-size: 13px;
}

.gauntlet-chapter-current h4 {
    margin: 2px 0;
    color: #ffe7a8;
    font-size: 24px;
    letter-spacing: 0;
}

/* 剧情战斗可视化样板：横向像素战场只在 story-combat-visual 模式启用。 */
.story-combat-stage[hidden] {
    display: none !important;
}

.story-combat-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: clamp(250px, 35vh, 296px);
    min-height: 250px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid #241f24;
    border-radius: 6px;
    background: #8fb9b3;
    box-shadow: 0 5px 0 #05080d, inset 0 0 0 2px rgba(255, 240, 197, 0.18);
}

.story-battle-scenery,
.story-battle-effects,
.story-battle-lane {
    position: absolute;
    inset: 0;
}

.story-battle-scenery {
    z-index: -1;
    overflow: hidden;
    background-color: #7fa7a7;
}

.story-battle-scenery::before {
    content: '';
    position: absolute;
    inset: 0 0 42% 0;
    opacity: 0.44;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 5px,
        rgba(228, 243, 223, 0.18) 5px,
        rgba(228, 243, 223, 0.18) 7px
    );
}

.story-battle-sun {
    position: absolute;
    top: 24px;
    right: 16%;
    width: 30px;
    height: 30px;
    border: 4px solid #8f6741;
    border-radius: 50%;
    background: #f3cb71;
    box-shadow: 0 0 0 5px rgba(241, 202, 111, 0.19);
}

.story-battle-ridge {
    position: absolute;
    right: -3%;
    bottom: 39%;
    left: -3%;
    display: block;
    transform-origin: bottom;
}

.story-battle-ridge-far {
    height: 39%;
    background: #567d78;
    clip-path: polygon(0 78%, 10% 47%, 20% 66%, 31% 28%, 44% 68%, 57% 42%, 69% 65%, 82% 31%, 100% 73%, 100% 100%, 0 100%);
}

.story-battle-ridge-near {
    bottom: 31%;
    height: 30%;
    background: #385c53;
    clip-path: polygon(0 66%, 11% 35%, 23% 61%, 34% 45%, 48% 75%, 60% 38%, 72% 64%, 86% 41%, 100% 62%, 100% 100%, 0 100%);
}

.story-battle-ground {
    position: absolute;
    inset: 64% 0 0;
    display: block;
    border-top: 5px solid #253d38;
    background-color: #745942;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(42, 31, 27, 0.24) 11px, rgba(42, 31, 27, 0.24) 14px),
        repeating-linear-gradient(90deg, transparent 0, transparent 26px, rgba(222, 181, 112, 0.11) 26px, rgba(222, 181, 112, 0.11) 29px);
}

.story-battle-ground::before {
    content: '';
    position: absolute;
    inset: 5px 0 auto;
    height: 10px;
    background: repeating-linear-gradient(90deg, #3d604b 0, #3d604b 12px, #527a59 12px, #527a59 23px);
}

.story-battle-toolbar {
    position: absolute;
    top: 8px;
    right: 10px;
    left: 10px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.story-battle-chapter-mark,
.story-battle-round {
    width: max-content;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(27, 25, 27, 0.78);
    border-radius: 3px;
    background: rgba(28, 28, 31, 0.78);
    color: #f7e6bd;
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 2px 2px 0 rgba(10, 12, 15, 0.42);
}

.story-battle-round {
    justify-self: center;
    color: #fff5dd;
    font-weight: 700;
}

.story-battle-icon-button {
    justify-self: end;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    border: 1px solid rgba(27, 25, 27, 0.88);
    border-radius: 4px;
    background: rgba(28, 28, 31, 0.82);
    color: #f7e6bd;
    box-shadow: 2px 2px 0 rgba(10, 12, 15, 0.42);
}

.story-battle-icon-button:hover,
.story-battle-icon-button:focus-visible,
.story-battle-icon-button.active {
    border-color: #e1bd62;
    color: #fff2ba;
    background: rgba(76, 57, 39, 0.94);
}

.story-battle-status {
    position: absolute;
    top: 44px;
    z-index: 4;
    width: min(40%, 270px);
    min-width: 0;
    padding: 5px 7px 6px;
    border: 1px solid #282227;
    border-radius: 4px;
    background: rgba(22, 24, 27, 0.85);
    box-shadow: 3px 3px 0 rgba(8, 10, 13, 0.42);
}

.story-battle-status-player {
    left: 10px;
}

.story-battle-status-enemy {
    right: 10px;
}

.story-battle-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    color: #f6e9ca;
    font-size: 11px;
    line-height: 1.2;
}

.story-battle-status-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-battle-status-head span {
    flex: 0 0 auto;
    color: #c8b88f;
    font-size: 10px;
}

.story-battle-hp-track {
    position: relative;
    height: 7px;
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid #17151a;
    border-radius: 2px;
    background: #2a2830;
}

.story-battle-hp-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: #49a56c;
    transition: width 160ms ease-out;
}

.story-battle-status-enemy .story-battle-hp-fill {
    background: #d05c55;
}

.story-battle-hp-text {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #d9d3c4;
    font-size: 9px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-battle-lane {
    z-index: 2;
    top: 79px;
}

.story-battle-actor {
    position: absolute;
    bottom: 21px;
    transform-origin: 50% 100%;
    will-change: transform, filter;
}

.story-battle-player {
    left: 12%;
    width: 64px;
    height: 128px;
    animation: storyBattleIdlePlayer 1800ms steps(2, end) infinite;
}

.story-battle-enemy {
    right: 9%;
    width: 128px;
    height: 64px;
    animation: storyBattleIdleEnemy 1450ms steps(2, end) infinite;
}

.story-battle-player-sprite,
.story-battle-enemy-sprite {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100%;
    filter: drop-shadow(3px 4px 0 rgba(15, 16, 20, 0.28));
}

.story-battle-player-sprite {
    flex-direction: column;
}

.story-battle-enemy-sprite {
    flex-direction: row;
}

.story-battle-player-sprite img,
.story-battle-enemy-sprite img {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.story-battle-player-sprite img {
    width: 64px;
    height: 128px;
    flex-basis: 128px;
}

.story-battle-shadow {
    position: absolute;
    right: 3px;
    bottom: -4px;
    left: 3px;
    z-index: 1;
    height: 12px;
    border-radius: 50%;
    background: rgba(22, 20, 21, 0.43);
}

.story-battle-enemy .story-battle-shadow {
    right: 10px;
    left: 10px;
}

.story-battle-clash {
    position: absolute;
    top: 54%;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    opacity: 0.58;
}

.story-battle-clash span {
    position: absolute;
    top: 15px;
    left: 2px;
    width: 30px;
    height: 3px;
    border: 1px solid #33252c;
    background: #d7ae62;
}

.story-battle-clash span:first-child {
    transform: rotate(45deg);
}

.story-battle-clash span:last-child {
    transform: rotate(-45deg);
}

.story-battle-effects {
    z-index: 4;
    pointer-events: none;
}

.story-battle-float {
    position: absolute;
    top: 47%;
    left: 50%;
    max-width: 45%;
    overflow: hidden;
    color: #fff0c1;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: -1px -1px 0 #2a171c, 1px -1px 0 #2a171c, -1px 1px 0 #2a171c, 2px 2px 0 #2a171c;
}

.story-battle-float[data-target='player'] {
    left: 20%;
}

.story-battle-float[data-target='enemy'] {
    left: 78%;
}

.story-battle-float-damage {
    color: #ffb36b;
}

.story-battle-float-damage.critical {
    color: #ffe16e;
    font-size: 18px;
}

.story-battle-float-heal {
    color: #8df0a6;
}

.story-battle-float-buff {
    color: #8ee4ed;
    font-size: 12px;
}

.story-battle-impact {
    position: absolute;
    top: 57%;
    left: 50%;
    width: 48px;
    height: 48px;
}

.story-battle-impact[data-target='player'] {
    left: 21%;
}

.story-battle-impact[data-target='enemy'] {
    left: 76%;
}

.story-battle-impact i {
    position: absolute;
    top: 21px;
    left: 4px;
    width: 40px;
    height: 5px;
    border: 1px solid #53272d;
    background: #ffd36a;
}

.story-battle-impact i:nth-child(2) { transform: rotate(45deg); }
.story-battle-impact i:nth-child(3) { transform: rotate(90deg); }
.story-battle-impact i:nth-child(4) { transform: rotate(135deg); }

#combat-view.story-combat-visual {
    background-color: #0c1116;
}

#combat-view.story-combat-visual #combat-arena-top {
    display: none;
}

#combat-view.story-combat-visual.story-combat-details-open #combat-arena-top {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#combat-view.story-combat-visual.story-combat-details-open .combatant-panel {
    min-width: 0;
    max-height: none;
    overflow: visible;
}

@keyframes storyBattleIdlePlayer {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -2px; }
}

@keyframes storyBattleIdleEnemy {
    0%, 100% { translate: 0 0; }
    50% { translate: -1px -2px; }
}

@media (max-width: 640px) {
    .story-combat-stage {
        height: 270px;
        min-height: 270px;
    }

    .story-battle-status {
        width: calc(50% - 15px);
    }

    .story-battle-player {
        left: 7%;
    }

    .story-battle-enemy {
        right: 3%;
    }

    .story-battle-sun {
        right: 12%;
    }

    .story-battle-float[data-target='player'] {
        left: 17%;
    }

    .story-battle-float[data-target='enemy'] {
        left: 75%;
    }

}

@media (max-width: 380px) {
    .story-battle-chapter-mark {
        max-width: 82px;
    }

    .story-battle-status {
        top: 42px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .story-battle-status-head span {
        display: none;
    }

    .story-battle-player {
        left: 3%;
    }

    .story-battle-enemy {
        right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-battle-player,
    .story-battle-enemy {
        animation: none;
    }

    .story-battle-hp-fill {
        transition: none;
    }
}

.guardian-stone-pixel-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    flex: 0 0 32px;
}

.guardian-stone-pixel-icon .item-pixel-icon-wrap,
.guardian-stone-pixel-icon .item-pixel-icon {
    width: 32px;
    height: 32px;
}

.gauntlet-chapter-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.gauntlet-chapter-jump input {
    width: 88px;
    height: 34px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid rgba(255, 214, 132, 0.42);
    border-radius: 6px;
    background: rgba(9, 13, 14, 0.72);
    color: #ffe7a8;
    text-align: center;
    font-size: 15px;
}

.gauntlet-chapter-jump button {
    min-width: 64px;
    height: 34px;
    margin: 0;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
}

.gauntlet-map-board {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    padding: 16px;
    border: 1px solid rgba(218, 184, 113, 0.38);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(30, 24, 18, 0.96), rgba(10, 12, 13, 0.98)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 18px);
}

.gauntlet-map-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 28%, rgba(92, 123, 91, 0.22), transparent 28%),
        radial-gradient(ellipse at 74% 26%, rgba(153, 135, 104, 0.22), transparent 31%),
        radial-gradient(ellipse at 48% 80%, rgba(78, 103, 90, 0.18), transparent 35%),
        linear-gradient(130deg, rgba(17, 32, 34, 0.96), rgba(38, 42, 32, 0.82) 52%, rgba(54, 39, 30, 0.9));
}

.gauntlet-map-bg::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(222, 190, 118, 0.24);
    background:
        repeating-linear-gradient(18deg, transparent 0 28px, rgba(255,255,255,0.035) 28px 29px),
        repeating-linear-gradient(112deg, transparent 0 36px, rgba(0,0,0,0.08) 36px 37px);
}

.gauntlet-map-river {
    position: absolute;
    left: 30%;
    top: -10%;
    width: 34%;
    height: 118%;
    transform: rotate(23deg);
    background: linear-gradient(90deg, transparent, rgba(87, 181, 210, 0.1), rgba(106, 207, 232, 0.28), rgba(38, 116, 151, 0.15), transparent);
    filter: blur(2px);
}

.gauntlet-map-mountains {
    position: absolute;
    width: 240px;
    height: 92px;
    opacity: 0.42;
    background:
        linear-gradient(135deg, transparent 42%, rgba(226, 213, 165, 0.22) 43% 50%, transparent 51%),
        linear-gradient(45deg, transparent 42%, rgba(226, 213, 165, 0.18) 43% 50%, transparent 51%);
    background-size: 54px 72px;
}

.gauntlet-map-mountains.one {
    right: 12%;
    top: 21%;
}

.gauntlet-map-mountains.two {
    left: 10%;
    bottom: 16%;
    transform: scaleX(-1);
}

.gauntlet-map-seal {
    position: absolute;
    display: grid;
    place-items: center;
    width: 28px;
    height: 46px;
    border: 1px solid rgba(226, 201, 143, 0.26);
    background: rgba(228, 209, 158, 0.12);
    color: rgba(255, 230, 170, 0.52);
    font-size: 14px;
}

.gauntlet-map-seal.seal-a { left: 22%; top: 22%; transform: rotate(-6deg); }
.gauntlet-map-seal.seal-b { left: 54%; top: 54%; transform: rotate(8deg); }
.gauntlet-map-seal.seal-c { right: 14%; top: 62%; transform: rotate(-9deg); }

.gauntlet-map-head,
.gauntlet-map-stage,
.gauntlet-map-info {
    position: relative;
    z-index: 1;
}

.gauntlet-map-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    margin-bottom: 8px;
}

.gauntlet-map-head h4 {
    margin: 0 0 5px;
    color: #ffe7a8;
}

.gauntlet-map-head p {
    margin: 0;
    max-width: 620px;
    color: #c1d0c7;
}

.gauntlet-map-head > span {
    align-self: flex-start;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    color: #f4d486;
    white-space: nowrap;
}

.gauntlet-map-stage {
    height: 470px;
    margin: 0 8px;
}

.gauntlet-route-segment {
    position: absolute;
    height: 4px;
    transform-origin: left center;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(78, 41, 29, 0.62), rgba(255, 198, 83, 0.3), rgba(78, 41, 29, 0.62));
    box-shadow: 0 0 10px rgba(255, 199, 85, 0.12);
}

.gauntlet-map-node {
    position: absolute;
    left: var(--gx);
    top: var(--gy);
    width: 64px;
    min-height: 68px;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f4ead2;
    text-align: center;
}

.gauntlet-map-node:disabled {
    cursor: default;
}

.gauntlet-map-orb {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(217, 225, 204, 0.28);
    background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.34), rgba(69, 113, 100, 0.78) 58%, rgba(8, 14, 16, 0.96));
    box-shadow: inset 0 0 12px rgba(255,255,255,0.14), 0 6px 14px rgba(0,0,0,0.4);
    font-weight: 700;
    font-size: 13px;
}

.gauntlet-map-node.medium .gauntlet-map-orb {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 198, 82, 0.68);
    background: radial-gradient(circle at 38% 30%, rgba(255,247,204,0.44), rgba(163, 92, 39, 0.88) 58%, rgba(26, 12, 5, 0.98));
}

.gauntlet-map-node.large {
    width: 92px;
    min-height: 96px;
}

.gauntlet-map-node.large .gauntlet-map-orb {
    width: 60px;
    height: 60px;
    border-width: 3px;
    border-color: rgba(255, 221, 104, 0.86);
    background: radial-gradient(circle at 38% 28%, rgba(255, 250, 214, 0.55), rgba(202, 61, 44, 0.9) 56%, rgba(45, 8, 8, 0.98));
    box-shadow: inset 0 0 16px rgba(255,255,255,0.18), 0 0 24px rgba(234, 79, 52, 0.34), 0 8px 18px rgba(0,0,0,0.45);
    font-size: 19px;
}

.gauntlet-map-node.defeated .gauntlet-map-orb {
    filter: grayscale(0.65);
    opacity: 0.68;
}

.gauntlet-map-label {
    max-width: 78px;
    padding: 3px 5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gauntlet-map-label strong,
.gauntlet-map-label em,
.gauntlet-map-action {
    display: block;
}

.gauntlet-map-label strong {
    color: #fff3c6;
    font-size: 10px;
    line-height: 1.2;
}

.gauntlet-map-label em {
    margin-top: 2px;
    color: #d8c07b;
    font-size: 9px;
    font-style: normal;
}

.gauntlet-map-action {
    min-width: 34px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(85, 58, 41, 0.82);
    color: #ffe0a3;
    font-size: 10px;
}

.gauntlet-map-node.large .gauntlet-map-action {
    background: linear-gradient(135deg, rgba(159, 36, 30, 0.9), rgba(212, 141, 48, 0.88));
    color: #fff6cf;
    font-weight: 700;
}

.gauntlet-map-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.gauntlet-map-info span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    color: #d9e8df;
    font-size: 13px;
}

@media (max-width: 820px) {
    .gauntlet-map-board {
        min-height: 640px;
    }

    .gauntlet-map-stage {
        height: 520px;
        margin: 0;
    }

    .gauntlet-map-node {
        width: 64px;
    }

    .gauntlet-map-node.large {
        width: 90px;
    }

    .gauntlet-map-label strong {
        font-size: 10px;
    }

    .gauntlet-map-head {
        flex-direction: column;
    }
}

.treasure-land-status {
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;
}

/* 进度条 */
.compass-progress-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.compass-progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: transparent;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.compass-progress-dot.filled {
    background: #4CAF50;
    border-color: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

/* 罗盘容器 */
.treasure-land-wheel-container {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

/* 罗盘主体 */
.compass-wheel {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #2E7D32 0deg 120deg,
        #B71C1C 120deg 240deg,
        #F57F17 240deg 360deg
    );
    box-shadow: 0 0 0 4px var(--color-wood), 0 0 20px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.3);
}

/* 罗盘外环装饰 */
.compass-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid var(--color-wood);
    pointer-events: none;
}
.compass-ring::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1px solid rgba(74, 144, 217, 0.25);
}

/* 扇区文字 */
.compass-sector {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.compass-sector span {
    position: absolute;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.compass-sector-green span {
    top: 30%;
    left: 55%;
    color: #C8E6C9;
}
.compass-sector-red span {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: #FFCDD2;
}
.compass-sector-gold span {
    top: 30%;
    right: 55%;
    color: #FFF9C4;
}

/* 罗盘中心圆 */
.compass-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #D4A76A, #8B6914);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* 罗盘指针 */
.compass-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 80px;
    background: linear-gradient(to top, transparent 0%, #D4A76A 20%, #FFD54F 100%);
    transform-origin: bottom center;
    transform: translate(-50%, -100%);
    z-index: 2;
    border-radius: 2px 2px 0 0;
    transition: none;
}
.compass-pointer::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #FFD54F;
}

/* 旋转动画 - 持续转动 */
@keyframes compass-spin {
    from { transform: translate(-50%, -100%) rotate(0deg); }
    to { transform: translate(-50%, -100%) rotate(360deg); }
}
.compass-pointer.spinning {
    animation: compass-spin 0.4s linear infinite;
}

/* 结果动画 - 旋转到目标角度后停止 */
@keyframes compass-result {
    from { transform: translate(-50%, -100%) rotate(0deg); }
    to { transform: translate(-50%, -100%) rotate(var(--final-angle)); }
}
.compass-pointer.result-red,
.compass-pointer.result-green,
.compass-pointer.result-gold {
    animation: compass-result 2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.compass-pointer.result-red::after {
    border-bottom-color: #EF5350;
}
.compass-pointer.result-green::after {
    border-bottom-color: #4CAF50;
}
.compass-pointer.result-gold::after {
    border-bottom-color: #FFD54F;
}

.treasure-land-actions {
    display: flex;
    gap: 15px;
}
.treasure-land-sweep-panel {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 6px;
    background: rgba(255,255,255,0.025);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.treasure-land-sweep-panel.is-sweeping {
    border-color: rgba(92, 225, 230, 0.55);
    box-shadow: 0 0 18px rgba(92, 225, 230, 0.16);
}
.treasure-land-sweep-panel .sweep-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.treasure-land-sweep-panel .sweep-copy span {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.treasure-land-sweep-panel .sweep-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.treasure-land-sweep-panel input {
    width: 96px;
}
.krona-sweep-surprise-options {
    margin: 8px 0;
}
.krona-sweep-surprise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.krona-sweep-surprise-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
}
.treasure-land-sweep-panel .krona-sweep-surprise-option input {
    width: auto;
}
.krona-sweep-progress {
    margin-top: 10px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(8, 20, 28, 0.76), rgba(5, 10, 18, 0.72));
}
.krona-sweep-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #dffcff;
    font-size: 12px;
}
.krona-sweep-progress-head span:last-child {
    color: var(--color-text-muted);
}
.krona-sweep-track,
.krona-sweep-cycle-track {
    position: relative;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}
.krona-sweep-cycle-track {
    height: 6px;
    margin-top: 6px;
}
.krona-sweep-fill,
.krona-sweep-cycle-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    transition: width 0.35s ease;
}
.krona-sweep-fill {
    background: linear-gradient(90deg, #4dd8ff, #93ffca, #ffe27a);
}
.krona-sweep-cycle-fill {
    background: linear-gradient(90deg, #8cecff, #f7d36c);
}
.treasure-land-sweep-panel.is-sweeping .krona-sweep-fill::after,
.treasure-land-sweep-panel.is-sweeping .krona-sweep-cycle-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.4) 45%, transparent 70%);
    animation: kronaSweepShine 1.1s linear infinite;
}
.krona-sweep-nodes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.krona-sweep-node {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.krona-sweep-node.is-lit {
    background: #95ffdc;
    box-shadow: 0 0 10px rgba(149, 255, 220, 0.65);
}
@keyframes kronaSweepShine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
.treasure-land-temp-rewards ul {
    list-style: none;
    padding: 0;
    text-align: left;
}


.contract-purchase-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}
.contract-option { text-align: center; }
.contract-status {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 14px;
}
.contract-tasks-container {
    margin: 15px 0;
}
.contract-tasks {
    list-style: none;
    padding-left: 0;
}
.contract-tasks li {
    padding: 8px 12px;
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid #e57373;
    border-radius: 4px;
    margin-bottom: 8px;
}
.contract-tasks li.completed {
    background-color: rgba(0, 255, 0, 0.1);
    border-color: #81c784;
    text-decoration: line-through;
    color: #5A6A7A;
}
.gold-submission {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.gold-submission button {
    flex-grow: 1;
    padding: 8px;
    font-size: 14px;
}
.reward-track {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin: 15px 0;
}
.reward-tier {
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-primary);
    background-color: #152030;
    border: 2px solid #2A3A4A;
    color: #6B7D8F;
    border-radius: 3px;
    cursor: default;
    position: relative;
}
.reward-tier.claimable {
    background-color: var(--color-quality-epic);
    border-color: #FF8F00;
    color: #0A0F18;
    cursor: help;
}
.reward-tier.claimed {
    background-color: #388E3C;
    border-color: #4caf50;
    color: white;
}
.reward-tier.claimed::after {
    content: '✓';
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 18px;
}
#claim-contract-reward-btn {
    margin-top: 15px;
}

/* --- 幻梦系统 --- */
.dream-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dream-compact-page {
    max-width: 1180px;
    margin: 0 auto;
}

.dream-title-panel {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(20, 28, 46, 0.98), rgba(30, 45, 66, 0.82));
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.dream-title-panel h2 {
    margin: 0 0 6px;
    color: var(--color-quality-epic);
    font-size: 22px;
}

.dream-shell {
    padding: 0;
    overflow: hidden;
}

.dream-main-tabs {
    margin: 0;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-main-tabs .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
}

.dream-tab-body {
    padding: 14px;
}

.dream-overview-layout,
.dream-script-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.dream-overview-main,
.dream-side-column,
.dream-script-layout {
    min-width: 0;
}

.dream-side-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dream-overview-main,
.dream-side-column {
    grid-column: 1 / -1;
}

.dream-inner-section,
.dream-start-card {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dream-inner-section + .dream-inner-section,
.dream-start-card + .dream-inner-section,
.dream-run-head + .dream-actions,
.dream-progress-block + .dream-material-strip,
.dream-actions + .dream-inner-section {
    margin-top: 12px;
}

.dream-inner-section h4 {
    margin: 0 0 10px;
    color: var(--color-wood);
    font-size: 16px;
}

.dream-muted {
    margin: 8px 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.dream-ending-panel {
    display: grid;
    gap: 12px;
}

.dream-ending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.dream-ending-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 42%),
        rgba(0, 0, 0, 0.16);
}

.dream-ending-card.unlocked {
    border-color: rgba(201, 168, 76, 0.44);
    box-shadow: inset 0 0 18px rgba(201, 168, 76, 0.08);
}

.dream-ending-card.locked {
    filter: grayscale(0.25);
    opacity: 0.78;
}

.dream-ending-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 12px;
}

.dream-ending-head b {
    color: var(--color-wood);
}

.dream-ending-card h4 {
    margin: 0;
    color: var(--color-text-light);
    font-size: 18px;
}

.dream-ending-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.dream-ending-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 12px;
}

.dream-ending-unlock {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 8px;
    background: rgba(201, 168, 76, 0.07);
}

.dream-ending-unlock.locked {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
}

.dream-ending-unlock i {
    color: var(--color-quality-epic);
    font-size: 16px;
    padding-top: 2px;
}

.dream-ending-unlock span,
.dream-ending-unlock small {
    display: block;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.dream-ending-unlock strong {
    display: block;
    margin: 2px 0;
    color: var(--color-text-light);
}

.dream-unlock-note {
    margin: 10px 0 0;
    padding: 8px 9px;
    border: 1px solid rgba(201, 168, 76, 0.34);
    border-radius: 8px;
    background: rgba(201, 168, 76, 0.08);
    color: var(--color-quality-epic);
    line-height: 1.45;
}

.dream-title-panel p,
.dream-lore,
.dream-note-panel p,
.dream-adventure-panel p,
.dream-talent-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.dream-currency-bar,
.dream-rule-strip,
.dream-material-strip,
.dream-progress-meta,
.dream-actions,
.dream-blessing-row,
.dream-next-node {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dream-currency-bar {
    justify-content: flex-end;
}

.dream-currency-bar span {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 2px 6px;
    align-items: baseline;
    min-width: 104px;
}

.dream-currency-bar small {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.dream-currency-bar span,
.dream-rule-strip span,
.dream-material-strip span,
.dream-next-node span {
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-light);
}

.dream-currency-bar b {
    margin-right: 6px;
    color: var(--color-wood);
}

.dream-bag-resource-row {
    margin-bottom: 10px;
}

.dream-bag-resource-row span {
    display: inline-block;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.dream-script-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dream-point-summary,
.dream-point-action-grid {
    display: grid;
    gap: 10px;
}

.dream-point-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dream-point-summary div,
.dream-point-card {
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-point-summary span {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
}

.dream-point-summary b {
    color: var(--color-quality-epic);
    font-size: 18px;
}

.dream-point-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dream-point-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dream-point-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.dream-point-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dream-grid {
    display: grid;
    gap: 12px;
}

.dream-grid-main {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

.dream-run-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dream-panel-title,
.dream-card-head,
.dream-run-head,
.dream-upgrade-row,
.dream-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.dream-panel-title {
    margin-bottom: 10px;
    color: var(--color-quality-epic);
    font-weight: 700;
}

.dream-panel-title small,
.dream-run-head p,
.dream-label {
    color: var(--color-text-muted);
}

.dream-primary-btn {
    border-color: var(--color-quality-epic);
    background: #2f6f8f;
}

.dream-origin-card,
.dream-note-panel,
.dream-growth-panel,
.dream-run-panel,
.dream-adventure-panel,
.dream-settlement-panel,
.dream-stat-panel,
.dream-equipment-panel,
.dream-log-panel {
    border-radius: 8px;
}

.dream-origin-card .dream-primary-btn {
    width: 100%;
    margin-top: 14px;
}

.dream-start-card .dream-primary-btn {
    width: 100%;
    margin-top: 14px;
}

.dream-growth-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dream-growth-summary {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
}

.dream-office-rank-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.dream-growth-summary strong {
    display: block;
    margin-top: 4px;
    color: var(--color-quality-epic);
    font-size: 18px;
}

.dream-office-hat {
    position: relative;
    flex: 1;
    min-height: 172px;
    margin-top: 12px;
    border: 1px solid rgba(201, 168, 76, 0.24);
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(201, 168, 76, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(83, 54, 37, 0.48), rgba(27, 19, 15, 0.62));
}

.dream-office-hat::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.24);
    filter: blur(2px);
}

.dream-office-hat-crown {
    position: absolute;
    left: 50%;
    top: 34px;
    width: 74px;
    height: 58px;
    transform: translateX(-50%);
    border: 1px solid rgba(244, 211, 126, 0.62);
    border-radius: 40px 40px 12px 12px;
    background:
        linear-gradient(90deg, transparent 18%, rgba(244, 211, 126, 0.16) 19%, transparent 21%, transparent 49%, rgba(244, 211, 126, 0.18) 50%, transparent 52%, transparent 78%, rgba(244, 211, 126, 0.14) 79%, transparent 81%),
        linear-gradient(180deg, #7a4d2d, #3a2418 72%, #241610);
    box-shadow: inset 0 10px 18px rgba(255, 220, 136, 0.10), 0 8px 18px rgba(0, 0, 0, 0.32);
    z-index: 3;
}

.dream-office-hat-crown::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -13px;
    width: 20px;
    height: 20px;
    transform: translateX(-50%) rotate(45deg);
    border: 1px solid rgba(244, 211, 126, 0.72);
    border-radius: 6px;
    background: #b8843e;
}

.dream-office-hat-crown::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    height: 10px;
    border-top: 2px solid rgba(244, 211, 126, 0.48);
    border-bottom: 1px solid rgba(244, 211, 126, 0.28);
}

.dream-office-hat-band {
    position: absolute;
    left: 50%;
    top: 86px;
    width: 136px;
    height: 18px;
    transform: translateX(-50%);
    border: 1px solid rgba(244, 211, 126, 0.58);
    border-radius: 999px;
    background: linear-gradient(180deg, #c6984d, #704019);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    z-index: 4;
}

.dream-office-hat-wing {
    position: absolute;
    top: 90px;
    width: 70px;
    height: 14px;
    border: 1px solid rgba(201, 168, 76, 0.46);
    border-radius: 999px 8px 8px 999px;
    background: linear-gradient(180deg, #71482d, #2b1a12);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
    z-index: 2;
}

.dream-office-hat-wing.left {
    left: 12px;
    transform: rotate(-8deg);
}

.dream-office-hat-wing.right {
    right: 12px;
    transform: rotate(8deg) scaleX(-1);
}

.dream-office-hat-tassel {
    position: absolute;
    top: 104px;
    width: 2px;
    height: 46px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(244, 211, 126, 0.88), rgba(244, 211, 126, 0.18));
    z-index: 1;
}

.dream-office-hat-tassel::before,
.dream-office-hat-tassel::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #d7ac54;
    box-shadow: 0 0 8px rgba(215, 172, 84, 0.35);
}

.dream-office-hat-tassel::before {
    top: 11px;
    width: 6px;
    height: 6px;
}

.dream-office-hat-tassel::after {
    bottom: -3px;
    width: 8px;
    height: 8px;
}

.dream-office-hat-tassel.t1 { left: 54px; height: 40px; }
.dream-office-hat-tassel.t2 { left: 72px; height: 54px; }
.dream-office-hat-tassel.t3 { left: 50%; height: 62px; transform: translateX(-50%); }
.dream-office-hat-tassel.t4 { right: 72px; height: 54px; }
.dream-office-hat-tassel.t5 { right: 54px; height: 40px; }

.dream-growth-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.dream-growth-stats span,
.dream-stat-grid div,
.dream-settlement-grid div {
    padding: 9px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-growth-stats span {
    display: grid;
    gap: 4px;
    min-height: 58px;
}

.dream-growth-stats small {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.25;
}

.dream-growth-stats b {
    color: var(--color-quality-epic);
    font-size: 16px;
    line-height: 1.2;
}

.dream-office-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dream-office-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}

.dream-office-card.next {
    border-color: rgba(201, 168, 76, 0.32);
}

.dream-office-bonus-list {
    display: grid;
    gap: 8px;
}

.dream-office-bonus-list span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-muted);
}

.dream-office-bonus-list b {
    color: var(--color-text-light);
}

.dream-office-detail-list {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.dream-office-detail-head,
.dream-office-detail-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 110px 110px;
    align-items: center;
    gap: 10px;
}

.dream-office-detail-head {
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 0 10px;
}

.dream-office-detail-row {
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
}

.dream-office-detail-row strong,
.dream-office-detail-row small {
    display: block;
}

.dream-office-detail-row small,
.dream-office-detail-row > span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.dream-office-detail-row > b {
    color: var(--color-text-muted);
    text-align: right;
}

.dream-office-detail-row.complete {
    opacity: 0.72;
}

.dream-office-detail-row.current {
    border-color: rgba(201, 168, 76, 0.7);
    background: rgba(201, 168, 76, 0.12);
}

.dream-office-detail-row.current > b {
    color: var(--color-quality-epic);
}

.dream-office-detail-row.next {
    border-color: rgba(96, 165, 250, 0.42);
}

.dream-talent-page {
    display: grid;
    gap: 12px;
}

.dream-resource-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 8px;
    background: rgba(201, 168, 76, 0.07);
}

.dream-resource-help span {
    color: var(--color-text-muted);
}

.dream-resource-help b {
    margin-right: 4px;
    color: var(--color-quality-epic);
}

.dream-talent-stream,
.dream-shop-panel {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.028);
}

.dream-talent-window {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

.dream-talent-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
}

.dream-talent-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 34px;
    min-height: 42px;
    padding: 0;
    border-radius: 8px;
    border-color: rgba(201, 168, 76, 0.34);
}

.dream-talent-card {
    display: grid;
    grid-template-columns: minmax(78px, 104px) minmax(0, 1fr);
    grid-template-areas:
        "identity desc"
        "bonus bonus"
        "action action";
    align-items: start;
    gap: 10px 12px;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    scroll-margin-inline: 24px;
}

.dream-talent-identity {
    grid-area: identity;
    display: grid;
    gap: 6px;
    align-content: center;
    min-width: 0;
}

.dream-talent-card .dream-card-head {
    display: grid;
    gap: 4px;
    align-items: start;
    justify-content: start;
}

.dream-talent-card .dream-card-head strong {
    min-width: 0;
}

.dream-talent-card.locked {
    opacity: 0.58;
    filter: grayscale(0.25);
}

.dream-talent-card.current-target {
    border-color: rgba(201, 168, 76, 0.76);
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.28) inset, 0 0 18px rgba(201, 168, 76, 0.10);
    background: rgba(201, 168, 76, 0.065);
}

.dream-talent-card em {
    color: var(--color-text-muted);
    font-size: 12px;
    font-style: normal;
}

.dream-talent-card p {
    grid-area: desc;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.dream-talent-card button {
    grid-area: action;
    margin: 0;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
    white-space: normal;
}

.dream-talent-bonus {
    grid-area: bonus;
    min-width: 0;
    min-height: 0;
    color: var(--color-quality-epic);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.dream-run-head h3 {
    margin: 0 0 4px;
    color: var(--color-quality-epic);
}

.dream-run-status {
    min-width: 78px;
    padding: 7px 10px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
}

.dream-run-status.active { background: rgba(74, 144, 217, 0.18); }
.dream-run-status.event { background: rgba(255, 176, 48, 0.18); }
.dream-run-status.completed { background: rgba(76, 175, 80, 0.18); }
.dream-run-status.failed { background: rgba(244, 67, 54, 0.18); }

.dream-progress-block {
    margin-top: 12px;
}

.dream-progress-meta {
    justify-content: space-between;
    margin-bottom: 7px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.dream-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--color-border);
}

.dream-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4a90d9, #c9a84c);
}

.dream-material-strip {
    justify-content: space-between;
    margin: 12px 0;
}

.dream-actions {
    margin-top: 10px;
}

.dream-playback-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.dream-playback-actions button {
    min-width: 0;
    min-height: 34px;
    padding: 8px 4px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.dream-enemy-preview {
    margin-top: 12px;
}

.dream-enemy-preview.safe {
    border-color: rgba(76, 175, 80, 0.32);
}

.dream-enemy-preview.warning {
    border-color: rgba(255, 176, 48, 0.34);
}

.dream-enemy-preview.danger {
    border-color: rgba(244, 67, 54, 0.44);
}

.dream-enemy-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.dream-enemy-head strong {
    color: var(--color-quality-epic);
}

.dream-enemy-head span {
    color: var(--color-text-muted);
}

.dream-danger-note {
    margin: 10px 0 0;
    padding: 9px;
    border-radius: 6px;
    border: 1px solid rgba(244, 67, 54, 0.32);
    background: rgba(244, 67, 54, 0.08);
    color: #ff9999;
    line-height: 1.45;
}

.dream-skill-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.dream-skill-row {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-skill-row strong {
    color: var(--color-quality-epic);
}

.dream-skill-row span {
    color: var(--color-text-muted);
    line-height: 1.4;
}

.dream-actions button,
.dream-blessing-row button,
.dream-panel-title button,
.dream-talent-card button,
.dream-upgrade-row button {
    min-height: 36px;
}

.dream-upgrade-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.dream-next-node {
    margin-top: 10px;
    color: var(--color-text-muted);
}

.dream-target-title {
    padding: 10px;
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 6px;
    background: rgba(201, 168, 76, 0.10);
    color: var(--color-quality-epic);
    font-weight: 700;
}

.dream-blessing-row {
    padding: 10px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.dream-blessing-row > span {
    color: var(--color-quality-epic);
    font-weight: 700;
}

.dream-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dream-choice-card {
    display: flex;
    min-height: 128px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px;
    text-align: left;
    white-space: normal;
}

.dream-choice-card strong {
    color: var(--color-quality-epic);
}

.dream-choice-card span {
    color: var(--color-text-light);
    line-height: 1.45;
}

.dream-choice-card.miracle {
    border-color: var(--color-quality-legendary);
    box-shadow: 0 0 0 1px rgba(255, 176, 48, 0.22) inset;
}

.dream-choice-card.safe {
    border-color: rgba(76, 175, 80, 0.35);
}

.dream-choice-card.growth {
    border-color: rgba(74, 144, 217, 0.36);
}

.dream-choice-card.gamble {
    border-color: rgba(244, 67, 54, 0.36);
}

.dream-choice-cost {
    margin-top: auto;
    color: var(--color-quality-epic);
    font-size: 12px;
    line-height: 1.35;
}

.dream-adventure-skip-row {
    justify-content: flex-end;
}

.dream-adventure-skip-row button {
    width: auto;
    min-width: 138px;
    border-color: rgba(201, 168, 76, 0.42);
    background: rgba(83, 61, 42, 0.92);
}

.dream-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.dream-shop-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 10px 0 12px;
}

.dream-shop-actions span {
    color: var(--color-text-muted);
    line-height: 1.45;
}

.dream-shop-actions button {
    flex: 0 0 auto;
    min-width: 128px;
}

.dream-shop-benefit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid rgba(201, 168, 76, 0.34);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(126, 86, 38, 0.08));
}

.dream-shop-benefit strong {
    color: var(--color-quality-epic);
}

.dream-shop-benefit p {
    margin: 4px 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.dream-shop-benefit small {
    color: var(--color-text-muted);
}

.dream-shop-benefit button {
    flex: 0 0 auto;
    min-width: 128px;
}

.dream-shop-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 164px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-shop-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.dream-shop-limit {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 8px;
    padding: 8px 9px;
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 6px;
    background: rgba(201, 168, 76, 0.06);
}

.dream-shop-limit span,
.dream-shop-limit small {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.dream-shop-limit b {
    color: var(--color-quality-epic);
    font-size: 13px;
    text-align: right;
}

.dream-shop-limit small {
    grid-column: 1 / -1;
}

.dream-shop-card button {
    margin-top: auto;
}

.dream-destiny-grid,
.dream-selected-destiny-row,
.dream-key-list {
    display: grid;
    gap: 10px;
}

.dream-destiny-setup-panel {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(201, 168, 76, 0.36);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.20), transparent 34%),
        radial-gradient(circle at 18% 24%, rgba(130, 95, 190, 0.16), transparent 28%),
        rgba(0, 0, 0, 0.18);
}

.dream-destiny-setup-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(244, 211, 126, 0.10) 38%, transparent 52%),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(244, 211, 126, 0.035) 35px 36px);
    animation: dreamDestinyVeil 4.8s linear infinite;
}

.dream-destiny-orbit {
    position: absolute;
    left: 50%;
    top: 72px;
    width: 180px;
    height: 180px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.16);
    background: conic-gradient(from 0deg, transparent, rgba(201, 168, 76, 0.26), transparent 35%, rgba(130, 95, 190, 0.18), transparent 70%);
    filter: blur(0.2px);
    opacity: 0.55;
    animation: dreamDestinyOrbit 12s linear infinite;
}

.dream-destiny-setup-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.dream-destiny-setup-head span {
    color: var(--color-quality-epic);
    font-size: 13px;
    font-weight: 700;
}

.dream-destiny-setup-head h3 {
    margin: 4px 0;
    color: var(--color-text-light);
    font-size: 22px;
    letter-spacing: 0;
}

.dream-destiny-setup-head p {
    max-width: 620px;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.dream-destiny-setup-head strong {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 54px;
    padding: 8px 10px;
    border: 1px solid rgba(201, 168, 76, 0.42);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--color-quality-epic);
    text-align: center;
}

.dream-destiny-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dream-selected-destiny-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dream-destiny-card,
.dream-mini-card,
.dream-key-row,
.dream-boss-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
}

.dream-destiny-card {
    position: relative;
    display: flex;
    min-height: 154px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 32px 12px 12px;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    animation: dreamDestinyReveal 520ms ease forwards;
    animation-delay: calc(var(--destiny-index, 0) * 70ms);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.dream-destiny-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--quality-color, #c9a84c) 18%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 45%);
    opacity: 0.8;
}

.dream-destiny-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--quality-color, var(--color-quality-epic)) 70%, var(--color-border));
}

.dream-destiny-card.selected {
    border-color: var(--quality-color, var(--color-quality-epic));
    background: rgba(201, 168, 76, 0.10);
    box-shadow:
        0 0 0 2px var(--quality-color, var(--color-quality-epic)) inset,
        0 0 18px color-mix(in srgb, var(--quality-color, var(--color-quality-epic)) 30%, transparent);
    transform: translateY(-3px);
}

.dream-destiny-card.selected::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quality-color, var(--color-quality-epic)), transparent);
}

.dream-destiny-card.special {
    padding-bottom: 38px;
}

.dream-destiny-card.inherited {
    border-style: solid;
    border-color: rgba(201, 168, 76, 0.46);
}

.dream-destiny-order,
.dream-destiny-inherited,
.dream-destiny-special,
.dream-destiny-selected-mark {
    position: absolute;
    z-index: 2;
    font-size: 12px;
    line-height: 1;
}

.dream-destiny-order {
    left: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 168, 76, 0.36);
    border-radius: 50%;
    color: var(--color-quality-epic);
    background: rgba(0, 0, 0, 0.28);
}

.dream-destiny-inherited {
    left: 38px;
    top: 12px;
    color: #d7b56a;
}

.dream-destiny-special {
    right: 10px;
    bottom: 10px;
    padding: 4px 7px;
    border: 1px solid rgba(244, 211, 126, 0.42);
    border-radius: 999px;
    color: #f4d37e;
    background: rgba(0, 0, 0, 0.34);
    font-weight: 700;
}

.dream-destiny-selected-mark {
    right: 10px;
    top: 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--quality-color, var(--color-quality-epic)) 28%, rgba(0, 0, 0, 0.72));
    color: var(--color-text-light);
    font-weight: 700;
}

.dream-destiny-card em {
    position: relative;
    z-index: 1;
    color: var(--quality-color, var(--color-text-muted));
    font-style: normal;
    font-size: 12px;
}

.dream-destiny-card .dream-card-head {
    position: relative;
    z-index: 1;
}

.dream-destiny-card span,
.dream-mini-card span {
    color: var(--color-text-muted);
    line-height: 1.45;
}

.dream-destiny-card > span:not(.dream-destiny-order):not(.dream-destiny-inherited):not(.dream-destiny-special):not(.dream-destiny-selected-mark) {
    position: relative;
    z-index: 1;
    color: var(--color-text-light);
}

@keyframes dreamDestinyReveal {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes dreamDestinyOrbit {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes dreamDestinyVeil {
    from { transform: translateX(-18%); }
    to { transform: translateX(18%); }
}

.dream-mini-card {
    display: grid;
    gap: 6px;
    padding: 10px;
}

.dream-mini-card strong {
    color: var(--quality-color, var(--color-text-light));
}

.dream-key-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
}

.dream-key-row span:first-child {
    color: var(--color-text-muted);
}

.dream-key-row strong {
    color: var(--quality-color, var(--color-text-light));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dream-quality-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 2px 7px;
    border: 1px solid var(--quality-color, var(--color-border));
    border-radius: 999px;
    color: var(--quality-color, var(--color-text-light));
    background: color-mix(in srgb, var(--quality-color, #d7dee8) 12%, transparent);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.dream-quality-common { --quality-color: #c8d0dc; }
.dream-quality-rare { --quality-color: var(--color-quality-rare); }
.dream-quality-exquisite { --quality-color: var(--color-quality-exquisite); }
.dream-quality-heirloom { --quality-color: var(--color-quality-legendary); }
.dream-quality-epic { --quality-color: var(--color-quality-epic); }
.dream-quality-mythic { --quality-color: var(--color-quality-world-shattering); }

.dream-choice-card[class*="dream-quality-"],
.dream-destiny-card[class*="dream-quality-"],
.dream-mini-card[class*="dream-quality-"],
.dream-key-row[class*="dream-quality-"] {
    border-color: color-mix(in srgb, var(--quality-color, #9aa8ba) 44%, var(--color-border));
}

.dream-choice-card[class*="dream-quality-"] strong,
.dream-destiny-card[class*="dream-quality-"] strong {
    color: var(--quality-color, var(--color-quality-epic));
}

.dream-boss-card {
    margin-top: 12px;
    padding: 12px;
}

.dream-boss-card.safe {
    border-color: rgba(76, 175, 80, 0.42);
}

.dream-boss-card.danger {
    border-color: rgba(244, 67, 54, 0.42);
}

.dream-stat-grid,
.dream-settlement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dream-stat-grid span,
.dream-settlement-grid span {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
}

.dream-stat-grid b,
.dream-settlement-grid b,
.dream-final-reward {
    color: var(--color-text-light);
}

.dream-final-reward {
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    background: rgba(201, 168, 76, 0.10);
    border: 1px solid rgba(201, 168, 76, 0.28);
}

.dream-equipment-row,
.dream-log-line {
    display: grid;
    gap: 4px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
}

.dream-equipment-row:last-child,
.dream-log-line:last-child {
    border-bottom: 0;
}

.dream-equipment-row strong {
    color: var(--color-text-light);
}

.dream-equipment-row span {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.35;
}

.dream-equipment-row.quality-rare strong { color: var(--color-quality-rare); }
.dream-equipment-row.quality-epic strong { color: var(--color-quality-epic); }
.dream-equipment-row.quality-legendary strong { color: var(--color-quality-legendary); }

.dream-log-line {
    grid-template-columns: 42px 1fr;
}

.dream-log-line span {
    color: var(--color-text-muted);
}

.dream-log-line p {
    margin: 0;
    line-height: 1.4;
}

.dream-log-line.success p { color: #79d18c; }
.dream-log-line.year p { color: #b9d7ff; }
.dream-log-line.warning p { color: var(--color-quality-legendary); }
.dream-log-line.danger p { color: #ff7777; }

.dream-log-panel {
    border-color: rgba(201, 168, 76, 0.34);
    background:
        linear-gradient(180deg, rgba(201, 168, 76, 0.055), transparent 34%),
        rgba(255, 255, 255, 0.035);
}

.dream-chronicle-commentary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(201, 168, 76, 0.30);
    border-radius: 8px;
    background: rgba(201, 168, 76, 0.08);
}

.dream-chronicle-commentary span {
    color: var(--color-quality-epic);
    font-weight: 700;
}

.dream-chronicle-commentary p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.65;
}

@media (max-width: 900px) {
    .dream-title-panel,
    .dream-panel-title,
    .dream-run-head,
    .dream-upgrade-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dream-currency-bar {
        justify-content: flex-start;
    }

    .dream-shop-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dream-upgrade-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dream-grid-main,
    .dream-run-detail-grid,
    .dream-choice-grid,
    .dream-overview-layout,
    .dream-script-layout,
    .dream-equipment-grid,
    .dream-point-summary,
    .dream-point-action-grid,
    .dream-growth-summary,
    .dream-growth-stats,
    .dream-office-compare,
    .dream-office-detail-row,
    .dream-skill-list,
    .dream-selected-destiny-row {
        grid-template-columns: 1fr;
    }

    .dream-destiny-setup-panel {
        padding: 12px;
    }

    .dream-destiny-setup-head {
        flex-direction: column;
    }

    .dream-destiny-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .dream-destiny-card {
        min-height: 170px;
        padding: 30px 9px 10px;
    }

    .dream-talent-window {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 6px;
    }

    .dream-talent-arrow {
        width: 30px;
        min-height: 40px;
    }

    .dream-talent-card {
        grid-template-columns: minmax(74px, 96px) minmax(0, 1fr);
        padding: 10px;
        gap: 8px;
    }

    .dream-talent-card .dream-card-head {
        gap: 3px;
    }

    .dream-talent-bonus {
        font-size: 12px;
    }

    .dream-talent-card button {
        padding-inline: 5px;
        font-size: 12px;
        white-space: normal;
    }

    .dream-office-detail-head {
        display: none;
    }

    .dream-office-detail-row > b {
        text-align: left;
    }
}

.contract-daily-extra {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(240, 192, 64, 0.35);
    border-radius: 6px;
    background: rgba(240, 192, 64, 0.08);
    color: #f7e6b2;
    font-size: 13px;
}

.contract-extra-panel {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
}

.contract-extra-panel h4 {
    margin: 0 0 6px;
    color: #f0c040;
}

.contract-extra-panel p {
    margin: 0 0 10px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

.contract-extra-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.contract-extra-stats span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #dbeafe;
    font-size: 12px;
}

.contract-milestone-list {
    display: grid;
    gap: 10px;
}

.contract-milestone-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.4fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}

.contract-milestone-row.is-claimable {
    border-color: rgba(240, 192, 64, 0.55);
    background: rgba(240, 192, 64, 0.08);
}

.contract-milestone-row.is-claimed {
    opacity: 0.72;
}

.contract-milestone-row strong,
.contract-milestone-row span {
    display: block;
}

.contract-milestone-row span {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 12px;
}

.contract-milestone-row p {
    margin: 0;
}

@media (max-width: 720px) {
    .contract-milestone-row {
        grid-template-columns: 1fr;
    }
}

.contract-claim-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(240, 192, 64, 0.35);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(82, 59, 37, 0.96), rgba(35, 26, 19, 0.96));
    text-align: center;
}

.contract-claim-copy {
    color: rgba(255, 246, 236, 0.78);
    font-size: 13px;
    margin-bottom: 8px;
}

.contract-claim-digits {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
}

.reveal-digit {
    width: 48px;
    height: 58px;
    border-radius: 8px;
    border: 1px solid rgba(240, 192, 64, 0.5);
    background: rgba(0, 0, 0, 0.22);
    color: #f7ead2;
    font-size: 28px;
    font-family: var(--font-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reveal-digit.clickable {
    cursor: pointer;
    box-shadow: 0 0 18px rgba(240, 192, 64, 0.18);
}

.reveal-digit.revealed {
    background: rgba(240, 192, 64, 0.14);
    color: #ffe8a3;
}

.contract-claim-result {
    min-height: 22px;
    color: #f0c040;
    font-weight: 700;
}

.contract-confirm-btn {
    margin-top: 10px;
}

#skill-tree {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#skill-tree-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

#skill-grid-wrapper {
    flex-grow: 1;
    overflow: auto;
    position: relative;
}

.skill-grid {
    display: none;
    grid-template-columns: repeat(10, minmax(110px, 110px));
    grid-template-rows: repeat(10, 1fr);
    gap: 15px;
    min-height: 500px;
    width: max-content;
    min-width: 100%;
    padding: 15px;
    border: 1px solid var(--color-border);
    background-color: rgba(255,255,255,0.02);
    position: relative;
    align-content: start;
}
.skill-grid.active {
    display: grid;
}

.skill-node {
    min-height: 72px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px 10px;
    background-color: var(--color-parchment);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.skill-node .skill-name {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.skill-node .skill-cost {
    font-size: 12px;
    color: inherit;
    opacity: 0.95;
}

.skill-queue-slot .skill-node {
    width: 46px;
    min-height: 46px;
    padding: 4px;
    gap: 0;
    border-radius: 6px;
}

.skill-queue-slot .skill-node .skill-name,
.skill-queue-slot .skill-node .skill-cost {
    white-space: normal;
    font-size: 12px;
}

/* 状态样式 */
.skill-node.locked {
    background-color: #0F1622;
    color: #4A5A6A;
    border-color: #152030;
}
.skill-node.learnable {
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
}
.skill-node.learned {
    background-color: var(--color-accent);
    color: white;
    border-color: var(--color-wood);
}

.skill-node.active {
    border-color: var(--color-quality-epic);
    box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.14), 0 0 14px rgba(255, 213, 79, 0.24);
    transform: translateY(-2px);
}

/* 技能连线 */
.skill-node[data-prereq-col]::before {
    content: '';
    position: absolute;
    background-color: #2A3A4A;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.skill-node.learned[data-prereq-col]::before {
    background-color: var(--color-quality-epic);
}
.skill-node[data-prereq-col]::before {
    left: calc(-100% - 15px);
    width: calc(100% + 15px);
}

/* ===== 技能树：SVG 连线 + 节点图标 / 角标 + 职业介绍 ===== */
.skill-grid { position: relative; }

.skill-tree-connections {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
.skill-grid > .skill-node { z-index: 1; }

.skill-grid > .skill-inline-detail {
    z-index: 2;
    align-self: start;
    justify-self: start;
}

.skill-inline-detail {
    margin: 4px 0 8px;
    padding: 6px;
    width: min(420px, calc(100vw - 72px));
    max-width: 100%;
    box-sizing: border-box;
    max-height: min(245px, calc(100vh - 190px));
    overflow-y: auto;
}

.skill-inline-detail .item-detail-stack {
    gap: 0;
}

.skill-inline-detail .item-detail-panel {
    padding: 10px 12px;
    border-radius: 5px;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.35;
}

.skill-inline-detail .item-detail-panel h4 {
    margin-bottom: 6px;
    padding-bottom: 6px;
    font-size: 14px;
}

.skill-inline-detail .item-detail-panel p {
    margin: 4px 0;
}

.skill-inline-detail .item-detail-panel hr {
    margin: 7px 0;
}

.skill-inline-detail .inline-detail-actions {
    margin-top: 8px;
}

.skill-inline-detail .inline-detail-actions button {
    padding: 7px 10px;
    font-size: 12px;
}

.skill-tree-connection {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.2s, opacity 0.2s;
}
.skill-tree-connection.locked { stroke: #2A3A4A; stroke-dasharray: 4 4; opacity: 0.65; }
.skill-tree-connection.learnable { stroke: #4CAF50; opacity: 0.9; }
.skill-tree-connection.learned { stroke: var(--color-quality-epic); opacity: 1; }

/* 节点内部：图标 + 角标 */
.skill-node-icon {
    font-size: 22px;
    line-height: 1;
    color: inherit;
    opacity: 0.85;
}
.skill-node-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* 三色状态补强：锁定更暗、可学更亮、已满级金色 */
.skill-node.locked .skill-node-icon { opacity: 0.35; }
.skill-node.learnable {
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.18), transparent 70%);
}
.skill-node.maxed {
    background-color: #4A3A18;
    color: #FFE08A;
    border-color: var(--color-quality-epic);
}
.skill-node.maxed .skill-node-icon { color: var(--color-quality-epic); opacity: 1; }

/* 隐藏旧的 ::before 单线伪连接（被 SVG 取代） */
.skill-node[data-prereq-col]::before { display: none !important; }

/* 职业介绍面板 */
.skill-tree-intro {
    padding: 10px 14px;
    margin: 0;
}
.skill-intro-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.skill-intro-title {
    font-size: 17px;
    font-weight: bold;
    color: var(--color-wood);
}
.skill-intro-subtitle {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
}
.skill-intro-text {
    font-size: 13px;
    color: #b0a890;
    margin: 0;
    line-height: 1.5;
}

/* Tooltip 样式 */
.tooltip-skill-name { color: var(--color-wood); }
.tooltip-requirements-title { color: #EF5350; font-weight: bold; margin-bottom: 5px; }
.tooltip-requirements-list { list-style: none; padding-left: 0; margin: 0; color: #EF5350; }
.tooltip-requirements-list li { margin-bottom: 3px; }
.tooltip-action-prompt { color: #66BB6A; font-weight: bold; text-align: center; margin-top: 10px; }

/* ===== 【v1.12.0】神兵系统 ===== */
.divine-weapon-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.divine-weapon-slot {
    --quality-color: #6a7a8a;
    --quality-rgb: 106, 122, 138;
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 22px 4px 8px;
    text-align: center;
    cursor: pointer;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 0.15s, box-shadow 0.2s;
    overflow: hidden;
    min-width: 0;
    isolation: isolate; /* 隔离 z-index，确保氛围光和粒子不会跑到外层 */
}
.divine-weapon-slot:hover {
    transform: translateY(-2px);
}
.divine-weapon-slot.empty {
    border-style: dashed;
    color: #5a6a7a;
}
.divine-weapon-slot.filled {
    border-color: var(--quality-color);
    box-shadow:
        0 0 12px rgba(var(--quality-rgb), 0.5),
        inset 0 0 20px rgba(var(--quality-rgb), 0.18);
}

/* 品质色变量 */
.divine-weapon-slot[data-quality="common"]    { --quality-color: #A0A0A0; --quality-rgb: 160, 160, 160; }
.divine-weapon-slot[data-quality="rare"]      { --quality-color: #4FA8E8; --quality-rgb:  79, 168, 232; }
.divine-weapon-slot[data-quality="exquisite"] { --quality-color: #B44FD0; --quality-rgb: 180,  79, 208; }
.divine-weapon-slot[data-quality="legendary"] { --quality-color: #FFB030; --quality-rgb: 255, 176,  48; }
.divine-weapon-slot[data-quality="epic"]      { --quality-color: #FFD54F; --quality-rgb: 255, 213,  79; }
.divine-weapon-slot[data-quality="world-shattering"] { --quality-color: #FF5252; --quality-rgb: 255,  82,  82; }

/* 内层氛围光（仅已装备） */
.divine-weapon-slot .slot-aura {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 80% 70% at 50% 110%,
        rgba(var(--quality-rgb), 0.55) 0%,
        rgba(var(--quality-rgb), 0.15) 40%,
        transparent 75%
    );
    animation: slot-aura-pulse 3s ease-in-out infinite;
}
@keyframes slot-aura-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* 火焰粒子：5 个小球从底部向上奔流 */
.divine-weapon-slot .slot-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: 0;
    border-radius: 50%;
    background: var(--quality-color);
    box-shadow:
        0 0 6px var(--quality-color),
        0 0 12px rgba(var(--quality-rgb), 0.7),
        0 0 20px rgba(var(--quality-rgb), 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: slot-particle-flow 2.4s infinite ease-out;
}
.divine-weapon-slot .slot-particle.p1 { left: 12%; animation-delay: 0s;   }
.divine-weapon-slot .slot-particle.p2 { left: 34%; animation-delay: 0.5s; width: 5px; height: 5px; }
.divine-weapon-slot .slot-particle.p3 { left: 52%; animation-delay: 1.0s; width: 7px; height: 7px; }
.divine-weapon-slot .slot-particle.p4 { left: 72%; animation-delay: 1.5s; }
.divine-weapon-slot .slot-particle.p5 { left: 88%; animation-delay: 2.0s; width: 4px; height: 4px; }

@keyframes slot-particle-flow {
    0%   { transform: translateY(0)     scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    60%  { opacity: 0.9; }
    100% { transform: translateY(-110%) scale(1.1); opacity: 0; }
}

/* 史诗级额外更浓的氛围 */
.divine-weapon-slot[data-quality="epic"].filled {
    box-shadow:
        0 0 18px rgba(255, 213, 79, 0.75),
        inset 0 0 28px rgba(255, 213, 79, 0.25);
}
.divine-weapon-slot[data-quality="legendary"].filled {
    box-shadow:
        0 0 14px rgba(255, 176, 48, 0.65),
        inset 0 0 22px rgba(255, 176, 48, 0.22);
}
/* 惊世级红色闪光边框 + 呼吸动画 */
.divine-weapon-slot[data-quality="world-shattering"].filled {
    border-color: #FF5252;
    box-shadow:
        0 0 22px rgba(255, 82, 82, 0.85),
        0 0 44px rgba(255, 82, 82, 0.35),
        inset 0 0 30px rgba(255, 82, 82, 0.30);
    animation: slot-breathe-world-shattering 1.6s ease-in-out infinite;
}
@keyframes slot-breathe-world-shattering {
    0%, 100% {
        box-shadow:
            0 0 18px rgba(255, 82, 82, 0.70),
            0 0 36px rgba(255, 82, 82, 0.25),
            inset 0 0 24px rgba(255, 82, 82, 0.22);
    }
    50% {
        box-shadow:
            0 0 28px rgba(255, 82, 82, 1),
            0 0 56px rgba(255, 82, 82, 0.50),
            inset 0 0 36px rgba(255, 82, 82, 0.40);
        border-color: #ff7a7a;
    }
}

.slot-index-badge {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: bold;
    z-index: 2;
}
.slot-weapon-name {
    font-size: 14px;
    font-weight: bold;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.slot-weapon-quality {
    font-size: 10px;
    opacity: 0.95;
    z-index: 2;
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.slot-empty-icon {
    font-size: 22px;
    line-height: 1;
    opacity: 0.5;
}

/* 品质色（徽章 / 小文字） */
.quality-common     { color: var(--color-quality-common); }
.quality-rare       { color: var(--color-quality-rare); }
.quality-exquisite  { color: var(--color-quality-exquisite); }
.quality-legendary  { color: var(--color-quality-legendary); }
.quality-epic       { color: var(--color-quality-epic); }
.quality-world-shattering { color: var(--color-quality-world-shattering); text-shadow: 0 0 8px rgba(255, 82, 82, 0.5); }

/* 神兵选择弹窗 */
.divine-selector-body { max-height: 70vh; overflow-y: auto; }
.divine-selector-list { display: flex; flex-direction: column; gap: 8px; }
.divine-selector-card {
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: rgba(255, 255, 255, 0.02);
}
.divine-selector-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); }
.divine-selector-card[data-already-equipped="true"] { opacity: 0.6; }
.divine-selector-card.active { border-color: var(--color-quality-epic); box-shadow: 0 0 10px rgba(255, 213, 79, 0.4); }
.divine-selector-card[data-quality="world-shattering"] { border-color: var(--color-quality-world-shattering); box-shadow: 0 0 12px rgba(255, 82, 82, 0.45); }
.divine-selector-card[data-quality="epic"]      { border-color: var(--color-quality-epic); }
.divine-selector-card[data-quality="legendary"] { border-color: var(--color-quality-legendary); }
.divine-selector-card[data-quality="exquisite"] { border-color: var(--color-quality-exquisite); }
.divine-selector-card[data-quality="rare"]      { border-color: var(--color-quality-rare); }
.divine-selector-card[data-quality="common"]    { border-color: var(--color-quality-common); }
.selector-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.weapon-name { font-size: 16px; font-weight: bold; }
.codex-quality-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    font-weight: bold;
}
.weapon-desc { font-size: 13px; color: #b0a890; margin: 4px 0; line-height: 1.5; }
.weapon-skill { font-size: 12px; color: var(--color-accent); margin: 0; }
.weapon-already { font-size: 11px; color: #ff9090; margin: 4px 0 0; }

/* 图鉴流式列表 */
.divine-codex-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.codex-entry {
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
}
.codex-entry[data-quality="world-shattering"] { border-left-color: var(--color-quality-world-shattering); box-shadow: inset 0 0 12px rgba(255, 82, 82, 0.12); }
.codex-entry[data-quality="epic"]      { border-left-color: var(--color-quality-epic); }
.codex-entry[data-quality="legendary"] { border-left-color: var(--color-quality-legendary); }
.codex-entry[data-quality="exquisite"] { border-left-color: var(--color-quality-exquisite); }
.codex-entry[data-quality="rare"]      { border-left-color: var(--color-quality-rare); }
.codex-entry[data-quality="common"]    { border-left-color: var(--color-quality-common); }
.codex-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.codex-name { font-size: 16px; font-weight: bold; }
.codex-desc { font-size: 13px; color: #b0a890; margin: 4px 0; line-height: 1.5; }
.codex-skill { font-size: 12px; color: var(--color-accent); margin: 0; }

/* 战斗日志：神兵文案 + 暴击高亮 */
.combat-log-line.log-divine,
.log-divine {
    color: var(--color-quality-legendary);
    font-style: italic;
}
.combat-log-line.log-critical,
.log-critical {
    color: var(--color-quality-epic);
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255, 213, 79, 0.8), 0 0 12px rgba(255, 213, 79, 0.5);
    letter-spacing: 0.5px;
}

/* ===== 【v1.13.0】神兵武库宝箱：状态栏 + 翻牌动画 ===== */
.divine-box-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.divine-box-status-row .status-cell {
    flex: 1;
    min-width: 140px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.status-label { font-size: 12px; color: #9aa; margin-bottom: 4px; }
.status-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-wood);
}
.pity-bar-wrap {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 6px;
}
.pity-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff9a56, var(--color-quality-epic));
    transition: width 0.4s;
}

.reveal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
.reveal-head .reveal-actions { display: flex; gap: 8px; }

.divine-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    perspective: 1000px;
}

/* 单张卡 —— 3D 翻转 */
.divine-card {
    aspect-ratio: 2 / 3;
    cursor: default;
    animation: card-enter 0.35s ease-out both;
    animation-delay: var(--flip-delay, 0s);
}
@keyframes card-enter {
    0% { transform: translateY(20px) scale(0.85); opacity: 0; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.divine-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.35, 1.4, 0.4, 1);
    transform-style: preserve-3d;
}
.divine-card.flipped .divine-card-inner {
    transform: rotateY(180deg);
}
.divine-card-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}
.divine-card-face.back {
    background: linear-gradient(145deg, #3a2a1a 0%, #1a1410 100%);
    border: 2px solid #5a4020;
    color: #d4a657;
}
.card-back-icon { font-size: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.divine-card-face.front {
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(10, 10, 15, 0.98));
    border: 2px solid var(--color-border);
    color: #fff;
    transform: rotateY(180deg);
}

/* 品质边框与发光（已翻开的卡） */
.divine-card[data-quality="common"]          .divine-card-face.front { border-color: var(--color-quality-common); }
.divine-card[data-quality="rare"]            .divine-card-face.front { border-color: var(--color-quality-rare);   box-shadow: 0 0 8px rgba(79, 168, 232, 0.4); }
.divine-card[data-quality="exquisite"]       .divine-card-face.front { border-color: var(--color-quality-exquisite); box-shadow: 0 0 10px rgba(180, 79, 208, 0.45); }
.divine-card[data-quality="legendary"]       .divine-card-face.front { border-color: var(--color-quality-legendary); box-shadow: 0 0 14px rgba(255, 176, 48, 0.55); }
.divine-card[data-quality="epic"]            .divine-card-face.front { border-color: var(--color-quality-epic);      box-shadow: 0 0 18px rgba(255, 213, 79, 0.7); }
.divine-card[data-quality="world-shattering"].divine-card-face.front,
.divine-card[data-quality="world-shattering"]  .divine-card-face.front { border-color: #ff4a4a; box-shadow: 0 0 20px rgba(255, 74, 74, 0.75); }
.divine-card[data-quality="mysterious"]      .divine-card-face.front { border-color: #8b6a3d; }

/* 闪光粒子层（传说 / 史诗 / 惊世 / 神兵） */
.divine-card.shiny.flipped .divine-card-face.front::before,
.divine-card.shiny.flipped .divine-card-face.front::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 20% 30%,  rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(2px 2px at 50% 85%, rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(2px 2px at 15% 75%, rgba(255,255,255,0.85), transparent 60%);
    animation: shiny-sparkle 1.6s ease-in-out infinite;
}
.divine-card.shiny.flipped .divine-card-face.front::after {
    animation-delay: 0.8s;
    opacity: 0.7;
}
@keyframes shiny-sparkle {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-4px); }
}

/* 神兵卡：额外金红双光环 */
.divine-card.divine-card-weapon.flipped .divine-card-face.front {
    background: radial-gradient(circle at 50% 30%, rgba(255, 200, 80, 0.20) 0%, rgba(30, 30, 40, 0.95) 60%);
}
.divine-card-weapon .card-halo {
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        rgba(255, 213, 79, 0.8),
        rgba(255, 74, 74, 0.6),
        rgba(255, 213, 79, 0.8)
    );
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}
.divine-card.divine-card-weapon.flipped .card-halo {
    opacity: 0.7;
    animation: halo-rotate 4s linear infinite;
}
@keyframes halo-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.card-type-chip {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #d4d4d4;
    margin-bottom: 4px;
}
.card-icon {
    font-size: 28px;
    margin: 6px 0 4px;
    color: #d4a657;
}
.card-title {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.card-quality {
    font-size: 11px;
    margin-top: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}


.enhancement-hub-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 装备强化 - 卡片网格 */
.enhancement-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 12px;
    background: linear-gradient(145deg, rgba(15, 25, 50, 0.8), rgba(10, 18, 35, 0.9));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-dark);
}
.hub-card:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: linear-gradient(145deg, rgba(20, 35, 60, 0.9), rgba(15, 25, 45, 0.95));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hub-card:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.hub-card-icon {
    font-size: 24px;
    color: var(--color-accent);
    margin-bottom: 8px;
}
.hub-card h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--color-text-light);
}
.hub-card p {
    margin: 0;
    font-size: 11px;
    color: #5A6A7A;
    line-height: 1.3;
}

/* 宝石镶嵌面板 */
.socket-panel-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.socket-equip-item {
    padding: 12px;
}
.socket-equip-item h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--color-text-light);
}
.socket-slots-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.socket-slot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px;
    background: rgba(8, 14, 26, 0.6);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-width: 120px;
    flex: 1;
}
.socket-slot-card.filled {
    border-color: var(--color-accent);
}
.socket-slot-card.inactive {
    opacity: 0.68;
    border-style: dashed;
    background: rgba(8, 14, 26, 0.38);
}
.socket-slot-card.inactive .slot-label {
    color: #8f7d6c;
}
@media (max-width: 900px) {
    .socket-slots-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .socket-slots-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
.socket-slot-card .gem-icon {
    font-size: 18px;
    color: var(--color-accent);
}
.socket-slot-card .gem-icon.empty-icon {
    color: #3A4858;
}
.socket-slot-card .gem-name {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: bold;
}
.socket-slot-card .gem-stats {
    font-size: 11px;
    color: #5A6A7A;
}
.socket-slot-card .slot-label {
    font-size: 12px;
    color: #4A5A6A;
}
.socket-slot-card .no-gem-text {
    font-size: 11px;
    color: #3A4858;
}
.socket-slot-card .gem-select {
    width: 100%;
    padding: 4px;
    font-size: 11px;
    background-color: #0D1520;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.socket-slot-card button {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    margin-top: 2px;
}

/* 附魔面板 */
.enchant-panel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.enchant-equip-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 15px;
    gap: 8px;
}
.enchant-item-info {
    width: 100%;
    min-width: 0;
}
.enchant-item-info strong {
    display: block;
    font-size: 13px;
}
.enchant-item-info p {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: #5A6A7A;
}
.enchant-active {
    color: var(--color-accent);
}
.enchant-none {
    color: #3A4858;
}
.enchant-stats {
    font-size: 11px;
    color: #5A6A7A;
}
.enchant-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.enchant-select {
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 12px;
}
.enchant-apply-btn {
    padding: 5px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    width: auto !important;
}
.enchant-apply-btn .enchant-qty {
    font-size: 10px;
    opacity: 0.7;
}
.no-enchant-text {
    font-size: 11px;
    color: #3A4858;
}

@media (max-width: 720px) {
    .enchant-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .enchant-apply-btn {
        width: 100% !important;
    }
}

.enhancement-list, .refine-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.enhancement-item, .refine-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}
.enhancement-item .item-info, .refine-item .item-info {
    flex-grow: 1;
    min-width: 0;
}
.enhancement-item .item-info p, .refine-item .item-info p {
    font-size: 12px;
    color: #8B9BB0;
    margin: 3px 0 0 0;
}
.auxiliary-entry-item {
    align-items: flex-start;
}
.auxiliary-entry-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}
.auxiliary-entry-title strong {
    min-width: 0;
    overflow-wrap: anywhere;
}
.auxiliary-entry-title span {
    flex: 0 0 auto;
    color: #ffe684;
    font-weight: 700;
    white-space: nowrap;
}
.auxiliary-entry-item .item-actions {
    gap: 4px;
}
.auxiliary-entry-item .item-actions button {
    padding: 4px 7px;
    font-size: 12px;
    line-height: 1.2;
}
.auxiliary-feedback {
    min-height: 16px;
    color: var(--color-success, #6ec072) !important;
}
.auxiliary-voucher-line {
    margin: 2px 0 8px;
    color: #d9c99b !important;
}
.auxiliary-voucher-line strong {
    color: #ffe684;
    font-weight: 700;
}
.auxiliary-energy-showcase {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(180px, 0.85fr);
    gap: 14px;
    align-items: center;
    margin: 10px 0 10px;
    padding: 14px;
    border: 1px solid rgba(255, 214, 102, 0.6);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 230, 132, 0.16), rgba(97, 53, 10, 0.28) 45%, rgba(16, 22, 38, 0.86)),
        radial-gradient(circle at 18% 22%, rgba(255, 255, 214, 0.22), transparent 34%);
    box-shadow: 0 0 18px rgba(255, 198, 74, 0.24), inset 0 0 20px rgba(255, 198, 74, 0.08);
    overflow: hidden;
}
.auxiliary-energy-showcase::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.12) 38%, transparent 62%);
    opacity: 0.7;
}
.auxiliary-energy-orb {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #3b2400;
    font-size: 24px;
    background: radial-gradient(circle at 35% 28%, #fff7c0, #ffd15f 44%, #cc7a13 78%);
    box-shadow: 0 0 22px rgba(255, 209, 95, 0.72), inset 0 0 10px rgba(255,255,255,0.42);
}
.auxiliary-energy-main,
.auxiliary-energy-stats {
    position: relative;
    z-index: 1;
}
.auxiliary-energy-kicker {
    font-size: 12px;
    color: #ffe9a3;
    font-weight: 700;
}
.auxiliary-energy-value {
    margin-top: 2px;
    color: #fff3bf;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(255, 208, 87, 0.4);
}
.auxiliary-energy-value span {
    color: #cbbf97;
    font-size: 13px;
    font-weight: 700;
}
.auxiliary-energy-bar {
    height: 9px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(20, 18, 14, 0.72);
    border: 1px solid rgba(255, 214, 102, 0.26);
    overflow: hidden;
}
.auxiliary-energy-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb02e, #fff16a, #7fffd4);
    box-shadow: 0 0 12px rgba(255, 232, 95, 0.58);
}
.auxiliary-energy-note {
    margin-top: 6px;
    color: #d9c99b;
    font-size: 12px;
}
.auxiliary-energy-note strong,
.auxiliary-energy-note span {
    display: block;
}
.auxiliary-energy-note strong {
    color: #ffe684;
    font-size: 12px;
}
.auxiliary-energy-note span {
    margin-top: 2px;
    color: #c8bb94;
    font-size: 10px;
    line-height: 1.35;
}
.auxiliary-energy-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.auxiliary-energy-stats div {
    padding: 8px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255, 214, 102, 0.28);
    background: rgba(9, 12, 20, 0.48);
}
.auxiliary-energy-stats span {
    display: block;
    color: #b7aa87;
    font-size: 11px;
}
.auxiliary-energy-stats strong {
    display: block;
    margin-top: 2px;
    color: #ffe684;
    font-size: 15px;
}
.auxiliary-energy-detail {
    color: #ddc985 !important;
}
.auxiliary-energy-sources {
    margin: 10px 0;
    border: 1px solid rgba(255, 214, 102, 0.28);
    border-radius: 8px;
    background: rgba(11, 14, 23, 0.48);
    overflow: hidden;
}
.auxiliary-energy-sources > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    color: #ead99b;
    list-style: none;
}
.auxiliary-energy-sources > summary::-webkit-details-marker {
    display: none;
}
.auxiliary-energy-sources > summary strong {
    color: #ffe684;
    white-space: nowrap;
}
.auxiliary-energy-source-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}
.auxiliary-energy-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 214, 102, 0.18);
    border-radius: 7px;
    background: rgba(255, 227, 132, 0.06);
}
.auxiliary-energy-source-row span {
    min-width: 0;
    color: #c8bb94;
    overflow-wrap: anywhere;
}

.dream-grand-dao {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(215, 174, 67, 0.45);
    border-radius: 8px;
    background:
        radial-gradient(circle at 82% 10%, rgba(68, 194, 255, 0.15), transparent 30%),
        linear-gradient(135deg, rgba(62, 30, 92, 0.76), rgba(12, 37, 54, 0.9));
}

.dream-grand-dao.locked {
    filter: grayscale(0.55);
    opacity: 0.68;
}

.dream-grand-dao-aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.48;
}

.dream-grand-dao-aura i {
    position: absolute;
    width: 90px;
    height: 90px;
    border: 1px solid rgba(113, 216, 255, 0.3);
    border-radius: 50%;
    animation: dream-grand-dao-orbit 8s linear infinite;
}

.dream-grand-dao-aura i:nth-child(1) { right: -24px; top: -34px; }
.dream-grand-dao-aura i:nth-child(2) { right: 18px; top: 10px; width: 44px; height: 44px; animation-direction: reverse; }
.dream-grand-dao-aura i:nth-child(3) { right: 54px; top: -20px; width: 118px; height: 118px; animation-duration: 13s; }

.dream-grand-dao-head,
.dream-grand-dao-effects,
.dream-grand-dao > p,
.dream-grand-dao > button {
    position: relative;
    z-index: 1;
}

.dream-grand-dao-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.dream-grand-dao-head small { color: #81d7ff; }
.dream-grand-dao-head h3 { margin: 3px 0 0; color: #ffe090; }
.dream-grand-dao-head > strong { color: #ffe090; white-space: nowrap; }
.dream-grand-dao > p { margin: 0; color: var(--color-text-muted); }

.dream-grand-dao-effects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dream-grand-dao-effects span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 6px;
    background: rgba(5, 18, 30, 0.34);
}

.dream-grand-dao-effects small { color: var(--color-text-muted); }
.dream-grand-dao-effects b { color: #b9edff; overflow-wrap: anywhere; }
.dream-grand-dao > button { width: 100%; min-height: 40px; white-space: normal; }

@keyframes dream-grand-dao-orbit {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .dream-grand-dao-effects { grid-template-columns: 1fr; }
    .dream-grand-dao-head { align-items: start; }
}

.dream-dao-flower {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "glyph head"
        "glyph desc"
        "effects effects"
        "action action";
    gap: 10px 14px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(255, 202, 102, 0.38);
    border-radius: 8px;
    background:
        radial-gradient(circle at 8% 18%, rgba(255, 190, 92, 0.14), transparent 26%),
        radial-gradient(circle at 88% 5%, rgba(74, 218, 196, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(34, 28, 38, 0.96), rgba(12, 48, 48, 0.94));
    box-shadow: inset 0 0 28px rgba(255, 218, 134, 0.04);
}

.dream-dao-flower.locked {
    filter: grayscale(0.72);
    opacity: 0.62;
}

.dream-dao-flower-glyph {
    grid-area: glyph;
    position: relative;
    align-self: center;
    justify-self: center;
    width: 66px;
    height: 66px;
    animation: dream-dao-flower-turn 14s linear infinite;
}

.dream-dao-flower-glyph span {
    position: absolute;
    left: 24px;
    top: 3px;
    width: 18px;
    height: 29px;
    border: 1px solid rgba(255, 232, 166, 0.76);
    border-radius: 50% 50% 42% 42%;
    background: linear-gradient(180deg, rgba(255, 204, 112, 0.76), rgba(80, 223, 199, 0.22));
    box-shadow: 0 0 10px rgba(255, 201, 105, 0.2);
    transform-origin: 9px 30px;
}

.dream-dao-flower-glyph span:nth-child(1) { transform: rotate(0deg); }
.dream-dao-flower-glyph span:nth-child(2) { transform: rotate(60deg); }
.dream-dao-flower-glyph span:nth-child(3) { transform: rotate(120deg); }
.dream-dao-flower-glyph span:nth-child(4) { transform: rotate(180deg); }
.dream-dao-flower-glyph span:nth-child(5) { transform: rotate(240deg); }
.dream-dao-flower-glyph span:nth-child(6) { transform: rotate(300deg); }

.dream-dao-flower-glyph i {
    position: absolute;
    left: 23px;
    top: 23px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 241, 189, 0.9);
    border-radius: 50%;
    background: #e9b957;
    box-shadow: 0 0 16px rgba(255, 216, 122, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.46);
}

.dream-dao-flower-head {
    grid-area: head;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.dream-dao-flower-head small { color: #72d9c7; }
.dream-dao-flower-head h3 { margin: 3px 0 0; color: #ffda86; }
.dream-dao-flower-head > strong { color: #ffefbf; white-space: nowrap; }
.dream-dao-flower > p {
    grid-area: desc;
    position: relative;
    z-index: 1;
    min-width: 0;
    margin: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.dream-dao-flower-effects {
    grid-area: effects;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dream-dao-flower-effects span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(114, 217, 199, 0.16);
    border-radius: 6px;
    background: rgba(5, 20, 22, 0.38);
}

.dream-dao-flower-effects small { color: var(--color-text-muted); }
.dream-dao-flower-effects b { color: #fff0bc; overflow-wrap: anywhere; }
.dream-dao-flower > button {
    grid-area: action;
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 40px;
    white-space: normal;
}

@keyframes dream-dao-flower-turn {
    50% { filter: brightness(1.18); }
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .dream-dao-flower {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 9px 10px;
        padding: 12px;
    }
    .dream-dao-flower-glyph { width: 52px; height: 52px; transform: scale(0.78); }
    .dream-dao-flower-head { align-items: start; }
    .dream-dao-flower-effects { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .dream-dao-flower-glyph { animation: none; }
}
.auxiliary-energy-source-row strong {
    color: #fff0a6;
}
.auxiliary-energy-source-row small {
    grid-column: 1 / -1;
    color: #91876c;
}
@media (max-width: 720px) {
    .auxiliary-energy-showcase {
        grid-template-columns: 52px minmax(0, 1fr);
    }
    .auxiliary-energy-orb {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }
    .auxiliary-energy-stats {
        grid-column: 1 / -1;
    }
}
@media (max-width: 420px) {
    .auxiliary-energy-showcase {
        grid-template-columns: 1fr;
    }
    .auxiliary-energy-orb {
        display: none;
    }
    .auxiliary-energy-stats {
        grid-template-columns: 1fr;
    }
}
.auxiliary-bag-disclosure {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auxiliary-bag-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    cursor: pointer;
    list-style: none;
}
.auxiliary-bag-disclosure > summary::-webkit-details-marker {
    display: none;
}
.auxiliary-bag-disclosure > summary::after {
    content: "展开";
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: 12px;
}
.auxiliary-bag-disclosure[open] > summary::after {
    content: "收起";
}
.auxiliary-bag-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.enhancement-item .item-actions, .refine-item .item-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.enhancement-item button, .refine-item button {
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
    flex-shrink: 0;
}

/* 洗炼面板 */
.refine-item .current-prop {
    font-size: 13px;
    color: var(--color-accent);
}

/* 铭刻面板 */
#inscription-select {
    width: 100%;
    padding: 10px;
    margin: 10px 0 15px 0;
    background-color: #0D1520;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: 5px;
}

.more-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
}

/* 次要按钮 */
.secondary-btn {
    background-color: var(--color-wood);
}
.secondary-btn:active {
    background-color: var(--color-header);
}

/* 危险操作按钮 */
.danger-btn {
    background-color: #c62828;
}
.danger-btn:active {
    background-color: #e53935;
}

/* ============================================
   帮助/教程 切换按钮 & 折叠面板
   ============================================ */

.help-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.help-toggle-btn:hover {
    border-color: var(--color-accent);
    background-color: rgba(74, 144, 217, 0.15);
}

.help-toggle-btn:active,
.help-toggle-btn.active {
    background-color: var(--color-accent);
    color: #080E18;
}

.help-panel {
    background-color: rgba(10, 15, 25, 0.95);
    border: 1px solid var(--color-accent);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: 12px 15px;
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-dark);
    animation: helpSlideDown 0.2s ease-out;
}

.help-panel.hidden {
    display: none;
}

.help-panel p {
    margin: 0 0 6px 0;
}

.help-panel ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
}

.help-panel li {
    margin-bottom: 3px;
}

.help-panel strong {
    color: var(--color-accent);
}

.skill-grid.active,
.synthesis-attributes-preview,
.synthesis-result-preview {
    transform-origin: top center;
    animation: dropdown-slide-down 0.24s ease-out;
}

.synthesis-result-modal {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: min(440px, calc(100vw - 56px));
}

.synthesis-result-core {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 116px;
}

.synthesis-result-orbit {
    position: absolute;
    width: 108px;
    height: 108px;
    border: 1px solid rgba(183, 150, 104, 0.42);
    border-radius: 50%;
    animation: synthesis-orbit-spin 2.4s linear infinite;
}

.synthesis-result-orbit::before,
.synthesis-result-orbit::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E7C27A;
    box-shadow: 0 0 14px rgba(231, 194, 122, 0.8);
}

.synthesis-result-orbit::before {
    top: -4px;
    left: 50%;
}

.synthesis-result-orbit::after {
    right: -4px;
    top: 50%;
}

.synthesis-result-stone {
    position: relative;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(183, 150, 104, 0.7);
    border-radius: 12px;
    color: var(--color-text-light);
    font-size: 30px;
    animation: synthesis-stone-arrive 0.62s cubic-bezier(0.2, 0.9, 0.25, 1.18), synthesis-stone-breathe 1.8s ease-in-out 0.62s infinite;
}

.synthesis-result-title {
    text-align: center;
}

.synthesis-result-title span {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
}

.synthesis-result-title strong {
    display: block;
    margin-top: 4px;
    color: var(--color-quality-epic);
    font-size: 18px;
}

.synthesis-result-attrs {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.synthesis-result-attr {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 6px;
    background: rgba(255, 246, 236, 0.05);
    opacity: 0;
    transform: translateY(10px);
    animation: synthesis-attr-reveal 0.42s ease-out forwards;
    animation-delay: var(--attr-delay, 0ms);
}

.synthesis-result-attr-index {
    color: var(--color-text-muted);
    font-size: 12px;
}

.synthesis-result-attr-name {
    min-width: 0;
    color: var(--color-text-light);
    font-weight: 700;
}

.synthesis-result-attr strong {
    color: #E7C27A;
}

.synthesis-result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.synthesis-result-actions button {
    padding: 9px 10px;
    font-size: 14px;
}

@keyframes synthesis-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes synthesis-stone-arrive {
    from { opacity: 0; transform: scale(0.55) rotate(-12deg); filter: blur(3px); }
    to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

@keyframes synthesis-stone-breathe {
    0%, 100% { box-shadow: 0 0 12px rgba(231, 194, 122, 0.28); }
    50% { box-shadow: 0 0 24px rgba(231, 194, 122, 0.52); }
}

@keyframes synthesis-attr-reveal {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes helpSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dropdown-slide-down {
    0% {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes dropdown-slide-up {
    0% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.96);
    }
}

.view-help-header {
    text-align: right;
    margin-bottom: 4px;
}

/* 新版手机副本页 */
.dungeon-mode-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dungeon-mode-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dungeon-mode-status span {
    color: #8B9BB0;
    font-size: 12px;
}

.dungeon-mode-status strong {
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.1;
}

.dungeon-mode-switch {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.26);
}

.dungeon-mode-switch button {
    margin: 0;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #8B9BB0;
}

.dungeon-mode-switch button.active {
    background: var(--color-wood);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.dungeon-new-shell {
    max-width: 480px;
    margin: 0 auto;
}

.dungeon-new-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 8px 0 10px;
    background: var(--color-background);
    scrollbar-width: none;
}

.dungeon-new-tabs::-webkit-scrollbar {
    display: none;
}

.dungeon-new-tabs button {
    flex: 0 0 auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-parchment);
    color: var(--color-text);
    font-size: 13px;
    white-space: nowrap;
}

.dungeon-new-tabs button.active {
    background: var(--color-wood);
    border-color: var(--color-wood);
    color: #fff;
    font-weight: 700;
}

.dungeon-new-content {
    display: grid;
    gap: 10px;
}

.dungeon-new-section {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-parchment);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.dungeon-new-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 8px;
}

.dungeon-new-section-head h3 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-wood);
    font-size: 17px;
    line-height: 1.25;
}

.dungeon-new-section-head span {
    flex-shrink: 0;
    color: #8B9BB0;
    font-size: 12px;
}

.dungeon-new-card-list,
.dungeon-new-stage-list,
.dungeon-new-source-list {
    display: grid;
    gap: 9px;
    padding: 0 12px 12px;
}

.dungeon-new-action-card,
.dungeon-new-source-item,
.dungeon-new-empty {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.42);
    padding: 11px;
}

.dungeon-new-action-card {
    display: grid;
    gap: 8px;
}

.dungeon-new-action-card h4,
.dungeon-new-source-item h4,
.dungeon-new-group-title h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.35;
}

.dungeon-new-action-card p,
.dungeon-new-source-item p,
.dungeon-new-empty {
    margin: 0;
    color: #8B9BB0;
    font-size: 13px;
    line-height: 1.55;
}

.dungeon-new-badge,
.dungeon-new-source-item span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(126, 91, 52, 0.12);
    color: var(--color-wood);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.dungeon-new-badge.blue {
    background: rgba(87, 120, 170, 0.16);
    color: #5a78aa;
}

.dungeon-new-badge.gold {
    background: rgba(196, 143, 48, 0.16);
    color: #b78325;
}

.dungeon-new-chip-row,
.dungeon-new-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dungeon-new-chip-row span {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 7px;
    color: #6B7D8F;
    background: var(--color-parchment);
    font-size: 12px;
    line-height: 1.25;
}

.dungeon-new-actions button {
    min-height: 34px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.dungeon-new-story-picker {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px 12px;
    scrollbar-width: none;
}

.dungeon-new-story-picker::-webkit-scrollbar {
    display: none;
}

.dungeon-new-story-picker button {
    flex: 0 0 154px;
    min-height: 74px;
    margin: 0;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.36);
    color: var(--color-text);
    text-align: left;
    display: grid;
    gap: 5px;
}

.dungeon-new-story-picker button.active {
    border-color: rgba(126, 91, 52, 0.55);
    background: rgba(126, 91, 52, 0.12);
}

.dungeon-new-story-picker strong,
.dungeon-new-story-picker span {
    display: block;
    min-width: 0;
}

.dungeon-new-story-picker strong {
    font-size: 13px;
    line-height: 1.35;
}

.dungeon-new-story-picker span {
    color: #8B9BB0;
    font-size: 12px;
}

.dungeon-new-stage-group {
    display: grid;
    gap: 8px;
}

.dungeon-new-group-title {
    padding: 0 12px;
    display: grid;
    gap: 3px;
}

.dungeon-new-group-title span {
    color: #8B9BB0;
    font-size: 12px;
}

.dungeon-new-shell .dungeon-stage {
    margin: 0;
    padding: 11px;
    border-radius: 10px;
}

.dungeon-new-shell .dungeon-stage .stage-info h4 {
    font-size: 15px;
    line-height: 1.35;
}

.dungeon-new-shell .dungeon-stage .stage-desc,
.dungeon-new-shell .dungeon-stage p,
.dungeon-new-shell .dungeon-stage .possible-loot {
    font-size: 12px;
    line-height: 1.55;
}

.dungeon-new-shell .dungeon-stage .stage-details {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.dungeon-new-shell .dungeon-stage button,
.dungeon-new-shell .stage-entry-btn,
.dungeon-new-shell .start-dungeon-btn {
    width: 100%;
    min-height: 36px;
    margin-top: 8px;
}

.dungeon-new-shell .wealth-path-tri-card .wp-tri-grid {
    grid-template-columns: 1fr;
}

.dungeon-new-shell .platinum-raid-stage.dungeon-stage .start-dungeon-btn {
    width: 100%;
    margin: 8px 0 0;
}

.dungeon-new-source-search {
    width: calc(100% - 24px);
    margin: 0 12px 10px;
    padding: 10px 11px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--color-text);
}

.dungeon-new-source-item {
    display: grid;
    gap: 6px;
}

@media (min-width: 520px) {
    .dungeon-new-shell {
        border-left: 1px solid rgba(183, 150, 104, 0.24);
        border-right: 1px solid rgba(183, 150, 104, 0.24);
        padding: 0 8px;
    }
}

@media (max-width: 420px) {
    .dungeon-mode-toolbar {
        align-items: stretch;
    }

    .dungeon-mode-switch button {
        padding-inline: 8px;
    }

    .dungeon-new-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

/* ============================================
   教程弹窗 body 样式
   ============================================ */
.help-modal-body {
    max-height: 62vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-dark);
}
.help-modal-body p { margin: 0 0 8px 0; }
.help-modal-body ul { margin: 4px 0 0 0; padding-left: 20px; }
.help-modal-body li { margin-bottom: 4px; }
.help-modal-body strong { color: var(--color-accent); }

/* ============================================================
   VISUAL EFFECTS (v1.8 视觉特效系统)
   ============================================================ */

/* --- 1. 点击星尘粒子 --- */
.sparkle-particle {
    position: fixed;
    pointer-events: none;
    width: 5px;
    height: 5px;
    background: var(--color-quality-epic);
    border-radius: 50%;
    z-index: 99999;
    box-shadow: 0 0 4px rgba(255, 213, 79, 0.6);
    animation: sparkle-fly 0.55s ease-out forwards;
}
@keyframes sparkle-fly {
    0% { opacity: 1; transform: scale(1) translate(0, 0); }
    100% { opacity: 0; transform: scale(0.2) translate(var(--tx, 0px), var(--ty, 0px)); }
}

/* --- 2. 高品质掉落边框闪光 --- */
.quality-border-flash {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9998;
    border: 3px solid transparent;
    border-radius: 0;
    animation: border-flash-anim 1.5s ease-out forwards;
}
.quality-border-flash.flash-legendary {
    border-color: var(--color-quality-legendary);
    box-shadow: inset 0 0 40px rgba(255, 176, 48, 0.25);
}
.quality-border-flash.flash-epic {
    border-color: var(--color-quality-epic);
    box-shadow: inset 0 0 50px rgba(255, 213, 79, 0.3);
}
.quality-border-flash.flash-world-shattering {
    border-color: var(--color-quality-world-shattering);
    box-shadow: inset 0 0 60px rgba(255, 82, 82, 0.3);
}
@keyframes border-flash-anim {
    0% { opacity: 0; }
    12% { opacity: 1; }
    30% { opacity: 0.7; }
    50% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* --- 3. 通知栏滑入动画 --- */
.notif-slide-in {
    animation: notif-slide 0.35s ease-out;
}
@keyframes notif-slide {
    from { transform: translateX(-15px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* --- 4. 模态框弹出动画 --- */
#modal-overlay:not(.hidden) #modal-content {
    animation: modal-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-pop-in {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
#modal-overlay:not(.hidden) {
    animation: modal-overlay-fade 0.2s ease-out;
}
@keyframes modal-overlay-fade {
    from { background-color: rgba(0, 0, 0, 0); }
    to   { background-color: rgba(0, 0, 0, 0.7); }
}

/* --- 5. 升级庆祝特效 --- */
.levelup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: radial-gradient(ellipse at center, rgba(255,213,79,0.08) 0%, transparent 70%);
    animation: levelup-fade-out 2.2s ease-out forwards;
}
.levelup-text {
    font-size: 36px;
    font-weight: bold;
    color: var(--color-quality-epic);
    text-shadow: 0 0 20px rgba(255, 213, 79, 0.7), 0 0 40px rgba(255, 213, 79, 0.3);
    animation: levelup-text-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 4px;
}
.levelup-level {
    font-size: 22px;
    color: var(--color-text-light);
    text-shadow: 0 0 10px rgba(255, 213, 79, 0.4);
    animation: levelup-text-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes levelup-fade-out {
    0% { opacity: 1; }
    65% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes levelup-text-pop {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

/* --- 6. 按钮点击涟漪 --- */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    animation: ripple-expand 0.5s ease-out forwards;
    pointer-events: none;
}
@keyframes ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

/* --- 8. 经验条流光 --- */
.xp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.2) 60%,
        transparent 100%
    );
    animation: xp-shimmer 2.5s ease-in-out infinite;
    border-radius: inherit;
}
@keyframes xp-shimmer {
    0% { left: -60%; }
    100% { left: 120%; }
}

/* --- 9. 品质文字微光 (史诗/创世品质自动脉冲) --- */
.color-quality-epic {
    animation: text-glow-epic 2.5s ease-in-out infinite;
}
.color-quality-world-shattering {
    animation: text-glow-ws 2s ease-in-out infinite;
}
.color-quality-fentian-world-shattering {
    animation: text-glow-fentian 1.8s ease-in-out infinite;
    animation-play-state: paused;
}
.quality-bg-fentian-world-shattering.is-motion-visible .color-quality-fentian-world-shattering,
.fentian-exclusive-equipment-effect.is-motion-visible .color-quality-fentian-world-shattering {
    animation-play-state: running;
}
@keyframes text-glow-epic {
    0%, 100% { text-shadow: 0 0 3px rgba(255, 213, 79, 0.3); }
    50% { text-shadow: 0 0 8px rgba(255, 213, 79, 0.6), 0 0 16px rgba(255, 213, 79, 0.2); }
}
@keyframes text-glow-ws {
    0%, 100% { text-shadow: 0 0 3px rgba(255, 82, 82, 0.3); }
    50% { text-shadow: 0 0 10px rgba(255, 82, 82, 0.7), 0 0 20px rgba(255, 82, 82, 0.3); }
}
@keyframes text-glow-fentian {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 111, 48, .42), 0 0 10px rgba(255, 185, 80, .18); }
    50% { text-shadow: 0 0 10px rgba(255, 111, 48, .82), 0 0 21px rgba(255, 185, 80, .38); }
}

/* --- 10. 视图切换过渡 --- */
.view-fade-in {
    animation: view-fade-enter 0.3s ease-out;
}
@keyframes view-fade-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 11. 高品质装备背景渐变 --- */
.inventory-item.quality-bg-legendary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(243,188,99,0.16) 0%, rgba(243,188,99,0.07) 28%, transparent 68%);
    border-left: 2px solid var(--color-quality-legendary);
    box-shadow: inset 0 0 0 1px rgba(243,188,99,0.08);
}
.inventory-item.quality-bg-epic {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,228,138,0.20) 0%, rgba(255,228,138,0.09) 28%, transparent 70%);
    border-left: 2px solid var(--color-quality-epic);
    box-shadow: inset 0 0 0 1px rgba(255,228,138,0.12), 0 0 18px rgba(255,228,138,0.06);
    animation: epic-item-breathe 3.2s ease-in-out infinite;
}
.inventory-item.quality-bg-epic::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 32%,
        rgba(255, 248, 214, 0.00) 40%,
        rgba(255, 248, 214, 0.10) 47%,
        rgba(255, 248, 214, 0.28) 50%,
        rgba(255, 248, 214, 0.10) 53%,
        rgba(255, 248, 214, 0.00) 60%,
        transparent 68%,
        transparent 100%
    );
    transform: translateX(-140%);
    animation: epic-item-sheen 3.6s ease-in-out infinite;
}
.inventory-item.quality-bg-epic > * {
    position: relative;
    z-index: 1;
}
.inventory-item.quality-bg-world-shattering {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(255, 82, 82, 0.28) 0%,
            rgba(255, 130, 130, 0.18) 18%,
            rgba(180, 79, 208, 0.14) 38%,
            rgba(255, 213, 79, 0.14) 58%,
            transparent 78%);
    border-left: 3px solid var(--color-quality-world-shattering);
    box-shadow:
        inset 0 0 0 1px rgba(255, 82, 82, 0.22),
        0 0 20px rgba(255, 82, 82, 0.18);
    animation: world-shattering-breathe 2.4s ease-in-out infinite;
}
/* 彩色斜扫光 */
.inventory-item.quality-bg-world-shattering::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 120, 120, 0.18) 42%,
        rgba(255, 220, 130, 0.40) 50%,
        rgba(180, 120, 255, 0.22) 58%,
        transparent 70%,
        transparent 100%
    );
    transform: translateX(-140%);
    animation: world-shattering-sheen 2.8s ease-in-out infinite;
    z-index: 0;
}
/* 多色小火花层 */
.inventory-item.quality-bg-world-shattering::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 15% 40%, rgba(255, 120, 120, 0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 20%, rgba(255, 220, 130, 0.9), transparent 60%),
        radial-gradient(2px 2px at 65% 72%, rgba(180, 120, 255, 0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 82% 35%, rgba(255, 150, 150, 0.9), transparent 60%),
        radial-gradient(2px 2px at 28% 82%, rgba(255, 200, 255, 0.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 85%, rgba(255, 180, 80, 0.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 255, 255, 0.9), transparent 60%);
    animation: world-shattering-spark 2s ease-in-out infinite;
    mix-blend-mode: screen;
    z-index: 0;
}
.inventory-item.quality-bg-world-shattering > * {
    position: relative;
    z-index: 1;
}
.inventory-item.quality-bg-fentian-world-shattering {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(116, 25, 20, .72), rgba(91, 48, 18, .44) 38%, rgba(255, 187, 70, .13) 62%, transparent 84%);
    border-left: 3px solid var(--color-quality-fentian-world-shattering);
    box-shadow: inset 0 0 0 1px rgba(255, 148, 69, .22), 0 0 20px rgba(255, 85, 40, .18);
    animation: world-shattering-breathe 2.1s ease-in-out infinite;
    animation-play-state: paused;
}
.inventory-item.quality-bg-fentian-world-shattering.is-motion-visible {
    animation-play-state: running;
}
.inventory-item.quality-bg-fentian-world-shattering::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 29%, rgba(255, 128, 59, .18) 42%, rgba(255, 225, 145, .48) 50%, rgba(255, 116, 50, .16) 59%, transparent 71%);
    transform: translateX(-140%);
    animation: world-shattering-sheen 2.5s ease-in-out infinite;
    animation-play-state: paused;
}
.inventory-item.quality-bg-fentian-world-shattering.is-motion-visible::before {
    animation-play-state: running;
}
.inventory-item.quality-bg-fentian-world-shattering > * { position: relative; z-index: 1; }
.inventory-item.quality-bg-mysterious {
    background: linear-gradient(135deg, rgba(158,123,107,0.1) 0%, transparent 60%);
    border-left: 2px solid var(--color-quality-mysterious);
}

@keyframes world-shattering-breathe {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 82, 82, 0.22),
            0 0 18px rgba(255, 82, 82, 0.15);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 140, 140, 0.4),
            0 0 30px rgba(255, 82, 82, 0.35),
            0 0 48px rgba(255, 100, 200, 0.22);
    }
}
@keyframes world-shattering-sheen {
    0%, 48%  { transform: translateX(-140%); opacity: 0; }
    56%      { opacity: 1; }
    80%      { transform: translateX(140%); opacity: 1; }
    100%     { transform: translateX(140%); opacity: 0; }
}
@keyframes world-shattering-spark {
    0%, 100% { opacity: 0.25; transform: translateY(0)    scale(0.92); }
    50%      { opacity: 1;    transform: translateY(-3px) scale(1.05); }
}

@keyframes epic-item-breathe {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(255,228,138,0.10), 0 0 12px rgba(255,228,138,0.04);
    }
    50% {
        box-shadow: inset 0 0 0 1px rgba(255,228,138,0.18), 0 0 22px rgba(255,228,138,0.10);
    }
}

@keyframes epic-item-sheen {
    0%, 55% {
        transform: translateX(-140%);
        opacity: 0;
    }
    62% {
        opacity: 1;
    }
    82% {
        transform: translateX(140%);
        opacity: 1;
    }
    100% {
        transform: translateX(140%);
        opacity: 0;
    }
}

/* --- 12. 更新日志样式 --- */
.changelog-container {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 8px;
}
.changelog-contact-card {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(251, 191, 36, 0.32);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(79, 168, 232, 0.08));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.changelog-contact-title {
    color: #fbbf24;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
}
.changelog-contact-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.changelog-contact-items span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    font-size: 13px;
}
.changelog-contact-items strong {
    color: #93c5fd;
}
.changelog-version {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.changelog-version:last-child {
    border-bottom: none;
}
.changelog-version h4 {
    color: var(--color-quality-legendary);
    margin-bottom: 6px;
    font-size: 14px;
}
.changelog-current {
    padding: 10px 10px 12px;
    background: rgba(79, 168, 232, 0.08);
    border: 1px solid rgba(79, 168, 232, 0.18);
    border-radius: 8px;
}
.changelog-current h4 {
    color: var(--color-quality-epic);
}
.changelog-version ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.changelog-version li {
    padding: 3px 0 3px 16px;
    position: relative;
    color: #b0b8c8;
    font-size: 13px;
    line-height: 1.5;
}
.changelog-version li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: var(--accent-color, #4FA8E8);
}

/* --- 13. 战斗统计面板样式 --- */
.combat-stats-list {
    max-height: 55vh;
    overflow-y: auto;
}
.combat-stats-entry {
    padding: 10px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.combat-stats-entry:hover {
    background: rgba(255,255,255,0.06);
}
.combat-stats-entry .entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.combat-stats-entry .entry-header .result-win { color: #4caf50; }
.combat-stats-entry .entry-header .result-lose { color: #ff5252; }
.combat-stats-entry .entry-header .result-draw { color: #f0b25a; }
.combat-stats-detail {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.combat-stats-entry.expanded .combat-stats-detail {
    display: block;
}
.damage-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}
.damage-bar-row .skill-name {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 8px;
    color: #8899aa;
}
.damage-bar-row .bar-track {
    flex: 1;
    height: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.damage-bar-row .bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.damage-bar-row .bar-fill.dealt { background: #4FA8E8; }
.damage-bar-row .bar-fill.taken { background: #ff5252; }
.damage-bar-row .bar-value {
    width: 110px;
    flex-shrink: 0;
    text-align: right;
    padding-left: 6px;
    color: #aab4c2;
}
.combat-stats-overall {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(79,168,232,0.28);
    border-radius: 6px;
    background: rgba(79,168,232,0.08);
}
.combat-stats-overall h4 {
    margin: 0 0 6px;
    color: #9fd4ff;
    font-size: 14px;
}

.training-dummy-options {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(79,168,232,0.28);
    border-radius: 8px;
    background: rgba(8, 14, 26, 0.52);
}
.training-dummy-option-row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}
.training-dummy-options label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--color-text-muted);
    font-size: 12px;
}
.training-dummy-options input[type="number"] {
    width: 100%;
    margin: 0;
    padding: 7px 8px;
    font-size: 13px;
}
.training-dummy-options .training-dummy-check {
    flex-direction: row;
    align-items: center;
    min-height: 34px;
    color: var(--color-text-light);
}
.training-dummy-options .training-dummy-check input {
    width: auto;
    margin: 0;
}
.training-dummy-options p {
    margin: 8px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
@media (max-width: 560px) {
    .training-dummy-option-row {
        grid-template-columns: 1fr;
    }
}

/* --- 14. 每日礼包样式 --- */
.gift-pack-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.gift-pack {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    text-align: center;
}
.gift-pack-title {
    font-weight: bold;
    font-size: 14px;
}
.gift-pack-desc {
    font-size: 12px;
    color: #8899aa;
}
.gift-pack button {
    margin-top: 4px;
    width: 100%;
}

/* ============================================================
   THEME OVERRIDE (v2.0 Dark Academia / 私人书房)
   目标：暗色、直观、克制、纯前端、无服务端开销
   ============================================================ */

:root {
    --color-background: #16110E;
    --color-parchment: #261D18;
    --color-wood: #B79668;
    --color-text-dark: #DDD0BE;
    --color-text-light: #F3E9DB;
    --color-text: #DDD0BE;
    --color-text-muted: #A4937E;
    --color-border: #49382D;
    --color-accent: #8C9DAC;
    --color-header: #120D0B;
    --box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);

    --color-quality-common: #A49A8B;
    --color-quality-rare: #94A8B8;
    --color-quality-exquisite: #A48FB6;
    --color-quality-legendary: #F3BC63;
    --color-quality-epic: #FFE48A;
    --color-quality-mysterious: #8F7061;
    --color-quality-world-shattering: #B86F68;
    --accent-color: #8C9DAC;

    --color-surface: #2F241D;
    --color-surface-soft: #392C23;
    --color-border-soft: #65503F;
    --color-success: #93A783;
    --color-danger: #B9796E;
    --color-warning: #C4A166;
    --color-info: #93A8B6;
    --color-flow: #A78DC0;
}

body {
    background:
        radial-gradient(circle at top, rgba(183, 150, 104, 0.08), transparent 26%),
        radial-gradient(circle at 20% 20%, rgba(93, 74, 58, 0.18), transparent 36%),
        linear-gradient(180deg, #1A1411 0%, #15100D 45%, #110C09 100%);
    color: var(--color-text-dark);
}

#top-bar,
#notification-bar {
    background:
        linear-gradient(180deg, rgba(28, 20, 16, 0.98) 0%, rgba(18, 13, 11, 0.98) 100%);
    border-color: var(--color-border-soft);
}

#notification-history {
    background:
        linear-gradient(180deg, rgba(22, 16, 13, 0.96), rgba(17, 12, 10, 0.92));
}

#main-content-section {
    background:
        linear-gradient(rgba(21, 15, 12, 0.94), rgba(21, 15, 12, 0.97)),
        radial-gradient(circle at top, rgba(183, 150, 104, 0.04), transparent 30%);
}

.panel,
.dungeon-stage,
.dungeon-chapter-wrapper,
.item-detail-panel,
#tooltip,
.tooltip-panel,
#guardian-stone-details,
.achievement-item,
.contract-item,
.profession-item,
.shop-item,
#achievement-shop .shop-item,
.effect-item,
.bonus-item,
.modal-list-item,
.socket-slot-card,
.combat-stats-entry,
.reward-tier,
.mail-item,
.character-list-item {
    background:
        linear-gradient(180deg, rgba(58, 44, 34, 0.78) 0%, rgba(36, 27, 22, 0.94) 100%);
    border-color: var(--color-border-soft);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.panel,
.dungeon-stage,
.dungeon-chapter-wrapper,
#tooltip,
.tooltip-panel,
#guardian-stone-details,
.item-detail-panel {
    border-width: 1px;
}

.panel h3, .panel h4,
#guardian-stone-details h3,
#tooltip h4,
.tooltip-panel h4,
.dungeon-category h2,
.option-group h5 {
    color: var(--color-wood);
    border-bottom-color: rgba(183, 150, 104, 0.24);
}

button,
.spin-btn,
.secondary-btn,
.danger-btn {
    background: linear-gradient(180deg, #5C493A 0%, #443428 100%);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-light);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

button:hover:not(:disabled),
.spin-btn:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.danger-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #675140 0%, #4C392D 100%);
    border-color: var(--color-wood);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(0, 0, 0, 0.24);
}

button:active,
.spin-btn:active,
.secondary-btn:active,
.danger-btn:active {
    background: linear-gradient(180deg, #473528 0%, #382920 100%);
    transform: translateY(0);
}

button:disabled,
.spin-btn:disabled {
    background: linear-gradient(180deg, #30251D 0%, #271D17 100%);
    border-color: #44362B;
    color: #897A68;
    box-shadow: none;
}

.secondary-btn {
    background: linear-gradient(180deg, #4E443B 0%, #3B322B 100%);
}

.danger-btn {
    background: linear-gradient(180deg, #73473B 0%, #56342C 100%);
    border-color: #936354;
}

input[type="text"],
input[type="password"],
input[type="number"],
.mail-send select,
.babel-challenge-controls select,
#inscription-select,
.socket-slot-card .gem-select {
    background: rgba(18, 13, 11, 0.9);
    border-color: var(--color-border-soft);
    color: var(--color-text-dark);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
}

input::placeholder {
    color: #7E6F60;
}

.inventory-tabs {
    border-bottom-color: rgba(183, 150, 104, 0.22);
}

.tab-btn {
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.tab-btn:hover {
    color: var(--color-text-light);
}

.tab-btn.active {
    color: var(--color-text-light);
    border-bottom-color: var(--color-wood);
    background: linear-gradient(180deg, transparent 0%, rgba(183, 150, 104, 0.12) 100%);
}

/* 主页按钮主题 */
.home-nav-btn {
    background: linear-gradient(145deg, rgba(52, 39, 30, 0.86), rgba(29, 22, 18, 0.95));
    border-color: var(--color-border-soft);
}
.home-nav-btn:hover {
    border-color: var(--color-wood);
    background: linear-gradient(145deg, rgba(61, 46, 35, 0.9), rgba(35, 27, 21, 0.97));
}
.home-nav-btn i { color: var(--color-accent); }

/* 顶部下拉菜单主题 */
#top-bar-dropdown,
#top-bar-material-dropdown,
#top-bar-attribute-source-dropdown {
    background: linear-gradient(180deg, rgba(44, 33, 26, 0.98), rgba(29, 22, 18, 0.99));
    border-color: var(--color-border-soft);
}
#top-bar-dropdown a:hover { background: rgba(183, 150, 104, 0.08); }

.inventory-item,
.achievement-item,
.contract-item,
.profession-item,
.shop-item-card,
.effect-item,
.modal-list-item,
.socket-slot-card,
.combat-stats-entry,
.reward-tier,
.battle-contract .panel {
    border-color: rgba(183, 150, 104, 0.16);
}

.inventory-item,
.shop-item-card,
.effect-item,
.modal-list-item,
.combat-stats-entry,
.hub-card,
.wheel-slot,
.hexagon,
.skill-node {
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.inventory-item.is-expandable:active,
.modal-list-item:hover,
.combat-stats-entry:hover {
    background-color: rgba(183, 150, 104, 0.08);
}

.item-icon,
.item-icon-badge,
.item-card-icon-badge,
.slot-icon-container {
    background-color: rgba(255, 248, 240, 0.06);
    border-color: rgba(183, 150, 104, 0.16);
}

.slot-icon-text,
.item-icon-badge,
.item-card-icon-badge,
.socket-slot-card .gem-icon.empty-icon,
.socket-slot-card .no-gem-text,
.enchant-none {
    color: #8F7D6C;
}

.slot-icon-text.empty {
    color: #66584A;
}

.batch-use-controls .batch-use-input,
.batch-use-controls .batch-use-btn,
.profession-summary,
#shop-special .shop-actions-header,
.combat-log-header,
.balance-summary,
.babel-status,
.contract-status,
.mirror-status-bar,
.enhancement-ui, .upgrade-ui, .heart-guard-ui, .synthesis-ui {
    background: rgba(255, 246, 236, 0.05);
    border-color: rgba(183, 150, 104, 0.14);
}

#combat-view.active {
    background:
        linear-gradient(180deg, rgba(16, 12, 10, 0.98) 0%, rgba(12, 8, 7, 1) 100%);
}

#combat-view[class*="babel-combat-tone-"].active {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 12%, var(--babel-combat-core), transparent 34%),
        linear-gradient(90deg, var(--babel-combat-side), transparent 27%, transparent 73%, var(--babel-combat-side)),
        linear-gradient(180deg, rgba(16, 12, 10, 0.98) 0%, rgba(9, 6, 6, 1) 100%);
}

#combat-view[class*="babel-combat-tone-"].active::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 44px var(--babel-combat-side),
        inset 0 0 18px var(--babel-combat-core);
    animation: babel-combat-pulse 2.4s ease-in-out infinite;
    z-index: 0;
}

#combat-view[class*="babel-combat-tone-"].active #combat-arena {
    position: relative;
    z-index: 1;
}

#combat-view[class*="babel-combat-tone-"] .combatant-panel,
#combat-view[class*="babel-combat-tone-"] #combat-log-container {
    border-color: var(--babel-combat-edge);
    box-shadow: inset 0 0 14px var(--babel-combat-panel), 0 0 14px var(--babel-combat-glow);
}

#combat-view.babel-combat-tone-Hard {
    --babel-combat-edge: rgba(122, 24, 28, 0.88);
    --babel-combat-side: rgba(86, 12, 18, 0.42);
    --babel-combat-core: rgba(178, 42, 46, 0.24);
    --babel-combat-panel: rgba(86, 12, 18, 0.28);
    --babel-combat-glow: rgba(78, 10, 16, 0.28);
}

#combat-view.babel-combat-tone-Nightmare {
    --babel-combat-edge: rgba(174, 15, 24, 0.9);
    --babel-combat-side: rgba(0, 0, 0, 0.72);
    --babel-combat-core: rgba(188, 0, 18, 0.25);
    --babel-combat-panel: rgba(126, 0, 14, 0.24);
    --babel-combat-glow: rgba(150, 0, 18, 0.34);
}

#combat-view.babel-combat-tone-Legendary {
    --babel-combat-edge: rgba(173, 126, 34, 0.9);
    --babel-combat-side: rgba(117, 77, 18, 0.42);
    --babel-combat-core: rgba(215, 156, 43, 0.23);
    --babel-combat-panel: rgba(138, 89, 20, 0.24);
    --babel-combat-glow: rgba(158, 104, 18, 0.3);
}

#combat-view.babel-combat-tone-Epic {
    --babel-combat-edge: rgba(255, 210, 72, 0.95);
    --babel-combat-side: rgba(214, 163, 35, 0.34);
    --babel-combat-core: rgba(255, 232, 126, 0.25);
    --babel-combat-panel: rgba(255, 196, 37, 0.22);
    --babel-combat-glow: rgba(255, 205, 55, 0.34);
}

#combat-view.babel-combat-tone-Mythical {
    --babel-combat-edge: rgba(125, 245, 255, 0.94);
    --babel-combat-side: rgba(113, 84, 255, 0.32);
    --babel-combat-core: rgba(255, 104, 214, 0.22);
    --babel-combat-panel: rgba(93, 226, 255, 0.18);
    --babel-combat-glow: rgba(150, 110, 255, 0.34);
}

#combat-view.babel-combat-tone-Extreme {
    --babel-combat-edge: rgba(119, 74, 255, 0.96);
    --babel-combat-side: rgba(39, 112, 255, 0.38);
    --babel-combat-core: rgba(171, 72, 255, 0.25);
    --babel-combat-panel: rgba(66, 123, 255, 0.22);
    --babel-combat-glow: rgba(97, 55, 255, 0.38);
}

#combat-view.babel-combat-tone-Extreme.active {
    background:
        linear-gradient(90deg, rgba(0, 154, 255, 0.46), rgba(137, 64, 255, 0.2), transparent 50%, rgba(137, 64, 255, 0.2), rgba(0, 154, 255, 0.46)),
        radial-gradient(ellipse at 0% 50%, rgba(119, 72, 255, 0.45), transparent 38%),
        radial-gradient(ellipse at 100% 50%, rgba(0, 198, 255, 0.4), transparent 38%),
        linear-gradient(180deg, rgba(10, 8, 20, 1), rgba(5, 4, 10, 1));
    animation: babel-combat-extreme-flame 1.15s ease-in-out infinite alternate;
}

#combat-view.babel-combat-tone-Endless {
    --babel-combat-edge: rgba(238, 238, 238, 0.9);
    --babel-combat-side: rgba(0, 0, 0, 0.72);
    --babel-combat-core: rgba(255, 255, 255, 0.16);
    --babel-combat-panel: rgba(255, 255, 255, 0.12);
    --babel-combat-glow: rgba(255, 255, 255, 0.22);
}

#combat-view.babel-combat-tone-Endless.active {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.78), rgba(255,255,255,0.12), transparent 50%, rgba(255,255,255,0.12), rgba(0,0,0,0.78)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0.08) 2px 10px),
        linear-gradient(180deg, #050505, #111);
}

#combat-view.babel-combat-tone-Transcendent {
    --babel-combat-edge: rgba(156, 96, 255, 0.96);
    --babel-combat-side: rgba(52, 225, 215, 0.24);
    --babel-combat-core: rgba(160, 88, 255, 0.22);
    --babel-combat-panel: rgba(116, 83, 255, 0.18);
    --babel-combat-glow: rgba(64, 230, 220, 0.32);
}

#combat-view.babel-combat-tone-Transcendent.active {
    background:
        radial-gradient(circle at 50% 20%, rgba(176, 122, 255, 0.24), transparent 34%),
        radial-gradient(circle at 20% 55%, rgba(58, 224, 215, 0.18), transparent 28%),
        radial-gradient(circle at 80% 45%, rgba(96, 72, 255, 0.18), transparent 28%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, rgba(8, 7, 18, 1), rgba(5, 5, 12, 1));
    animation: babel-combat-mystic 4s ease-in-out infinite;
}

#combat-view.babel-combat-tone-Ultimate {
    --babel-combat-edge: rgba(255, 236, 154, 0.98);
    --babel-combat-side: rgba(205, 147, 35, 0.34);
    --babel-combat-core: rgba(255, 255, 238, 0.24);
    --babel-combat-panel: rgba(255, 219, 105, 0.2);
    --babel-combat-glow: rgba(255, 222, 105, 0.42);
}

#combat-view.babel-combat-tone-Ultimate.active {
    background:
        linear-gradient(135deg, rgba(255,255,238,0.2), transparent 28%, rgba(205,147,35,0.18), transparent 68%, rgba(255,255,238,0.16)),
        radial-gradient(circle at 50% 16%, rgba(255,255,235,0.22), transparent 32%),
        linear-gradient(90deg, rgba(178, 116, 22, 0.32), transparent 33%, transparent 67%, rgba(178, 116, 22, 0.32)),
        linear-gradient(180deg, rgba(24, 18, 8, 1), rgba(8, 6, 3, 1));
    animation: babel-combat-supreme 3s ease-in-out infinite;
}

@keyframes babel-combat-pulse {
    0%, 100% { opacity: 0.72; filter: brightness(0.95); }
    50% { opacity: 1; filter: brightness(1.2); }
}

@keyframes babel-combat-extreme-flame {
    0% { background-position: 0 0, 0 0, 100% 0, 0 0; filter: brightness(0.98); }
    100% { background-position: 52px 0, 22px 0, calc(100% - 22px) 0, 0 0; filter: brightness(1.26); }
}

@keyframes babel-combat-mystic {
    0%, 100% { filter: hue-rotate(0deg) brightness(0.96); }
    50% { filter: hue-rotate(18deg) brightness(1.2); }
}

@keyframes babel-combat-supreme {
    0%, 100% { filter: brightness(0.96) saturate(1); }
    50% { filter: brightness(1.25) saturate(1.16); }
}

.combatant-panel {
    background: linear-gradient(180deg, rgba(44, 33, 26, 0.9), rgba(29, 22, 18, 0.96));
    border-color: var(--color-border-soft);
}

.hp-bar-container,
.xp-bar-container,
.reward-tier {
    background-color: #231A15;
    border-color: var(--color-border-soft);
}

.hp-bar,
.compass-progress-dot.filled,
.result-levelup,
.effect-name.active,
.balance-module .claimable-text,
.treasure-set-effects p.active,
.status-active,
.message.success,
.log-entry.success,
.effect-name.active {
    color: var(--color-success);
}

.hp-bar {
    background: linear-gradient(90deg, #7F8F6F 0%, #9CAF86 100%);
}

#enemy-combat-panel .hp-bar,
.damage-log,
#combat-summary-panel h3.defeat,
.result-lose,
.message.error,
.log-entry.error,
.status-disabled {
    color: var(--color-danger);
}

#enemy-combat-panel .hp-bar {
    background: linear-gradient(90deg, #8C5B52 0%, #B26E64 100%);
}

.vs-separator,
.log-separator,
#combat-log .log-separator,
.market-item-info .price,
.status-item .value,
.rank-damage,
.reward-tier.claimable,
.guaranteed-banner,
.result-guaranteed,
.level-value,
.wheel-slot.slot-jackpot i,
.wheel-slot.slot-gold i,
.wheel-slot.slot-jackpot,
.result-jackpot .result-text {
    color: var(--color-quality-epic);
}

.reward-tier.claimable {
    background: linear-gradient(180deg, rgba(117, 94, 50, 0.92), rgba(82, 64, 35, 0.96));
    border-color: #9C7B47;
}

.reward-tier.claimed {
    background: linear-gradient(180deg, rgba(72, 95, 63, 0.94), rgba(55, 72, 48, 0.98));
    border-color: #7F9A70;
}

.shop-item-card {
    background: linear-gradient(180deg, rgba(52, 39, 30, 0.88), rgba(33, 24, 19, 0.96));
}

.shop-item-card.sold-out {
    opacity: 0.52;
}

.hub-card {
    background: linear-gradient(145deg, rgba(52, 39, 30, 0.86), rgba(29, 22, 18, 0.95));
    border-color: var(--color-border-soft);
}

.hub-card:hover:not(:disabled) {
    border-color: var(--color-wood);
    background: linear-gradient(145deg, rgba(61, 46, 35, 0.9), rgba(35, 27, 21, 0.97));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.hub-card-icon,
.achievement-reward,
.enchant-active,
.dungeon-stage .stage-details,
.socket-slot-card.filled,
.socket-slot-card .gem-icon,
.result-text,
.buff-log {
    color: var(--color-accent);
}

.auth-error,
.contract-tasks li,
.mirror-result.result-major,
.cost-preview strong {
    background-color: rgba(185, 121, 110, 0.12);
    border-color: rgba(185, 121, 110, 0.45);
    color: var(--color-danger);
}

.my-weekly-reward,
.treasure-piece.owned,
.mirror-result.result-jackpot,
.guaranteed-banner {
    background: linear-gradient(180deg, rgba(183, 150, 104, 0.12), rgba(183, 150, 104, 0.06));
    border-color: rgba(183, 150, 104, 0.45);
}

.help-toggle-btn {
    color: var(--color-accent);
    border-color: var(--color-border-soft);
}

.help-toggle-btn:hover {
    border-color: var(--color-wood);
    background-color: rgba(183, 150, 104, 0.1);
}

.help-toggle-btn:active,
.help-toggle-btn.active {
    background-color: var(--color-wood);
    color: #1B140F;
}

.help-panel {
    background-color: rgba(30, 22, 18, 0.94);
    border-color: rgba(183, 150, 104, 0.3);
    border-left-color: var(--color-wood);
    color: var(--color-text-dark);
}

.hexagon {
    background: linear-gradient(180deg, rgba(53, 40, 31, 0.96), rgba(34, 26, 21, 0.98));
    border-color: var(--color-border-soft);
}

.hexagon.selected {
    background: linear-gradient(180deg, rgba(104, 80, 55, 0.98), rgba(78, 59, 40, 1));
    border-color: var(--color-wood);
    box-shadow: 0 0 0 1px rgba(183, 150, 104, 0.22), 0 10px 22px rgba(0, 0, 0, 0.26);
}

.hexagon.locked,
.skill-node.locked {
    background-color: #1D1612;
    border-color: #2F241D;
    color: #6D5D50;
}

.skill-grid {
    background-color: rgba(255, 246, 236, 0.02);
    border-color: rgba(183, 150, 104, 0.16);
}

.skill-node {
    background: linear-gradient(180deg, rgba(48, 37, 29, 0.94), rgba(35, 27, 22, 0.98));
}

.skill-node.learnable {
    border-color: rgba(147, 167, 131, 0.65);
    box-shadow: 0 0 0 1px rgba(147, 167, 131, 0.16);
}

.skill-node.learned {
    background: linear-gradient(180deg, rgba(95, 113, 127, 0.94), rgba(74, 90, 102, 0.98));
    border-color: #B79668;
}

.skill-node.active {
    border-color: var(--color-wood);
    box-shadow: 0 0 0 1px rgba(183, 150, 104, 0.18), 0 0 10px rgba(183, 150, 104, 0.12);
}

.mirror-wheel .wheel-slot {
    background: rgba(29, 22, 18, 0.82);
    border-color: var(--color-border-soft);
}

.wheel-slot.slot-empty,
.energy-text,
.small-text,
.level-label,
.level-max,
.energy-label,
.shop-item-cost,
.shop-item-limit,
.gift-pack-desc,
.damage-bar-row .skill-name,
.damage-bar-row .bar-value,
.contract-tasks li.completed,
.balance-summary .summary-item span:first-child,
.secondary-stats,
.dungeon-stage .stage-desc,
.dungeon-stage p,
.treasure-piece .level,
.combat-stats-panel .stat-label,
.loading-placeholder,
.empty-inventory-msg,
.error-placeholder,
.no-enchant-text,
.socket-slot-card .gem-stats,
.socket-slot-card .slot-label,
.enchant-stats,
.enchant-item-info p,
.item-icon-badge,
.item-card-icon-badge,
.log-action,
#notification-history-list li,
.rank-list li,
.contract-option p,
.profession-summary .label,
.gift-pack-desc,
.effect-description {
    color: var(--color-text-muted);
}

.mirror-result.result-normal {
    background: rgba(255, 246, 236, 0.05);
    border-color: rgba(183, 150, 104, 0.16);
}

.wheel-slot.active {
    background: rgba(183, 150, 104, 0.12);
    border-color: var(--color-wood);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(183, 150, 104, 0.12);
}

.wheel-slot.winner {
    background: rgba(183, 150, 104, 0.18);
    border-color: var(--color-wood);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(183, 150, 104, 0.14), 0 0 12px rgba(183, 150, 104, 0.16);
}

.compass-wheel {
    background: conic-gradient(
        #56644B 0deg 120deg,
        #7A4B45 120deg 240deg,
        #8D7140 240deg 360deg
    );
    box-shadow: 0 0 0 3px rgba(183, 150, 104, 0.65), 0 0 18px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(0, 0, 0, 0.26);
}

.compass-ring {
    border-color: rgba(183, 150, 104, 0.72);
}

.compass-ring::before {
    border-color: rgba(140, 157, 172, 0.22);
}

.compass-center {
    background: radial-gradient(circle, #C39D6A, #775838);
}

.compass-pointer {
    background: linear-gradient(to top, transparent 0%, #9F7D53 24%, #D1B97A 100%);
}

.compass-pointer::after,
.compass-pointer.result-gold::after {
    border-bottom-color: #D1B97A;
}

.compass-pointer.result-red::after {
    border-bottom-color: #B9796E;
}

.compass-pointer.result-green::after {
    border-bottom-color: #93A783;
}

.quality-action-legendary {
    background: linear-gradient(180deg, rgba(121, 88, 51, 0.98), rgba(88, 61, 36, 1)) !important;
}

.quality-action-epic {
    background: linear-gradient(180deg, rgba(133, 113, 63, 0.98), rgba(95, 80, 43, 1)) !important;
}
.quality-action-world-shattering {
    background: linear-gradient(180deg, rgba(200, 68, 42, 0.98), rgba(160, 50, 30, 1)) !important;
}

.uid-chip {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: monospace;
}
.character-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.equipment-score-panel {
    text-align: center;
    margin: 10px 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(54, 40, 31, 0.86), rgba(32, 24, 19, 0.96));
    border: 1px dashed rgba(183, 150, 104, 0.38);
    border-radius: 8px;
}

.equipment-score-label {
    font-size: 13px;
    color: var(--color-wood);
}

.equipment-score-value {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-quality-legendary);
    margin: 2px 0;
}

.equipment-score-note,
.text-muted,
.inline-note,
.empty-state-inline,
.meta-time,
.stats-caption {
    color: var(--color-text-muted) !important;
}

.text-success,
.status-ready,
.text-heal-amount,
.text-activated,
.condition-success {
    color: var(--color-success) !important;
}

.text-warning,
.status-warning {
    color: var(--color-warning) !important;
}

.text-danger,
.inline-error,
.status-danger,
.condition-fail {
    color: var(--color-danger) !important;
}

.text-info,
.text-accent,
.enchant-label {
    color: var(--color-info) !important;
}

.text-flow {
    color: var(--color-flow) !important;
}

.text-legendary {
    color: var(--color-quality-legendary) !important;
}

.text-enhance {
    color: var(--color-success) !important;
    font-weight: bold;
}

.text-forge {
    color: var(--color-warning) !important;
    font-weight: bold;
}

.status-active-inline {
    color: var(--color-success) !important;
    font-weight: bold;
}

.heart-guard-comparison {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.heart-guard-comparison .stats-column {
    text-align: center;
    flex: 1;
}

.heart-guard-arrow {
    font-size: 24px;
    color: var(--color-accent);
}

.modal-inline-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
}

.status-text {
    margin-bottom: 15px;
}

.gift-pack-title.text-legendary {
    color: var(--color-quality-legendary);
}

.empty-state-inline {
    text-align: center;
}

.stats-caption {
    font-size: 12px;
    margin: 4px 0;
}

.shop-empty-message {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted) !important;
    padding: 10px 0;
}

.meta-time {
    font-size: 12px;
}

.loading-placeholder,
.error-placeholder,
.empty-inventory-msg,
.empty-state-inline {
    background: rgba(255, 246, 236, 0.03);
    border: 1px dashed rgba(183, 150, 104, 0.18);
    border-radius: 8px;
}

.inline-error {
    font-weight: 600;
}

.sparkle-particle {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 3px rgba(209, 185, 122, 0.35);
    animation-duration: 0.4s;
}

.quality-border-flash {
    animation-duration: 0.85s;
}

.quality-border-flash.flash-legendary {
    border-color: var(--color-quality-legendary);
    box-shadow: inset 0 0 36px rgba(243, 188, 99, 0.22), 0 0 28px rgba(243, 188, 99, 0.12);
}

.quality-border-flash.flash-epic {
    border-color: var(--color-quality-epic);
    box-shadow: inset 0 0 42px rgba(255, 228, 138, 0.24), 0 0 30px rgba(255, 228, 138, 0.14);
}

.quality-border-flash.flash-world-shattering {
    box-shadow: inset 0 0 32px rgba(184, 111, 104, 0.16);
}

.guaranteed-banner,
.mirror-result.result-jackpot,
.color-quality-world-shattering,
.wheel-slot.winner {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .inventory-item.quality-bg-fentian-world-shattering,
    .inventory-item.quality-bg-fentian-world-shattering::before,
    .fentian-exclusive-equipment-effect::after,
    .color-quality-fentian-world-shattering {
        animation: none !important;
    }
}

.xp-bar::after {
    opacity: 0.32;
    animation-duration: 4.2s;
}

.levelup-overlay {
    background: radial-gradient(ellipse at center, rgba(209, 185, 122, 0.05) 0%, transparent 72%);
    animation-duration: 1.6s;
}

.levelup-text,
.levelup-level,
#modal-overlay:not(.hidden) #modal-content,
#notification-history:not(.hidden),
.skill-grid.active,
.synthesis-attributes-preview,
.synthesis-result-preview,
.inventory-item-detail.detail-opening,
.inventory-item-detail {
    animation-duration: 0.18s;
}

.btn-ripple {
    background: rgba(255, 255, 255, 0.12);
    animation-duration: 0.35s;
}

/* ==== 背包装备筛选按钮 ==== */
#equipment-filter-section {
    padding: 8px 12px;
}
#equipment-filter-section .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#equipment-filter-section .filter-toggle-btn {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--color-border, #555);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}
#equipment-filter-section .filter-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}
#equipment-filter-section .filter-caret {
    font-size: 12px;
    color: var(--color-text-dim, #888);
}
#equipment-filter-section .filter-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--color-accent, #4a90e2);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: normal;
}
#equipment-filter-section .filter-reset-btn {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #555);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
}
#equipment-filter-section .filter-body.hidden {
    display: none;
}
#equipment-filter-section .filter-body {
    margin-top: 10px;
}
#equipment-filter-section .filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
#equipment-filter-section .filter-row:last-child { margin-bottom: 0; }
#equipment-filter-section .filter-label {
    min-width: 3em;
    font-weight: bold;
    color: var(--color-text-dim, #888);
}
#equipment-filter-section .filter-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#equipment-filter-section .filter-level-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
#equipment-filter-section .filter-level-input {
    width: 110px;
    padding: 4px 8px;
    border: 1px solid var(--color-border, #555);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--color-text, #ddd);
    font-size: 13px;
}
#equipment-filter-section .filter-btn {
    padding: 4px 10px;
    border: 1px solid var(--color-border, #555);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s, border-color 0.15s;
}
#equipment-filter-section .filter-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
#equipment-filter-section .filter-btn.active {
    background: var(--color-accent, #4a90e2);
    border-color: var(--color-accent, #4a90e2);
    color: #fff;
}

/* ============ 星蕴系统（Star Rune） ============ */
#star-rune-view { padding: 20px; }
.star-rune-panel { max-width: 780px; margin: 0 auto; background: linear-gradient(180deg, rgba(15,18,55,0.65), rgba(5,8,32,0.75)); border: 1px solid rgba(120,150,255,0.25); }
.star-rune-panel h3 { text-align: center; color: #e8ecff; text-shadow: 0 0 10px rgba(120,150,255,0.6); letter-spacing: 2px; }
.star-rune-summary { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; padding: 8px 14px; margin: 8px 0; background: rgba(30,40,90,0.4); border-radius: 6px; font-size: 13px; color: #ccd3f0; }
.star-rune-summary strong { color: #ffd780; }
.star-chart-wrapper { position: relative; margin: 0 auto; max-width: 560px; }
#star-chart { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 24px rgba(60,80,200,0.3) inset, 0 2px 16px rgba(0,0,0,0.6); }

#star-chart text { pointer-events: none; font-family: "Microsoft YaHei", sans-serif; }
#star-chart .star-name { fill: #d8dff7; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
#star-chart .star-level { fill: #ffd780; font-size: 12px; }
#star-chart .resonance-label { fill: #ffc94a; font-size: 13px; letter-spacing: 2px; }
#star-chart .resonance-level { fill: #fff1b8; font-size: 18px; font-weight: 700; }
#star-chart .star-node .star-body { transition: filter 0.3s, r 0.3s, stroke-width 0.3s; }
#star-chart .star-node.star-tianquan .star-body {
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(138, 255, 157, 0.9));
}
@media (max-width: 560px) {
    .auxiliary-entry-item {
        flex-direction: column;
        align-items: stretch;
    }
    .auxiliary-entry-item .item-actions {
        justify-content: flex-end;
    }
}
#star-chart .star-node.star-tianquan .star-glow {
    opacity: 0.24;
}
#star-chart .star-node.star-yuheng .star-body {
    stroke-width: 3;
    stroke-dasharray: 4 2;
    filter: drop-shadow(0 0 9px rgba(158, 239, 255, 0.95));
}
#star-chart .star-node.star-yuheng .star-glow {
    opacity: 0.32;
}
#star-chart .star-node.twinkle .star-glow { animation: sr-twinkle 0.7s ease-out; }
@keyframes sr-twinkle { 0% { opacity: 0.15; } 50% { opacity: 0.7; } 100% { opacity: 0.15; } }

#star-chart .star-selected-pulse .star-body { animation: sr-pulse 1.2s ease-out; }
#star-chart .star-selected-pulse .star-glow { animation: sr-glow-pulse 1.2s ease-out; }
@keyframes sr-pulse { 0%{ r: 14; } 50%{ r: 22; } 100%{ r: 14; } }
@keyframes sr-glow-pulse { 0%{ opacity: 0.15; r: 28; } 50%{ opacity: 0.85; r: 46; } 100%{ opacity: 0.15; r: 28; } }

#star-chart .line-flash { stroke: #ffe684; stroke-opacity: 0.95; stroke-width: 2.5; animation: sr-line-flash 0.9s ease-out; }
@keyframes sr-line-flash { 0% { stroke-opacity: 0.25; } 35% { stroke-opacity: 1; } 100% { stroke-opacity: 0.25; } }

#star-chart.gold-flash { animation: sr-gold-flash 1.5s ease-in-out; }
@keyframes sr-gold-flash { 0% { filter: none; } 40% { filter: drop-shadow(0 0 32px #ffd700) drop-shadow(0 0 64px #ffb800) brightness(1.6); } 100% { filter: none; } }

#star-chart.resonate-flash { animation: sr-resonate-flash 1.4s ease-in-out; }
@keyframes sr-resonate-flash { 0% { filter: none; } 40% { filter: drop-shadow(0 0 24px #8ab0ff) drop-shadow(0 0 40px #4a90ff) brightness(1.4); } 100% { filter: none; } }

.star-rune-actions { display: flex; gap: 14px; margin: 14px 0 6px; justify-content: center; flex-wrap: wrap; }
.star-rune-actions .action-btn { padding: 10px 18px; background: linear-gradient(180deg, #3a55a6, #1b2a6a); color: #fff; border: 1px solid #6a86d0; border-radius: 6px; cursor: pointer; font-size: 14px; text-shadow: 0 1px 0 #000; }
.star-rune-actions .action-btn:hover { filter: brightness(1.15); }
.star-rune-actions .action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sr-small-help { color: #98a1c8; font-size: 12px; line-height: 1.6; text-align: center; margin-top: 8px; }

/* 12 星光 · 下拉式面板（手机友好） */
.sr-lights-panel {
    margin: 10px auto 0;
    max-width: 560px;
    background: linear-gradient(180deg, rgba(30,40,90,0.9), rgba(10,14,40,0.95));
    border: 1px solid rgba(120,150,255,0.4);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(60,80,200,0.35);
    transform-origin: top center;
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    max-height: 280px;
    opacity: 1;
    transform: scaleY(1);
    padding: 10px 12px;
}
.sr-lights-panel.collapsed {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0.85);
    margin: 0 auto;
    padding: 0 12px;
    pointer-events: none;
    border-width: 0;
}
.sr-lights-panel.deep-mode {
    border-color: rgba(128, 190, 255, 0.45);
    box-shadow: 0 0 22px rgba(80, 140, 255, 0.18);
}
.sr-lights-panel.ultra-mode {
    border-color: rgba(255, 216, 112, 0.7);
    box-shadow: 0 0 26px rgba(255, 190, 80, 0.28), 0 0 42px rgba(155, 90, 255, 0.18);
}
.sr-lights-header { display: flex; justify-content: space-between; align-items: center; color: #ffe8a8; font-size: 13px; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,200,80,0.4); }
.sr-lights-close {
    background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #ddd;
    border-radius: 50%; width: 26px; height: 26px; font-size: 16px; cursor: pointer; line-height: 1;
}
.sr-lights-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sr-lights-strip {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 4px 4px;
}
@media (max-width: 640px) {
    .sr-lights-strip { grid-template-columns: repeat(6, 1fr); gap: 10px; }
}
.sr-light {
    aspect-ratio: 1 / 1;
    min-height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    background: radial-gradient(circle, var(--sr-glow) 0%, var(--sr-color) 60%, transparent 100%);
    box-shadow: 0 0 14px var(--sr-glow);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(.2,1.4,.5,1), opacity 0.4s;
}
.sr-light.sr-light-enter { transform: scale(1); opacity: 1; animation: sr-light-breathe 2.4s ease-in-out infinite; }
.sr-light:hover, .sr-light:active { filter: brightness(1.35); transform: scale(1.15) !important; }
.sr-light.sr-light-sibling-fire { animation: sr-sibling-fire 0.6s ease-out forwards; }
.sr-light-core { position: absolute; inset: 32%; border-radius: 50%; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #fff; }
.sr-light.sr-light-green {
    background:
        radial-gradient(circle at 38% 34%, rgba(235, 255, 220, 0.95) 0 12%, transparent 24%),
        radial-gradient(circle, var(--sr-glow) 0%, var(--sr-color) 58%, transparent 100%);
}
.sr-light.sr-light-green .sr-light-core {
    inset: 30%;
    background: rgba(235, 255, 220, 0.94);
}
.sr-light.sr-light-cyan {
    border-radius: 50%;
    clip-path: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 34%, rgba(255, 255, 255, 0.26) 52%, transparent 72%),
        radial-gradient(circle, var(--sr-glow) 0%, var(--sr-color) 56%, transparent 100%);
}
.sr-light.sr-light-cyan .sr-light-core {
    inset: 30%;
    border-radius: 50%;
    background: rgba(230, 252, 255, 0.96);
}
@keyframes sr-light-breathe { 0%, 100% { box-shadow: 0 0 14px var(--sr-glow); } 50% { box-shadow: 0 0 24px var(--sr-glow); } }
@keyframes sr-sibling-fire {
    0% { filter: brightness(1); transform: scale(1); }
    40% { filter: brightness(1.8); transform: scale(1.25); box-shadow: 0 0 32px var(--sr-glow); }
    100% { filter: brightness(0.2); transform: scale(0.2); opacity: 0.2; }
}

/* 金光乍现：每颗星单独的金色爆发（叠加在星盘整体金光之上）*/
#star-chart .star-node.star-gold-burst .star-body {
    animation: sr-gold-burst-body 0.9s ease-out;
}
#star-chart .star-node.star-gold-burst .star-glow {
    animation: sr-gold-burst-glow 0.9s ease-out;
}
@keyframes sr-gold-burst-body {
    0% { fill: inherit; r: 14; }
    35% { fill: #ffd700; r: 20; }
    100% { r: 14; }
}
@keyframes sr-gold-burst-glow {
    0% { opacity: 0.15; fill: #ffd700; r: 28; }
    40% { opacity: 0.95; r: 52; }
    100% { opacity: 0.15; r: 28; }
}

/* "+N" 浮层 */
#star-chart .sr-levelup-float {
    font-size: 22px;
    font-weight: 700;
    font-family: "Microsoft YaHei", sans-serif;
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
    opacity: 0;
}

/* ============ 星蕴增量系统 V2 ============ */
#star-rune-view {
    --sr-bg: #080b12;
    --sr-surface: #101621;
    --sr-surface-raised: #151d29;
    --sr-line: #2a3442;
    --sr-text: #f3f6f8;
    --sr-muted: #91a0ae;
    --sr-gold: #f0c15a;
    --sr-cyan: #55c7c2;
    --sr-coral: #f06b61;
    padding: 16px 18px 44px;
    color: var(--sr-text);
}

.sr-shell,
.sr-shell * {
    box-sizing: border-box;
}

.sr-shell {
    position: relative;
    width: min(1160px, 100%);
    margin: 12px auto 0;
    overflow: hidden;
    border: 1px solid #303b49;
    border-radius: 8px;
    background: var(--sr-bg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    font-variant-numeric: tabular-nums;
}

.sr-shell button,
.sr-shell input {
    font: inherit;
}

.sr-shell button:focus-visible,
.sr-shell input:focus-visible,
.sr-chart-star:focus-visible {
    outline: 2px solid #f5d57e;
    outline-offset: 2px;
}

.sr-shell.is-busy {
    cursor: progress;
}

.sr-shell.is-busy button,
.sr-shell.is-busy .sr-auto-toggle {
    pointer-events: none;
    opacity: 0.68;
}

.sr-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sr-line);
    background: #0c111a;
}

.sr-header h2 {
    margin: 1px 0 0;
    color: #fff;
    font-size: 27px;
    line-height: 1.05;
    letter-spacing: 0;
}

.sr-kicker {
    color: var(--sr-gold);
    font-size: 11px;
    font-weight: 700;
}

.sr-auto-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 146px;
    cursor: pointer;
    user-select: none;
}

.sr-auto-toggle > span {
    min-width: 0;
    display: grid;
    text-align: right;
}

.sr-auto-toggle b {
    color: #dce5ea;
    font-size: 13px;
}

.sr-auto-toggle small {
    color: var(--sr-muted);
    font-size: 11px;
}

.sr-auto-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sr-auto-toggle > i {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 24px;
    border: 1px solid #44505e;
    border-radius: 12px;
    background: #202833;
    transition: background 180ms ease, border-color 180ms ease;
}

.sr-auto-toggle > i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b6c0c9;
    transition: transform 180ms ease, background 180ms ease;
}

.sr-auto-toggle.is-on > i {
    border-color: #3d948f;
    background: #174c4a;
}

.sr-auto-toggle.is-on > i::after {
    transform: translateX(20px);
    background: #74ded8;
}

.sr-live-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--sr-line);
    background: #0f151e;
}

.sr-live-stat {
    position: relative;
    min-width: 0;
    min-height: 94px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 13px 16px;
    border-right: 1px solid var(--sr-line);
}

.sr-live-stat:last-child {
    border-right: 0;
}

.sr-live-stat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #718096;
}

.sr-live-stat:nth-child(2)::before { background: var(--sr-coral); }
.sr-live-stat:nth-child(3)::before { background: var(--sr-cyan); }
.sr-live-stat:nth-child(4)::before { background: #71c889; }
.sr-live-stat.sr-live-primary::before { background: var(--sr-gold); }

.sr-live-stat > span {
    color: var(--sr-muted);
    font-size: 11px;
}

.sr-live-stat strong {
    min-width: 0;
    overflow: hidden;
    color: #f8fafb;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 20px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-live-primary strong { color: #ffd979; font-size: 24px; }
.sr-live-stat:nth-child(2) strong { color: #ff8c82; }
.sr-live-stat:nth-child(3) strong { color: #72d8d2; }
.sr-live-stat:nth-child(4) strong { color: #8ddca1; }

.sr-live-stat small {
    min-width: 0;
    overflow: hidden;
    color: #7f8d9a;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.8fr);
    min-height: 380px;
    border-bottom: 1px solid var(--sr-line);
}

.sr-chart-stage {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 14px 16px 12px;
    overflow: hidden;
    border-right: 1px solid var(--sr-line);
    background-color: #090e16;
    background-image:
        linear-gradient(rgba(110, 130, 150, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 130, 150, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
}

.sr-stage-head,
.sr-chart-caption,
.sr-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sr-stage-head span,
.sr-section-title span {
    color: #cfd8df;
    font-size: 13px;
    font-weight: 700;
}

.sr-stage-head strong {
    max-width: 60%;
    overflow: hidden;
    color: #f2c85f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-chart {
    width: 100%;
    height: auto;
    max-height: 285px;
    align-self: center;
    overflow: visible;
}

.sr-chart-stars-bg circle {
    fill: #dce9f2;
    opacity: 0.34;
}

.sr-constellation-base,
.sr-constellation-flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sr-constellation-base {
    stroke: #354657;
    stroke-width: 3;
}

.sr-constellation-flow {
    stroke: #d5eff0;
    stroke-width: 2;
    stroke-dasharray: 2 19;
    animation: sr-v2-flow var(--sr-flow-duration, 5s) linear infinite;
}

@keyframes sr-v2-flow {
    to { stroke-dashoffset: -84; }
}

.sr-chart-star {
    cursor: pointer;
}

.sr-chart-core {
    stroke: rgba(255, 255, 255, 0.86);
    stroke-width: 1.5;
    transition: r 180ms ease, filter 180ms ease;
}

.sr-chart-halo {
    transition: opacity 220ms ease;
}

.sr-chart-star.is-affordable:hover .sr-chart-core,
.sr-chart-star.is-affordable:focus .sr-chart-core {
    filter: brightness(1.3);
    r: 15;
}

.sr-chart-star.is-unaffordable {
    cursor: default;
    opacity: 0.68;
}

.sr-chart-star.is-locked {
    cursor: default;
    opacity: 0.48;
    pointer-events: none;
}

.sr-chart-name {
    fill: #edf3f6;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.sr-chart-level {
    fill: #9cabb8;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 10px;
    pointer-events: none;
}

.sr-chart-caption {
    min-width: 0;
    color: #758491;
    font-size: 11px;
}

.sr-chart-caption span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sr-chart-caption i {
    width: 18px;
    height: 2px;
    background: #80d3ce;
}

.sr-chart-caption b {
    color: #c8a956;
    font-weight: 600;
}

.sr-star-list {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    padding: 10px;
    background: #111721;
}

.sr-star-row {
    width: 100%;
    min-width: 0;
    min-height: 47px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border: 0;
    border-bottom: 1px solid #27313d;
    border-radius: 0;
    color: #e7edf1;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 150ms ease;
}

.sr-star-row:last-child { border-bottom: 0; }
.sr-star-row:hover:not(:disabled) { background: #1a2330; }
.sr-star-row:active:not(:disabled) { background: #202b39; }

.sr-star-row:disabled:not(.is-locked) {
    cursor: not-allowed;
    opacity: 0.62;
}

.sr-star-row.is-locked {
    cursor: not-allowed;
    opacity: 0.46;
}

.sr-star-swatch {
    width: 7px;
    height: 28px;
    border-radius: 2px;
    background: var(--sr-star-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--sr-star-color), transparent 45%);
}

.sr-star-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sr-star-copy strong {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.sr-star-copy strong b {
    overflow: hidden;
    color: #afbdc8;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-star-copy small {
    overflow: hidden;
    color: #768693;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-star-cost {
    min-width: 76px;
    max-width: 100px;
    display: grid;
    justify-items: end;
    gap: 3px;
    color: #e2bd61;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 10px;
    white-space: nowrap;
}

.sr-star-cost small {
    max-width: 100px;
    overflow: hidden;
    color: #8996a1;
    font-size: 9px;
    text-overflow: ellipsis;
}

.sr-star-cost b {
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid #866d35;
    border-radius: 3px;
    color: #f3d47c;
    background: #282313;
    font-size: 9px;
    line-height: 1;
}

.sr-star-row:hover:not(:disabled) .sr-star-cost b,
.sr-star-row:focus-visible .sr-star-cost b {
    border-color: #d6b354;
    background: #393016;
}

.sr-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sr-line);
    background: #0d131c;
}

.sr-action {
    position: relative;
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 10px 13px;
    border: 1px solid #405062;
    border-radius: 6px;
    color: #f5f8f9;
    background: #18222e;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
}

.sr-action:hover:not(:disabled) {
    border-color: #6b8195;
    background: #1e2b39;
}

.sr-action:active:not(:disabled) { transform: translateY(1px); }

.sr-action:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.sr-action > .fas {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #10151c;
    background: var(--sr-gold);
}

.sr-action > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sr-action strong {
    font-size: 14px;
}

.sr-action small {
    min-width: 0;
    overflow: hidden;
    color: #91a0ac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-action em {
    position: relative;
    z-index: 1;
    color: #9eabb5;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 11px;
    font-style: normal;
}

.sr-action-resonate > .fas {
    color: #071514;
    background: #58c8c1;
}

.sr-action-resonate.is-ready {
    border-color: #48aaa5;
    background: #16312f;
}

.sr-action-progress {
    position: absolute;
    inset: auto auto 0 0;
    height: 3px;
    max-width: 100%;
    background: #5ed2cc;
    transition: width 100ms linear;
}

.sr-transcend {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    overflow: hidden;
    border-bottom: 1px solid var(--sr-line);
    background: #141526;
}

.sr-transcend > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.sr-transcend span { color: #c4a9ec; font-size: 13px; font-weight: 700; }
.sr-transcend strong { color: #f3eaff; font-family: "Cascadia Mono", "Consolas", monospace; font-size: 16px; }
.sr-transcend small { color: #8d8aa4; font-size: 11px; }

.sr-transcend button {
    position: relative;
    z-index: 1;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #6f5893;
    border-radius: 5px;
    color: #e7d5ff;
    background: #302442;
    cursor: pointer;
}

.sr-transcend button:disabled { opacity: 0.45; cursor: not-allowed; }
.sr-transcend.is-ready button { border-color: #b686ef; background: #54377a; }

.sr-transcend-progress {
    position: absolute;
    inset: auto auto 0 0;
    height: 3px;
    max-width: 100%;
    background: #a775dd;
}

.sr-foundation-section,
.sr-lower-grid {
    background: #0f151e;
}

.sr-foundation-section {
    padding: 14px;
    border-bottom: 1px solid var(--sr-line);
}

.sr-section-title {
    min-height: 34px;
    margin-bottom: 8px;
}

.sr-section-title > div:first-child {
    display: grid;
    gap: 1px;
}

.sr-section-title small {
    color: #748391;
    font-size: 10px;
}

.sr-materials {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.sr-materials span {
    max-width: 180px;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid #354252;
    border-radius: 4px;
    color: #c8d3da;
    background: #151e29;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-foundation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sr-foundation-row {
    min-width: 0;
    min-height: 62px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #2d3947;
    border-radius: 5px;
    background: #151d28;
}

.sr-foundation-row > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #ff8b65;
    background: #35231f;
}

.sr-foundation-row:nth-child(2) > i {
    color: #69d3cd;
    background: #17302f;
}

.sr-foundation-row > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sr-foundation-row strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-foundation-row span small {
    overflow: hidden;
    color: #81909c;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-foundation-row button {
    min-width: 70px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid #536477;
    border-radius: 4px;
    color: #e9eff2;
    background: #243140;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.sr-foundation-row button small {
    display: block;
    color: #9eacb7;
    font-size: 9px;
}

.sr-foundation-row button:disabled { opacity: 0.42; cursor: not-allowed; }

.sr-lower-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
}

.sr-breakdown,
.sr-milestones {
    min-width: 0;
    padding: 14px;
}

.sr-breakdown {
    border-right: 1px solid var(--sr-line);
}

.sr-breakdown dl {
    margin: 0;
}

.sr-breakdown dl > div {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #28323e;
    font-size: 11px;
}

.sr-breakdown dl > div:last-child { border-bottom: 0; }
.sr-breakdown dt { color: #8897a3; }
.sr-breakdown dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #e7c66e;
    font-family: "Cascadia Mono", "Consolas", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-breakdown dl > div.is-effective dt,
.sr-breakdown dl > div.is-effective dd {
    color: #7ee1d6;
    font-weight: 700;
}

.sr-milestones > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.sr-milestone {
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 7px;
    padding: 6px 8px;
    border: 1px solid #2d3743;
    border-radius: 4px;
    color: #7f8c97;
    background: #141b24;
}

.sr-milestone i {
    grid-row: 1 / span 2;
    color: #5e6a75;
    text-align: center;
}

.sr-milestone b {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-milestone small {
    color: #697680;
    font-size: 9px;
}

.sr-milestone.is-unlocked {
    border-color: #326b58;
    color: #bce6ce;
    background: #14251f;
}

.sr-milestone.is-unlocked i { color: #66ca91; }

@media (max-width: 820px) {
    #star-rune-view { padding: 12px 12px 34px; }
    .sr-live-grid { grid-template-columns: 1fr 1fr; }
    .sr-live-stat:nth-child(2) { border-right: 0; }
    .sr-live-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--sr-line); }
    .sr-main-grid { grid-template-columns: 1fr; }
    .sr-chart-stage { min-height: 315px; border-right: 0; border-bottom: 1px solid var(--sr-line); }
    .sr-star-list { grid-template-rows: none; }
    .sr-star-row { min-height: 44px; }
    .sr-lower-grid { grid-template-columns: 1fr; }
    .sr-breakdown { border-right: 0; border-bottom: 1px solid var(--sr-line); }
}

@media (max-width: 520px) {
    #star-rune-view { padding: 8px 8px 26px; }
    #star-rune-view > .view-back-btn { margin-left: 2px; }
    .sr-shell { margin-top: 8px; padding-bottom: 78px; }
    .sr-header { min-height: 64px; padding: 10px 12px; }
    .sr-header h2 { font-size: 23px; }
    .sr-auto-toggle { min-width: 132px; }
    .sr-live-stat { min-height: 82px; padding: 10px 11px; }
    .sr-live-stat strong { font-size: 16px; }
    .sr-live-primary strong { font-size: 19px; }
    .sr-main-grid { min-height: 0; }
    .sr-chart-stage { min-height: 270px; padding: 11px 8px 8px; }
    .sr-chart { max-height: 235px; }
    .sr-chart-caption { padding: 0 4px; }
    .sr-star-list { padding: 5px 8px; }
    .sr-primary-actions {
        position: fixed;
        z-index: 8;
        bottom: 10px;
        left: 50vw;
        width: min(calc(100vw - 52px), 398px);
        transform: translateX(-50%);
        gap: 6px;
        padding: 8px;
        border: 1px solid #445364;
        border-radius: 6px;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.34);
    }
    .sr-action {
        min-height: 60px;
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 7px;
        padding: 8px;
    }
    .sr-action > .fas { width: 27px; height: 27px; }
    .sr-action strong { font-size: 12px; }
    .sr-action small { font-size: 9px; white-space: normal; line-height: 1.25; }
    .sr-action em { position: absolute; top: 5px; right: 6px; font-size: 9px; }
    .sr-transcend { padding: 10px 12px; }
    .sr-transcend > div { display: grid; gap: 2px; }
    .sr-foundation-section { padding: 11px 8px; }
    .sr-section-title { align-items: flex-start; }
    .sr-materials { max-width: 62%; gap: 4px; }
    .sr-materials span { max-width: 100%; }
    .sr-foundation-grid { grid-template-columns: 1fr; gap: 7px; }
    .sr-lower-grid { display: block; }
    .sr-breakdown,
    .sr-milestones { padding: 11px 9px; }
    .sr-milestones > div:last-child { gap: 5px; }
}

@media (max-width: 370px) {
    .sr-auto-toggle > span { display: none; }
    .sr-auto-toggle { min-width: 44px; }
    .sr-chart-caption b { display: none; }
    .sr-action small { display: none; }
    .sr-action { min-height: 52px; }
    .sr-star-cost { max-width: 70px; }
    .sr-milestones > div:last-child { grid-template-columns: 1fr; }
}

/* 桌面端沿用游戏既有的 450px 手机框，按容器实际宽度使用完整单列布局。 */
@media (min-width: 768px) {
    #star-rune-view { padding: 8px 8px 26px; }
    #star-rune-view > .view-back-btn { margin-left: 2px; }
    .sr-shell { margin-top: 8px; padding-bottom: 78px; }
    .sr-header { min-height: 64px; padding: 10px 12px; }
    .sr-header h2 { font-size: 23px; }
    .sr-auto-toggle { min-width: 132px; }
    .sr-live-grid { grid-template-columns: 1fr 1fr; }
    .sr-live-stat { min-height: 82px; padding: 10px 11px; }
    .sr-live-stat:nth-child(2) { border-right: 0; }
    .sr-live-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--sr-line); }
    .sr-live-stat strong { font-size: 16px; }
    .sr-live-primary strong { font-size: 19px; }
    .sr-main-grid { min-height: 0; grid-template-columns: 1fr; }
    .sr-chart-stage { min-height: 270px; padding: 11px 8px 8px; border-right: 0; border-bottom: 1px solid var(--sr-line); }
    .sr-chart { max-height: 235px; }
    .sr-chart-caption { padding: 0 4px; }
    .sr-star-list { grid-template-rows: none; padding: 5px 8px; }
    .sr-star-row { min-height: 44px; }
    .sr-primary-actions {
        position: fixed;
        z-index: 8;
        bottom: 10px;
        left: 50vw;
        width: min(calc(100vw - 52px), 398px);
        transform: translateX(-50%);
        gap: 6px;
        padding: 8px;
        border: 1px solid #445364;
        border-radius: 6px;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.34);
    }
    .sr-action { min-height: 60px; grid-template-columns: 27px minmax(0, 1fr); gap: 7px; padding: 8px; }
    .sr-action > .fas { width: 27px; height: 27px; }
    .sr-action strong { font-size: 12px; }
    .sr-action small { font-size: 9px; white-space: normal; line-height: 1.25; }
    .sr-action em { position: absolute; top: 5px; right: 6px; font-size: 9px; }
    .sr-transcend { padding: 10px 12px; }
    .sr-transcend > div { display: grid; gap: 2px; }
    .sr-foundation-section { padding: 11px 8px; }
    .sr-section-title { align-items: flex-start; }
    .sr-materials { max-width: 62%; gap: 4px; }
    .sr-materials span { max-width: 100%; }
    .sr-foundation-grid { grid-template-columns: 1fr; gap: 7px; }
    .sr-lower-grid { display: block; grid-template-columns: 1fr; }
    .sr-breakdown { border-right: 0; border-bottom: 1px solid var(--sr-line); }
    .sr-breakdown,
    .sr-milestones { padding: 11px 9px; }
    .sr-milestones > div:last-child { gap: 5px; }
}

/* ============ 星蕴 V3：发动机与深空 ============ */
#star-rune-view {
    --srv3-bg: #080d13;
    --srv3-surface: #101821;
    --srv3-surface-2: #151f2a;
    --srv3-line: #2c3945;
    --srv3-line-strong: #425362;
    --srv3-text: #f1f5f7;
    --srv3-muted: #8fa0ac;
    --srv3-gold: #e7bd55;
    --srv3-green: #54c18a;
    --srv3-cyan: #55bdc9;
    --srv3-coral: #ed7768;
    --srv3-violet: #aa82d0;
    padding: 12px 10px 36px;
    color: var(--srv3-text);
}

.srv3-shell,
.srv3-shell * {
    box-sizing: border-box;
}

.srv3-shell {
    width: min(1120px, 100%);
    margin: 8px auto 0;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--srv3-line-strong);
    border-radius: 6px;
    color: var(--srv3-text);
    background: var(--srv3-bg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    font-variant-numeric: tabular-nums;
}

.srv3-shell button,
.srv3-shell input {
    font: inherit;
}

.srv3-shell button:focus-visible,
.srv3-shell input:focus-visible {
    outline: 2px solid #f2d277;
    outline-offset: 2px;
}

.srv3-shell.is-busy {
    cursor: progress;
}

.srv3-shell.is-busy button,
.srv3-shell.is-busy input {
    pointer-events: none;
    opacity: 0.62;
}

.srv3-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--srv3-line);
    background: #0d141c;
}

.srv3-header > div:first-child {
    min-width: 0;
}

.srv3-header > div:first-child > span {
    color: var(--srv3-gold);
    font-size: 10px;
    font-weight: 700;
}

.srv3-header h2 {
    margin: 1px 0 0;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0;
}

.srv3-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-auto-flow: column;
    border: 1px solid #3a4855;
    border-radius: 5px;
    overflow: hidden;
}

.srv3-tabs button {
    min-width: 68px;
    min-height: 34px;
    padding: 6px 12px;
    border: 0;
    border-right: 1px solid #3a4855;
    color: #8f9da8;
    background: #111922;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.srv3-tabs button:last-child {
    border-right: 0;
}

.srv3-tabs button.is-active {
    color: #17202a;
    background: #e2bd61;
}

.srv3-live-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--srv3-line);
    background: #101720;
}

.srv3-live-grid > div {
    position: relative;
    min-width: 0;
    min-height: 82px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 11px 13px 11px 16px;
    border-right: 1px solid var(--srv3-line);
}

.srv3-live-grid > div:last-child {
    border-right: 0;
}

.srv3-live-grid > div::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--srv3-gold);
}

.srv3-live-grid > div:nth-child(2)::before { background: var(--srv3-coral); }
.srv3-live-grid > div:nth-child(3)::before { background: var(--srv3-green); }
.srv3-live-grid > div:nth-child(4)::before { background: var(--srv3-cyan); }

.srv3-live-grid span,
.srv3-live-grid small {
    min-width: 0;
    overflow: hidden;
    color: var(--srv3-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-live-grid strong {
    min-width: 0;
    overflow: hidden;
    color: #f9fbfc;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-live-stardust {
    align-content: center;
}

.srv3-stardust-bonuses {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 7px;
    margin-top: 2px;
    line-height: 1.2;
}

.srv3-stardust-bonuses em {
    min-width: 0;
    color: #7f909c;
    font-size: 8px;
    font-style: normal;
    white-space: nowrap;
}

.srv3-stardust-bonuses b {
    color: #a9cfd0;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-weight: 700;
}

.srv3-stardust-bonuses .is-total,
.srv3-stardust-bonuses .is-total b {
    color: #dfc66f;
}

.srv3-live-grid > div:first-child strong { color: #f2ce72; }
.srv3-live-grid > div:nth-child(2) strong { color: #f3978c; }
.srv3-live-grid > div:nth-child(3) strong { color: #79d7a5; }
.srv3-live-grid > div:nth-child(4) strong { color: #79d6df; }

.srv3-tab-panel[hidden] {
    display: none !important;
}

.srv3-rune-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    border-bottom: 1px solid var(--srv3-line);
}

.srv3-constellation-wrap {
    --srv3-growth-intensity: 0;
    --srv3-flow-duration: 4.6s;
    --srv3-pulse-duration: 3.4s;
    position: relative;
    min-width: 0;
    min-height: 324px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    padding: 13px 16px 18px;
    overflow: hidden;
    border-right: 1px solid var(--srv3-line);
    background-color: #090f16;
    background-image:
        linear-gradient(rgba(120, 145, 164, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 145, 164, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    isolation: isolate;
}

.srv3-constellation-wrap::before,
.srv3-constellation-wrap::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.srv3-constellation-wrap::before {
    inset: 13px;
    border: 1px solid rgba(105, 132, 151, 0.2);
    clip-path: polygon(0 0, 22% 0, 22% 1px, 78% 1px, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 1px), 22% calc(100% - 1px), 22% 100%, 0 100%);
}

.srv3-constellation-wrap::after {
    inset: auto 12% 12px;
    height: 1px;
    background: rgba(85, 189, 201, calc(0.16 + var(--srv3-growth-intensity) * 0.48));
    box-shadow: 0 0 calc(4px + var(--srv3-growth-intensity) * 14px) rgba(85, 189, 201, 0.52);
}

.srv3-chart-state {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 3px;
    color: #778994;
    font-size: 9px;
}

.srv3-chart-state span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.srv3-chart-state span i {
    width: 6px;
    height: 6px;
    border: 1px solid #76d4d2;
    border-radius: 50%;
    background: #18373b;
    box-shadow: 0 0 7px rgba(85, 189, 201, 0.42);
}

.srv3-chart-state strong {
    color: #7ecfd1;
    font-size: 9px;
    font-weight: 700;
}

.srv3-constellation {
    width: 100%;
    height: auto;
    max-height: 226px;
    align-self: center;
    overflow: visible;
}

.srv3-chart-rings circle,
.srv3-chart-rings path {
    fill: none;
    stroke: rgba(105, 131, 148, 0.18);
    stroke-width: 0.8;
    stroke-dasharray: 2 7;
}

.srv3-chart-rings circle:last-of-type {
    stroke-dasharray: 18 6 3 6;
}

.srv3-chart-stars circle {
    fill: #b9d7df;
    opacity: 0.44;
}

.srv3-star-line-aura,
.srv3-star-line-base,
.srv3-star-line-flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.srv3-star-line-aura {
    stroke: #57c6d0;
    stroke-width: 9;
    opacity: 0.08;
    filter: blur(3px);
    transition: opacity 300ms ease;
}

.srv3-star-line-base {
    stroke: #536979;
    stroke-width: 3.5;
}

.srv3-star-line-flow {
    stroke: #e0f8f6;
    stroke-width: 1.8;
    stroke-dasharray: 3 13;
    animation: srv3-energy-flow var(--srv3-flow-duration) linear infinite;
}

.srv3-star-node {
    color: var(--star-color);
}

.srv3-star-orbit,
.srv3-star-shell {
    fill: #0c151e;
    stroke: var(--star-color);
}

.srv3-star-orbit {
    stroke-width: 0.8;
    stroke-dasharray: 2 4;
    opacity: 0.54;
    transform-box: fill-box;
    transform-origin: center;
    animation: srv3-orbit-spin calc(var(--srv3-pulse-duration) * 2.4) linear infinite;
}

.srv3-star-shell {
    stroke-width: 1.2;
    opacity: 0.9;
}

.srv3-star-halo {
    opacity: calc(0.11 + var(--srv3-growth-intensity) * 0.2);
    transform-box: fill-box;
    transform-origin: center;
    animation: srv3-star-pulse var(--srv3-pulse-duration) ease-in-out infinite alternate;
    animation-delay: var(--star-delay);
}

.srv3-star-core {
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 4px var(--star-color));
}

.srv3-star-glint {
    fill: #fff;
    opacity: 0.9;
}

.srv3-star-orbiter {
    transform-box: fill-box;
    transform-origin: center;
    animation: srv3-orbiter-spin calc(var(--srv3-pulse-duration) * 1.55) linear infinite;
    animation-delay: var(--star-delay);
}

.srv3-star-index {
    fill: #647682;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 7px;
}

.srv3-star-name {
    fill: #dce6ea;
    font-size: 9px;
    font-weight: 700;
}

@keyframes srv3-energy-flow {
    to { stroke-dashoffset: -68; }
}

@keyframes srv3-star-pulse {
    to { opacity: calc(0.22 + var(--srv3-growth-intensity) * 0.4); transform: scale(calc(1 + var(--srv3-growth-intensity) * 0.12)); }
}

@keyframes srv3-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes srv3-orbiter-spin {
    to { transform: rotate(-360deg); }
}

@keyframes srv3-number-surge {
    50% { color: #fff0a6; text-shadow: 0 0 11px rgba(242, 206, 114, 0.72); }
}

.srv3-level-core {
    position: relative;
    z-index: 2;
    min-width: 230px;
    max-width: 72%;
    justify-self: center;
    display: grid;
    justify-items: center;
    gap: 2px;
    margin-top: -20px;
    padding: 9px 17px 8px;
    border: 1px solid #526573;
    border-radius: 5px;
    background: #111c25;
    box-shadow: 0 8px 19px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.srv3-level-core span,
.srv3-level-core small {
    color: #8797a3;
    font-size: 9px;
}

.srv3-level-core strong {
    max-width: 100%;
    overflow: hidden;
    color: #f1cd73;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-constellation-wrap[data-growth-tier="3"] .srv3-level-core strong,
.srv3-constellation-wrap[data-growth-tier="4"] .srv3-level-core strong {
    animation: srv3-number-surge var(--srv3-pulse-duration) ease-in-out infinite;
}

.srv3-constellation-wrap[data-growth-tier="3"] .srv3-star-line-aura { opacity: 0.18; }
.srv3-constellation-wrap[data-growth-tier="4"] .srv3-star-line-aura { opacity: 0.3; }
.srv3-constellation-wrap[data-growth-tier="0"] .srv3-star-line-flow,
.srv3-constellation-wrap[data-growth-tier="0"] .srv3-star-orbiter { animation-play-state: paused; }

.srv3-level-motion {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.srv3-level-motion small {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-level-motion > i {
    display: flex;
    align-items: end;
    gap: 2px;
}

.srv3-level-motion > i b {
    width: 3px;
    height: 5px;
    background: #34454f;
}

.srv3-level-motion > i b:nth-child(2) { height: 7px; }
.srv3-level-motion > i b:nth-child(3) { height: 9px; }
.srv3-level-motion > i b:nth-child(4) { height: 11px; }
.srv3-constellation-wrap[data-growth-tier="1"] .srv3-level-motion > i b:nth-child(-n + 1),
.srv3-constellation-wrap[data-growth-tier="2"] .srv3-level-motion > i b:nth-child(-n + 2),
.srv3-constellation-wrap[data-growth-tier="3"] .srv3-level-motion > i b:nth-child(-n + 3),
.srv3-constellation-wrap[data-growth-tier="4"] .srv3-level-motion > i b { background: #65cbd0; box-shadow: 0 0 5px rgba(85, 189, 201, 0.55); }

.srv3-growth-strip {
    min-width: 0;
    display: grid;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: #111923;
}

.srv3-meteor-control {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 11px;
    border-left: 3px solid var(--srv3-coral);
    background: #17212b;
}

.srv3-meteor-control > header {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.srv3-meteor-control > header > i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #271817;
    background: #ef8879;
}

.srv3-meteor-control > header > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.srv3-meteor-control > header span { color: #eef3f5; font-size: 12px; font-weight: 800; }
.srv3-meteor-control > header small { color: #83939e; font-size: 8px; }
.srv3-meteor-control > header b {
    max-width: 90px;
    overflow: hidden;
    color: #f5b0a5;
    font: 800 11px "Cascadia Mono", "Consolas", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-meteor-effects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #34434f;
    background: #111a23;
}

.srv3-meteor-effects > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border-right: 1px solid #34434f;
}

.srv3-meteor-effects > div:last-child { border-right: 0; }
.srv3-meteor-effects span,
.srv3-meteor-cost span { color: #80909b; font-size: 8px; }
.srv3-meteor-effects strong {
    overflow: hidden;
    color: #f2a294;
    font: 700 10px "Cascadia Mono", "Consolas", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-meteor-cost {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.srv3-meteor-cost strong {
    min-width: 0;
    overflow: hidden;
    color: #e2c56e;
    font: 700 9px "Cascadia Mono", "Consolas", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-command {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #536371;
    border-radius: 5px;
    color: #eef3f5;
    background: #1c2935;
    cursor: pointer;
    text-align: left;
}

.srv3-command:hover:not(:disabled) {
    border-color: #8596a4;
    background: #243442;
}

.srv3-command:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.srv3-command > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #1b2024;
    background: var(--srv3-gold);
}

.srv3-command.is-meteor > i {
    color: #251714;
    background: #ee8874;
}

.srv3-command > span {
    min-width: 0;
    display: grid;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
}

.srv3-command small {
    overflow: hidden;
    color: #91a1ad;
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-engine-section,
.srv3-deep-section,
.srv3-automation,
.srv3-trial {
    padding: 13px;
    border-bottom: 1px solid var(--srv3-line);
    background: #0e151e;
}

.srv3-section-head {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.srv3-section-head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.srv3-section-head span {
    color: #dce5ea;
    font-size: 12px;
    font-weight: 700;
}

.srv3-section-head small {
    color: #73838f;
    font-size: 9px;
}

.srv3-section-head > button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #5d6e7c;
    border-radius: 4px;
    color: #e8eff2;
    background: #1e2b37;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.srv3-section-head > button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.srv3-engine-chain {
    position: relative;
    display: grid;
}

.srv3-engine-chain::before {
    content: '';
    position: absolute;
    top: 34px;
    bottom: 34px;
    left: 27px;
    width: 1px;
    background: #3f5260;
}

.srv3-engine-row {
    position: relative;
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) minmax(118px, 150px) 62px;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-bottom: 1px solid #283541;
    background: #121b24;
}

.srv3-engine-row:last-child {
    border-bottom: 0;
}

.srv3-engine-row::after {
    content: '';
    position: absolute;
    inset: 8px auto 8px 0;
    width: 2px;
    background: var(--engine-accent);
    opacity: 0.82;
}

.srv3-engine-row.is-locked {
    opacity: 0.48;
}

.srv3-engine-row.is-spacetime {
    border-top: 1px solid #71808c;
    background: #182027;
}

.srv3-engine-row.is-spacetime.is-locked { opacity: 1; }
.srv3-engine-row.is-spacetime.is-locked .srv3-engine-copy > div,
.srv3-engine-row.is-spacetime.is-locked [data-engine-output] { opacity: 0.52; }

.srv3-engine-rank {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--engine-accent), #25313a 45%);
    border-radius: 50%;
    color: #111820;
    background: var(--engine-accent);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 10px;
    font-weight: 800;
}

.srv3-engine-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.srv3-engine-copy > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.srv3-engine-copy strong {
    overflow: hidden;
    color: #e8eef1;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-engine-copy b {
    overflow: hidden;
    color: var(--engine-accent);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-engine-replica-note {
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    padding: 2px 5px;
    border: 1px solid #334951;
    border-radius: 3px;
    color: #758b95;
    background: #101b22;
    font-size: 7px;
    line-height: 1.2;
}

.srv3-engine-replica-note > i { color: #718895; }
.srv3-engine-replica-note em { color: #9babb2; font-style: normal; }
.srv3-engine-replica-note b {
    overflow: visible;
    color: #d2bb72;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 8px;
}
.srv3-engine-replica-note small {
    overflow: visible;
    color: #758b95;
    font-size: 7px;
}
.srv3-engine-replica-note.is-active {
    border-color: #397e72;
    background: #122a2c;
}
.srv3-engine-replica-note.is-active > i,
.srv3-engine-replica-note.is-active em,
.srv3-engine-replica-note.is-active b { color: #8ce0cf; }

.srv3-engine-copy small,
.srv3-engine-cost span,
.srv3-engine-cost small {
    overflow: hidden;
    color: #7f909c;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-engine-copy .srv3-license-note {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #b7c7d0;
    white-space: normal;
}

.srv3-license-note i { color: #d4bd72; }

.srv3-engine-cost {
    min-width: 0;
    display: grid;
    justify-items: end;
    gap: 3px;
}

.srv3-engine-cost span {
    color: #d9bd70;
    font-family: "Cascadia Mono", "Consolas", monospace;
}

.srv3-engine-buy {
    width: 58px;
    min-height: 38px;
    display: grid;
    place-items: center;
    padding: 4px;
    border: 1px solid #566a79;
    border-radius: 4px;
    color: #e9eff2;
    background: #23313d;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.srv3-engine-buy small {
    max-width: 48px;
    overflow: hidden;
    color: #8fcfc1;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-engine-buy.is-license {
    grid-template-columns: auto auto;
    gap: 2px 4px;
    color: #20252a;
    background: #dbe4e9;
}

.srv3-engine-buy.is-license > i { grid-row: 1 / span 2; }
.srv3-engine-buy.is-license > span { font-size: 9px; }
.srv3-engine-buy.is-license small {
    color: #4b5962;
}

.srv3-engine-buy:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.srv3-collapse {
    min-height: 132px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 118px;
    grid-template-areas:
        "mark copy action"
        "mark facts action";
    align-items: center;
    gap: 8px 12px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--srv3-line);
    background: #181522;
}

.srv3-collapse.is-ready {
    background: #211a2d;
}

.srv3-collapse-mark,
.srv3-collapse > button {
    min-height: 42px;
    place-items: center;
    border-radius: 5px;
}

.srv3-collapse-mark {
    grid-area: mark;
    width: 42px;
    height: 42px;
    display: grid;
    color: #d5b5ef;
    background: #30243e;
}

.srv3-collapse-copy {
    grid-area: copy;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.srv3-collapse span {
    color: #c7a8df;
    font-size: 11px;
    font-weight: 700;
}

.srv3-collapse strong {
    overflow: hidden;
    color: #f2eafa;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-collapse small {
    color: #90849b;
    font-size: 9px;
}

.srv3-collapse-facts {
    grid-area: facts;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
}

.srv3-collapse-facts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #91889a;
    font-size: 8px;
    font-weight: 500;
}

.srv3-collapse-facts i { color: #b597cd; }
.srv3-collapse-facts b { color: #d5c6df; }

.srv3-collapse strong b,
.srv3-collapse small b {
    color: #dbc084;
}

.srv3-collapse > button {
    grid-area: action;
    width: 116px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #80639a;
    color: #ead8f7;
    background: #39284b;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.srv3-collapse > button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.srv3-core-ledger {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--srv3-line);
    background: #111923;
}

.srv3-core-ledger > div {
    min-width: 0;
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 10px 13px;
    border-right: 1px solid var(--srv3-line);
}

.srv3-core-ledger > div:last-child { border-right: 0; }
.srv3-core-ledger span { color: #8595a1; font-size: 9px; }
.srv3-core-ledger strong {
    overflow: hidden;
    color: #dbbf78;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-deep-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.srv3-deep-upgrade {
    min-width: 0;
    min-height: 94px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 6px 8px;
    padding: 9px;
    border: 1px solid #3b4a57;
    border-radius: 5px;
    color: #e6edf0;
    background: #17212b;
    cursor: pointer;
    text-align: left;
}

.srv3-deep-upgrade > i {
    grid-row: 1 / span 2;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #20262b;
    background: #d5b761;
    border-radius: 4px;
}

.srv3-deep-upgrade > span {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 3px;
}

.srv3-deep-upgrade strong { font-size: 10px; }
.srv3-deep-upgrade small { color: #84939e; font-size: 8px; line-height: 1.35; }
.srv3-deep-upgrade > b { color: #d6b966; font-size: 9px; }

.srv3-deep-upgrade.is-purchased {
    border-color: #376e58;
    background: #14251e;
}

.srv3-deep-upgrade.is-purchased > i {
    background: #65c891;
}

.srv3-deep-upgrade:disabled:not(.is-purchased) {
    cursor: not-allowed;
    opacity: 0.48;
}

.srv3-repeat-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.srv3-repeat-row {
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 56px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #33424f;
    border-radius: 5px;
    background: #151f29;
}

.srv3-repeat-row > i {
    color: #63c5bf;
    text-align: center;
}

.srv3-repeat-row > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.srv3-repeat-row strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-repeat-row strong b { color: #72cfc8; }
.srv3-repeat-row small { color: #7e8e99; font-size: 8px; }
.srv3-repeat-effect {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #8fa0aa;
    font-size: 8px;
    line-height: 1.35;
}

.srv3-repeat-effect em {
    min-width: 0;
    color: #85949e;
    font-style: normal;
    white-space: nowrap;
}

.srv3-repeat-effect em b {
    color: #c9e7e3;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-weight: 700;
}

.srv3-repeat-effect > i {
    flex: 0 0 auto;
    color: #53636e;
    font-size: 7px;
}
.srv3-repeat-row > span { color: #bba765; font-size: 8px; white-space: nowrap; }
.srv3-repeat-row > button {
    width: 54px;
    min-height: 36px;
    display: grid;
    place-items: center;
    padding: 3px;
    border: 1px solid #526674;
    border-radius: 4px;
    color: #e8eff1;
    background: #23323d;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.srv3-repeat-row > button small { color: #78cdbd; }
.srv3-repeat-row > button:disabled { cursor: not-allowed; opacity: 0.38; }

.srv3-automation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #2e3f4c;
    border-radius: 5px;
    background: #101820;
}

.srv3-automation > header {
    grid-column: 1 / -1;
}

.srv3-auto-row,
.srv3-auto-strategy {
    min-width: 0;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #33424d;
    border-radius: 5px;
    background: #151e27;
}

.srv3-auto-row > span,
.srv3-auto-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.srv3-auto-row strong { font-size: 10px; }
.srv3-auto-row small { color: #7f8e99; font-size: 8px; }
.srv3-auto-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.srv3-auto-title strong {
    min-width: 0;
    overflow: hidden;
    color: #dce8eb;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-auto-title em {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid #46545e;
    border-radius: 3px;
    color: #8e9ba4;
    background: #202a32;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}

.srv3-auto-title em.is-running { border-color: #3f7e69; color: #9ce0c0; background: #173328; }
.srv3-auto-title em.is-off { border-color: #5d5945; color: #c2b780; background: #29271c; }
.srv3-auto-title em.is-locked { color: #71808a; background: #1b242b; }
.srv3-switch { position: relative; flex: 0 0 38px; width: 38px; height: 22px; }
.srv3-switch input { position: absolute; opacity: 0; pointer-events: none; }
.srv3-switch i {
    position: absolute;
    inset: 0;
    border: 1px solid #465560;
    border-radius: 11px;
    background: #222c35;
}

.srv3-switch i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #aab5bd;
    transition: transform 160ms ease;
}

.srv3-switch input:checked + i {
    border-color: #3d8872;
    background: #1b4c3d;
}

.srv3-switch input:checked + i::after {
    transform: translateX(16px);
    background: #72d1a9;
}

.srv3-switch input:disabled + i { opacity: 0.35; }
.srv3-auto-strategy { display: grid; gap: 6px; }
.srv3-auto-strategy > .srv3-auto-copy > small { color: #7f8e99; font-size: 8px; }
.srv3-auto-strategy > div { display: grid; grid-template-columns: 1fr 1fr; }
.srv3-auto-strategy button {
    min-height: 28px;
    border: 1px solid #455562;
    color: #8898a3;
    background: #111921;
    cursor: pointer;
    font-size: 9px;
}

.srv3-auto-strategy button:first-child { border-radius: 4px 0 0 4px; }
.srv3-auto-strategy button:last-child { border-left: 0; border-radius: 0 4px 4px 0; }
.srv3-auto-strategy button.is-active { color: #142019; background: #67c793; }
.srv3-auto-strategy button:disabled { cursor: not-allowed; opacity: 0.4; }
.srv3-auto-static > i {
    flex: 0 0 28px;
    color: #6fc8c2;
    font-size: 16px;
    text-align: center;
}

.srv3-trial > .srv3-section-head > b {
    color: #70d0c9;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 12px;
}

.srv3-trial-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.srv3-trial-check {
    min-width: 0;
    min-height: 52px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 7px 9px;
    border-left: 3px solid #45525d;
    background: #151e27;
}

.srv3-trial-check.is-recorded { border-left-color: #53bdb6; }
.srv3-trial-check span { color: #7e8d98; font-size: 9px; }
.srv3-trial-check strong {
    overflow: hidden;
    color: #dce8ea;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-trial-targets {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    margin-top: 9px;
}

.srv3-trial-targets span {
    min-width: 0;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #35424d;
    border-radius: 3px;
    color: #687680;
    background: #111820;
    font-size: 8px;
}

.srv3-trial-targets span.is-reached { border-color: #927849; color: #e1c577; background: #282316; }
.srv3-trial-targets span.is-complete { border-color: #39765e; color: #a8e0c3; background: #15271f; }
.srv3-trial footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: #82919c;
    font-size: 9px;
}

.srv3-trial footer b { color: #d6bd75; }

@media (max-width: 860px) {
    .srv3-live-grid { grid-template-columns: 1fr 1fr; }
    .srv3-live-grid > div:nth-child(2) { border-right: 0; }
    .srv3-live-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--srv3-line); }
    .srv3-rune-stage { grid-template-columns: 1fr; }
    .srv3-constellation-wrap { border-right: 0; border-bottom: 1px solid var(--srv3-line); }
    .srv3-growth-strip { grid-template-columns: 1fr; grid-template-rows: auto; }
    .srv3-deep-grid { grid-template-columns: 1fr 1fr; }
    .srv3-repeat-list { grid-template-columns: 1fr; }
    .srv3-automation { grid-template-columns: 1fr 1fr; }
    .srv3-auto-strategy { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    #star-rune-view { padding: 8px 7px 28px; }
    #star-rune-view > .view-back-btn { margin-left: 1px; }
    .srv3-header { min-height: 62px; padding: 9px 10px; }
    .srv3-header h2 { font-size: 22px; }
    .srv3-tabs button { min-width: 58px; min-height: 32px; padding: 5px 9px; }
    .srv3-live-grid > div { min-height: 82px; padding: 8px 8px 8px 12px; }
    .srv3-live-grid strong { font-size: 14px; }
    .srv3-constellation-wrap { min-height: 244px; padding: 10px 4px 13px; }
    .srv3-constellation { max-height: 182px; }
    .srv3-level-core { min-width: 164px; margin-top: -14px; padding: 6px 12px; }
    .srv3-level-core strong { font-size: 16px; }
    .srv3-growth-strip { gap: 6px; padding: 8px; }
    .srv3-meteor-control { gap: 8px; padding: 10px; }
    .srv3-meteor-control > header { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; }
    .srv3-meteor-control > header > i { width: 30px; height: 30px; }
    .srv3-meteor-control > header small { line-height: 1.35; }
    .srv3-command { min-height: 68px; grid-template-columns: 29px minmax(0, 1fr); gap: 7px; padding: 7px; }
    .srv3-command > i { width: 29px; height: 29px; }
    .srv3-command > span { font-size: 10px; }
    .srv3-engine-section,
    .srv3-deep-section,
    .srv3-automation,
    .srv3-trial { padding: 9px 7px; }
    .srv3-engine-chain::before { left: 20px; }
    .srv3-engine-row {
        min-height: 82px;
        grid-template-columns: 25px minmax(0, 1fr) 54px;
        grid-template-rows: 1fr auto;
        gap: 4px 7px;
        padding: 6px 5px;
    }
    .srv3-engine-rank { width: 23px; height: 23px; grid-row: 1 / span 2; }
    .srv3-engine-copy { align-self: end; }
    .srv3-engine-copy > div { gap: 5px; }
    .srv3-engine-copy strong { font-size: 9px; }
    .srv3-engine-copy b { font-size: 9px; }
    .srv3-engine-cost { grid-column: 2; grid-row: 2; align-self: start; justify-items: start; }
    .srv3-engine-cost span { font-size: 8px; }
    .srv3-engine-cost small { display: none; }
    .srv3-engine-buy { width: 52px; min-height: 36px; grid-column: 3; grid-row: 1 / span 2; }
    .srv3-collapse {
        min-height: 0;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-areas:
            "mark copy"
            "facts facts"
            "action action";
        gap: 8px;
        padding: 10px 8px;
    }
    .srv3-collapse-mark { width: 36px; height: 36px; }
    .srv3-collapse-facts { display: grid; grid-template-columns: 1fr; gap: 5px; }
    .srv3-collapse > button { width: 100%; min-height: 38px; }
    .srv3-collapse strong { font-size: 11px; }
    .srv3-core-ledger > div { min-height: 62px; padding: 8px; }
    .srv3-core-ledger strong { font-size: 13px; }
    .srv3-deep-upgrade { min-height: 100px; }
    .srv3-repeat-row { grid-template-columns: 23px minmax(0, 1fr) 52px; grid-template-rows: 1fr auto; }
    .srv3-repeat-row > span { grid-column: 2; grid-row: 2; }
    .srv3-repeat-row > button { grid-column: 3; grid-row: 1 / span 2; }
    .srv3-automation { grid-template-columns: 1fr; }
    .srv3-auto-strategy { grid-column: auto; }
    .srv3-trial-check { padding: 6px; }
    .srv3-trial-check strong { font-size: 8px; }
    .srv3-trial-targets { gap: 2px; }
}

@media (max-width: 370px) {
    .srv3-header > div:first-child > span { display: none; }
    .srv3-tabs button { min-width: 52px; }
    .srv3-growth-strip { grid-template-rows: auto; }
    .srv3-deep-grid { grid-template-columns: 1fr; }
    .srv3-trial footer { display: grid; gap: 3px; }
}

/* The game keeps a 450px desktop frame, so Star Rune must respond to its own
   width instead of assuming a wide browser also means a wide game surface. */
@container (max-width: 860px) {
    .srv3-live-grid { grid-template-columns: 1fr 1fr; }
    .srv3-live-grid > div:nth-child(2) { border-right: 0; }
    .srv3-live-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--srv3-line); }
    .srv3-rune-stage { grid-template-columns: 1fr; }
    .srv3-constellation-wrap { border-right: 0; border-bottom: 1px solid var(--srv3-line); }
    .srv3-growth-strip { grid-template-columns: 1fr; grid-template-rows: auto; }
    .srv3-deep-grid { grid-template-columns: 1fr 1fr; }
    .srv3-repeat-list { grid-template-columns: 1fr; }
    .srv3-automation { grid-template-columns: 1fr 1fr; }
    .srv3-auto-strategy { grid-column: 1 / -1; }
}

@container (max-width: 520px) {
    .srv3-header { min-height: 62px; padding: 9px 10px; }
    .srv3-header h2 { font-size: 22px; }
    .srv3-tabs button { min-width: 58px; min-height: 32px; padding: 5px 9px; }
    .srv3-live-grid > div { min-height: 82px; padding: 8px 8px 8px 12px; }
    .srv3-live-grid strong { font-size: 14px; }
    .srv3-constellation-wrap { min-height: 244px; padding: 10px 4px 13px; }
    .srv3-constellation { max-height: 182px; }
    .srv3-level-core { min-width: 164px; margin-top: -14px; padding: 6px 12px; }
    .srv3-level-core strong { font-size: 16px; }
    .srv3-growth-strip { gap: 6px; padding: 8px; }
    .srv3-meteor-control { gap: 8px; padding: 10px; }
    .srv3-meteor-control > header { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; }
    .srv3-meteor-control > header > i { width: 30px; height: 30px; }
    .srv3-meteor-control > header small { line-height: 1.35; }
    .srv3-command { min-height: 68px; grid-template-columns: 29px minmax(0, 1fr); gap: 7px; padding: 7px; }
    .srv3-command > i { width: 29px; height: 29px; }
    .srv3-command > span { font-size: 10px; }
    .srv3-engine-section,
    .srv3-deep-section,
    .srv3-automation,
    .srv3-trial { padding: 9px 7px; }
    .srv3-engine-chain::before { left: 20px; }
    .srv3-engine-row {
        min-height: 82px;
        grid-template-columns: 25px minmax(0, 1fr) 54px;
        grid-template-rows: 1fr auto;
        gap: 4px 7px;
        padding: 6px 5px;
    }
    .srv3-engine-rank { width: 23px; height: 23px; grid-row: 1 / span 2; }
    .srv3-engine-copy { align-self: end; }
    .srv3-engine-copy > div { gap: 5px; }
    .srv3-engine-copy strong,
    .srv3-engine-copy b { font-size: 9px; }
    .srv3-engine-cost { grid-column: 2; grid-row: 2; align-self: start; justify-items: start; }
    .srv3-engine-cost span { font-size: 8px; }
    .srv3-engine-cost small { display: none; }
    .srv3-engine-buy { width: 52px; min-height: 36px; grid-column: 3; grid-row: 1 / span 2; }
    .srv3-collapse {
        min-height: 0;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-areas:
            "mark copy"
            "facts facts"
            "action action";
        gap: 8px;
        padding: 10px 8px;
    }
    .srv3-collapse-mark { width: 36px; height: 36px; }
    .srv3-collapse-facts { display: grid; grid-template-columns: 1fr; gap: 5px; }
    .srv3-collapse > button { width: 100%; min-height: 38px; }
    .srv3-collapse strong { font-size: 11px; }
    .srv3-core-ledger > div { min-height: 62px; padding: 8px; }
    .srv3-core-ledger strong { font-size: 13px; }
    .srv3-deep-upgrade { min-height: 100px; }
    .srv3-repeat-row { grid-template-columns: 23px minmax(0, 1fr) 52px; grid-template-rows: 1fr auto; }
    .srv3-repeat-row > span { grid-column: 2; grid-row: 2; }
    .srv3-repeat-row > button { grid-column: 3; grid-row: 1 / span 2; }
    .srv3-automation { grid-template-columns: 1fr; }
    .srv3-auto-strategy { grid-column: auto; }
    .srv3-trial-check { padding: 6px; }
    .srv3-trial-check strong { font-size: 8px; }
    .srv3-trial-targets { gap: 2px; }
}

@container (max-width: 320px) {
    .srv3-header > div:first-child > span { display: none; }
    .srv3-tabs button { min-width: 52px; }
    .srv3-growth-strip { grid-template-rows: auto; }
    .srv3-deep-grid { grid-template-columns: 1fr; }
    .srv3-trial footer { display: grid; gap: 3px; }
}

/* 星蕴 V3 深空延展：星核里程碑、发展方向与发动机复制体 */
.srv3-live-grid small b {
    color: #d6bd75;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-weight: 700;
}

.srv3-milestones,
.srv3-focus,
.srv3-galaxy,
.srv3-engine-replicas {
    padding: 12px 13px;
    border-bottom: 1px solid var(--srv3-line);
    background: #0e161e;
}

.srv3-milestones > .srv3-section-head > b {
    color: #d6bd75;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 11px;
}

.srv3-milestone-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #2f3e49;
    border-radius: 5px;
    background: #2f3e49;
}

.srv3-milestone {
    min-width: 0;
    min-height: 67px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px;
    color: #70808b;
    background: #111921;
}

.srv3-milestone > i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #3b4a55;
    border-radius: 50%;
    color: #697985;
    background: #19232c;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

.srv3-milestone > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.srv3-milestone strong {
    overflow: hidden;
    color: #aab6bd;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv3-milestone small {
    color: #687883;
    font-size: 7px;
    line-height: 1.35;
}

.srv3-milestone > b {
    color: #768690;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 8px;
}

.srv3-milestone.is-reached { background: #13231e; }
.srv3-milestone.is-reached > i { border-color: #3f8369; color: #a1dfc1; background: #1b392d; }
.srv3-milestone.is-reached strong { color: #c6ead9; }
.srv3-milestone.is-reached > b { color: #70cda2; }
.srv3-milestone.is-next { box-shadow: inset 3px 0 #d1ad55; }
.srv3-milestone.is-next > i { border-color: #8c7441; color: #e6cc84; }
.srv3-milestone.is-next strong { color: #e7dcc0; }

.srv3-focus > .srv3-section-head > i {
    color: #6ac7c6;
    font-size: 15px;
}

.srv3-focus-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #3a4a56;
    border-radius: 5px;
}

.srv3-focus-options button {
    min-width: 0;
    min-height: 58px;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border: 0;
    border-right: 1px solid #3a4a56;
    color: #8c9ba5;
    background: #111a23;
    cursor: pointer;
    text-align: left;
}

.srv3-focus-options button:last-child { border-right: 0; }
.srv3-focus-options button > i { color: #687b88; text-align: center; }
.srv3-focus-options button > span { min-width: 0; display: grid; gap: 2px; }
.srv3-focus-options strong { color: #b7c4ca; font-size: 9px; }
.srv3-focus-options small { color: #71818c; font-size: 7px; line-height: 1.35; }
.srv3-focus-options button.is-active { color: #15211f; background: #67c4b8; }
.srv3-focus-options button.is-active > i,
.srv3-focus-options button.is-active strong,
.srv3-focus-options button.is-active small { color: #132522; }
.srv3-focus-options button:disabled { cursor: not-allowed; opacity: 0.4; }

.srv3-galaxy {
    min-height: 210px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 116px;
    align-items: center;
    gap: 16px;
    background: #090f17;
}

.srv3-galaxy-visual {
    --galaxy-spin: 12s;
    position: relative;
    width: 170px;
    height: 170px;
    margin: auto;
    isolation: isolate;
}

.srv3-galaxy-visual::before,
.srv3-galaxy-visual::after {
    content: '';
    position: absolute;
    inset: 50%;
    z-index: -1;
    width: 1px;
    height: 1px;
    box-shadow: 0 -66px #89d9df, 57px -33px #e6bf63, 57px 33px #df7d71, 0 66px #79d19f, -57px 33px #a68bd3, -57px -33px #73a4e2;
}

.srv3-galaxy-visual::after {
    transform: rotate(30deg) scale(0.62);
    box-shadow: 0 -66px #ecdfad, 57px -33px #69c5ce, 57px 33px #9b8fd8, 0 66px #e27c74, -57px 33px #73cf9e, -57px -33px #e1bd62;
    opacity: 0.72;
}

.srv3-galaxy-orbit {
    position: absolute;
    inset: 50%;
    display: block;
    border: 1px solid #315060;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: srv3-galaxy-spin var(--galaxy-spin) linear infinite;
}

.srv3-galaxy-orbit b {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8edce0;
    box-shadow: 0 0 7px #67c4cf;
}

.srv3-galaxy-orbit b:nth-child(1) { transform: translate(-50%, -50%); }
.srv3-galaxy-orbit b:nth-child(2) { top: 50%; right: -2px; left: auto; transform: translate(50%, -50%); }
.srv3-galaxy-orbit b:nth-child(3) { top: auto; bottom: -2px; transform: translate(-50%, 50%); }
.srv3-galaxy-orbit b:nth-child(4) { top: 50%; left: -2px; transform: translate(-50%, -50%); }
.srv3-galaxy-orbit b:nth-child(5) { top: 14%; right: 14%; left: auto; transform: translate(50%, -50%); }
.srv3-galaxy-orbit.orbit-a { width: 42%; height: 42%; }
.srv3-galaxy-orbit.orbit-b { width: 68%; height: 68%; border-color: #493d60; animation-direction: reverse; }
.srv3-galaxy-orbit.orbit-c { width: 93%; height: 93%; border-color: #584d32; }
.srv3-galaxy-visual[data-speed-tier="2"] { --galaxy-spin: 8s; }
.srv3-galaxy-visual[data-speed-tier="3"] { --galaxy-spin: 5s; }
.srv3-galaxy-visual[data-speed-tier="4"] { --galaxy-spin: 2.8s; }

.srv3-galaxy-visual > span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 58px;
    height: 58px;
    display: grid;
    place-content: center;
    gap: 2px;
    transform: translate(-50%, -50%);
    border: 1px solid #5f7380;
    border-radius: 50%;
    color: #eef8f8;
    background: #172833;
    box-shadow: 0 0 22px rgba(84, 190, 198, 0.2);
    text-align: center;
}

.srv3-galaxy-visual > span small { color: #82aab0; font-size: 7px; }
.srv3-galaxy-visual > span strong { max-width: 48px; overflow: hidden; font-family: "Cascadia Mono", "Consolas", monospace; font-size: 11px; text-overflow: ellipsis; }
.srv3-galaxy.is-locked .srv3-galaxy-visual { filter: grayscale(0.82); opacity: 0.46; }
.srv3-galaxy.is-locked .srv3-galaxy-orbit { animation-play-state: paused; }

.srv3-galaxy-copy { min-width: 0; display: grid; gap: 9px; }
.srv3-galaxy-copy > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.srv3-galaxy-copy > header > div { min-width: 0; display: grid; gap: 2px; }
.srv3-galaxy-copy > header span { color: #e8eff1; font-size: 14px; font-weight: 800; }
.srv3-galaxy-copy > header small { color: #748691; font-size: 8px; }
.srv3-galaxy-copy > header > b { flex: 0 0 auto; color: #79ccd0; font-size: 9px; }
.srv3-galaxy-guide {
    display: grid;
    gap: 4px;
    padding: 8px 9px;
    border: 1px solid rgba(107, 197, 198, .2);
    border-left: 2px solid #67c4b8;
    border-radius: 4px;
    color: #81929c;
    background: rgba(23, 47, 53, .48);
    font-size: 8px;
    line-height: 1.55;
}
.srv3-galaxy-guide strong { color: #c7e9e5; font-size: 9px; }
.srv3-galaxy-guide strong i { margin-right: 4px; color: #72d4cb; }
.srv3-galaxy-guide b { color: #dbc77f; font-family: "Cascadia Mono", "Consolas", monospace; }
.srv3-galaxy-numbers { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 7px; }
.srv3-galaxy-numbers > div { min-width: 0; display: grid; gap: 2px; }
.srv3-galaxy-numbers span { color: #71828d; font-size: 8px; }
.srv3-galaxy-numbers strong { overflow: hidden; color: #e2edf0; font-family: "Cascadia Mono", "Consolas", monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.srv3-galaxy-numbers > i { color: #536873; font-size: 9px; }
.srv3-galaxy-progress { height: 7px; overflow: hidden; border: 1px solid #344550; border-radius: 4px; background: #111a22; }
.srv3-galaxy-progress > i { display: block; width: var(--galaxy-progress); height: 100%; background: #64c8c5; transition: width 160ms linear; }
.srv3-galaxy-progress-copy { display: flex; justify-content: space-between; gap: 10px; color: #74858f; font-size: 8px; }
.srv3-galaxy-progress-copy > span { color: #8bd8d3; font-family: "Cascadia Mono", "Consolas", monospace; font-weight: 700; }
.srv3-galaxy-effects { display: flex; flex-wrap: wrap; gap: 5px 12px; color: #71818b; font-size: 8px; }
.srv3-galaxy-effects b { color: #d8c27b; }

.srv3-galaxy-action {
    min-height: 64px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid #4a777a;
    border-radius: 5px;
    color: #e5f4f3;
    background: #1b3b3b;
    cursor: pointer;
    text-align: left;
}

.srv3-galaxy-action > i { color: #87d7d3; text-align: center; }
.srv3-galaxy-action > span { min-width: 0; display: grid; gap: 2px; font-size: 9px; font-weight: 800; }
.srv3-galaxy-action small { color: #87aaa9; font-size: 7px; font-weight: 500; line-height: 1.35; }
.srv3-galaxy-action:disabled { cursor: not-allowed; opacity: 0.38; }

.srv3-engine-replicas {
    display: grid;
    gap: 9px;
    background: #0a1219;
}

.srv3-replica-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.srv3-replica-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
        "index copy effect"
        ". next next";
    align-items: center;
    gap: 8px;
    min-height: 55px;
    padding: 7px 8px;
    border: 1px solid #2b3944;
    border-radius: 5px;
    background: #111b24;
    color: #798994;
}

.srv3-replica-card.is-unlocked {
    border-color: #397e72;
    background: linear-gradient(100deg, #122d2e, #13252e);
    box-shadow: inset 3px 0 #68c9bd;
}

.srv3-replica-index {
    grid-area: index;
    width: 28px;
    height: 32px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    border: 1px solid #3b5260;
    border-radius: 4px;
    color: #778b96;
    background: #17232c;
}

.srv3-replica-index span { font-size: 6px; }
.srv3-replica-index strong { color: #d9e8e8; font-family: "Cascadia Mono", "Consolas", monospace; font-size: 13px; }
.srv3-replica-copy { grid-area: copy; min-width: 0; display: grid; gap: 3px; }
.srv3-replica-copy strong { overflow: hidden; color: #b7c8cc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.srv3-replica-copy small { overflow: hidden; color: #72828c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.srv3-replica-effect { grid-area: effect; color: #74848e; font-family: "Cascadia Mono", "Consolas", monospace; font-size: 8px; white-space: nowrap; }
.srv3-replica-next { grid-area: next; min-width: 0; overflow: hidden; color: #72828c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.srv3-replica-card.is-unlocked .srv3-replica-index { border-color: #51a99b; background: #1a3a3a; }
.srv3-replica-card.is-unlocked .srv3-replica-index strong,
.srv3-replica-card.is-unlocked .srv3-replica-effect { color: #8ce0cf; }
.srv3-replica-card.is-unlocked .srv3-replica-copy strong { color: #d0eee7; }
.srv3-replica-card.is-locked { opacity: .62; }

.srv3-shell.is-order-burst .srv3-live-stardust,
.srv3-shell.is-order-burst .srv3-level-core {
    animation: srv3-order-burst 620ms ease-out;
}

@keyframes srv3-galaxy-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes srv3-order-burst {
    0% { box-shadow: inset 0 0 0 rgba(104, 211, 205, 0); }
    34% { box-shadow: inset 0 0 28px rgba(104, 211, 205, 0.3), 0 0 18px rgba(104, 211, 205, 0.16); }
    100% { box-shadow: inset 0 0 0 rgba(104, 211, 205, 0); }
}

@media (max-width: 860px) {
    .srv3-milestone-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .srv3-galaxy { grid-template-columns: 150px minmax(0, 1fr); }
    .srv3-galaxy-visual { width: 144px; height: 144px; }
    .srv3-galaxy-action { grid-column: 1 / -1; min-height: 48px; }
}

@media (max-width: 520px) {
    .srv3-milestones,
    .srv3-focus,
    .srv3-galaxy,
    .srv3-engine-replicas { padding: 9px 7px; }
    .srv3-milestone-track { grid-template-columns: 1fr; }
    .srv3-milestone { min-height: 56px; }
    .srv3-focus-options { grid-template-columns: 1fr; }
    .srv3-focus-options button { min-height: 50px; border-right: 0; border-bottom: 1px solid #3a4a56; }
    .srv3-focus-options button:last-child { border-bottom: 0; }
    .srv3-galaxy { grid-template-columns: 106px minmax(0, 1fr); gap: 8px; }
    .srv3-galaxy-visual { width: 106px; height: 106px; }
    .srv3-galaxy-visual::before,
    .srv3-galaxy-visual::after { display: none; }
    .srv3-galaxy-copy > header { display: grid; gap: 3px; }
    .srv3-galaxy-copy > header span { font-size: 12px; }
    .srv3-galaxy-effects { display: grid; gap: 3px; }
    .srv3-galaxy-action { grid-column: 1 / -1; width: 100%; }
    .srv3-replica-grid { grid-template-columns: 1fr; }
    .srv3-replica-card {
        grid-template-columns: 28px minmax(0, 1fr);
        grid-template-areas:
            "index copy"
            "index effect"
            "index next";
    }
}

@container (max-width: 520px) {
    .srv3-milestones,
    .srv3-focus,
    .srv3-galaxy,
    .srv3-engine-replicas { padding: 9px 7px; }
    .srv3-milestone-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .srv3-milestone { min-height: 62px; grid-template-columns: 23px minmax(0, 1fr); }
    .srv3-milestone > b { grid-column: 2; }
    .srv3-focus-options { grid-template-columns: 1fr; }
    .srv3-focus-options button { min-height: 50px; border-right: 0; border-bottom: 1px solid #3a4a56; }
    .srv3-focus-options button:last-child { border-bottom: 0; }
    .srv3-galaxy { grid-template-columns: 106px minmax(0, 1fr); gap: 8px; }
    .srv3-galaxy-visual { width: 106px; height: 106px; }
    .srv3-galaxy-visual::before,
    .srv3-galaxy-visual::after { display: none; }
    .srv3-galaxy-copy > header { display: grid; gap: 3px; }
    .srv3-galaxy-copy > header span { font-size: 12px; }
    .srv3-galaxy-effects { display: grid; gap: 3px; }
    .srv3-galaxy-action { grid-column: 1 / -1; width: 100%; }
    .srv3-replica-grid { grid-template-columns: 1fr; }
    .srv3-replica-card {
        grid-template-columns: 28px minmax(0, 1fr);
        grid-template-areas:
            "index copy"
            "index effect"
            "index next";
    }
}

@container (max-width: 330px) {
    .srv3-milestone-track { grid-template-columns: 1fr; }
    .srv3-galaxy { grid-template-columns: 88px minmax(0, 1fr); }
    .srv3-galaxy-visual { width: 86px; height: 86px; }
    .srv3-galaxy-visual > span { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .srv3-star-line-flow,
    .srv3-star-halo,
    .srv3-star-orbit,
    .srv3-star-orbiter,
    .srv3-level-core strong,
    .srv3-galaxy-orbit,
    .srv3-shell.is-order-burst .srv3-live-stardust,
    .srv3-shell.is-order-burst .srv3-level-core { animation: none; }

    .srv3-star-line-aura { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-constellation-flow { animation: none; }
    .sr-chart-core,
    .sr-chart-halo,
    .sr-auto-toggle > i,
    .sr-auto-toggle > i::after { transition: none; }
}


/* 精益保底面板 */
.pity-bar-panel { margin: 10px 0; padding: 10px 14px; background: linear-gradient(180deg, rgba(70,50,20,0.5), rgba(20,15,8,0.6)); border: 1px solid rgba(255,200,80,0.35); }
.pity-bar-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; margin-bottom: 8px; }
.pity-bar-head strong { color: #ffc94a; letter-spacing: 2px; }
.pity-bar-head b { color: #ffe684; font-size: 1.1em; }
.pity-bar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.pity-bar-row input { width: 110px; }
.pity-max-energy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
    margin: 2px 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 200, 80, 0.26);
    border-radius: 6px;
    background: rgba(255, 200, 80, 0.08);
    color: #e8dcb8;
}
.pity-max-energy-row strong {
    color: #ffe684;
    font-size: 16px;
    font-family: monospace;
}
.pity-max-energy-row small {
    color: #bfa982;
}
.pity-max-energy-row,
.pity-max-energy-row small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pity-buy-max-btn {
    border-color: rgba(255, 216, 112, 0.58);
    background: linear-gradient(180deg, #7a5420, #4a2c10);
}
.pity-buy-max-btn:hover:not(:disabled) {
    filter: brightness(1.14);
}
.pity-vouchers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin: 8px 0; }
.pity-voucher { padding: 8px 10px; background: rgba(40,30,10,0.5); border: 1px solid rgba(255,200,80,0.3); border-radius: 6px; }
.pity-voucher.used { opacity: 0.5; filter: grayscale(0.6); }
.pity-voucher.locked { opacity: 0.65; }
.pity-voucher-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.pity-voucher-head strong { color: #ffe684; }
.pity-voucher-body { display: flex; gap: 6px; }
.pity-voucher-body select { flex: 1; }
.input-inline-sm { width: 100px; padding: 2px 6px; }

/* 精益保底进度条 */
.pity-progress-wrap { margin: 4px 0 10px; }
.pity-progress-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: #e8dcb8; margin-bottom: 4px; gap: 8px; flex-wrap: wrap;
}
.pity-progress-label > span:last-child { color: #ffe684; font-family: monospace; }
.pity-progress-track {
    position: relative; height: 14px; border-radius: 7px;
    background: linear-gradient(180deg, rgba(20,15,5,0.7), rgba(5,3,1,0.8));
    border: 1px solid rgba(255,200,80,0.35);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.pity-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #a8741a 0%, #e6b14a 45%, #ffd780 100%);
    box-shadow: 0 0 8px rgba(255,200,80,0.5);
    transition: width 0.5s cubic-bezier(.2,1,.4,1);
    border-radius: 7px 0 0 7px;
}
.pity-progress-fill.full {
    background: linear-gradient(90deg, #ffd780 0%, #fff5cc 50%, #ffd780 100%);
    background-size: 200% 100%;
    border-radius: 7px;
    animation: pity-progress-full 1.8s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(255,220,120,0.9), 0 0 24px rgba(255,200,80,0.5);
}
@keyframes pity-progress-full {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.pity-progress-hint {
    margin-top: 6px;
    color: #e8dcb8;
}

.pity-voucher-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}

.pity-voucher-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pity-voucher-field span {
    color: #ffe684;
    font-size: 12px;
}

.pity-voucher-field select {
    width: 100%;
}

/* 拍卖行市场项：存量 + 价格封顶高亮 */
.market-supply { font-size: 12px; color: #c9c9c9; margin: 4px 0 0; }
.market-supply.atmax { color: #ffd780; text-shadow: 0 0 6px rgba(255,200,80,0.4); }
.market-item.market-atmax { border-color: rgba(255,200,80,0.55); box-shadow: 0 0 14px rgba(255,160,60,0.18) inset; }
.market-item.market-atmax .price { color: #ffc94a; }

/* 独立视图统一标题栏（标题 + 右侧刷新按钮） */
.view-header-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 10px 0;
}
.view-header-row .action-btn {
    padding: 6px 12px; font-size: 13px;
    background: linear-gradient(180deg, #3a55a6, #1b2a6a);
    color: #fff; border: 1px solid #6a86d0; border-radius: 6px; cursor: pointer;
}
.view-header-row .action-btn:hover { filter: brightness(1.15); }

/* 月卡状态 */
.monthly-card-item { padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); }
.monthly-card-item:last-child { border-bottom: none; }
.card-active { color: #7be084; font-weight: 600; }
.card-inactive { color: #888; }

/* ============================================================================
 * v1.14.0 · 活动中心 + 至尊殿堂
 * 架构: 活动中心 = 列表页 (.activity-hall) + 独立详情页 (.activity-detail)
 *      至尊殿堂 = 单页三柱成长卡 (.supreme-hall)
 * 原则: 横排中文,不允许单字一行;栅格 auto-fit+minmax,窄屏自动换行
 * ========================================================================= */

/* 主页入口高亮按钮（活动中心 / 至尊殿堂） */
.home-nav-btn.home-nav-highlight {
    position: relative;
    border-color: #c79b3a;
    background: linear-gradient(180deg, rgba(201,168,76,0.22), rgba(201,168,76,0.06));
    box-shadow: 0 0 0 1px rgba(201,168,76,0.25), 0 4px 14px rgba(201,168,76,0.12);
}
.home-nav-btn.home-nav-highlight i { color: #ffd370; text-shadow: 0 0 8px rgba(255,200,90,0.45); }
.home-nav-btn.home-nav-highlight::after {
    content: 'NEW';
    position: absolute; top: 3px; right: 4px;
    font-size: 9px; line-height: 1; padding: 2px 4px;
    background: #c0392b; color: #fff; border-radius: 3px;
    font-family: var(--font-secondary); letter-spacing: 1px;
    transform: scale(0.88); transform-origin: top right;
}

.home-nav-btn.home-nav-no-badge::after {
    content: none;
    display: none;
}

/* =====================================================================
 *  活动中心 · 列表页 (活动大厅)
 * ==================================================================== */
.activity-hall, .activity-detail {
    max-width: 1280px; margin: 0 auto;
    padding: 14px 14px 40px;
    word-break: normal; overflow-wrap: break-word;
}
.activity-hall *, .activity-detail * { word-break: normal; overflow-wrap: break-word; }
.activity-center-loading {
    max-width: 1280px; margin: 0 auto; padding: 60px 20px;
    text-align: center; color: var(--color-text-muted); font-style: italic;
}

/* ---- 顶部横幅 ---- */
.hall-hero {
    --hero-primary: #c8442a; --hero-secondary: #f0b25a; --hero-accent: #ffe7a8;
    position: relative;
    border: 1px solid rgba(240,178,90,0.45);
    border-radius: 14px;
    padding: 22px 24px 20px 32px;
    margin-bottom: 20px;
    background:
        radial-gradient(ellipse at top right, rgba(240,178,90,0.22), transparent 60%),
        linear-gradient(135deg, rgba(200,68,42,0.28), #0e1424 70%);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
}
.hall-hero-stripe {
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--hero-secondary), var(--hero-primary));
    box-shadow: 0 0 14px var(--hero-primary);
    pointer-events: none;
}
.hall-hero-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hall-hero-emblem {
    width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, var(--hero-accent), var(--hero-primary) 75%);
    color: #2a160a; font-size: 26px;
    box-shadow: 0 0 18px rgba(240,178,90,0.5);
}
.hall-hero-text { flex: 1; min-width: 0; }
.hall-hero-eyebrow {
    font-size: 11px; letter-spacing: 3px;
    color: var(--hero-accent); text-transform: uppercase;
    opacity: 0.85; margin-bottom: 2px;
}
.hall-hero-title {
    font-family: var(--font-primary); font-size: 28px;
    line-height: 1.2; margin: 0 0 4px;
    color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.hall-hero-subtitle {
    font-size: 14px; color: var(--hero-accent);
    opacity: 0.9; font-style: italic;
}
.hall-hero-desc {
    margin: 0; color: var(--color-text);
    font-size: 13px; line-height: 1.7; max-width: 820px;
}
.hall-hero-resources {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 4px;
}
.hall-res-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; padding: 5px 10px; font-size: 12px;
}
.hall-res-chip i { color: var(--hero-secondary); }
.hall-res-label { color: var(--color-text-muted); }
.hall-res-value { color: #ffd370; font-weight: 600; }

.hall-hero-carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hall-carousel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(circle at top right, rgba(255,231,168,0.14), transparent 42%),
        linear-gradient(145deg, rgba(16,22,38,0.9), rgba(26,34,56,0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.28);
    color: var(--color-text);
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.hall-carousel-card:hover,
.hall-carousel-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255,211,112,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 30px rgba(0,0,0,0.34);
    outline: none;
}
.hall-carousel-card.category-major {
    background:
        radial-gradient(circle at top right, rgba(255,183,94,0.18), transparent 42%),
        linear-gradient(145deg, rgba(58,20,14,0.88), rgba(28,19,37,0.94));
    border-color: rgba(255,163,85,0.4);
}
.hall-carousel-card.category-weekly {
    background:
        radial-gradient(circle at top right, rgba(133,184,237,0.16), transparent 42%),
        linear-gradient(145deg, rgba(17,37,67,0.9), rgba(15,22,38,0.94));
    border-color: rgba(133,184,237,0.38);
}
.hall-carousel-card.category-sponsor {
    background:
        radial-gradient(circle at top right, rgba(255,215,112,0.18), transparent 42%),
        linear-gradient(145deg, rgba(54,39,12,0.92), rgba(18,22,36,0.94));
    border-color: rgba(255,211,112,0.42);
}
.hall-carousel-meta,
.hall-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.hall-carousel-kicker {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,231,168,0.92);
}
.hall-carousel-title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
}
.hall-carousel-tagline {
    margin: 0;
    color: #ffe7a8;
    font-size: 14px;
    line-height: 1.7;
}
.hall-carousel-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.7;
}
.hall-carousel-highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.hall-carousel-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 12px;
    line-height: 1.6;
}
.hall-carousel-highlights i {
    color: #ffd370;
    margin-top: 2px;
}
.hall-carousel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffd370;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.hall-carousel-nav {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 8px;
}
.hall-carousel-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(7,10,18,0.6);
    color: #ffe7a8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.hall-carousel-nav-btn:hover,
.hall-carousel-nav-btn:focus-visible {
    border-color: rgba(255,211,112,0.5);
    background: rgba(20,28,44,0.86);
    transform: translateY(-1px);
    outline: none;
}
.hall-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hall-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    transition: transform 0.18s, background 0.18s, border-color 0.18s;
}
.hall-carousel-dot.active {
    background: #ffd370;
    border-color: rgba(255,211,112,0.8);
    transform: scale(1.15);
}

/* ---- 筛选条 ---- */
.hall-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px; border: 1px solid var(--color-border); border-radius: 10px;
    background: rgba(0,0,0,0.25);
    margin-bottom: 18px;
}
.hall-filter {
    flex: 1 1 calc(16.66% - 6px); min-width: 90px;
    background: rgba(255,255,255,0.04); color: var(--color-text);
    border: 1px solid transparent; border-radius: 6px;
    padding: 8px 8px; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}
.hall-filter:hover { border-color: var(--color-wood); color: #ffd370; }
.hall-filter.active {
    background: linear-gradient(180deg, rgba(201,168,76,0.26), rgba(201,168,76,0.08));
    border-color: var(--color-wood); color: #ffd370;
    box-shadow: inset 0 0 6px rgba(201,168,76,0.3);
}
.hall-filter i { font-size: 12px; }

.equipment-upgrade-shell {
    display: grid;
    gap: 12px;
}

.equipment-upgrade-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.equipment-upgrade-head h3 {
    margin: 0 0 4px;
}

.equipment-upgrade-head p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.equipment-upgrade-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(201,168,76,0.28);
    border-radius: 999px;
    color: #ffd370;
    background: rgba(0,0,0,0.22);
    white-space: nowrap;
}

.equipment-upgrade-tabs {
    margin-bottom: 0;
}

.equipment-upgrade-tabs .hall-filter {
    flex-basis: calc(20% - 6px);
}

.inventory-tabs.hall-filters {
    border-bottom: 0;
    align-items: stretch;
}

.inventory-tabs.hall-filters .tab-btn.hall-filter {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--color-text);
}

/* ---- 章节 ---- */
.hall-section { margin-bottom: 26px; }
.hall-section-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-primary); font-size: 18px;
    color: #fff; margin: 0 0 12px; padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.section-bar {
    width: 4px; height: 18px;
    background: linear-gradient(180deg, #ffd370, #c79b3a);
    border-radius: 2px; box-shadow: 0 0 6px rgba(255,200,90,0.5);
    flex-shrink: 0;
}

/* ---- 活动卡片网格 —— 自适应,单卡保底 300px ---- */
.hall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.hall-empty {
    grid-column: 1 / -1;
    padding: 40px; text-align: center;
    color: var(--color-text-muted); font-style: italic;
}

.hall-card {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    background: linear-gradient(160deg, rgba(28,38,60,0.9), rgba(15,22,38,0.9));
    border: 1px solid var(--color-border); border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
    overflow: hidden;
    color: var(--color-text);
    min-width: 0;
}
.hall-card:hover, .hall-card:focus-visible {
    border-color: var(--color-wood);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    outline: none;
}
.hall-card.highlight { border-color: rgba(192,57,43,0.7); }
.hall-card.highlight::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #ff7a45, #c0392b);
    box-shadow: 0 0 10px #c0392b;
    pointer-events: none;
}
.hall-card.category-weekly  { border-color: rgba(74,144,217,0.4); }
.hall-card.category-sponsor { border-color: rgba(232,196,92,0.4); }
.hall-card.category-welcome { border-color: rgba(76,227,168,0.4); }

.hall-card-glow {
    position: absolute; inset: -50% -10% auto auto;
    width: 70%; height: 100%;
    background: radial-gradient(ellipse, rgba(255,200,90,0.1), transparent 60%);
    pointer-events: none;
}
.hall-card-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hall-card-status {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    letter-spacing: 1px; font-weight: 600; white-space: nowrap;
}
.hall-card-status.status-live      { background: rgba(46,204,113,0.18); color: #76e3a8; border: 1px solid rgba(76,227,168,0.3); }
.hall-card-status.status-rotation  { background: rgba(74,144,217,0.18); color: #85b8ed; border: 1px solid rgba(133,184,237,0.3); }
.hall-card-status.status-upcoming  { background: rgba(149,128,226,0.18); color: #b8a4f0; border: 1px solid rgba(184,164,240,0.3); }
.hall-card-status.status-ended     { background: rgba(120,120,120,0.18); color: #999; border: 1px solid rgba(150,150,150,0.3); }
.hall-card-rotation {
    font-size: 10px; color: var(--hero-accent, #ffd370);
    font-style: italic; white-space: nowrap;
}
.hall-card-title {
    font-family: var(--font-primary); font-size: 18px;
    line-height: 1.3; margin: 0; color: #fff;
}
.hall-card-tagline {
    font-size: 13px; color: var(--color-text-muted);
    line-height: 1.6; margin: 0;
}
.hall-card-highlight {
    background: rgba(255,200,90,0.08);
    border-left: 2px solid #f0b25a;
    padding: 6px 10px; border-radius: 4px;
    font-size: 12px; color: #ffe7a8; line-height: 1.5;
}
.hall-card-highlight i { color: #f0b25a; margin-right: 4px; }
.hall-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hall-tag {
    font-size: 10px; padding: 2px 6px;
    background: rgba(74,144,217,0.16); color: #9bbfe5;
    border: 1px solid rgba(74,144,217,0.3); border-radius: 4px;
    white-space: nowrap;
}
.hall-card-cta {
    margin-top: auto; padding-top: 8px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: #ffd370; font-weight: 600;
    border-top: 1px dashed rgba(255,255,255,0.1);
}
.hall-card-cta i { font-size: 12px; transition: transform 0.15s; }
.hall-card:hover .hall-card-cta i { transform: translateX(4px); }

/* ---- 新内容预告 (列表页底部) ---- */
.season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
}
.season-card {
    --season-primary: #4a73c7; --season-secondary: #9cb6f0; --season-accent: #d7e4ff;
    display: flex; flex-direction: column; gap: 14px;
    border: 1px solid rgba(156,182,240,0.3);
    border-radius: 12px; padding: 18px 20px;
    background:
        radial-gradient(ellipse at top left, rgba(156,182,240,0.15), transparent 55%),
        linear-gradient(135deg, rgba(74,115,199,0.18), #0c1220 70%);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    min-width: 0;
}
.season-card-head { display: flex; flex-direction: column; gap: 4px; }
.season-badge {
    align-self: flex-start;
    font-size: 10px; padding: 3px 10px; letter-spacing: 1px;
    background: var(--season-primary); color: var(--season-accent);
    border-radius: 4px;
}
.season-name {
    font-family: var(--font-primary); font-size: 20px;
    margin: 0; color: #fff; line-height: 1.2;
}
.season-subtitle {
    font-size: 13px; color: var(--season-accent);
    opacity: 0.9; margin: 0; font-style: italic;
}
.season-desc {
    color: var(--color-text); font-size: 12px;
    line-height: 1.7; margin: 2px 0 0; opacity: 0.9;
}
.season-block { display: flex; flex-direction: column; gap: 8px; }
.season-block-title {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-primary); font-size: 14px;
    color: var(--season-accent); margin: 0;
    letter-spacing: 1px;
}
.season-block-title i { color: var(--season-secondary); }
.season-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.season-mini {
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--color-quality-rare);
    border-radius: 6px; padding: 10px 12px;
    min-width: 0;
}
.season-mini.quality-epic             { border-left-color: var(--color-quality-epic); }
.season-mini.quality-world-shattering { border-left-color: var(--color-quality-world-shattering); box-shadow: inset 0 0 14px rgba(255,82,82,0.12); }
.season-mini-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.season-mini-name {
    font-family: var(--font-primary); color: #ffd370;
    font-size: 14px; line-height: 1.3;
}
.season-mini-quality {
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    white-space: nowrap;
    background: rgba(255,255,255,0.08); color: var(--color-text-muted);
}
.season-mini-quality.quality-epic             { color: var(--color-quality-epic);             background: rgba(255,213,79,0.1); }
.season-mini-quality.quality-world-shattering { color: var(--color-quality-world-shattering); background: rgba(255,82,82,0.12); }
.season-mini-quality.treasure                 { color: #76e3a8; background: rgba(76,227,168,0.1); }
.season-mini-tagline {
    font-size: 11px; color: var(--season-secondary);
    font-style: italic; line-height: 1.5; margin: 0;
}
.season-mini-desc {
    font-size: 12px; color: var(--color-text);
    line-height: 1.6; margin: 0;
}
.season-empty {
    font-size: 12px; color: var(--color-text-muted);
    font-style: italic; padding: 8px;
}

/* ----- 列表页 · 响应式 ----- */
@media (max-width: 1023px) {
    .hall-hero-title { font-size: 24px; }
    .hall-carousel-title { font-size: 22px; }
    .season-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .activity-hall { padding: 10px 10px 30px; }
    .hall-hero { padding: 16px 16px 14px 22px; }
    .hall-hero-title { font-size: 20px; }
    .hall-hero-emblem { width: 48px; height: 48px; font-size: 22px; }
    .hall-hero-desc { font-size: 12px; }
    .hall-carousel-card { padding: 16px 14px 14px; }
    .hall-carousel-title { font-size: 18px; }
    .hall-carousel-tagline,
    .hall-carousel-desc { font-size: 12px; }
    .hall-carousel-highlights { grid-template-columns: 1fr; }
    .hall-carousel-nav { position: static; justify-content: flex-end; }
    .hall-grid { grid-template-columns: 1fr; }
    .hall-filter { flex: 1 1 calc(33.33% - 4px); font-size: 12px; min-width: 0; }
    .season-mini-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
 *  活动中心 · 详情页 —— 整页宽度,自上而下阅读
 * ==================================================================== */
.activity-detail {
    display: flex; flex-direction: column; gap: 20px;
}

.activity-detail-hero {
    position: relative;
    border: 1px solid var(--color-wood);
    border-radius: 14px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(192,57,43,0.16), rgba(74,144,217,0.08) 60%, #0c1220);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.activity-detail.category-sponsor .activity-detail-hero { background: linear-gradient(135deg, rgba(232,196,92,0.2), #0c1220); }
.activity-detail.category-welcome .activity-detail-hero { background: linear-gradient(135deg, rgba(76,227,168,0.18), #0c1220); }
.activity-detail.category-weekly  .activity-detail-hero { background: linear-gradient(135deg, rgba(74,144,217,0.2),   #0c1220); }
.activity-detail.category-major   .activity-detail-hero { background: linear-gradient(135deg, rgba(192,57,43,0.25),   #0c1220); }

.detail-hero-eyebrow {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: 10px;
}
.detail-status {
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    letter-spacing: 1px; font-weight: 600; white-space: nowrap;
}
.detail-status.status-live      { background: rgba(46,204,113,0.18); color: #76e3a8; border: 1px solid rgba(76,227,168,0.3); }
.detail-status.status-rotation  { background: rgba(74,144,217,0.18); color: #85b8ed; border: 1px solid rgba(133,184,237,0.3); }
.detail-status.status-upcoming  { background: rgba(149,128,226,0.18); color: #b8a4f0; border: 1px solid rgba(184,164,240,0.3); }
.detail-rotation {
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    background: rgba(201,168,76,0.14); color: #ffd370;
    border: 1px solid rgba(201,168,76,0.3);
    white-space: nowrap;
}
.detail-title {
    font-family: var(--font-primary); font-size: 32px;
    line-height: 1.2; margin: 0 0 6px;
    color: #ffd370; text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.detail-tagline {
    color: var(--color-text); margin: 0 0 14px;
    font-size: 15px; line-height: 1.6;
    max-width: 900px;
}

.detail-headline-block {
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,200,90,0.22);
    border-radius: 10px;
    padding: 16px 18px; margin-top: 6px;
}
.detail-headline {
    font-family: var(--font-primary); font-size: 18px;
    line-height: 1.4; color: #fff; margin: 0 0 4px;
}
.detail-subline {
    color: var(--color-text); font-size: 13px;
    line-height: 1.7; margin: 0 0 12px;
    max-width: 800px;
}
.detail-highlights {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}
.detail-highlights li {
    background: rgba(0,0,0,0.32);
    border-left: 3px solid #f0b25a;
    padding: 10px 14px; border-radius: 4px;
    font-size: 13px; color: #ffe7a8; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 8px;
}
.detail-highlights li i { color: #f0b25a; margin-top: 3px; flex-shrink: 0; }

/* ---- 详情主体 ---- */
.activity-detail-body {
    display: flex; flex-direction: column; gap: 22px;
}

.detail-section {
    background: linear-gradient(180deg, rgba(20,28,46,0.7), rgba(12,18,32,0.7));
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 18px 22px;
}
.detail-section-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-primary); font-size: 18px;
    color: #fff; margin: 0 0 14px; padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255,255,255,0.12);
}

/* 键值列表 */
.detail-kv { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.detail-kv li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03); border-radius: 4px;
    font-size: 14px; line-height: 1.7;
}
.detail-kv .kv-key {
    flex: 0 0 auto;
    min-width: 110px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.detail-kv .kv-val {
    flex: 1 1 220px;
    min-width: 180px;
    color: var(--color-text-light);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* 规则项 */
.detail-bullets { padding-left: 20px; margin: 0; display: grid; gap: 8px; }
.detail-bullets li {
    font-size: 14px; color: var(--color-text);
    line-height: 1.75;
}

/* 奖励网格 */
.detail-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.reward-card {
    display: flex; align-items: center; gap: 14px;
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--color-border);
    border-radius: 10px; padding: 12px 14px;
    min-width: 0; transition: transform 0.15s, box-shadow 0.15s;
}
.reward-card:hover { transform: translateY(-1px); }
.reward-card.quality-common         { border-color: var(--color-quality-common); }
.reward-card.quality-rare           { border-color: var(--color-quality-rare); }
.reward-card.quality-exquisite      { border-color: var(--color-quality-exquisite); }
.reward-card.quality-legendary      { border-color: var(--color-quality-legendary); box-shadow: 0 0 10px rgba(255,176,48,0.2); }
.reward-card.quality-epic           { border-color: var(--color-quality-epic);      box-shadow: 0 0 10px rgba(255,213,79,0.25); }
.reward-card.quality-world-shattering {
    border-color: var(--color-quality-world-shattering);
    box-shadow: 0 0 12px rgba(255,82,82,0.3);
    animation: ws-pulse 2.4s ease-in-out infinite;
}
@keyframes ws-pulse { 50% { box-shadow: 0 0 20px rgba(255,82,82,0.5); } }
.reward-icon {
    width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    color: #ffd370; font-size: 20px;
}
.reward-card.quality-world-shattering .reward-icon { color: #ff8a8a; }
.reward-card.quality-legendary .reward-icon { color: #ffb030; }
.reward-meta { flex: 1; min-width: 0; }
.reward-name { font-size: 14px; color: var(--color-text-light); line-height: 1.4; }
.reward-qty  { font-size: 14px; font-weight: 600; color: #ffd370; margin-top: 2px; }
.reward-note { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* 表格 */
.detail-table {
    border: 1px solid var(--color-border);
    border-radius: 8px; overflow: hidden;
}
.detail-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px; line-height: 1.7;
}
.detail-table-row:nth-child(odd)  { background: rgba(255,255,255,0.02); }
.detail-table-row:nth-child(even) { background: rgba(255,255,255,0.05); }
.detail-table-row:last-child      { border-bottom: none; }
.detail-table-key {
    flex: 0 0 auto;
    min-width: 110px;
    color: #ffd370; font-weight: 600;
    font-family: var(--font-primary);
    white-space: nowrap;
}
.detail-table-val {
    flex: 1 1 220px;
    min-width: 180px;
    color: var(--color-text);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* 说明 */
.detail-notes {
    background: rgba(74,144,217,0.08);
    border-left: 3px solid var(--color-accent);
    padding: 12px 16px; border-radius: 4px;
    font-size: 14px; line-height: 1.8;
    color: var(--color-text); margin: 0;
}
.detail-rotation-hint .detail-notes {
    background: rgba(192,57,43,0.12);
    border-left-color: #c0392b;
}

/* ----- 详情页 · 响应式 ----- */
@media (max-width: 768px) {
    .activity-detail { gap: 16px; }
    .activity-detail-hero { padding: 18px 18px; }
    .detail-title { font-size: 26px; }
    .detail-tagline { font-size: 14px; }
    .detail-section { padding: 16px 16px; }
    .detail-section-title { font-size: 16px; }
    .detail-kv li { font-size: 13px; padding: 8px 12px; gap: 6px 12px; }
    .detail-kv .kv-key { min-width: 80px; }
    .detail-kv .kv-val { flex: 1 1 180px; min-width: 160px; }
    .detail-table-row { font-size: 13px; padding: 10px 14px; gap: 6px 14px; }
    .detail-table-key { min-width: 90px; }
    .detail-table-val { flex: 1 1 180px; min-width: 160px; }
    .detail-rewards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .detail-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .activity-detail { padding: 10px 10px 30px; }
    .detail-title { font-size: 22px; }
    .activity-detail-hero { padding: 16px 14px; }
    .detail-section { padding: 14px 14px; }
    .detail-kv li { gap: 4px 10px; }
    .detail-kv .kv-key { min-width: 0; flex: 0 0 auto; font-size: 11px; letter-spacing: 1px; }
    .detail-kv .kv-val { flex: 1 1 100%; min-width: 0; }
    .detail-table-key { min-width: 0; flex: 0 0 auto; }
    .detail-table-val { flex: 1 1 100%; min-width: 0; }
}


/* =====================================================================
 *  至尊殿堂 Supreme Hall
 * ==================================================================== */
.supreme-hall {
    max-width: 1200px; margin: 0 auto;
    padding: 14px 14px 40px;
    word-break: normal; overflow-wrap: break-word;
}
.supreme-hall * { word-break: normal; overflow-wrap: break-word; }
.sh-loading { padding: 40px; text-align: center; color: var(--color-text-muted); font-style: italic; }

/* ---- 顶部 ---- */
.sh-header {
    position: relative;
    display: flex; flex-wrap: wrap; gap: 18px;
    align-items: center; justify-content: space-between;
    border: 1px solid #5a4920; border-radius: 14px;
    padding: 24px 28px;
    background:
        radial-gradient(ellipse at center, rgba(255,200,90,0.15), transparent 60%),
        linear-gradient(180deg, #1a1a30, #0a0a18);
    margin-bottom: 20px;
    overflow: hidden;
}
.sh-pillars { position: absolute; inset: 0; pointer-events: none; }
.sh-pillar {
    position: absolute; top: 10%; bottom: 10%; width: 4px;
    background: linear-gradient(180deg, transparent, #c79b3a 30%, #c79b3a 70%, transparent);
    box-shadow: 0 0 14px rgba(255,200,90,0.35);
    opacity: 0.45;
}
.sh-pillar.left  { left: 22px; }
.sh-pillar.right { right: 22px; }
.sh-header-content { flex: 1; min-width: 240px; padding: 0 14px; }
.sh-eyebrow {
    font-size: 11px; letter-spacing: 4px;
    color: #ffd370; text-transform: uppercase;
    opacity: 0.85; margin-bottom: 4px;
}
.sh-title {
    font-family: var(--font-primary); font-size: 32px;
    line-height: 1.2; margin: 0 0 6px;
    background: linear-gradient(180deg, #fff5d6 0%, #ffd370 60%, #c79b3a 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sh-subtitle {
    color: var(--color-text); margin: 0;
    font-size: 13px; line-height: 1.6;
    opacity: 0.85; font-style: italic;
}

.sh-energy-pane {
    display: flex; align-items: center; gap: 14px;
    background: rgba(0,0,0,0.4); border: 1px solid #c79b3a;
    border-radius: 10px; padding: 12px 20px;
    box-shadow: 0 0 12px rgba(255,200,90,0.22), inset 0 0 12px rgba(255,200,90,0.08);
    flex-shrink: 0;
}
.sh-energy-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: radial-gradient(circle, #fff5d6, #c79b3a 70%);
    display: flex; align-items: center; justify-content: center;
    color: #2a160a; font-size: 20px; flex-shrink: 0;
    box-shadow: 0 0 16px rgba(255,213,128,0.55);
}
.sh-energy-meta { display: flex; flex-direction: column; min-width: 0; }
.sh-energy-label { font-size: 11px; color: var(--color-text-muted); letter-spacing: 1px; white-space: nowrap; }
.sh-energy-value {
    font-family: var(--font-primary); font-size: 24px;
    color: #ffd370; line-height: 1.2;
}

/* ---- 三柱 ---- */
.sh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.sh-pillar-card {
    position: relative;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(28,28,46,0.95), rgba(12,12,24,0.95));
    border: 1px solid var(--color-border); border-radius: 12px;
    padding: 18px 20px 16px;
    overflow: hidden; min-width: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.sh-pillar-card.sh-fa-tian    { border-color: rgba(192,57,43,0.5); }
.sh-pillar-card.sh-ying-zhao  { border-color: rgba(74,144,217,0.5); }
.sh-pillar-card.sh-jing-tian  { border-color: rgba(255,200,90,0.5); }
.sh-pillar-card.sh-jing-tian.locked { border-color: rgba(120,120,120,0.5); }

.sh-card-glow {
    position: absolute; inset: -40% -20% auto auto;
    width: 80%; height: 80%; pointer-events: none;
    background: radial-gradient(ellipse, rgba(255,255,255,0.06), transparent 70%);
}
.sh-fa-tian   .sh-card-glow { background: radial-gradient(ellipse, rgba(255,80,40,0.15), transparent 70%); }
.sh-ying-zhao .sh-card-glow { background: radial-gradient(ellipse, rgba(74,144,217,0.18), transparent 70%); }
.sh-jing-tian .sh-card-glow { background: radial-gradient(ellipse, rgba(255,200,90,0.18), transparent 70%); }

.sh-card-head {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 16px;
}
.sh-card-emblem {
    width: 48px; height: 48px; border-radius: 12px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.sh-fa-tian   .sh-card-emblem { background: linear-gradient(135deg, #c0392b, #6a1c10); border-color: #c0392b; box-shadow: 0 0 12px rgba(192,57,43,0.4); }
.sh-ying-zhao .sh-card-emblem { background: linear-gradient(135deg, #4a90d9, #1c3d6a); border-color: #4a90d9; box-shadow: 0 0 12px rgba(74,144,217,0.4); }
.sh-jing-tian .sh-card-emblem { background: linear-gradient(135deg, #e8c45c, #8a6a18); border-color: #e8c45c; box-shadow: 0 0 12px rgba(232,196,92,0.5); }
.sh-jing-tian.locked .sh-card-emblem { background: linear-gradient(135deg, #555, #333); border-color: #555; box-shadow: none; }
.sh-card-title-area { flex: 1; min-width: 0; }

.sh-card-eyebrow {
    font-size: 10px; letter-spacing: 2px;
    color: var(--color-text-muted); text-transform: uppercase;
}
.sh-card-title {
    font-family: var(--font-primary); font-size: 22px;
    margin: 2px 0; color: #fff; line-height: 1.2;
}
.sh-card-tagline {
    font-size: 12px; color: var(--color-text-muted);
    margin: 0; line-height: 1.5;
}

.sh-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.sh-stat-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.sh-stat {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.sh-stat-label {
    font-size: 11px; color: var(--color-text-muted);
    letter-spacing: 1px;
}
.sh-stat-value {
    font-family: var(--font-primary); font-size: 18px;
    color: #fff; line-height: 1.2;
}
.sh-stat-value.gold { color: #ffd370; }
.sh-stat-value small {
    font-size: 11px; color: var(--color-text-muted);
    margin-left: 4px; font-weight: normal;
}

.sh-progress {
    background: rgba(0,0,0,0.28);
    border-radius: 6px; padding: 8px 12px;
}
.sh-progress-text {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px;
    font-size: 12px; color: var(--color-text-muted);
    margin-bottom: 6px; line-height: 1.5;
}
.sh-progress-text strong { color: #ffd370; font-weight: 600; }
.sh-progress-bar {
    height: 6px; background: rgba(0,0,0,0.5);
    border-radius: 3px; overflow: hidden;
}
.sh-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #c79b3a, #ffd370);
    box-shadow: 0 0 6px rgba(255,200,90,0.5);
    transition: width 0.4s ease;
}

.sh-locked-card {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(0,0,0,0.4);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 8px; padding: 14px;
}
.sh-locked-card > i { font-size: 22px; color: #888; margin-top: 2px; flex-shrink: 0; }
.sh-locked-text { flex: 1; min-width: 0; }
.sh-locked-title {
    font-family: var(--font-primary); font-size: 14px;
    color: #ddd; margin-bottom: 4px; line-height: 1.3;
}
.sh-locked-desc {
    font-size: 12px; color: var(--color-text-muted);
    margin-bottom: 6px; line-height: 1.6;
}
.sh-locked-cost {
    font-size: 12px; color: var(--color-text); line-height: 1.5;
}
.sh-locked-cost strong { color: #ffd370; }

.sh-card-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 10px;
}
.sh-action-btn {
    flex: 1 1 120px; min-width: 0;
    padding: 10px 12px; border-radius: 8px;
    border: 1px solid #c79b3a;
    background: linear-gradient(180deg, #d4a445, #8a6a18);
    color: #fff; font-family: var(--font-secondary);
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 2px 8px rgba(199,155,58,0.3);
}
.sh-action-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.sh-action-btn:active:not(:disabled) { transform: translateY(0); }
.sh-action-btn.disabled, .sh-action-btn:disabled {
    background: linear-gradient(180deg, #444, #2a2a2a);
    border-color: #555; color: #888;
    cursor: not-allowed; box-shadow: none;
}
.sh-action-btn.secondary {
    background: linear-gradient(180deg, #4a90d9, #1c3d6a);
    border-color: #4a90d9;
    box-shadow: 0 2px 8px rgba(74,144,217,0.3);
}
.sh-action-btn.secondary:disabled {
    background: linear-gradient(180deg, #444, #2a2a2a);
    border-color: #555; color: #888; box-shadow: none;
}
.sh-action-btn.busy { opacity: 0.7; pointer-events: none; }
.sh-action-btn i { margin-right: 4px; }

.sh-card-rule {
    margin-top: auto;
    padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.08);
    font-size: 11px; color: var(--color-text-muted);
    line-height: 1.6;
}

.sh-footnote {
    margin-top: 20px; padding: 12px 16px;
    background: rgba(74,144,217,0.08);
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    font-size: 12px; color: var(--color-text);
    line-height: 1.7;
}
.sh-footnote i { color: var(--color-accent); margin-right: 6px; }

@media (max-width: 1023px) {
    .sh-title { font-size: 28px; }
}
@media (max-width: 720px) {
    .sh-header { padding: 18px 20px; gap: 14px; }
    .sh-pillars { display: none; }
    .sh-header-content { padding: 0; min-width: 0; }
    .sh-energy-pane { padding: 10px 16px; }
    .sh-title { font-size: 24px; }
}
@media (max-width: 560px) {
    .supreme-hall { padding: 10px 10px 30px; }
    .sh-grid { grid-template-columns: 1fr; }
    .sh-pillar-card { padding: 14px 14px 14px; }
    .sh-card-title { font-size: 20px; }
    .sh-title { font-size: 22px; }
    .sh-energy-value { font-size: 20px; }
}

/* ====================================================================
 * 周活动 · 交互面板 (v1.15)
 * 盖楼 / 神兵演武 / 开荒挖宝 共用
 * ==================================================================== */
.weekly-activity-mount {
    margin-top: 16px;
}
.weekly-activity-loading, .weekly-activity-error {
    padding: 20px; text-align: center; color: var(--color-text-muted, #8a9bb2);
    background: rgba(20,28,46,0.5); border: 1px dashed var(--color-border); border-radius: 12px;
}
.weekly-activity-error { color: #ff8080; }

.weekly-activity-panel {
    background: linear-gradient(180deg, rgba(24,30,50,0.85), rgba(14,20,36,0.85));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px 22px;
    margin-top: 12px;
}
.weekly-panel-head {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.weekly-panel-title {
    font-family: var(--font-primary); font-size: 20px; color: #ffe7a8;
    display: flex; align-items: center; gap: 10px; margin: 0;
}
.weekly-panel-subtitle { color: #a9b7cc; font-size: 13px; }

.weekly-subtitle {
    font-family: var(--font-primary); font-size: 15px;
    color: #ffe7a8; margin: 20px 0 8px; padding-left: 10px;
    border-left: 3px solid #f0b25a;
}

.weekly-resources {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.weekly-res-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 20px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    font-size: 13px;
}
.weekly-res-chip i { color: #f0b25a; }
.weekly-res-label { color: #a9b7cc; }
.weekly-res-value { color: #fff; font-weight: 600; }

.weekly-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 12px;
}
.weekly-stat {
    background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ws-label { font-size: 12px; color: #8a9bb2; letter-spacing: 1px; }
.ws-value { font-size: 18px; color: #fff; font-weight: 700; margin-top: 4px; }

.weekly-reward-tier {
    padding: 10px 14px; border-radius: 10px;
    background: rgba(240,178,90,0.12); border: 1px solid rgba(240,178,90,0.4);
    color: #ffe7a8; margin-bottom: 6px; font-size: 13px;
}
.weekly-reward-tier.muted {
    background: rgba(138,155,178,0.1); border-color: rgba(138,155,178,0.3); color: #a9b7cc;
}
.weekly-reward-tier strong { color: #fff; margin: 0 4px; }

.weekly-exchange-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 10px;
}
.weekly-exchange-input {
    width: 120px; padding: 9px 12px; border-radius: 8px;
    background: rgba(0,0,0,0.3); color: #fff;
    border: 1px solid rgba(255,255,255,0.2); font-size: 14px;
}
.weekly-exchange-input:focus { outline: none; border-color: #f0b25a; }

.weekly-pack-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.weekly-pack {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.weekly-pack-head { display: flex; justify-content: space-between; align-items: baseline; }
.weekly-pack-label { font-size: 13px; color: #ffe7a8; }
.weekly-pack-limit { font-size: 12px; color: #8a9bb2; }

.weekly-build-row {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.weekly-build-result {
    padding: 10px 14px; border-radius: 8px; margin: 10px 0;
    background: rgba(74,115,199,0.12); border: 1px solid rgba(74,115,199,0.4);
    color: #d7e4ff; font-size: 13px;
}
.weekly-build-result strong { color: #ffe7a8; font-size: 15px; }
.weekly-burst-log {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px; background: rgba(0,0,0,0.25); border-radius: 8px;
    max-height: 120px; overflow-y: auto;
}
.wa-burst-chip {
    padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 700;
}
.wa-burst-common { background: rgba(138,155,178,0.3); color: #d7e4ff; }
.wa-burst-small  { background: rgba(240,178,90,0.35); color: #ffe7a8; }
.wa-burst-mega   { background: rgba(200,68,42,0.45); color: #fff; box-shadow: 0 0 12px rgba(200,68,42,0.5); }

.weekly-rank-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 480px; overflow-y: auto;
    background: rgba(0,0,0,0.2); padding: 8px; border-radius: 10px;
}
.weekly-rank-row {
    display: grid; grid-template-columns: 60px 1fr 120px 140px;
    align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px;
    background: rgba(255,255,255,0.03);
    font-size: 13px;
}
.weekly-rank-row.me { background: rgba(240,178,90,0.2); border: 1px solid #f0b25a; }
.wr-rank { color: #ffe7a8; font-weight: 700; }
.wr-name { color: #fff; }
.wr-uid  { color: #8a9bb2; font-size: 11px; margin-left: 4px; }
.wr-floors { color: #fff; font-weight: 700; text-align: right; }
.wr-used { color: #a9b7cc; font-size: 12px; text-align: right; }

/* --- 神兵演武 --- */
.weekly-arena-open {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; margin-top: 10px;
    background: rgba(74,115,199,0.08); border-radius: 12px;
    border: 1px solid rgba(74,115,199,0.3);
}
.sh-action-btn.major {
    background: linear-gradient(135deg, #9146ff, #4a73c7) !important;
    color: #fff !important; font-weight: 700;
}
.weekly-arena-prob { color: #a9b7cc; font-size: 12px; }
.weekly-arena-prev { color: #8a9bb2; font-size: 12px; margin: 8px 0 4px; }

.weekly-arena-card-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 10px;
}
.arena-card {
    padding: 12px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; gap: 4px;
}
.arena-card.kind-shards { border-color: rgba(138,155,178,0.4); }
.arena-card.kind-weapon.quality-epic {
    border-color: #f2c14e;
    background:
        linear-gradient(135deg, rgba(242,193,78,0.18), rgba(161,111,21,0.16)),
        radial-gradient(circle at 50% 18%, rgba(255,241,187,0.16), transparent 68%);
}
.arena-card.kind-weapon.quality-world-shattering {
    border-color: #c8442a; background: linear-gradient(135deg, rgba(200,68,42,0.25), rgba(240,178,90,0.2));
    box-shadow: 0 0 16px rgba(200,68,42,0.35);
}
.ac-label { font-size: 11px; color: #8a9bb2; letter-spacing: 1px; }
.ac-name  { font-size: 16px; color: #fff; font-weight: 700; }
.ac-qty   { font-size: 12px; color: #ffe7a8; }

.weekly-pool-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.weekly-pool-col {
    background: rgba(0,0,0,0.2); border-radius: 10px; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.wpc-head { font-size: 13px; color: #ffe7a8; margin-bottom: 8px; }
.wpc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.weekly-pool-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 12px;
    font-size: 12px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
}
.weekly-pool-chip.quality-epic {
    border-color: #f2c14e;
    color: #ffe08a;
    background: rgba(242,193,78,0.12);
}
.weekly-pool-chip.quality-world-shattering { border-color: #c8442a; color: #ffe7a8; }
.wpc-quality { font-size: 10px; color: #8a9bb2; }
.weekly-empty-inline { color: #8a9bb2; font-size: 12px; font-style: italic; }

/* --- 挖宝 --- */
.weekly-dig-feedback {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    padding: 10px 14px; margin: 10px 0;
    background: rgba(240,178,90,0.1); border: 1px solid rgba(240,178,90,0.3);
    border-radius: 10px; font-size: 13px;
}
.dig-tag {
    padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700;
}
.tag-empty { background: rgba(138,155,178,0.3); color: #d7e4ff; }
.tag-cross { background: rgba(74,115,199,0.4); color: #fff; }
.tag-plus  { background: rgba(155,89,182,0.4); color: #fff; }
.tag-rock  { background: rgba(240,178,90,0.5); color: #fff; }
.tag-rock-hit { background: rgba(200,136,50,0.3); color: #ffe7a8; }
.tag-sweep { background: rgba(220,38,38,0.35); color: #ffd7d7; }
.dig-gold  { color: #ffe7a8; font-weight: 700; }
.dig-clear { color: #9eff9e; font-weight: 700; }
.dig-loss { color: #ffb4b4; font-weight: 700; }
.dig-rock-left { color: #d8c39a; font-weight: 700; }

.weekly-dig-sweep {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    max-width: 720px; margin: 8px 0 10px; padding: 10px 12px;
    background: rgba(120, 40, 40, 0.18); border: 1px solid rgba(220, 80, 80, 0.36);
    border-radius: 8px;
}
.weekly-dig-sweep > div { min-width: 0; }
.weekly-dig-sweep strong {
    display: block; color: #ffd7a8; font-size: 13px; margin-bottom: 2px;
}
.weekly-dig-sweep span,
.weekly-dig-sweep em {
    display: block; color: #cbd5e1; font-size: 12px; line-height: 1.45; font-style: normal;
}
.weekly-dig-sweep em { color: #ffb4b4; }
.weekly-dig-sweep .sh-action-btn {
    width: auto;
    min-width: 128px;
    justify-self: end;
    white-space: nowrap;
}
.sh-action-btn.danger {
    background: rgba(180, 42, 42, 0.9);
    border-color: rgba(255, 120, 120, 0.4);
    color: #fff;
}

.dig-grid {
    display: grid; grid-template-columns: repeat(var(--grid-size, 6), 1fr);
    gap: 4px; padding: 8px; margin: 10px 0;
    background: rgba(0,0,0,0.25); border-radius: 10px;
    max-width: 540px;
}
.dig-cell {
    aspect-ratio: 1 / 1; min-width: 40px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
    color: #fff; padding: 0; font-size: 11px;
}
.dig-cell:hover:not(:disabled) {
    transform: scale(1.05); box-shadow: 0 0 10px rgba(240,178,90,0.4);
    border-color: #f0b25a;
}
.dig-cell:disabled { cursor: not-allowed; opacity: 0.7; }
.dig-cell.dug { cursor: default; opacity: 0.85; }
.dig-cell-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cell-undug { background: rgba(40,60,100,0.4); }
.cell-undug i { color: #6a7d99; }
.cell-empty { background: rgba(240,178,90,0.25); border-color: #f0b25a; }
.cell-cross { background: rgba(74,115,199,0.35); border-color: #4a73c7; }
.cell-plus  { background: rgba(155,89,182,0.35); border-color: #9b59b6; }
.cell-rock-broken { background: rgba(200,68,42,0.35); border-color: #c8442a; }
.cell-rock-progress { background: rgba(100,80,60,0.5); border-color: #a08050; }
.cell-rock-progress .rock-dur { font-size: 10px; color: #ffe7a8; }
.cell-rock-progress i { color: #ffe7a8; }

.weekly-dig-legend {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
    color: #a9b7cc; font-size: 12px;
}
.dig-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.legend-box {
    display: inline-block; width: 12px; height: 12px; border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.15);
}
.legend-box.undug { background: rgba(40,60,100,0.4); }
.legend-box.empty { background: rgba(240,178,90,0.35); }
.legend-box.cross { background: rgba(74,115,199,0.4); }
.legend-box.plus  { background: rgba(155,89,182,0.4); }
.legend-box.rock  { background: rgba(100,80,60,0.6); }
.legend-box.box   { background: rgba(200,68,42,0.5); }

.weekly-empty {
    color: #8a9bb2; font-style: italic; text-align: center; padding: 12px;
}

@media (max-width: 720px) {
    .weekly-activity-panel { padding: 14px 14px; }
    .weekly-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .weekly-arena-card-grid { grid-template-columns: repeat(2, 1fr); }
    .weekly-rank-row { grid-template-columns: 50px 1fr 90px; gap: 6px; }
    .weekly-rank-row .wr-used { display: none; }
}
@media (max-width: 480px) {
    .weekly-arena-card-grid { grid-template-columns: 1fr; }
    .weekly-dig-sweep { grid-template-columns: 1fr; }
    .weekly-dig-sweep .sh-action-btn { width: 100%; justify-self: stretch; }
    .dig-cell { min-width: 30px; font-size: 9px; }
}

/* ==========================================================================
   【v1.15 活动系统收尾】
   - 购买按钮紧凑化 (wa-claim-btn / weekly-pack 紧凑按钮)
   - 见面礼 / 奔跑排版重构
   - 盖楼真实动画
   - 神兵演武翻牌 + 稀有度特效
   ========================================================================== */

/* -- 紧凑版领取/购买按钮 — 用于活动详情页的个人状态区 / 购买礼包
 * 比 .sh-action-btn 更小一号,避免活动卡里按钮占比过重 */
.wa-claim-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #c79b3a;
    background: linear-gradient(180deg, #d4a445, #8a6a18);
    color: #fff; font-family: var(--font-secondary);
    font-size: 13px; font-weight: 600; line-height: 1.2;
    cursor: pointer; transition: all 0.15s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: 0 2px 6px rgba(199,155,58,0.25);
    white-space: nowrap;
}
.wa-claim-btn i { font-size: 12px; }
.wa-claim-btn:hover:not(:disabled) { filter: brightness(1.18); transform: translateY(-1px); }
.wa-claim-btn:active:not(:disabled) { transform: translateY(0); }
.wa-claim-btn:disabled {
    background: linear-gradient(180deg, #3b3f4a, #252831);
    border-color: #4a4f5b; color: #8a9099;
    cursor: not-allowed; box-shadow: none; text-shadow: none;
    opacity: 0.85;
}
.wa-claim-btn.secondary {
    background: linear-gradient(180deg, #4a90d9, #1c3d6a);
    border-color: #4a90d9;
    box-shadow: 0 2px 6px rgba(74,144,217,0.25);
}

/* weekly-pack 里的按钮改用紧凑尺寸(不再继承 .sh-action-btn 的大高度)
 * 这里保持老 class 名(weeklyActivitiesUI.js 用的是 .sh-action-btn)但通过覆盖样式实现 */
.weekly-pack .sh-action-btn,
.weekly-exchange-row .sh-action-btn,
.weekly-build-row .sh-action-btn,
.weekly-arena-open .sh-action-btn.major {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 6px;
    min-height: 34px;
    line-height: 1.2;
}
.weekly-arena-open .sh-action-btn.major {
    min-height: 42px;
    font-size: 15px;
    padding: 10px 20px;
    letter-spacing: 1px;
}
.weekly-pack .sh-action-btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; }
.weekly-pack { padding: 10px 12px; gap: 6px; }
.weekly-pack-label { font-size: 12px; }
.weekly-pack-limit { font-size: 11px; }
.weekly-build-row .sh-action-btn { padding: 8px 18px; font-size: 14px; }

/* -- 赞助豪礼 cta 区 -- */
.sponsor-claim-row {
    margin-top: 12px;
    display: flex; justify-content: flex-start;
}

/* -- 传灯见面礼 日奖励卡片 (v1.15.1 彻底重构:flex 横排,不再用 grid 强制窄列) --
 *   结构: .welcome-day-row
 *     ├ .wd-day          (左:Day 标签,48px 固定宽)
 *     ├ .wd-note         (中:奖励文字 min-width:220px flex:1,Chinese 正常横排)
 *     └ .wd-tail         (右:状态徽章 + 按钮)
 *   容器过窄时 .wd-tail 会 flex-wrap 到下一行,但 note 始终保持横排阅读。
 */
.welcome-day-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 8px;
}
.welcome-day-row {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 14px; line-height: 1.6;
    transition: background 0.2s;
}
.welcome-day-row.is-claimable {
    background: linear-gradient(90deg, rgba(240,178,90,0.18), rgba(240,178,90,0.04));
    border-color: rgba(240,178,90,0.45);
}
.welcome-day-row.is-claimed { opacity: 0.72; }
.welcome-day-row .wd-day {
    flex: 0 0 auto;
    min-width: 54px;
    font-family: var(--font-primary);
    font-size: 14px; font-weight: 700;
    color: #ffe7a8; letter-spacing: 1px;
    white-space: nowrap;
}
.welcome-day-row .wd-note {
    flex: 1 1 220px;
    min-width: 180px;
    color: #d7e4ff;
    word-break: normal;
    overflow-wrap: anywhere;
}
.welcome-day-row .wd-tail {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 10px;
    margin-left: auto;
}
@media (max-width: 480px) {
    .welcome-day-row { padding: 10px 12px; gap: 6px 12px; }
    .welcome-day-row .wd-tail { margin-left: 0; flex-wrap: wrap; }
}

/* -- 奔跑活动 签到 + 金币包 双卡片 -- */
.sprint-daily-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.sprint-daily-card {
    padding: 12px 14px;
    background: rgba(74,115,199,0.08);
    border: 1px solid rgba(74,115,199,0.25);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.sprint-daily-card .sdc-label {
    font-family: var(--font-primary);
    font-size: 14px; color: #ffe7a8; letter-spacing: 1px;
}
.sprint-daily-card .sdc-desc {
    font-size: 12px; color: #a9b7cc; line-height: 1.6;
}
.sprint-daily-card .sdc-cta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.sprint-section-title {
    font-family: var(--font-primary); font-size: 15px;
    color: #ffe7a8; margin: 16px 0 8px; padding-left: 10px;
    border-left: 3px solid #f0b25a;
}

/* -- 流光累计里程碑 (v1.15.1 彻底重构:flex 横排,保证奖励说明始终横排可读) --
 *   结构: .sprint-milestone-row
 *     ├ .spm-threshold    (左:19999 流光)
 *     ├ .spm-note         (中:奖励说明 min-width:220px flex:1,不换字)
 *     └ .spm-tail         (右:状态徽章 + 按钮)
 */
.sprint-milestone-list {
    display: flex; flex-direction: column; gap: 6px;
}
.sprint-milestone-row {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 14px; line-height: 1.6;
}
.sprint-milestone-row.is-claimable {
    background: linear-gradient(90deg, rgba(240,178,90,0.22), rgba(240,178,90,0.04));
    border-color: rgba(240,178,90,0.5);
}
.sprint-milestone-row.is-claimed { opacity: 0.7; }
.sprint-milestone-row .spm-threshold {
    flex: 0 0 auto;
    min-width: 110px;
    font-family: var(--font-primary);
    color: #ffe7a8; font-weight: 700; letter-spacing: 1px;
    white-space: nowrap;
}
.sprint-milestone-row .spm-note {
    flex: 1 1 220px;
    min-width: 180px;
    color: #d7e4ff;
    word-break: normal;
    overflow-wrap: anywhere;
}
.sprint-milestone-row .spm-tail {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 10px;
    margin-left: auto;
}
@media (max-width: 480px) {
    .sprint-milestone-row { padding: 10px 12px; gap: 6px 12px; }
    .sprint-milestone-row .spm-tail { margin-left: 0; flex-wrap: wrap; }
}

/* -- 奔跑活动冲刺礼包 / 飞翔礼包 / 免费碎片 / 至尊宝库区块 (v1.15.1 新增) -- */
.sprint-pack-row {
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(155,89,182,0.12), rgba(74,115,199,0.1));
    border: 1px solid rgba(155,89,182,0.35);
    border-radius: 10px;
    margin-top: 10px;
    align-items: center;
}
.sprint-pack-row.is-exhausted { opacity: 0.7; background: rgba(60,60,70,0.2); border-color: rgba(160,160,170,0.2); }
.sprint-pack-row .spr-title {
    flex: 0 0 auto; min-width: 120px;
    font-family: var(--font-primary); font-size: 15px;
    color: #ffe7a8; letter-spacing: 1px;
}
.sprint-pack-row .spr-desc {
    flex: 1 1 260px; min-width: 200px;
    color: #d7e4ff; font-size: 13px; line-height: 1.7;
    word-break: normal; overflow-wrap: anywhere;
}
.sprint-pack-row .spr-tail {
    flex: 0 0 auto; margin-left: auto;
    display: inline-flex; align-items: center; gap: 10px;
}
.sprint-pack-row .spr-tail strong { color: #ffc94a; }
.sprint-pack-row .spr-batch-row {
    flex: 1 0 100%;
    display: flex;
    justify-content: flex-end;
}
.sprint-pack-row .spr-batch-row .batch-use-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dividend-pool-preview {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.dividend-pool-row {
    display: grid;
    grid-template-columns: 58px 94px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid rgba(255, 201, 74, 0.24);
    border-radius: 6px;
    background: rgba(255, 246, 236, 0.035);
    color: #d7e4ff;
    font-size: 13px;
}
.dividend-pool-row strong {
    color: #ffc94a;
}
.dividend-pool-row span {
    color: #ffe7a8;
}
.dividend-pool-row em {
    min-width: 0;
    color: #d7e4ff;
    font-style: normal;
    overflow-wrap: anywhere;
}
.summer-cool-reward-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 58px;
    padding: 10px 11px;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 236, 159, 0.16), transparent 36%),
        linear-gradient(135deg, rgba(255, 201, 74, 0.10), rgba(82, 104, 190, 0.09)),
        rgba(255, 246, 236, 0.04);
}
.summer-cool-reward-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 9px;
}
.summer-cool-reward-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 210, 92, 0.35);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 214, 102, 0.22), rgba(255, 157, 64, 0.08));
    color: #ffd76c !important;
    box-shadow: inset 0 0 12px rgba(255, 218, 116, 0.10), 0 0 10px rgba(255, 201, 74, 0.10);
    flex: 0 0 auto;
}
.summer-cool-reward-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.summer-cool-reward-qty {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    min-width: 0;
    min-height: 24px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(255, 201, 74, 0.32);
    border-radius: 999px;
    background: rgba(255, 201, 74, 0.08);
    color: #ffd15d !important;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.summer-cool-reward-name {
    min-width: 0;
    color: #fff0bd !important;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .summer-cool-reward-list {
        grid-template-columns: 1fr;
    }
    .summer-cool-reward-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }
}
@media (max-width: 420px) {
    .summer-cool-reward-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }
}

/* 至尊宝库展示(100 格棋盘式) */
.promotion-state-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.promotion-link-box {
    padding: 12px;
    border: 1px solid rgba(255,201,74,0.28);
    border-radius: 8px;
    background: rgba(255,201,74,0.06);
}
.promotion-link-box label {
    display: block;
    margin-bottom: 8px;
    color: #ffe7a8;
    font-size: 13px;
    font-weight: 700;
}
.promotion-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.promotion-link-input {
    flex: 1 1 320px;
    min-width: 180px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(215,228,255,0.25);
    border-radius: 6px;
    background: rgba(0,0,0,0.24);
    color: #d7e4ff;
    font-size: 13px;
}
.promotion-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.promotion-stat-grid > div {
    padding: 12px;
    border: 1px solid rgba(215,228,255,0.18);
    border-radius: 8px;
    background: rgba(74,115,199,0.08);
}
.promotion-stat-grid span {
    display: block;
    color: #9cb6f0;
    font-size: 12px;
}
.promotion-stat-grid strong {
    display: block;
    margin-top: 4px;
    color: #ffc94a;
    font-size: 20px;
}
.assistant-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.assistant-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid rgba(255, 201, 74, 0.22);
    border-radius: 8px;
    background: rgba(255, 201, 74, 0.05);
}
.assistant-toolbar-main {
    min-width: 0;
    flex: 1 1 280px;
    color: #d7e4ff;
    font-size: 13px;
    line-height: 1.55;
}
.assistant-toolbar-main p {
    margin: 0;
}
.assistant-toolbar-main p + p {
    margin-top: 4px;
}
.assistant-toolbar-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.assistant-note {
    margin: 0;
    color: #9cb6f0;
    font-size: 13px;
}
.assistant-report-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(215, 228, 255, 0.16);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.12);
}
.assistant-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(215, 228, 255, 0.18);
    border-radius: 8px;
    background: rgba(74, 115, 199, 0.08);
    color: #d7e4ff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.assistant-page-btn:hover {
    border-color: rgba(255, 201, 74, 0.42);
    background: rgba(255, 201, 74, 0.08);
}
.assistant-page-btn.active {
    border-color: rgba(255, 201, 74, 0.6);
    background: rgba(255, 201, 74, 0.14);
    color: #ffe7a8;
}
.assistant-page-btn em {
    min-width: 20px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255, 201, 74, 0.12);
    color: #ffc94a;
    font-size: 12px;
    font-style: normal;
    line-height: 1;
    text-align: center;
}
.assistant-report-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.assistant-summary strong {
    display: block;
    color: #ffe39a;
    font-size: 16px;
    line-height: 1.5;
}
.assistant-summary p {
    margin: 6px 0 0;
    color: #d7e4ff;
    font-size: 13px;
    line-height: 1.6;
}
.assistant-highlight-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.assistant-highlight-item {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(215, 228, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}
.assistant-highlight-item span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #9cb6f0;
    font-size: 12px;
    line-height: 1.2;
}
.assistant-highlight-item strong {
    display: block;
    color: #ffe39a;
    font-size: 14px;
    line-height: 1.45;
}
.assistant-highlight-item p {
    margin: 6px 0 0;
    color: #d7e4ff;
    font-size: 13px;
    line-height: 1.55;
}
.assistant-report-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.assistant-section-note {
    margin: -2px 0 10px;
    color: #9cb6f0;
    font-size: 13px;
    line-height: 1.45;
}
.assistant-item-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.assistant-item-pagination button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(215, 228, 255, 0.18);
    border-radius: 8px;
    background: rgba(74, 115, 199, 0.08);
    color: #d7e4ff;
    font-size: 13px;
    cursor: pointer;
}
.assistant-item-pagination button:hover:not(:disabled) {
    border-color: rgba(255, 201, 74, 0.42);
    background: rgba(255, 201, 74, 0.08);
    color: #ffe7a8;
}
.assistant-item-pagination button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}
.assistant-item-pagination span {
    color: #9cb6f0;
    font-size: 13px;
}
.assistant-report-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid rgba(215, 228, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}
.assistant-system-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.assistant-system-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 201, 74, 0.22);
    background: rgba(255, 201, 74, 0.08);
    color: #ffe7a8;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.assistant-report-main {
    min-width: 0;
    flex: 1 1 280px;
}
.assistant-report-main h5 {
    margin: 0;
    color: #ffe39a;
    font-size: 14px;
    line-height: 1.5;
}
.assistant-report-main p {
    margin: 6px 0 0;
    color: #d7e4ff;
    font-size: 13px;
    line-height: 1.6;
}
.assistant-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.assistant-report-meta span {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 201, 74, 0.1);
    border: 1px solid rgba(255, 201, 74, 0.18);
    color: #ffe7a8;
    font-size: 12px;
}

.promotion-mark-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(255, 201, 74, 0.32);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 201, 74, 0.12), rgba(96, 139, 255, 0.10) 55%, rgba(255, 255, 255, 0.04));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 0 24px rgba(255, 201, 74, 0.05);
}
.promotion-mark-card--highlight::before {
    content: '';
    position: absolute;
    inset: -45% auto auto -20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 218, 112, 0.28), transparent 68%);
    pointer-events: none;
}
.promotion-mark-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 12px;
}
.promotion-mark-head h4 {
    margin: 0;
    color: #ffe39a;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(255, 201, 74, 0.25);
}
.promotion-mark-summary {
    position: relative;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 201, 74, 0.24);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.16);
    color: #f6f1df;
    font-size: 14px;
    line-height: 1.75;
}
.promotion-mark-fixed {
    position: relative;
    border-left-color: #ffc94a;
    background: rgba(255, 201, 74, 0.09);
    color: #ffe7a8;
}
.promotion-mark-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 201, 74, 0.6);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd66b, #ff9f43);
    color: #2b1d07;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(255, 159, 67, 0.24);
    cursor: pointer;
}
.promotion-mark-detail-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.promotion-mark-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.promotion-mark-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.promotion-mark-modal-grid > div {
    padding: 12px;
    border: 1px solid rgba(255, 201, 74, 0.26);
    border-radius: 10px;
    background: rgba(255, 201, 74, 0.08);
}
.promotion-mark-modal-grid span {
    display: block;
    color: #9cb6f0;
    font-size: 12px;
}
.promotion-mark-modal-grid strong {
    display: block;
    margin-top: 6px;
    color: #ffc94a;
    font-size: 20px;
}
.promotion-claim-row {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.promotion-downline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.promotion-downline-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid rgba(215,228,255,0.16);
    border-radius: 8px;
    background: rgba(0,0,0,0.16);
}
.promotion-downline-row.is-claimable {
    border-color: rgba(255,201,74,0.45);
    background: rgba(255,201,74,0.08);
}
.promotion-downline-main,
.promotion-downline-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.promotion-downline-main strong {
    color: #f6f1df;
}
.promotion-downline-main span,
.promotion-downline-meta span {
    color: #9cb6f0;
    font-size: 12px;
}
.promotion-empty {
    padding: 14px;
    color: #9cb6f0;
    text-align: center;
    border: 1px dashed rgba(215,228,255,0.2);
    border-radius: 8px;
}
@media (max-width: 640px) {
    .promotion-stat-grid { grid-template-columns: 1fr; }
    .promotion-mark-head { align-items: stretch; }
    .promotion-mark-detail-btn { width: 100%; }
    .promotion-claim-row { justify-content: stretch; }
    .promotion-claim-row .wa-claim-btn { width: 100%; }
    .assistant-toolbar,
    .assistant-report-item { align-items: stretch; }
    .assistant-toolbar-action,
    .assistant-report-item .wa-claim-btn { width: 100%; }
    .assistant-system-pill { white-space: normal; }
}

.supreme-vault-panel {
    padding: 14px 16px; margin-top: 10px;
    background: linear-gradient(135deg, rgba(255,201,74,0.1), rgba(200,68,42,0.08));
    border: 1px solid rgba(255,201,74,0.3);
    border-radius: 12px;
}
.sv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: center; }
.sv-head .sv-head-title { font-family: var(--font-primary); color: #ffe7a8; font-size: 16px; letter-spacing: 1px; }
.sv-head .sv-head-meta  { color: #d7e4ff; font-size: 13px; }
.sv-head .sv-head-meta strong { color: #ffc94a; margin: 0 4px; }
.sv-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.sv-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 4px;
}
.sv-slot {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: rgba(255,201,74,0.2);
    border: 1px solid rgba(255,201,74,0.4);
    transition: all 0.2s;
}
.sv-slot.drawn { background: rgba(60,60,60,0.4); border-color: rgba(100,100,100,0.3); }
.sv-slot.just-drawn { animation: svSlotPop 0.7s ease-out; background: rgba(255,82,82,0.5); border-color: #ff5252; }
@keyframes svSlotPop {
    0%   { transform: scale(0.6); box-shadow: 0 0 0 rgba(255,82,82,0); }
    50%  { transform: scale(1.4); box-shadow: 0 0 14px rgba(255,82,82,0.9); }
    100% { transform: scale(1);   box-shadow: 0 0 0 rgba(255,82,82,0); }
}
.sv-last {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 13px; color: #fff8d0; line-height: 1.7;
}
.sv-last .sv-last-title { color: #ffe7a8; font-weight: 700; }
.sv-legend {
    margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px;
    font-size: 12px; color: #a9b7cc;
}
.sv-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.sv-legend-item .sv-legend-box { width: 10px; height: 10px; border-radius: 2px; }

@media (max-width: 720px) {
    .sv-grid { grid-template-columns: repeat(10, 1fr); }
}

/* -- 珍宝预告增强 (成长文案使用次色) -- */
.season-mini-desc.muted { color: #a9b7cc; font-size: 12px; }
.season-mini-desc strong { color: #ffe7a8; margin-right: 4px; }

/* =====================================================================
   盖楼活动 —— 真实的"盖楼感":巨型楼层数字 / 飘层动画 / 暴击发光
   ===================================================================== */
.building-tower-hero {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 16px;
    padding: 18px;
    margin: 12px 0 14px;
    background: linear-gradient(135deg, rgba(240,178,90,0.1), rgba(74,115,199,0.08));
    border: 1px solid rgba(240,178,90,0.35);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.building-tower-visual {
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    min-height: 160px;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    overflow: hidden;
}
.building-tower-stack {
    position: relative;
    width: 56%;
    display: flex; flex-direction: column-reverse; gap: 2px;
    padding: 6px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.building-floor-brick {
    height: 10px;
    background: linear-gradient(180deg, rgba(240,178,90,0.85), rgba(200,136,50,0.85));
    border-top: 1px solid rgba(255,231,168,0.55);
    border-radius: 3px;
    box-shadow: inset 0 -2px 2px rgba(0,0,0,0.35);
    animation: brickRise 0.4s ease-out;
    opacity: 0.98;
}
.building-floor-brick:nth-child(10n+1) { background: linear-gradient(180deg, rgba(240,178,90,1), rgba(180,116,30,0.9)); }
.building-floor-brick.small { background: linear-gradient(180deg, rgba(240,178,90,1), rgba(200,136,50,1)); }
.building-floor-brick.mega  { background: linear-gradient(180deg, rgba(200,68,42,1), rgba(240,178,90,1)); box-shadow: 0 0 10px rgba(240,178,90,0.8); }
@keyframes brickRise {
    0%   { transform: translateY(-20px); opacity: 0; }
    60%  { transform: translateY(2px);   opacity: 1; }
    100% { transform: translateY(0);     opacity: 1; }
}
.building-tower-base {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(100,80,60,0.7), rgba(60,48,36,0.95));
    border-top: 1px solid rgba(240,178,90,0.4);
}
.building-tower-info { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.building-tower-title {
    font-family: var(--font-primary); font-size: 14px; color: #ffe7a8; letter-spacing: 2px;
    opacity: 0.9;
}
.building-tower-count {
    font-family: var(--font-primary);
    font-size: 64px; font-weight: 700;
    color: #fff; line-height: 1;
    text-shadow: 0 0 14px rgba(240,178,90,0.55);
    letter-spacing: 2px;
    transition: transform 0.25s;
}
.building-tower-count.bump { animation: towerCountBump 0.6s ease-out; }
@keyframes towerCountBump {
    0%   { transform: scale(1);    color: #fff;        text-shadow: 0 0 14px rgba(240,178,90,0.55); }
    30%  { transform: scale(1.22); color: #ffe7a8;     text-shadow: 0 0 20px rgba(255,231,168,1); }
    60%  { transform: scale(0.96); color: #fff;        text-shadow: 0 0 14px rgba(240,178,90,0.8); }
    100% { transform: scale(1);    color: #fff;        text-shadow: 0 0 14px rgba(240,178,90,0.55); }
}
.building-tower-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #a9b7cc; }
.building-tower-meta strong { color: #ffe7a8; margin-left: 4px; }

/* 盖楼爆点飘字 */
.building-float-layer {
    position: absolute; inset: 0; pointer-events: none;
    overflow: visible;
}
.building-float-chip {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 6px 16px;
    border-radius: 18px;
    font-family: var(--font-primary);
    font-weight: 700; font-size: 18px;
    color: #fff;
    box-shadow: 0 0 14px rgba(240,178,90,0.6);
    animation: floatUp 1.05s ease-out forwards;
    white-space: nowrap;
}
.building-float-chip.common { background: linear-gradient(135deg, rgba(138,155,178,0.9), rgba(100,115,140,0.9)); font-size: 14px; }
.building-float-chip.small  { background: linear-gradient(135deg, #f0b25a, #c89040); box-shadow: 0 0 16px rgba(240,178,90,0.8); }
.building-float-chip.mega   {
    background: linear-gradient(135deg, #ff6a3d, #ffc94a);
    box-shadow: 0 0 22px rgba(255,201,74,0.95), 0 0 48px rgba(200,68,42,0.4);
    font-size: 22px;
}
@keyframes floatUp {
    0%   { transform: translate(-50%, 0)    scale(0.6); opacity: 0; }
    15%  { transform: translate(-50%, -20px) scale(1.15); opacity: 1; }
    60%  { transform: translate(-50%, -70px) scale(1);    opacity: 1; }
    100% { transform: translate(-50%, -120px) scale(0.9); opacity: 0; }
}
.building-tower-hero.mega-shake { animation: megaShake 0.4s ease-out; }
@keyframes megaShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* 排行榜条目更有"活动感" - 填充徽章/徽记 */
.weekly-rank-row {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.15s, background 0.15s;
}
.weekly-rank-row:hover { background: rgba(255,255,255,0.07); transform: translateX(2px); }
.weekly-rank-row .wr-rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 28px;
    background: rgba(240,178,90,0.15);
    border: 1px solid rgba(240,178,90,0.4);
    border-radius: 16px;
    font-weight: 700;
    padding: 0 10px;
}
.weekly-rank-row:nth-child(1) .wr-rank { background: linear-gradient(135deg, #ffc94a, #c8923b); color: #241b0f; border-color: #ffc94a; }
.weekly-rank-row:nth-child(2) .wr-rank { background: linear-gradient(135deg, #d4d4d4, #909090); color: #1a1a1a; border-color: #e0e0e0; }
.weekly-rank-row:nth-child(3) .wr-rank { background: linear-gradient(135deg, #c8762b, #8a4f1a); color: #fff; border-color: #c8762b; }
.weekly-rank-row.me .wr-rank { background: linear-gradient(135deg, #4a73c7, #274b92); color: #fff; border-color: #9cb6f0; }

/* =====================================================================
   神兵演武 —— 翻牌动画 + 稀有度边框 / 光效
   ===================================================================== */
.weekly-arena-card-grid { perspective: 1200px; }
.arena-card {
    position: relative;
    min-height: 120px;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.4, 1);
    padding: 14px;
    overflow: visible;
}
/* 翻牌前:显示卡背;翻牌后:显示正面 */
.arena-card.is-face-down {
    background: linear-gradient(135deg, rgba(30,40,70,0.95), rgba(10,16,32,0.95));
    border-color: rgba(240,178,90,0.4);
    color: transparent;
    position: relative;
    overflow: hidden;
}
.arena-card.is-face-down::before {
    content: "神";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-primary);
    font-size: 40px; color: #f0b25a;
    text-shadow: 0 0 12px rgba(240,178,90,0.5);
    opacity: 0.75;
}
.arena-card.is-face-down::after {
    content: "";
    position: absolute; inset: 4px;
    border: 1px dashed rgba(240,178,90,0.35);
    border-radius: 8px;
    pointer-events: none;
}
.arena-card.is-flipping {
    animation: cardFlip 0.65s cubic-bezier(0.25, 0.8, 0.4, 1) forwards;
}
@keyframes cardFlip {
    0%   { transform: rotateY(0deg); }
    49%  { transform: rotateY(90deg); filter: brightness(1.3); }
    50%  { transform: rotateY(-90deg); }
    100% { transform: rotateY(0deg); }
}
.arena-card.is-revealed {
    animation: cardReveal 0.5s ease-out;
}
@keyframes cardReveal {
    0%   { box-shadow: 0 0 0 rgba(255,231,168,0); }
    50%  { box-shadow: 0 0 32px rgba(255,231,168,0.8); }
    100% { box-shadow: 0 0 0 rgba(255,231,168,0); }
}

/* 稀有度边框 / 光效 */
.arena-card.kind-shards { border: 1px solid rgba(138,155,178,0.4); background: rgba(138,155,178,0.08); }
.arena-card.kind-shards.shard-epic {
    border-color: #9b59b6;
    background: rgba(155,89,182,0.1);
}
.arena-card.kind-shards.shard-legendary {
    border-color: #d4a445;
    background: rgba(212,164,69,0.1);
}
/* 史诗神兵 - 紫色基调 */
.arena-card.kind-weapon.quality-epic {
    border: 2px solid #f2c14e;
    background:
        linear-gradient(135deg, rgba(242,193,78,0.26), rgba(140,95,24,0.22)),
        radial-gradient(circle at 50% 15%, rgba(255,241,187,0.20), transparent 70%);
    box-shadow: 0 0 18px rgba(242,193,78,0.50), inset 0 0 18px rgba(242,193,78,0.15);
}
.arena-card.kind-weapon.quality-epic::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(255,232,145,0.75); filter: blur(0.5px);
}
/* SS 神兵(惊世) - 金色呼吸 + 光束 */
.arena-card.kind-weapon.quality-world-shattering {
    border: 2px solid #ffc94a;
    background:
        linear-gradient(135deg, rgba(255,201,74,0.25), rgba(200,68,42,0.25)),
        radial-gradient(circle at 50% 20%, rgba(255,255,210,0.25), transparent 65%);
    box-shadow: 0 0 20px rgba(255,201,74,0.65), 0 0 42px rgba(200,68,42,0.35), inset 0 0 22px rgba(255,201,74,0.25);
    animation: shatterBreath 2.2s ease-in-out infinite;
    overflow: visible;
}
.arena-card.kind-weapon.quality-world-shattering::before {
    content: "";
    position: absolute; inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
        rgba(255,231,168,0.8), rgba(200,68,42,0.5), rgba(255,231,168,0.9),
        rgba(255,201,74,1), rgba(255,231,168,0.8));
    filter: blur(6px);
    opacity: 0.5;
    animation: shatterSpin 4s linear infinite;
    z-index: -1;
    pointer-events: none;
}
.arena-card.kind-weapon.quality-world-shattering::after {
    content: "";
    position: absolute; inset: 4px;
    border: 1px solid rgba(255,255,210,0.55);
    border-radius: 6px;
    pointer-events: none;
    box-shadow: inset 0 0 12px rgba(255,255,210,0.35);
}
.arena-card.kind-weapon.quality-world-shattering .ac-label,
.arena-card.kind-weapon.quality-world-shattering .ac-qty { color: #fff8d0; text-shadow: 0 0 6px rgba(255,201,74,0.7); }
.arena-card.kind-weapon.quality-world-shattering .ac-name {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,201,74,1), 0 0 24px rgba(255,231,168,0.5);
    font-size: 18px;
}
@keyframes shatterBreath {
    0%, 100% { box-shadow: 0 0 20px rgba(255,201,74,0.65), 0 0 42px rgba(200,68,42,0.35), inset 0 0 22px rgba(255,201,74,0.25); }
    50%      { box-shadow: 0 0 32px rgba(255,201,74,0.95), 0 0 64px rgba(200,68,42,0.55), inset 0 0 30px rgba(255,201,74,0.45); }
}
@keyframes shatterSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* SS 揭晓粒子 - 一次性喷射 */
.arena-card.quality-world-shattering.is-revealed::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,231,168,0.9), transparent 50%),
        radial-gradient(2px 2px at 80% 40%, rgba(255,255,210,0.9), transparent 50%),
        radial-gradient(2px 2px at 35% 70%, rgba(255,201,74,0.9), transparent 50%),
        radial-gradient(2px 2px at 65% 80%, rgba(255,231,168,0.9), transparent 50%),
        radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,1), transparent 60%);
    animation: shatterBurst 1s ease-out;
    border: none; box-shadow: none;
}
@keyframes shatterBurst {
    0%   { opacity: 1; transform: scale(0.5); filter: blur(0); }
    60%  { opacity: 1; transform: scale(1.3); filter: blur(1px); }
    100% { opacity: 0; transform: scale(1.8); filter: blur(3px); }
}

/* 翻牌过程中整个面板的节奏感 */
.weekly-arena-card-grid.is-flipping .arena-card:not(.is-revealed):not(.is-flipping) {
    opacity: 0.7; filter: brightness(0.85);
}

.guild-rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.guild-ranking-card {
    margin: 0;
}
.guild-ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 8px;
}
.guild-ranking-tab {
    width: auto;
}
.guild-ranking-single {
    max-width: 760px;
}
.guild-ranking-card .ranking-pagination {
    justify-content: flex-end;
    margin: 12px 0 0;
}
.guild-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guild-ranking-row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 6px;
    overflow: hidden;
}
.guild-ranking-row > * {
    position: relative;
    z-index: 1;
}
.guild-ranking-row .rank-main-line,
.guild-ranking-row .rank-value-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.guild-ranking-row .rank-value-line {
    padding-left: 52px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.guild-ranking-row strong {
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.guild-ranking-row .rank-name,
.guild-ranking-row .rank-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guild-ranking-row .rank-meta {
    color: #94a3b8;
    font-size: 12px;
}
.guild-ranking-row .rank-pos {
    color: #f0c040;
    font-weight: 700;
    width: 44px;
    flex: 0 0 44px;
}
.guild-ranking-row.rank-effect-legendary {
    border-color: rgba(255, 176, 48, 0.62);
    background: linear-gradient(90deg, rgba(255, 176, 48, 0.13), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 0 14px rgba(255, 176, 48, 0.08), 0 0 10px rgba(255, 176, 48, 0.12);
}
.guild-ranking-row.rank-effect-legendary .rank-pos,
.guild-ranking-row.rank-effect-legendary strong {
    color: var(--color-quality-legendary);
}
.guild-ranking-row.rank-effect-epic {
    border-color: rgba(255, 213, 79, 0.72);
    background: linear-gradient(90deg, rgba(255, 213, 79, 0.16), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 18px rgba(255, 213, 79, 0.10), 0 0 14px rgba(255, 213, 79, 0.18);
}
.guild-ranking-row.rank-effect-epic .rank-pos,
.guild-ranking-row.rank-effect-epic strong {
    color: var(--color-quality-epic);
    text-shadow: 0 0 8px rgba(255, 213, 79, 0.26);
}
.guild-ranking-row.rank-effect-world-shattering {
    border-color: var(--color-quality-world-shattering);
    border-left: 3px solid var(--color-quality-world-shattering);
    background:
        linear-gradient(135deg,
            rgba(255, 82, 82, 0.28) 0%,
            rgba(255, 130, 130, 0.18) 18%,
            rgba(180, 79, 208, 0.14) 38%,
            rgba(255, 213, 79, 0.14) 58%,
            transparent 78%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 82, 82, 0.22),
        0 0 20px rgba(255, 82, 82, 0.18);
    animation: world-shattering-breathe 2.4s ease-in-out infinite;
}
.guild-ranking-row.rank-effect-world-shattering::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 30%,
        rgba(255,255,255,0.22) 42%,
        rgba(255, 220, 180, 0.28) 50%,
        rgba(255, 120, 220, 0.18) 58%,
        transparent 70%,
        transparent 100%
    );
    transform: translateX(-140%);
    animation: world-shattering-sheen 2.8s ease-in-out infinite;
    z-index: 0;
}
.guild-ranking-row.rank-effect-world-shattering::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 15% 40%, rgba(255, 120, 120, 0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 20%, rgba(255, 220, 130, 0.9), transparent 60%),
        radial-gradient(2px 2px at 65% 72%, rgba(180, 120, 255, 0.9), transparent 60%),
        radial-gradient(1.2px 1.2px at 82% 35%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(2px 2px at 28% 82%, rgba(255, 200, 255, 0.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 85%, rgba(255, 180, 80, 0.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 255, 255, 0.9), transparent 60%);
    animation: world-shattering-spark 2s ease-in-out infinite;
    mix-blend-mode: screen;
    z-index: 0;
}
.guild-ranking-row.rank-effect-world-shattering .rank-pos,
.guild-ranking-row.rank-effect-world-shattering .rank-name,
.guild-ranking-row.rank-effect-world-shattering strong {
    color: var(--color-quality-world-shattering);
    text-shadow: 0 0 10px rgba(184, 111, 104, 0.42);
}
.sprint-pack-batch {
    margin-top: 8px;
}

/* 神秘镜面 - 柏青哥风格 */
.mirror-pachinko-shell {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(28, 21, 18, 0.96), rgba(13, 17, 24, 0.94)),
        repeating-linear-gradient(90deg, rgba(183, 150, 104, 0.05) 0 1px, transparent 1px 18px);
    overflow: hidden;
}
.mirror-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.mirror-header-line h3 {
    margin: 0;
}
.mirror-crystal-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-radius: 6px;
    color: #f0c040;
    background: rgba(255, 246, 236, 0.06);
    font-weight: 700;
}
.mirror-status-bar {
    gap: 12px;
    flex-wrap: wrap;
}
.mirror-level-track {
    flex: 1 1 160px;
    height: 8px;
    min-width: 120px;
    border: 1px solid rgba(183, 150, 104, 0.25);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 246, 236, 0.05);
}
.mirror-level-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8fc7ff, #f0c040, #ff7b7b);
}
.pachinko-machine {
    margin: 16px auto;
    max-width: 860px;
}
.pachinko-glass {
    position: relative;
    min-height: 430px;
    padding: 42px 18px 132px;
    border: 2px solid rgba(183, 150, 104, 0.42);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 8%, rgba(240, 192, 64, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(11, 20, 33, 0.82), rgba(22, 17, 17, 0.9));
    box-shadow:
        inset 0 0 26px rgba(0, 0, 0, 0.42),
        0 16px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.pachinko-title-strip {
    position: absolute;
    top: 10px;
    left: 18px;
    right: 18px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(183, 150, 104, 0.25);
    border-radius: 6px;
    color: rgba(255, 246, 236, 0.72);
    font-size: 12px;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.18);
}
.pachinko-light-rail {
    position: absolute;
    inset: 42px 16px 120px;
    border-radius: 999px 999px 28px 28px;
    border: 1px dashed rgba(240, 192, 64, 0.18);
    pointer-events: none;
}
.pachinko-glass.is-running .pachinko-light-rail {
    animation: pachinko-rail-glow 0.52s linear infinite;
}
.pachinko-glass.is-celebrating .pachinko-light-rail {
    border-color: rgba(240, 192, 64, 0.78);
    box-shadow: inset 0 0 22px rgba(240, 192, 64, 0.22), 0 0 20px rgba(240, 192, 64, 0.22);
}
@keyframes pachinko-rail-glow {
    0%, 100% { border-color: rgba(143, 199, 255, 0.18); }
    50% { border-color: rgba(240, 192, 64, 0.64); }
}
.pachinko-ball {
    position: absolute;
    top: 48px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff7cf, #d99f35 52%, #6e3c19);
    box-shadow: 0 0 14px rgba(240, 192, 64, 0.58);
    opacity: 0.85;
    z-index: 2;
}
.pachinko-ball.is-dropping.normal-drop {
    animation: mirror-ball-drop-normal 1.85s cubic-bezier(.2,.74,.32,1) infinite;
}
.pachinko-ball.is-dropping.lucky-drop {
    animation: mirror-ball-drop-lucky 1.55s cubic-bezier(.2,.74,.32,1) infinite;
}
@keyframes mirror-ball-drop-normal {
    0% { transform: translate(0, 0) scale(1); }
    12% { transform: translate(-92px, 48px) scale(0.96); }
    24% { transform: translate(64px, 98px) scale(1.04); }
    38% { transform: translate(-116px, 154px) scale(0.96); }
    52% { transform: translate(82px, 214px) scale(1.03); }
    68% { transform: translate(-44px, 274px) scale(0.97); }
    84% { transform: translate(118px, 328px) scale(1.04); }
    100% { transform: translate(-18px, 354px) scale(1); }
}
@keyframes mirror-ball-drop-lucky {
    0% { transform: translate(0, 0) scale(1); }
    16% { transform: translate(104px, 62px) scale(1.05); }
    34% { transform: translate(-74px, 132px) scale(0.97); }
    52% { transform: translate(132px, 206px) scale(1.06); }
    72% { transform: translate(-34px, 286px) scale(0.98); }
    100% { transform: translate(86px, 354px) scale(1.05); }
}
.pachinko-pin-field {
    position: absolute;
    inset: 58px 38px 134px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-content: space-evenly;
    justify-items: center;
    row-gap: 18px;
}
.pachinko-pin {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9bd83;
    box-shadow: 0 0 8px rgba(217, 189, 131, 0.38);
}
.pachinko-pin.spark {
    background: #fff2a8;
    transform: scale(1.8);
    box-shadow: 0 0 14px rgba(255, 242, 168, 0.95), 0 0 28px rgba(143, 199, 255, 0.32);
}
.pachinko-pin.pin-1,
.pachinko-pin.pin-4 {
    transform: translateY(10px);
}
.pachinko-pin.pin-2,
.pachinko-pin.pin-5 {
    transform: translateY(-8px);
}
.pachinko-lanes {
    position: absolute;
    left: 18px;
    right: 18px;
    display: grid;
    gap: 8px;
}
.normal-lanes {
    bottom: 68px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
.lucky-lanes {
    bottom: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lucky-lanes::before {
    content: '好运旋转';
    position: absolute;
    left: 0;
    top: -22px;
    color: rgba(255, 246, 236, 0.62);
    font-size: 12px;
}
.mirror-wheel {
    display: contents;
}
.wheel-slot {
    min-height: 52px;
    border-radius: 6px;
    background: rgba(29, 22, 18, 0.82);
    border: 1px solid rgba(183, 150, 104, 0.24);
}
.wheel-slot.active {
    background: rgba(143, 199, 255, 0.16);
    border-color: #8fc7ff;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(143, 199, 255, 0.34);
    animation: slot-hop 0.22s ease-out;
}
.wheel-slot.winner {
    background: rgba(240, 192, 64, 0.18);
    border-color: #f0c040;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(240, 192, 64, 0.22), 0 0 18px rgba(240, 192, 64, 0.42);
    animation: slot-win-pop 0.72s cubic-bezier(.18, .85, .28, 1.18);
}
@keyframes slot-hop {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.04); }
    100% { transform: translateY(-2px) scale(1); }
}
@keyframes slot-win-pop {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-10px) scale(1.14); }
    65% { transform: translateY(-2px) scale(0.98); }
    100% { transform: translateY(-2px) scale(1.06); }
}
.mirror-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 860px;
    margin: 0 auto;
}
.mirror-controls .spin-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
}
.mirror-controls .lucky-spin-btn {
    background: linear-gradient(180deg, #6a5336 0%, #4b3827 100%);
}
.mirror-controls .level-up-btn {
    background: linear-gradient(180deg, #445d74 0%, #283d52 100%);
}
.mirror-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 860px;
    margin: 10px auto 0;
    color: rgba(255, 246, 236, 0.72);
    font-size: 12px;
}
.mirror-cost-grid span,
.mirror-prize-note {
    padding: 8px 10px;
    border: 1px solid rgba(183, 150, 104, 0.16);
    border-radius: 6px;
    background: rgba(255, 246, 236, 0.04);
}
.mirror-prize-note {
    max-width: 860px;
    margin: 10px auto 0;
    color: rgba(255, 246, 236, 0.78);
    line-height: 1.6;
}
.mirror-prize-pool {
    max-width: 860px;
    margin: 10px auto 0;
    padding: 12px;
    border: 1px solid rgba(183, 150, 104, 0.18);
    border-radius: 8px;
    background: rgba(255, 246, 236, 0.035);
}
.mirror-prize-pool h4 {
    margin: 0 0 10px;
    color: #f0c040;
}
.mirror-prize-pool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.mirror-prize-pool section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
}
.mirror-prize-pool strong {
    color: #8fc7ff;
}
.mirror-prize-pool span {
    color: rgba(255, 246, 236, 0.76);
    font-size: 12px;
    line-height: 1.45;
}
.mirror-result {
    max-width: 860px;
    margin: 12px auto 0;
    position: relative;
    overflow: hidden;
}
.result-icon {
    font-size: 24px;
    margin-bottom: 6px;
}
.result-guaranteed {
    margin-top: 6px;
    color: #f0c040;
    font-weight: 700;
}
.prize-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.prize-burst span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 18px;
    border-radius: 999px;
    background: #f0c040;
    transform-origin: center;
    animation: prize-burst 0.86s ease-out forwards;
}
.prize-burst span:nth-child(1) { transform: rotate(0deg) translateY(-8px); }
.prize-burst span:nth-child(2) { transform: rotate(72deg) translateY(-8px); background: #8fc7ff; }
.prize-burst span:nth-child(3) { transform: rotate(144deg) translateY(-8px); background: #ff7b7b; }
.prize-burst span:nth-child(4) { transform: rotate(216deg) translateY(-8px); background: #a8ffb2; }
.prize-burst span:nth-child(5) { transform: rotate(288deg) translateY(-8px); background: #fff2a8; }
@keyframes prize-burst {
    0% { opacity: 0; margin-left: 0; margin-top: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; margin-left: 0; margin-top: -78px; }
}

@media (max-width: 760px) {
    .pachinko-glass {
        min-height: 390px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .normal-lanes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        bottom: 104px;
    }
    .lucky-lanes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wheel-slot {
        min-height: 46px;
        font-size: 12px;
    }
    .mirror-controls,
    .mirror-cost-grid,
    .mirror-prize-pool-grid {
        grid-template-columns: 1fr;
    }
}

.dragon-soul-shell {
    display: grid;
    gap: 12px;
    color: #f6efe3;
}

.dragon-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(235, 198, 98, 0.35);
    background:
        radial-gradient(circle at 80% 20%, rgba(211, 44, 44, 0.28), transparent 30%),
        linear-gradient(135deg, rgba(38, 18, 18, 0.96), rgba(80, 21, 21, 0.88) 52%, rgba(23, 25, 34, 0.95));
    border-radius: 8px;
}

.dragon-hero h4 {
    margin: 0 0 6px;
    font-size: 22px;
    color: #ffd36d;
}

.dragon-hero p {
    margin: 0;
    color: #e7caa4;
}

.dragon-seal {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 211, 109, 0.75);
    color: #ffd36d;
    font-size: 38px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.28);
}

.dragon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.dragon-panel {
    padding: 12px;
    border: 1px solid rgba(220, 178, 84, 0.28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(42, 24, 28, 0.94), rgba(22, 24, 32, 0.94));
}

.dragon-panel h5 {
    margin: 0 0 8px;
    color: #ffd36d;
    font-size: 15px;
}

.dragon-panel p {
    margin: 5px 0;
    color: #e9d7bd;
}

.dragon-panel button,
.dragon-run-controls button {
    margin: 4px 5px 0 0;
}

.dragon-blood {
    border-color: rgba(255, 95, 72, 0.45);
    background: linear-gradient(180deg, rgba(88, 23, 23, 0.92), rgba(31, 20, 28, 0.96));
}

.dragon-run-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dragon-run-controls input {
    min-width: 180px;
    max-width: 240px;
}

.dragon-claim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dragon-master-list {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.dragon-master-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 7px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
}

.dragon-master-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dragon-master-list strong {
    color: #ffd36d;
}

.dragon-master-list em {
    color: #c9a7a0;
    font-style: normal;
}

.dragon-milestones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.dragon-milestone {
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.dragon-milestone.unlocked {
    border-color: rgba(255, 211, 109, 0.42);
}

.dragon-milestone > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.dragon-milestone p {
    font-size: 12px;
    line-height: 1.45;
}

.dragon-milestone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 760px) {
    .dragon-hero {
        align-items: flex-start;
    }
    .dragon-seal {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
    .dragon-master-list li {
        grid-template-columns: 1fr;
    }

    .dragon-master-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ 龙魂系统 / 龙魂塔 ============ */
.dragon-soul-shell {
    --dragon-gold: #e8bd68;
    --dragon-red: #b94232;
    --dragon-teal: #59c6b8;
    --dragon-ink: #101016;
    --dragon-panel: rgba(21, 18, 20, 0.92);
    display: grid;
    gap: 14px;
    color: #f4eadb;
}

.dragon-hero,
.dragon-tower-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(232, 189, 104, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(110deg, rgba(57, 18, 18, 0.86), rgba(15, 17, 24, 0.95) 54%, rgba(16, 48, 48, 0.72));
    box-shadow: inset 0 0 26px rgba(232, 189, 104, 0.08), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.dragon-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

.dragon-hero h4,
.dragon-tower-copy h4 {
    margin: 0 0 6px;
    color: var(--dragon-gold);
    font-size: 22px;
    letter-spacing: 0;
}

.dragon-hero p,
.dragon-tower-copy p {
    margin: 0;
    color: rgba(244, 234, 219, 0.78);
    line-height: 1.55;
}

.dragon-seal {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    color: #170f0d;
    font-weight: 800;
    font-size: 36px;
    background: radial-gradient(circle at 35% 30%, #ffe6a1, #d89b3f 62%, #6f2b1e);
    border: 1px solid rgba(255, 238, 186, 0.58);
    box-shadow: 0 0 18px rgba(232, 189, 104, 0.28);
}

.dragon-growth-board,
.dragon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.dragon-panel {
    position: relative;
    padding: 13px;
    border: 1px solid rgba(232, 189, 104, 0.24);
    border-radius: 8px;
    background: var(--dragon-panel);
    box-shadow: inset 0 1px 0 rgba(255, 246, 236, 0.06);
}

.dragon-panel h5 {
    margin: 0 0 8px;
    color: var(--dragon-gold);
    font-size: 15px;
    letter-spacing: 0;
}

.dragon-panel p {
    margin: 5px 0;
    color: rgba(244, 234, 219, 0.82);
    line-height: 1.48;
}

.dragon-panel strong {
    color: #ffe0a1;
}

.dragon-panel button,
.dragon-run-controls button {
    margin: 4px 5px 0 0;
}

.dragon-blood {
    border-color: rgba(185, 66, 50, 0.52);
    background:
        linear-gradient(180deg, rgba(89, 24, 22, 0.94), rgba(25, 18, 20, 0.97));
}

.dragon-growth-card:nth-child(2) {
    border-color: rgba(89, 198, 184, 0.32);
}

.dragon-growth-card:nth-child(3) {
    border-color: rgba(232, 189, 104, 0.38);
}

.dragon-action-row,
.dragon-claim-actions,
.dragon-milestone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dragon-blood-controls {
    align-items: center;
}

.dragon-blood-controls input {
    width: 108px;
    min-height: 38px;
    border-color: rgba(255, 224, 161, 0.36);
    background: rgba(8, 10, 14, 0.72);
    color: #f4eadb;
}

.dragon-help-line {
    font-size: 12px;
    color: rgba(244, 234, 219, 0.66) !important;
}

.dragon-tower-hero {
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.4fr);
    align-items: stretch;
}

.dragon-tower-silhouette {
    position: relative;
    min-height: 210px;
    background:
        linear-gradient(180deg, rgba(255, 218, 130, 0.1), transparent 32%),
        linear-gradient(90deg, rgba(9, 10, 14, 0.82), rgba(37, 24, 22, 0.55), rgba(9, 10, 14, 0.82));
}

.dragon-tower-silhouette span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

.tower-spire {
    top: 12px;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 58px solid rgba(232, 189, 104, 0.9);
    filter: drop-shadow(0 0 10px rgba(232, 189, 104, 0.36));
}

.tower-roof {
    top: 64px;
    width: 124px;
    height: 18px;
    background: linear-gradient(90deg, #5b211b, #d59a4b, #5b211b);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.tower-body {
    top: 80px;
    width: 94px;
    height: 118px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 246, 236, 0.08) 0 1px, transparent 1px 16px),
        linear-gradient(180deg, #2a2528, #111217);
    border: 1px solid rgba(232, 189, 104, 0.36);
    box-shadow: inset 0 0 20px rgba(89, 198, 184, 0.08);
}

.tower-gate {
    bottom: 0;
    width: 34px;
    height: 48px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(89, 198, 184, 0.52), rgba(21, 13, 12, 0.92));
    box-shadow: 0 0 18px rgba(89, 198, 184, 0.32);
}

.dragon-tower-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
}

.dragon-tower-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.dragon-tower-stats span,
.dragon-recommended-line {
    padding: 9px 10px;
    border: 1px solid rgba(232, 189, 104, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(244, 234, 219, 0.78);
}

.dragon-tower-stats strong,
.dragon-recommended-line strong {
    display: block;
    margin-top: 3px;
    color: #ffe0a1;
}

.dragon-tower-run {
    border-color: rgba(89, 198, 184, 0.4);
    background:
        linear-gradient(180deg, rgba(20, 42, 45, 0.94), rgba(18, 18, 22, 0.98));
}

.dragon-run-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.dragon-run-heading strong {
    color: var(--dragon-teal);
    font-size: 13px;
}

.dragon-run-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.dragon-run-controls input {
    min-width: 180px;
    max-width: 240px;
    height: 42px;
    border-color: rgba(89, 198, 184, 0.42);
    background: rgba(8, 10, 14, 0.72);
    color: #f4eadb;
}

.dragon-primary-action {
    min-height: 42px;
    border-color: rgba(255, 224, 161, 0.55) !important;
    background: linear-gradient(180deg, #9b3a2e, #5a1d1a) !important;
    color: #fff2d5 !important;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(185, 66, 50, 0.28);
}

.dragon-master-list {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.dragon-master-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(232, 189, 104, 0.14);
    border-radius: 8px;
    background: rgba(255, 246, 236, 0.04);
}

.dragon-master-list li.self {
    border-color: rgba(89, 198, 184, 0.42);
}

.dragon-master-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dragon-master-list strong {
    color: var(--dragon-gold);
}

.dragon-master-list em {
    color: rgba(244, 234, 219, 0.66);
    font-style: normal;
}

.dragon-master-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dragon-master-slot {
    display: grid;
    gap: 5px;
    min-height: 132px;
    padding: 10px;
    border: 1px solid rgba(232, 189, 104, 0.16);
    border-radius: 8px;
    background: rgba(255, 246, 236, 0.04);
}

.dragon-master-slot.occupied {
    border-color: rgba(232, 189, 104, 0.36);
    background: linear-gradient(180deg, rgba(54, 39, 28, 0.55), rgba(18, 18, 22, 0.9));
}

.dragon-master-slot.self {
    border-color: rgba(89, 198, 184, 0.58);
    box-shadow: inset 0 0 18px rgba(89, 198, 184, 0.1);
}

.dragon-master-slot-index {
    color: rgba(244, 234, 219, 0.58);
    font-size: 12px;
}

.dragon-master-slot strong {
    min-width: 0;
    color: #ffe0a1;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dragon-master-slot span,
.dragon-master-slot em {
    color: rgba(244, 234, 219, 0.72);
    font-size: 12px;
    font-style: normal;
}

.dragon-master-slot button {
    align-self: end;
}

.dragon-milestones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.dragon-milestone {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 246, 236, 0.04);
}

.dragon-milestone.unlocked {
    border-color: rgba(232, 189, 104, 0.44);
}

.dragon-milestone > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.dragon-milestone p {
    font-size: 12px;
    line-height: 1.45;
}

.dragon-milestone-rewards {
    display: grid;
    gap: 7px;
    margin: 8px 0;
}

.dragon-milestone-rewards > div {
    padding: 7px;
    border: 1px solid rgba(232, 189, 104, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.14);
}

.dragon-milestone-rewards b {
    display: block;
    margin-bottom: 3px;
    color: #ffe0a1;
    font-size: 12px;
}

@media (max-width: 760px) {
    .dragon-hero {
        align-items: flex-start;
    }

    .dragon-tower-hero {
        grid-template-columns: 1fr;
    }

    .dragon-tower-silhouette {
        min-height: 170px;
    }

    .tower-spire {
        top: 8px;
    }

    .tower-roof {
        top: 58px;
    }

    .tower-body {
        top: 74px;
        height: 96px;
    }

    .dragon-seal {
        width: 54px;
        height: 54px;
        font-size: 29px;
    }

    .dragon-tower-stats {
        grid-template-columns: 1fr;
    }

    .dragon-run-controls input,
    .dragon-run-controls button {
        width: 100%;
        max-width: none;
    }

    .dragon-master-list li {
        grid-template-columns: 1fr;
    }

    .dragon-master-grid {
        grid-template-columns: 1fr;
    }
}

/* 神秘镜面 - 三轴惊喜镜盘模式 */
.mirror-slot-shell {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(240, 192, 64, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(28, 21, 18, 0.96), rgba(13, 17, 24, 0.94));
    overflow: hidden;
}
.slot-machine {
    position: relative;
    max-width: 780px;
    margin: 16px auto;
    padding: 16px;
    border: 2px solid rgba(183, 150, 104, 0.42);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(64, 39, 28, 0.92), rgba(21, 23, 31, 0.96)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px);
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.45),
        0 16px 28px rgba(0, 0, 0, 0.30);
}
.slot-machine-top,
.slot-machine-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 246, 236, 0.75);
}
.slot-machine-bottom {
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    flex-wrap: wrap;
}
.slot-title {
    letter-spacing: 2px;
    color: #f0c040;
    font-weight: 800;
}
.slot-light {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #f0c040;
    box-shadow: 0 0 10px rgba(240, 192, 64, 0.72);
}
.slot-machine.is-spinning .slot-light {
    animation: slot-light-pulse 0.32s alternate infinite;
}
@keyframes slot-light-pulse {
    from { opacity: 0.35; transform: scale(0.78); }
    to { opacity: 1; transform: scale(1.16); }
}
.slot-reels {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 4px;
    padding: 12px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
}
.slot-payline {
    position: absolute;
    left: 26px;
    right: 26px;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(240, 192, 64, 0.62), transparent);
    pointer-events: none;
}
.slot-reel {
    position: relative;
    min-height: 138px;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        rgba(8, 12, 20, 0.88);
    overflow: hidden;
}
.slot-reel::before,
.slot-reel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 2;
    pointer-events: none;
}
.slot-reel::before {
    top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.64), transparent);
}
.slot-reel::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.64), transparent);
}
.slot-reel-window {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slot-symbol {
    width: 100%;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid rgba(183, 150, 104, 0.18);
    background: rgba(255, 246, 236, 0.05);
    color: rgba(255, 246, 236, 0.84);
}
.slot-symbol i {
    font-size: 30px;
}
.slot-symbol span {
    font-size: 15px;
    font-weight: 800;
}
.slot-machine.is-spinning .slot-symbol {
    animation: reel-symbol-blur 0.16s linear infinite;
}
@keyframes reel-symbol-blur {
    0% { transform: translateY(-18px); opacity: 0.55; filter: blur(1px); }
    50% { transform: translateY(0); opacity: 1; filter: blur(0); }
    100% { transform: translateY(18px); opacity: 0.55; filter: blur(1px); }
}
.slot-reel.is-locked .slot-symbol {
    animation: reel-lock 0.28s cubic-bezier(.18, .85, .28, 1.18);
}
@keyframes reel-lock {
    0% { transform: translateY(-22px) scale(0.96); }
    62% { transform: translateY(6px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}
.slot-reel.is-winner {
    border-color: rgba(240, 192, 64, 0.66);
    box-shadow: 0 0 0 1px rgba(240, 192, 64, 0.18), 0 0 18px rgba(240, 192, 64, 0.20);
}
.slot-machine.is-jackpot {
    animation: slot-machine-jackpot 0.52s alternate 5;
}
@keyframes slot-machine-jackpot {
    from { box-shadow: inset 0 0 28px rgba(0,0,0,0.45), 0 16px 28px rgba(0,0,0,0.30); }
    to { box-shadow: inset 0 0 28px rgba(240,192,64,0.22), 0 0 34px rgba(240,192,64,0.35); }
}
.slot-symbol.slot-empty i { color: #8f9aa8; }
.slot-symbol.slot-gold i { color: #f0c040; }
.slot-symbol.slot-material i { color: #8fc7ff; }
.slot-symbol.slot-stone i { color: #6ec77b; }
.slot-symbol.slot-shard i { color: #b790ff; }
.slot-symbol.slot-minor i { color: #f0c040; }
.slot-symbol.slot-major i { color: #ff9a62; }
.slot-symbol.slot-jackpot {
    border-color: rgba(240, 192, 64, 0.48);
    background: linear-gradient(180deg, rgba(240, 192, 64, 0.16), rgba(255, 246, 236, 0.05));
}
.slot-symbol.slot-jackpot i { color: #f0c040; }
.slot-triple-result {
    font-weight: 900;
    color: #f0c040;
    font-size: 18px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.mirror-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 14px auto 8px;
    flex-wrap: wrap;
}
.mirror-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 128px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(183, 150, 104, 0.24);
    background: rgba(255, 246, 236, 0.045);
    color: rgba(255, 246, 236, 0.78);
    font-weight: 700;
}
.mirror-mode-btn.active {
    border-color: rgba(240, 192, 64, 0.72);
    color: #ffe7a4;
    box-shadow: inset 0 0 18px rgba(240, 192, 64, 0.12), 0 0 18px rgba(240, 192, 64, 0.16);
}
.mirror-play-panel { display: none; }
.mirror-play-panel.active { display: block; }
.mirror-card-shell {
    max-width: 920px;
    margin: 14px auto 0;
}
.mirror-card-table {
    position: relative;
    min-height: 520px;
    padding: 24px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(129, 83, 42, 0.65);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.06), transparent 12%, rgba(0,0,0,0.18) 50%, transparent 88%, rgba(255,255,255,0.05)),
        repeating-linear-gradient(90deg, #5f3b22 0 28px, #6d4528 28px 55px, #51321f 55px 82px),
        linear-gradient(180deg, #735035, #3a2518);
    box-shadow:
        inset 0 0 0 6px rgba(42, 23, 12, 0.45),
        inset 0 18px 42px rgba(255, 222, 160, 0.08),
        0 18px 34px rgba(0, 0, 0, 0.28);
}
.mirror-card-table::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(238, 203, 130, 0.16);
    background:
        radial-gradient(ellipse at center, rgba(18, 80, 78, 0.56), rgba(10, 44, 48, 0.70) 58%, rgba(20, 12, 8, 0.08) 59%),
        linear-gradient(120deg, rgba(255,255,255,0.06), transparent 42%, rgba(0,0,0,0.12));
    box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.48);
}
.mirror-card-felt {
    position: absolute;
    inset: 52px 70px;
    border-radius: 50%;
    border: 1px dashed rgba(236, 212, 150, 0.20);
    pointer-events: none;
}
.mirror-hand {
    position: relative;
    z-index: 1;
}
.mirror-hand-title {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(236, 212, 150, 0.22);
    background: rgba(8, 15, 18, 0.52);
    color: #f2d38b;
    font-weight: 800;
    font-size: 13px;
}
.mirror-card-row {
    display: flex;
    justify-content: center;
    gap: 18px;
}
.mirror-card-vs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 24px 0;
    color: rgba(255, 246, 236, 0.76);
    text-align: center;
}
.mirror-card-vs strong {
    color: #8df2dc;
    letter-spacing: 0;
}
.mystic-card {
    width: 112px;
    aspect-ratio: 0.70;
    perspective: 900px;
    transform-origin: center bottom;
}
.mystic-card.card-dealt {
    animation: mystic-card-deal 420ms cubic-bezier(.2,.72,.24,1.05) both;
}
@keyframes mystic-card-deal {
    from { transform: translateY(-22px) scale(0.92) rotate(-2deg); opacity: 0; }
    to { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
.mystic-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 420ms ease;
}
.mystic-card.is-hidden .mystic-card-inner { transform: rotateY(180deg); }
.mystic-card.is-flipping .mystic-card-inner { transform: rotateY(90deg) scale(1.03); }
.mystic-card.is-flipped-now {
    animation: mystic-card-pop 360ms ease both;
}
@keyframes mystic-card-pop {
    0% { transform: translateY(0) scale(0.98); }
    55% { transform: translateY(-7px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}
.mystic-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-radius: 8px;
    backface-visibility: hidden;
    border: 1px solid rgba(244, 220, 158, 0.42);
    overflow: hidden;
}
.mystic-card-front {
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 234, 166, 0.22), transparent 35%),
        linear-gradient(145deg, #101923, #202038 48%, #0b111b);
    box-shadow: inset 0 0 18px rgba(141, 242, 220, 0.10), 0 12px 22px rgba(0, 0, 0, 0.32);
}
.mystic-card-back {
    transform: rotateY(180deg);
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10), transparent 30%, rgba(240,192,64,0.14) 52%, transparent 72%),
        repeating-linear-gradient(45deg, #151026 0 8px, #21183c 8px 16px);
    box-shadow: inset 0 0 24px rgba(240, 192, 64, 0.18), 0 12px 22px rgba(0, 0, 0, 0.30);
}
.card-back-sigil {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(244, 220, 158, 0.44);
    color: #f2d38b;
    box-shadow: 0 0 18px rgba(141, 242, 220, 0.20), inset 0 0 16px rgba(240, 192, 64, 0.12);
}
.card-suit {
    color: #8df2dc;
    font-size: 14px;
    font-weight: 800;
}
.card-rank {
    color: #fff2b8;
    font-size: 36px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 226, 127, 0.9), 0 0 18px rgba(141, 242, 220, 0.42);
}
.card-point {
    color: rgba(255, 246, 236, 0.72);
    font-size: 12px;
    font-weight: 700;
}
.mystic-card.is-joker .mystic-card-front {
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 247, 194, 0.42), transparent 32%),
        linear-gradient(145deg, #381526, #67314c 42%, #172843 78%, #0b111b);
    border-color: rgba(255, 226, 127, 0.82);
    box-shadow: inset 0 0 30px rgba(255, 226, 127, 0.16), 0 0 24px rgba(255, 226, 127, 0.28);
}
.mystic-card.is-joker .card-rank {
    font-size: 20px;
    color: #fff7c2;
}
.mystic-card.is-joker .card-suit { color: #ff9bd7; }
.mirror-card-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 14px 0;
    flex-wrap: wrap;
}

.tarot-card-btn {
    border-color: rgba(240, 192, 64, 0.55);
}

.mirror-card-rules,
.mirror-card-prizes {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(183, 150, 104, 0.18);
    border-radius: 8px;
    background: rgba(255, 246, 236, 0.035);
}
.mirror-card-rules span,
.mirror-card-prizes span {
    color: rgba(255, 246, 236, 0.76);
    font-size: 13px;
    line-height: 1.55;
}
.mirror-card-rules strong,
.mirror-card-prizes strong { color: #f0c040; }
.mirror-card-prizes {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.mirror-card-prizes section {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(183, 150, 104, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.12);
}
.mirror-card-summary {
    margin-top: 8px;
    color: rgba(255, 246, 236, 0.72);
    font-size: 13px;
}

@media (max-width: 760px) {
    .slot-machine {
        padding: 12px;
    }
    .slot-reels {
        gap: 8px;
        padding: 8px;
    }
    .slot-reel {
        min-height: 108px;
        padding: 6px;
    }
    .slot-symbol {
        min-height: 88px;
    }
    .slot-symbol i {
        font-size: 24px;
    }
    .slot-symbol span {
        font-size: 12px;
    }
    .slot-machine-bottom {
        justify-content: center;
    }
    .mirror-card-table {
        min-height: 470px;
        padding: 18px 10px;
    }
    .mirror-card-row {
        gap: 8px;
    }
    .mystic-card {
        width: min(92px, 28vw);
    }
    .card-rank {
        font-size: 28px;
    }
    .mystic-card.is-joker .card-rank {
        font-size: 16px;
    }
    .mirror-card-prizes {
        grid-template-columns: 1fr;
    }
}

.armor-feeding-list {
    display: grid;
    gap: 12px;
}

.armor-feeding-item {
    display: grid;
    gap: 8px;
}

.armor-score-feeding-item {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 82, 82, 0.52);
    box-shadow:
        0 0 18px rgba(255, 82, 82, 0.28),
        inset 0 0 24px rgba(255, 82, 82, 0.12);
    isolation: isolate;
}

.armor-score-feeding-item::before {
    content: "";
    position: absolute;
    inset: -24px -18px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 52% at 50% 105%, rgba(255, 82, 82, 0.38), transparent 72%),
        radial-gradient(ellipse 42% 48% at 92% 8%, rgba(255, 82, 82, 0.16), transparent 68%);
    animation: armor-score-aura-pulse 2.4s ease-in-out infinite;
}

.armor-score-feeding-item > * {
    position: relative;
    z-index: 1;
}

@keyframes armor-score-aura-pulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

.armor-feed-head {
    display: grid;
    grid-template-columns: minmax(72px, 0.55fr) minmax(120px, 1fr) minmax(86px, 0.65fr);
    gap: 6px;
    align-items: center;
    font-size: 13px;
}

.armor-feed-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.armor-feed-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #f0c040);
}

.armor-feed-actions {
    display: grid;
    gap: 6px;
}

.armor-feed-row {
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left-width: 4px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 12px;
}

.armor-feed-quality {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.armor-feed-controls {
    display: grid;
    grid-template-columns: minmax(108px, 1.1fr) minmax(116px, 1fr) 78px 56px;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.armor-feed-controls span {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.armor-feed-row input {
    width: 100%;
    min-width: 0;
    padding: 2px 4px;
    font-size: 11px;
}

.armor-feed-row button {
    grid-column: 4;
    grid-row: 2;
    min-width: 0;
    padding: 3px 5px;
    font-size: 11px;
}

.armor-feed-exp {
    font-size: 11px;
    color: var(--text-muted, #aaa);
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.armor-feed-common {
    border-left-color: #d6d6d6;
    background: linear-gradient(90deg, rgba(214, 214, 214, 0.10), rgba(255, 255, 255, 0.025));
}
.armor-feed-common .armor-feed-quality { color: #e3e3e3; }

.armor-feed-rare {
    border-left-color: #4aa3ff;
    background: linear-gradient(90deg, rgba(74, 163, 255, 0.14), rgba(255, 255, 255, 0.025));
}
.armor-feed-rare .armor-feed-quality { color: #75bbff; }

.armor-feed-exquisite {
    border-left-color: #b56cff;
    background: linear-gradient(90deg, rgba(181, 108, 255, 0.14), rgba(255, 255, 255, 0.025));
}
.armor-feed-exquisite .armor-feed-quality { color: #c895ff; }

.armor-feed-legendary {
    border-left-color: #ff9a3d;
    background: linear-gradient(90deg, rgba(255, 154, 61, 0.15), rgba(255, 255, 255, 0.025));
}
.armor-feed-legendary .armor-feed-quality { color: #ffb36c; }

.armor-feed-epic {
    border-left-color: #f0c040;
    background: linear-gradient(90deg, rgba(240, 192, 64, 0.17), rgba(255, 255, 255, 0.025));
}
.armor-feed-epic .armor-feed-quality { color: #f6d36a; }

.armor-feed-score {
    border-left-color: #ff5252;
    background:
        radial-gradient(ellipse 65% 130% at 0% 50%, rgba(255, 82, 82, 0.20), transparent 68%),
        linear-gradient(90deg, rgba(255, 82, 82, 0.18), rgba(255, 255, 255, 0.025));
    box-shadow:
        0 0 14px rgba(255, 82, 82, 0.20),
        inset 0 0 18px rgba(255, 82, 82, 0.10);
}
.armor-feed-score .armor-feed-quality {
    color: #ff7777;
    text-shadow: 0 0 8px rgba(255, 82, 82, 0.65);
}


@media (max-width: 760px) {
    .armor-feed-head,
    .armor-feed-controls {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .armor-feed-controls button {
        grid-column: auto;
        grid-row: auto;
        grid-column: span 2;
    }
}

/* Final overrides: the global parchment theme is declared late, so the raid skin lives here. */
.platinum-raid-chapter-wrapper.dungeon-chapter-wrapper {
    border-color: rgba(181, 76, 35, 0.7);
    background:
        linear-gradient(135deg, rgba(95, 24, 12, 0.58), rgba(16, 17, 21, 0.96) 38%, rgba(48, 30, 20, 0.92)),
        #121216;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 195, 113, 0.16);
}

.platinum-raid-stage.dungeon-stage.panel {
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
    padding: 18px 16px 16px 22px;
    border-color: rgba(212, 87, 35, 0.6);
    background:
        radial-gradient(circle at 92% 22%, rgba(234, 74, 31, 0.36), transparent 25%),
        linear-gradient(135deg, rgba(39, 21, 17, 0.96), rgba(13, 14, 17, 0.98) 44%, rgba(75, 31, 17, 0.95) 100%);
    color: #f1d4bd;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 191, 124, 0.16);
}

.platinum-raid-stage.dungeon-stage.panel .stage-info {
    padding-left: 10px;
}

.platinum-raid-stage.dungeon-stage.panel.is-coming-soon {
    border-color: rgba(118, 111, 108, 0.5);
    background:
        radial-gradient(circle at 92% 22%, rgba(140, 122, 112, 0.16), transparent 25%),
        linear-gradient(135deg, rgba(38, 35, 34, 0.96), rgba(16, 17, 20, 0.98) 44%, rgba(52, 45, 42, 0.94) 100%);
}

.platinum-raid-stage.dungeon-stage h4 {
    max-width: 360px;
    color: #ffd0a3;
    line-height: 1.25;
}

.platinum-raid-stage.dungeon-stage.is-coming-soon h4 {
    color: #d6d0cd;
}

.platinum-raid-stage.dungeon-stage .stage-desc,
.platinum-raid-stage.dungeon-stage p {
    max-width: 420px;
    color: #c7a18b;
}

.platinum-raid-stage.dungeon-stage.is-coming-soon .stage-desc,
.platinum-raid-stage.dungeon-stage.is-coming-soon p,
.platinum-raid-stage.dungeon-stage.is-coming-soon .possible-loot {
    color: #a9a09c;
}

.platinum-raid-stage.dungeon-stage .stage-details {
    color: #e1a15d;
    border-top-color: rgba(224, 99, 40, 0.28);
    border-bottom-color: rgba(224, 99, 40, 0.28);
}

.platinum-raid-stage.dungeon-stage.is-coming-soon .stage-details {
    color: #b9a58d;
    border-top-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.platinum-raid-stage.dungeon-stage .possible-loot {
    color: #9c8272;
}

.platinum-raid-stage.dungeon-stage .start-dungeon-btn {
    width: min(100%, 220px);
    min-height: 42px;
    margin: 0 0 0 10px;
    border-color: #9d431f;
    background: linear-gradient(135deg, #3c1710, #b43c1e 52%, #e7a34e);
    color: #fff2dc;
    box-shadow: 0 8px 18px rgba(176, 56, 24, 0.24);
}

.platinum-raid-stage.dungeon-stage .start-dungeon-btn:disabled {
    background: linear-gradient(135deg, #3a3434, #6f6868);
    color: #d6d1ce;
    border-color: rgba(255, 218, 186, 0.16);
    box-shadow: none;
}

.platinum-raid-nav,
.platinum-raid-dot {
    box-shadow: inset 0 1px 0 rgba(255, 215, 165, 0.12);
}

/* Platinum Dragon Raid page */
.platinum-raid-page {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 120px);
    padding: 22px;
    border: 1px solid rgba(189, 76, 34, 0.48);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 44%, rgba(244, 198, 111, 0.18), transparent 18%),
        radial-gradient(circle at 18% 18%, rgba(167, 42, 28, 0.35), transparent 24%),
        radial-gradient(circle at 84% 76%, rgba(229, 111, 43, 0.18), transparent 28%),
        linear-gradient(145deg, #130f10 0%, #241211 36%, #090b0e 68%, #1f1512 100%);
    color: #f4dfc1;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.72), 0 18px 42px rgba(0, 0, 0, 0.38);
}

.platinum-raid-page::before,
.platinum-raid-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.platinum-raid-page::before {
    opacity: 0.46;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(226, 86, 39, 0.18) 49%, transparent 52%),
        linear-gradient(0deg, transparent 0 48%, rgba(244, 198, 111, 0.1) 49%, transparent 52%),
        repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 210, 150, 0.035) 19px 20px);
    animation: platinumRaidHeat 7s ease-in-out infinite;
}

.platinum-raid-page::after {
    opacity: 0.32;
    background-image:
        radial-gradient(circle at 12% 74%, rgba(255, 159, 70, 0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 28%, rgba(255, 205, 120, 0.74) 0 1px, transparent 2px),
        radial-gradient(circle at 69% 63%, rgba(255, 126, 61, 0.82) 0 1px, transparent 2px),
        radial-gradient(circle at 87% 22%, rgba(255, 227, 167, 0.72) 0 1px, transparent 2px);
    animation: platinumRaidEmbers 5.8s linear infinite;
}

.platinum-raid-topbar,
.platinum-raid-summary,
.platinum-raid-battlefield {
    position: relative;
    z-index: 1;
}

.platinum-raid-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.platinum-raid-topbar button {
    width: auto;
    min-height: 38px;
    border-color: rgba(229, 154, 74, 0.42);
    background: rgba(16, 12, 12, 0.72);
    color: #f8dfb6;
}

.platinum-raid-left-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.platinum-raid-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.platinum-raid-help-corner {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin-left: 0;
    border-radius: 8px;
    border-color: rgba(229, 154, 74, 0.42);
    background: rgba(16, 12, 12, 0.72);
    color: #f8dfb6;
}

.platinum-raid-title {
    min-width: 0;
    text-align: center;
}

.platinum-raid-title span {
    display: block;
    margin-bottom: 4px;
    color: #d79862;
    font-size: 12px;
    letter-spacing: 2px;
}

.platinum-raid-title h2 {
    margin: 0;
    color: #ffe0a2;
    border: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-size: clamp(24px, 4vw, 42px);
    line-height: 1.1;
    text-shadow: 0 0 18px rgba(229, 80, 38, 0.52), 0 2px 0 #2a0d08;
}

.platinum-raid-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.platinum-raid-summary > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(216, 126, 58, 0.32);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(41, 20, 17, 0.76), rgba(12, 13, 16, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 220, 161, 0.1);
}

.platinum-raid-summary span,
.raid-node-mark,
.domain-header span,
.pressure-copy span,
.platinum-domain-boss span,
.pressure-numbers span,
.platinum-pressure-timer span {
    display: block;
    color: #ba8e6d;
    font-size: 12px;
}

.platinum-raid-summary strong {
    display: block;
    margin-top: 4px;
    color: #ffe0a2;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.platinum-raid-summary strong small {
    display: block;
    margin-top: 2px;
    color: rgba(214, 171, 91, 0.72);
    font-size: 11px;
    font-weight: 600;
}

.platinum-raid-battlefield {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1.25fr) minmax(220px, 0.9fr);
    grid-template-rows: auto minmax(360px, auto) auto;
    grid-template-areas:
        ". fear ."
        "hatred domain pride"
        "pressure pressure pressure";
    gap: 16px;
    align-items: stretch;
}

.platinum-raid-outer-grid {
    display: contents;
}

.platinum-raid-node,
.platinum-raid-domain,
.platinum-raid-pressure {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(222, 121, 54, 0.44);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(40, 20, 18, 0.9), rgba(11, 12, 15, 0.92) 58%, rgba(54, 25, 16, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 220, 166, 0.08), 0 12px 28px rgba(0, 0, 0, 0.35);
}

.platinum-raid-node::before,
.platinum-raid-domain::before,
.platinum-raid-pressure::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255, 207, 132, 0.09), transparent);
    transform: translateX(-120%);
    animation: platinumRaidSweep 8s ease-in-out infinite;
}

.platinum-node-fear { grid-area: fear; }
.platinum-node-hatred { grid-area: hatred; }
.platinum-node-pride { grid-area: pride; }

.platinum-raid-node {
    min-height: 236px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.raid-node-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 218, 169, 0.12);
}

.raid-node-header strong {
    color: #ffd8a0;
    font-family: var(--font-primary);
    font-size: 20px;
    line-height: 1.2;
    text-align: right;
}

.raid-node-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.raid-node-stats span,
.raid-node-reward {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(216, 126, 58, 0.32);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.24);
    color: #f2bf82;
    font-size: 12px;
}

.platinum-raid-node p {
    min-height: 40px;
    margin: 0;
    color: #dbc2a4;
    line-height: 1.5;
}

.raid-node-after {
    margin-top: auto;
    padding: 9px 10px;
    border-left: 2px solid rgba(255, 199, 121, 0.58);
    background: rgba(255, 181, 83, 0.08);
}

.raid-node-after span {
    display: block;
    color: #a99380;
    font-size: 12px;
}

.raid-node-after strong {
    display: block;
    margin-top: 3px;
    color: #fff0c5;
}

.platinum-raid-node button,
.platinum-domain-boss button {
    min-height: 34px;
    border-color: rgba(255, 215, 160, 0.18);
    background: linear-gradient(135deg, rgba(51, 42, 37, 0.9), rgba(82, 68, 57, 0.7));
    color: #cfc0ad;
}

.platinum-raid-domain {
    grid-area: domain;
    min-height: 360px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(255, 188, 87, 0.64);
    background:
        radial-gradient(circle at center, rgba(255, 218, 146, 0.16), transparent 18%),
        radial-gradient(circle at 50% 58%, rgba(176, 38, 27, 0.42), transparent 43%),
        linear-gradient(150deg, rgba(20, 10, 10, 0.96), rgba(41, 12, 10, 0.92), rgba(8, 9, 12, 0.98));
    box-shadow: inset 0 0 70px rgba(255, 126, 52, 0.14), 0 0 34px rgba(167, 42, 28, 0.34);
}

.domain-aura {
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 217, 150, 0.16);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 218, 146, 0.18), transparent 40%),
        conic-gradient(from 0deg, transparent, rgba(236, 83, 38, 0.22), transparent, rgba(255, 213, 144, 0.18), transparent);
    filter: blur(0.2px);
    animation: platinumDomainPulse 4.6s ease-in-out infinite, platinumDomainRotate 18s linear infinite;
}

.domain-header,
.domain-boss-list {
    position: relative;
    z-index: 1;
}

.domain-header {
    text-align: center;
    margin-bottom: 18px;
}

.domain-header h3 {
    margin: 4px 0 0;
    color: #fff0bb;
    border: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
    text-shadow: 0 0 22px rgba(239, 88, 42, 0.66);
}

.domain-boss-list {
    display: grid;
    gap: 12px;
}

.platinum-domain-boss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 205, 126, 0.26);
    border-radius: 7px;
    background: rgba(5, 7, 10, 0.62);
    backdrop-filter: blur(2px);
}

.platinum-domain-boss.final {
    border-color: rgba(255, 222, 155, 0.48);
    background: linear-gradient(135deg, rgba(74, 20, 15, 0.74), rgba(5, 7, 10, 0.72));
}

.platinum-domain-boss strong {
    display: block;
    margin-top: 3px;
    color: #ffe0a2;
    font-size: 18px;
}

.domain-boss-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.domain-boss-stats span {
    color: #f2bf82;
    white-space: nowrap;
}

.platinum-domain-boss p {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    color: #d7bda0;
    line-height: 1.45;
}

.raid-final-direct-hint {
    color: #ffd98b !important;
    font-size: 13px;
}

.platinum-domain-boss button {
    width: auto;
    min-width: 104px;
}

.platinum-raid-pressure {
    grid-area: pressure;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.9fr) minmax(220px, 0.7fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-color: rgba(186, 74, 48, 0.5);
    background:
        radial-gradient(circle at 12% 50%, rgba(206, 58, 40, 0.24), transparent 28%),
        linear-gradient(90deg, rgba(32, 14, 13, 0.96), rgba(10, 11, 14, 0.94));
}

.pressure-copy h3 {
    margin: 4px 0;
    color: #ffcf8e;
    border: 0;
    padding: 0;
    font-size: 20px;
}

.pressure-copy p {
    margin: 0;
    color: #d3b69b;
    line-height: 1.45;
}

.pressure-numbers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pressure-numbers div {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 205, 126, 0.18);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    text-align: center;
}

.pressure-numbers strong {
    display: block;
    margin-top: 2px;
    color: #ffe0a2;
    font-size: 22px;
}

.platinum-pressure-timer {
    display: grid;
    gap: 8px;
}

.platinum-pressure-timer > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.platinum-pressure-timer strong {
    color: #fff0c5;
    font-size: 18px;
}

.platinum-pressure-timer-track {
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 205, 126, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
}

.platinum-pressure-timer-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8f241b, #e35d2b, #ffd27c);
    box-shadow: 0 0 12px rgba(239, 88, 42, 0.58);
}

@keyframes platinumRaidHeat {
    0%, 100% { opacity: 0.32; transform: scale(1); }
    50% { opacity: 0.58; transform: scale(1.015); }
}

@keyframes platinumRaidEmbers {
    0% { transform: translateY(18px); }
    100% { transform: translateY(-18px); }
}

@keyframes platinumRaidSweep {
    0%, 42% { transform: translateX(-120%); }
    66%, 100% { transform: translateX(120%); }
}

@keyframes platinumDomainPulse {
    0%, 100% { opacity: 0.58; transform: scale(0.96); }
    50% { opacity: 0.92; transform: scale(1.05); }
}

@keyframes platinumDomainRotate {
    to { rotate: 360deg; }
}

@media (max-width: 980px) {
    .platinum-raid-page {
        padding: 16px;
    }

    .platinum-raid-topbar {
        grid-template-columns: 1fr;
    }

    .platinum-raid-title {
        order: -1;
    }

    .platinum-raid-topbar button {
        width: 100%;
    }

    .platinum-raid-left-actions {
        width: 100%;
    }

    .platinum-raid-left-actions .view-back-btn {
        flex: 1 1 auto;
    }

    .platinum-raid-actions {
        width: 100%;
        justify-content: stretch;
    }

    .platinum-raid-help-corner {
        top: 10px;
        right: 10px;
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

    .platinum-raid-actions .secondary-btn {
        flex: 1 1 auto;
    }

    .platinum-raid-summary {
        grid-template-columns: 1fr;
    }

    .platinum-raid-battlefield {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "domain"
            "fear"
            "hatred"
            "pride"
            "pressure";
    }

    .platinum-raid-domain {
        min-height: 330px;
    }

    .platinum-raid-pressure {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .platinum-raid-page {
        padding: 12px;
        border-radius: 0;
    }

    .platinum-raid-node,
    .platinum-raid-domain,
    .platinum-raid-pressure {
        border-radius: 6px;
    }

    .platinum-domain-boss {
        grid-template-columns: 1fr;
    }

    .domain-boss-stats {
        justify-content: flex-start;
    }

    .platinum-domain-boss button {
        width: 100%;
    }

    .pressure-numbers {
        grid-template-columns: 1fr 1fr;
    }

    .pressure-numbers div:first-child {
        grid-column: 1 / -1;
    }
}

/* Final override: platinum raid uses an interactive map instead of large boss cards. */
.platinum-raid-page .platinum-raid-battlefield {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "map"
        "detail"
        "pressure";
    gap: 16px;
    align-items: stretch;
}

.platinum-raid-page .platinum-raid-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platinum-raid-page .platinum-raid-war-map {
    grid-area: map;
}

.platinum-raid-page .platinum-raid-detail-panel {
    grid-area: detail;
}

.platinum-raid-page .platinum-raid-pressure-bar {
    grid-area: pressure;
}

.platinum-raid-page .raid-map-stage {
    min-height: 430px;
    height: 430px;
}

.platinum-raid-page .raid-map-node {
    width: 132px;
    min-height: 66px;
    padding: 8px 9px;
    transition: border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.platinum-raid-page .raid-map-node strong {
    font-size: 15px;
}

.platinum-raid-page .map-node-domain {
    width: 154px;
    min-height: 90px;
    left: 50%;
    top: 50%;
}

.platinum-raid-page .map-node-domain strong {
    font-size: 18px;
}

.platinum-raid-page .map-node-hatred {
    left: 4%;
    top: 56%;
}

.platinum-raid-page .map-node-pride {
    right: 4%;
    top: 56%;
}

.platinum-raid-page .map-node-pressure {
    width: 196px;
    bottom: 6%;
}

.platinum-raid-page .raid-map-node:hover,
.platinum-raid-page .raid-map-node.active,
.platinum-raid-page .raid-map-node:focus,
.platinum-raid-page .raid-map-node:active {
    transform: none !important;
}

.platinum-raid-page .raid-detail-card {
    min-height: auto;
}

.platinum-raid-page .raid-detail-transform {
    margin-top: 0;
}

.platinum-raid-page .raid-assist-message {
    margin: 8px 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 213, 137, 0.24);
    border-radius: 6px;
    color: #ffe4b3;
    background: rgba(21, 24, 30, 0.68);
    line-height: 1.55;
}

.platinum-raid-page .raid-battle-log-card {
    margin-top: 12px;
}

.platinum-raid-page .raid-battle-log {
    max-height: 220px;
    overflow: auto;
    padding-right: 4px;
}

.platinum-raid-page .raid-battle-log p {
    margin: 0 0 7px;
    color: #d6c0a4;
    line-height: 1.45;
}

.platinum-raid-page .raid-detail-domain-boss button + button,
.platinum-raid-page .raid-detail-domain-boss .secondary-btn + button {
    margin-left: 8px;
}

.privilege-system-shell {
    display: grid;
    gap: 14px;
    container-type: inline-size;
    color: #f8ead1;
    min-width: 0;
}

.privilege-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid rgba(245, 197, 92, 0.42);
    background:
        radial-gradient(circle at 85% 18%, rgba(255, 211, 112, 0.22), transparent 26%),
        linear-gradient(135deg, rgba(42, 24, 20, 0.98), rgba(82, 28, 28, 0.92) 52%, rgba(20, 24, 36, 0.96));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.privilege-hero span,
.privilege-section-heading span,
.privilege-card-head span {
    display: block;
    color: #f3bf5d;
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 700;
}

.privilege-hero h3,
.privilege-section-heading h4,
.privilege-card h4 {
    margin: 4px 0 6px;
    color: #ffe4a1;
}

.privilege-hero p,
.privilege-card p {
    margin: 0;
    color: rgba(248, 234, 209, 0.78);
}

.privilege-total-badge {
    width: 112px;
    flex: 0 0 112px;
    box-sizing: border-box;
    min-height: 92px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 228, 161, 0.38);
    background: rgba(0, 0, 0, 0.2);
}

.privilege-total-badge strong {
    color: #ffe4a1;
    font-size: 34px;
}

.privilege-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.privilege-card,
.privilege-daily-panel,
.privilege-claim-summary {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(231, 183, 91, 0.28);
    background: linear-gradient(180deg, rgba(35, 23, 27, 0.96), rgba(20, 22, 31, 0.96));
}

.privilege-balance-vip {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) minmax(230px, 0.55fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(104, 197, 220, 0.42);
    border-radius: 8px;
    color: #eaf7fb;
    background:
        linear-gradient(100deg, rgba(13, 34, 49, 0.98), rgba(20, 45, 58, 0.96) 58%, rgba(52, 39, 30, 0.96));
    box-shadow: inset 0 1px 0 rgba(222, 248, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.24);
}

.privilege-balance-vip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-bottom: 2px solid rgba(241, 195, 95, 0.22);
}

.privilege-balance-vip-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(146, 221, 236, 0.42);
    border-radius: 8px;
    color: #8fe3f1;
    font-size: 26px;
    background: rgba(5, 20, 30, 0.55);
    box-shadow: inset 0 0 18px rgba(94, 198, 220, 0.16);
}

.privilege-balance-vip-main,
.privilege-balance-vip-heading > div {
    min-width: 0;
}

.privilege-balance-vip-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.privilege-balance-vip-heading span {
    display: block;
    color: #73cddd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.privilege-balance-vip-heading h4 {
    margin: 3px 0 5px;
    color: #f4fbfd;
    font-size: 20px;
}

.privilege-balance-vip-heading h4 strong {
    color: #ffd77d;
}

.privilege-balance-vip-heading h4 small {
    color: rgba(232, 247, 250, 0.58);
    font-size: 12px;
}

.privilege-balance-vip-heading > b {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid rgba(244, 202, 112, 0.34);
    border-radius: 4px;
    color: #f4d68c;
    font-size: 11px;
    background: rgba(66, 46, 28, 0.55);
}

.privilege-balance-vip-main > p {
    margin: 0 0 10px;
    color: rgba(226, 243, 247, 0.7);
    font-size: 12px;
    line-height: 1.45;
}

.privilege-vip-level-explorer {
    min-width: 0;
    margin-top: 7px;
}

.privilege-vip-level-selector {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
}

.privilege-vip-level-selector button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(133, 209, 225, 0.3);
    border-radius: 4px;
    color: #a9e6ed;
    background: rgba(5, 20, 30, 0.72);
}

.privilege-vip-level-selector button:hover:not(:disabled),
.privilege-vip-level-selector button:focus-visible {
    border-color: rgba(242, 202, 113, 0.72);
    color: #ffe09a;
    background: rgba(45, 39, 29, 0.88);
}

.privilege-vip-level-selector button:disabled {
    opacity: 0.3;
    cursor: default;
}

.privilege-vip-level-selector > div {
    min-width: 0;
    text-align: center;
}

.privilege-vip-level-selector span,
.privilege-vip-level-selector strong {
    display: block;
}

.privilege-vip-level-selector span {
    color: rgba(214, 239, 244, 0.58);
    font-size: 10px;
}

.privilege-vip-level-selector strong {
    margin-top: 1px;
    color: #ffe09a;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.privilege-vip-range-shell {
    position: relative;
    height: 24px;
    margin-top: 4px;
}

.privilege-vip-range-shell::before,
.privilege-vip-range-shell::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    height: 6px;
    border-radius: 3px;
    pointer-events: none;
}

.privilege-vip-range-shell::before {
    width: 100%;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.privilege-vip-range-shell::after {
    width: var(--vip-current-position);
    background: linear-gradient(90deg, #4fa9bb, #a9e6ed 72%, #f2ca71);
    box-shadow: 0 0 8px rgba(115, 215, 232, 0.28);
}

.privilege-vip-current-marker {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: var(--vip-current-position);
    width: 2px;
    height: 16px;
    display: none;
    border-radius: 1px;
    background: #ffe09a;
    box-shadow: 0 0 5px rgba(255, 224, 154, 0.7);
    transform: translateX(-1px);
    pointer-events: none;
}

.privilege-vip-range-shell.has-current-level .privilege-vip-current-marker {
    display: block;
}

.privilege-vip-range-shell input[type="range"] {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: transparent;
}

.privilege-vip-range-shell input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.privilege-vip-range-shell input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #dff8fc;
    border-radius: 50%;
    background: #4fa9bb;
    box-shadow: 0 0 0 3px rgba(79, 169, 187, 0.2), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.privilege-vip-range-shell input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
}

.privilege-vip-range-shell input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #dff8fc;
    border-radius: 50%;
    background: #4fa9bb;
    box-shadow: 0 0 0 3px rgba(79, 169, 187, 0.2), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.privilege-vip-range-shell input[type="range"]:focus-visible {
    outline: 2px solid rgba(255, 224, 154, 0.78);
    outline-offset: 2px;
    border-radius: 4px;
}

.privilege-vip-range-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: -1px;
    color: rgba(214, 239, 244, 0.48);
    font-size: 9px;
}

.privilege-vip-range-labels b {
    color: rgba(255, 224, 154, 0.78);
    font-weight: 700;
}

.privilege-vip-target-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 7px;
    border-top: 1px solid rgba(158, 218, 231, 0.14);
    border-bottom: 1px solid rgba(158, 218, 231, 0.14);
    background: rgba(3, 17, 25, 0.26);
}

.privilege-vip-target-summary > div {
    min-width: 0;
    padding: 7px 8px;
}

.privilege-vip-target-summary > div:nth-child(2) {
    border-left: 1px solid rgba(158, 218, 231, 0.14);
}

.privilege-vip-target-summary small,
.privilege-vip-target-summary strong,
.privilege-vip-target-summary em {
    display: block;
    overflow-wrap: anywhere;
}

.privilege-vip-target-summary small {
    color: rgba(214, 239, 244, 0.52);
    font-size: 9px;
}

.privilege-vip-target-summary strong {
    margin-top: 2px;
    color: #f4fbfd;
    font-size: 11px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.privilege-vip-target-summary .is-reached strong {
    color: #8fe3c0;
}

.privilege-vip-target-gain {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(158, 218, 231, 0.14);
}

.privilege-vip-target-gain strong,
.privilege-vip-target-gain em {
    display: inline;
}

.privilege-vip-target-gain em {
    margin-left: 10px;
    color: #ffe09a;
    font-size: 11px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.privilege-vip-high-water {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    color: rgba(214, 239, 244, 0.54);
    font-size: 10px;
}

.privilege-vip-high-water strong {
    color: rgba(234, 247, 251, 0.82);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.privilege-balance-vip-effects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.privilege-balance-vip-effects > div {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(173, 224, 234, 0.17);
    border-radius: 6px;
    background: rgba(4, 17, 25, 0.38);
}

.privilege-balance-vip-effects span,
.privilege-balance-vip-effects strong {
    display: block;
    overflow-wrap: anywhere;
}

.privilege-balance-vip-effects span {
    color: rgba(222, 241, 245, 0.62);
    font-size: 11px;
}

.privilege-balance-vip-effects strong {
    margin-top: 4px;
    color: #ffe09a;
    font-size: 16px;
}
.privilege-claim-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-color: rgba(255, 217, 128, 0.42);
    background: linear-gradient(135deg, rgba(89, 34, 27, 0.96), rgba(36, 25, 36, 0.96));
}

.privilege-claim-summary > div {
    flex: 1 1 220px;
    min-width: 0;
}

.privilege-claim-summary span {
    display: block;
    color: #f2c36d;
    font-size: 12px;
    font-weight: 700;
}

.privilege-claim-summary strong {
    display: block;
    margin-top: 4px;
    color: #ffe4a1;
    font-size: 18px;
}

.privilege-claim-summary p {
    margin: 6px 0 0;
    color: rgba(248, 234, 209, 0.78);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.summer-cool-reward-description {
    display: block;
    color: #c8cedb !important;
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.privilege-claim-summary button {
    min-width: 112px;
    margin-left: auto;
}

.privilege-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.privilege-section-heading button {
    min-width: 112px;
}

.privilege-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.privilege-card-head > strong {
    color: #ffe4a1;
    font-size: 24px;
}

.privilege-level-grid,
.privilege-reward-grid {
    display: grid;
    gap: 8px;
}

.privilege-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 0;
}

.privilege-level-grid div,
.privilege-reward-tier {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 228, 161, 0.16);
    background: rgba(255, 255, 255, 0.045);
}

.privilege-level-grid span,
.privilege-reward-tier span {
    display: block;
    color: rgba(248, 234, 209, 0.62);
    font-size: 12px;
}

.privilege-level-grid strong,
.privilege-reward-tier strong {
    color: #fff2c6;
}

.privilege-card button,
.privilege-reward-tier button {
    width: 100%;
}

.privilege-reward-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.privilege-reward-tier button {
    width: auto;
    min-width: 96px;
}

.privilege-reward-tier.claimed {
    opacity: 0.72;
}

.privilege-inline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
    padding: 9px 11px;
    border: 1px solid rgba(245, 197, 92, 0.32);
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(245, 197, 92, 0.14), rgba(159, 45, 45, 0.1));
    color: #f8ead1;
}

.privilege-inline-banner span {
    color: #f3bf5d;
    font-weight: 700;
}

.privilege-inline-banner strong {
    color: #ffe4a1;
    font-size: 18px;
}

.privilege-inline-banner em {
    color: rgba(248, 234, 209, 0.68);
    font-style: normal;
    font-size: 12px;
}

.platinum-raid-page .map-node-fear,
.platinum-raid-page .map-node-fear:hover,
.platinum-raid-page .map-node-fear.active,
.platinum-raid-page .map-node-fear:focus,
.platinum-raid-page .map-node-fear:active,
.platinum-raid-page .map-node-pressure,
.platinum-raid-page .map-node-pressure:hover,
.platinum-raid-page .map-node-pressure.active,
.platinum-raid-page .map-node-pressure:focus,
.platinum-raid-page .map-node-pressure:active {
    transform: translateX(-50%) !important;
}

.platinum-raid-page .map-node-domain,
.platinum-raid-page .map-node-domain:hover,
.platinum-raid-page .map-node-domain.active,
.platinum-raid-page .map-node-domain:focus,
.platinum-raid-page .map-node-domain:active {
    transform: translate(-50%, -50%) !important;
}

@media (max-width: 640px) {
    .platinum-raid-page .platinum-raid-summary {
        grid-template-columns: 1fr;
    }

    .platinum-raid-page .raid-map-stage {
        min-height: 520px;
        height: 520px;
    }

    .platinum-raid-page .platinum-raid-pressure-bar {
        grid-template-columns: 1fr;
    }
}
.dragon-majesty-card {
    position: relative;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 0 0 18px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 8px;
    background: radial-gradient(circle at 18% 18%, rgba(248, 113, 22, 0.30), transparent 30%), linear-gradient(135deg, rgba(34, 8, 3, 0.96), rgba(17, 24, 39, 0.98) 52%, rgba(45, 15, 8, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.28);
}

.dragon-majesty-card.active {
    border-color: rgba(251, 191, 36, 0.82);
    box-shadow: 0 0 26px rgba(245, 158, 11, 0.18), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.dragon-majesty-emblem {
    width: 108px;
    height: 108px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 20deg, #451a03, #f97316, #facc15, #7f1d1d, #451a03);
    padding: 6px;
}

.dragon-majesty-emblem span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff7ed;
    font-size: 42px;
    font-weight: 900;
    background: radial-gradient(circle at 50% 35%, #7f1d1d, #1f0703 72%);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.72);
}

.dragon-majesty-kicker {
    color: #fbbf24;
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 700;
}

.dragon-majesty-copy h4 {
    margin: 2px 0 6px;
    color: #fff7ed;
}

.dragon-majesty-copy p {
    margin: 4px 0;
}

.dragon-majesty-progress {
    height: 10px;
    margin: 10px 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(251, 191, 36, 0.24);
    overflow: hidden;
}

.dragon-majesty-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f97316, #facc15);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.62);
}

.dragon-majesty-rules {
    display: grid;
    gap: 4px;
    margin: 8px 0 10px;
    color: #fed7aa;
    font-size: 13px;
}


.dragon-majesty-card.aberrant-echo {
    border-color: rgba(167, 139, 250, 0.62);
    background:
        radial-gradient(circle at 18% 18%, rgba(126, 34, 206, 0.34), transparent 32%),
        radial-gradient(circle at 82% 82%, rgba(34, 197, 94, 0.18), transparent 36%),
        linear-gradient(135deg, rgba(25, 10, 35, 0.98), rgba(15, 23, 42, 0.98) 52%, rgba(12, 45, 34, 0.95));
    box-shadow: inset 0 0 0 1px rgba(216, 180, 254, 0.08), 0 18px 42px rgba(25, 10, 35, 0.34);
}

.dragon-majesty-card.aberrant-echo.active {
    border-color: rgba(192, 132, 252, 0.9);
    box-shadow: 0 0 28px rgba(168, 85, 247, 0.24), inset 0 0 0 1px rgba(187, 247, 208, 0.08);
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-emblem {
    background: conic-gradient(from 20deg, #1e1b4b, #7e22ce, #22c55e, #581c87, #1e1b4b);
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-emblem span {
    color: #f5f3ff;
    background: radial-gradient(circle at 50% 35%, #581c87, #0f172a 72%);
    text-shadow: 0 0 14px rgba(192, 132, 252, 0.8), 0 0 22px rgba(34, 197, 94, 0.36);
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-kicker {
    color: #86efac;
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-copy h4 {
    color: #efe4ff;
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-progress {
    border-color: rgba(192, 132, 252, 0.34);
    background: rgba(10, 15, 28, 0.86);
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-progress span {
    background: linear-gradient(90deg, #22c55e, #8b5cf6, #d946ef);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.64);
}

.dragon-majesty-card.aberrant-echo .dragon-majesty-rules {
    color: #d8b4fe;
}.dragon-majesty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 680px) {
    .dragon-majesty-card {
        grid-template-columns: 1fr;
    }
    .dragon-majesty-emblem {
        width: 88px;
        height: 88px;
    }
}
.guardian-subtabs {
    display: flex;
    gap: 8px;
    margin: 10px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.guardian-subtab {
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #9aa4b2;
    cursor: pointer;
}

.guardian-subtab.active {
    color: #ffffff;
    border-bottom-color: #6ee7ff;
}

.guardian-granting-shell {
    display: grid;
    gap: 10px;
}

.guardian-granting-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.guardian-granting-summary > div,
.guardian-granting-lines > div,
.guardian-granting-claim {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 28, 0.72);
    border-radius: 8px;
    padding: 8px;
}

.guardian-granting-summary span,
.guardian-granting-lines span,
.guardian-granting-claim span {
    display: block;
    color: #9aa4b2;
    font-size: 12px;
    margin-bottom: 4px;
}

.guardian-granting-summary strong,
.guardian-granting-lines strong,
.guardian-granting-claim strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
}

.guardian-granting-board-wrap {
    position: relative;
    max-width: 100%;
}

.guardian-granting-board {
    padding: 10px;
    border: 1px solid rgba(110, 231, 255, 0.22);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(9, 14, 22, 0.96), rgba(21, 31, 44, 0.92));
    overflow: auto;
}

.guardian-granting-matrix {
    display: grid;
    grid-template-columns: repeat(5, minmax(58px, 1fr)) minmax(92px, 0.9fr);
    grid-template-rows: repeat(5, 58px) 46px;
    gap: 6px;
    max-width: 640px;
}

.guardian-granting-cell {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
    color: #ffffff;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.guardian-granting-cell.has-grant {
    border-color: rgba(110, 231, 255, 0.36);
    background: linear-gradient(145deg, rgba(20, 47, 61, 0.78), rgba(22, 28, 39, 0.84));
}

.guardian-granting-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(110, 231, 255, 0.6);
}

.granting-cell-level {
    color: #d7f7ff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.05;
}

.granting-cell-name {
    min-width: 0;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.guardian-granting-line-bonus {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 6px;
    background: rgba(0, 0, 0, 0.22);
}

.guardian-granting-line-bonus span {
    color: #9aa4b2;
    font-size: 10px;
}

.guardian-granting-line-bonus strong {
    color: #ffe7a6;
    font-size: 10px;
    line-height: 1.18;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.diag-bonus {
    border-color: rgba(255, 209, 102, 0.34);
    background: rgba(76, 54, 18, 0.28);
}

.guardian-granting-cell.is-hit {
    transform: translateY(-1px) scale(1.015);
    border-color: rgba(198, 154, 70, 0.72);
    box-shadow: 0 0 0 1px rgba(198, 154, 70, 0.2), 0 0 18px rgba(146, 101, 36, 0.24);
    animation: guardianGrantingPulse var(--granting-hit-duration, 520ms) ease-out;
}

.guardian-granting-board.granting-roll-cross {
    box-shadow: inset 0 0 34px rgba(165, 118, 43, 0.24), 0 0 22px rgba(116, 75, 24, 0.18);
}

.guardian-granting-board.granting-roll-block {
    box-shadow: inset 0 0 38px rgba(178, 130, 48, 0.28), 0 0 24px rgba(122, 82, 27, 0.2);
}

.guardian-granting-board.granting-roll-ultimate {
    box-shadow: inset 0 0 48px rgba(190, 141, 52, 0.34), 0 0 30px rgba(128, 88, 31, 0.24);
    animation: guardianGrantingUltimate var(--granting-ultimate-duration, 760ms) ease-out;
}

.guardian-granting-flash {
    position: absolute;
    inset: 12px;
    display: grid;
    place-items: center;
    pointer-events: none;
    color: rgba(214, 171, 91, 0.5);
    font-size: 24px;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(120, 82, 30, 0.42);
    background:
        radial-gradient(circle at 50% 48%, rgba(178, 132, 52, 0.2), rgba(120, 82, 30, 0.1) 34%, transparent 68%),
        radial-gradient(circle at 50% 50%, rgba(80, 52, 20, 0.18), transparent 72%);
    border-radius: 10px;
    opacity: 0;
}

.guardian-granting-board.granting-roll-cross + .guardian-granting-flash,
.guardian-granting-board.granting-roll-block + .guardian-granting-flash,
.guardian-granting-board.granting-roll-ultimate + .guardian-granting-flash {
    animation: guardianGrantingFlash var(--granting-flash-duration, 620ms) ease-out;
}

.guardian-granting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.guardian-granting-actions span {
    color: #9aa4b2;
    font-size: 13px;
}

.guardian-granting-lines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 6px;
}

.guardian-granting-claims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 6px;
}

.guardian-granting-claim {
    display: grid;
    gap: 6px;
}

.guardian-granting-claim.claimed {
    opacity: 0.62;
}

.granting-pick-modal {
    display: grid;
    gap: 10px;
}

.granting-pick-current {
    border: 1px solid rgba(110, 231, 255, 0.25);
    border-radius: 8px;
    padding: 10px;
    background: rgba(12, 18, 28, 0.72);
}

.granting-pick-current span,
.granting-pick-option span {
    display: block;
    color: #9aa4b2;
    font-size: 12px;
}

.granting-pick-current strong,
.granting-pick-option strong {
    color: #ffffff;
}

.granting-pick-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    max-height: 52vh;
    overflow: auto;
}

.granting-pick-option {
    display: grid;
    gap: 5px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px;
    background: rgba(12, 18, 28, 0.86);
}

.granting-pick-option.active {
    border-color: rgba(110, 231, 255, 0.68);
    box-shadow: 0 0 0 1px rgba(110, 231, 255, 0.16);
}

@keyframes guardianGrantingPulse {
    0% { filter: brightness(1); }
    45% { filter: brightness(1.18) saturate(1.08); }
    100% { filter: brightness(1); }
}

@keyframes guardianGrantingFlash {
    0% { opacity: 0; transform: scale(0.98); }
    28% { opacity: 0.46; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.02); }
}

@keyframes guardianGrantingUltimate {
    0% { filter: brightness(1); }
    35% { filter: brightness(1.22) saturate(1.12); }
    100% { filter: brightness(1); }
}

@media (max-width: 720px) {
    .guardian-granting-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guardian-granting-board {
        padding: 8px;
    }

    .guardian-granting-matrix {
        grid-template-columns: repeat(5, 52px) 76px;
        grid-template-rows: repeat(5, 54px) 42px;
        gap: 5px;
    }

    .guardian-granting-line-bonus strong,
    .guardian-granting-line-bonus span {
        font-size: 9px;
    }
}

/* =========================================================================
 * 【v1.16】财富之路 —— 配色对齐游戏副本(--color-parchment / --color-border)
 *   布局策略:panel 用 flex 列,body 用 grid 2 列横向分栏
 * ========================================================================= */

/* ---------- 三栏卡片(无尽贪食 / 摇钱树 / 金矿) ---------- */
.dungeon-stage.wealth-path-tri-card {
    padding: 0;
    background-color: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 15px;
}
.wp-tri-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.wp-tri-title {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: bold;
    color: var(--color-wood);
    display: flex; align-items: center; gap: 8px;
}
.wp-tri-title i { color: var(--color-wood); }
.wp-tri-subtitle { margin-top: 4px; font-size: 12px; color: #8B9BB0; }

.wp-tri-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
    gap: 10px;
    padding: 12px;
    align-items: stretch;
}
.wp-col {
    display: flex; flex-direction: column;
    padding: 12px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-width: 0;
    min-height: 100%;
}
.wp-col-label {
    font-family: var(--font-secondary);
    font-size: 14px; font-weight: bold;
    color: var(--color-text);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
    display: flex; align-items: center; gap: 6px;
}
.wp-col-label i { color: var(--color-accent); }
.wp-col-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wp-col-body .wp-loading { color: #6B7D8F; font-size: 12px; padding: 6px 0; }
.wp-col-body [data-wp-tree-body],
.wp-col-body [data-wp-mine-body] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/* 左栏副本入口 —— 内嵌 createStageCard 输出,去掉重复 panel 包裹 */
.wp-col-body .wp-inner {
    margin: 0; padding: 0;
    background: transparent; border: none; box-shadow: none;
    gap: 6px;
}
.wp-col-body .wp-inner h4 { font-size: 14px; margin: 0 0 4px; color: var(--color-text); }
.wp-col-body .wp-inner .stage-desc { font-size: 12px; color: #8B9BB0; margin-bottom: 6px; }

.wp-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 4px 0;
    font-size: 12px;
    color: #8B9BB0;
    gap: 10px;
}
.wp-stat-value {
    min-width: 0;
    color: var(--color-text);
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}
.wp-stat-row strong { font-size: 14px; color: var(--color-text); font-weight: bold; }
.wp-hint { font-size: 11px; color: #6B7D8F; line-height: 1.5; margin: 2px 0 6px; font-style: italic; }
.wp-col .stage-entry-btn { margin-top: auto; }

@media (max-width: 980px) {
    .wp-tri-grid { grid-template-columns: 1fr 1fr; }
    .wp-col[data-wp-slot="left"] { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .wp-tri-grid { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
    .wp-tri-header { padding: 12px 14px; }
}

/* ---------- 摇钱树子页面 ---------- */
.money-tree-panel {
    /* panel 自己是 flex 列,内部 mt-body-grid 才是横向分栏 */
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 15px;
}
.mt-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.mt-header h2 {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: bold;
    color: var(--color-wood);
    display: flex; align-items: center; gap: 8px;
}
.mt-header h2 i { color: var(--color-wood); }
.mt-subtitle { margin: 4px 0 0; color: #8B9BB0; font-size: 12px; }

.mt-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 14px 18px;
    align-items: stretch;
}
.mt-col {
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}
.mt-stats-col,
.mt-action-col,
.mt-result-col {
    min-height: 100%;
}

.mt-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mt-stat {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-width: 0;
}
.mt-stat-label,
.mt-stat-value {
    min-width: 0;
}
.mt-stat-value {
    overflow-wrap: anywhere;
    text-align: right;
}
.mt-stat-label { font-size: 12px; color: #8B9BB0; }
.mt-stat-value { font-size: 16px; color: var(--color-text); font-weight: bold; font-family: var(--font-secondary); }
.mt-stat-value.mt-gold { color: var(--color-wood); }
.mt-stat-value.mt-bonus { color: #6ec072; }
.mt-stat-sub { font-size: 12px; color: #6B7D8F; margin-left: 2px; font-weight: normal; }

.mt-hint-card {
    padding: 12px 14px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.6;
    flex: 1;
}
.mt-hint-card p { margin: 0; }
.mt-hint-card p + p { margin-top: 6px; }
.mt-formula {
    color: #8B9BB0 !important;
    font-size: 11.5px !important;
    border-top: 1px dashed var(--color-border);
    padding-top: 6px !important;
}

.mt-action-card {
    padding: 12px 14px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.mt-action-card .sh-action-btn.major {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: bold;
}
.mt-disabled-reason { margin: 6px 0 0; color: var(--color-accent); font-size: 12px; }

.mt-result-card {
    padding: 12px 14px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-height: 100%;
}
.mt-result-card.mt-result-fresh {
    border-color: var(--color-wood);
    animation: mtResultPop .4s ease;
}
@keyframes mtResultPop {
    0%   { transform: scale(0.97); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.mt-result-card h3 {
    margin: 0 0 6px;
    font-family: var(--font-secondary);
    font-size: 14px; font-weight: bold;
    color: var(--color-wood);
}
.mt-result-card p { margin: 4px 0; color: var(--color-text); font-size: 13px; }
.mt-result-card .mt-gold { color: var(--color-wood); font-weight: bold; }
.mt-result-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mt-crits {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-top: 8px;
}
.mt-crit-cell {
    text-align: center;
    padding: 6px 4px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.mt-crit-label { display: block; font-size: 11px; margin-bottom: 2px; }
.mt-crit-count { display: block; font-size: 16px; color: var(--color-text); font-weight: bold; }

@media (max-width: 768px) {
    .mt-body-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }
    .mt-header { padding: 12px 14px; }
    .mt-header h2 { font-size: 17px; }
}

@media (min-width: 769px) and (max-width: 1120px) {
    .mt-body-grid { grid-template-columns: 1fr 1fr; }
    .mt-stats-col { grid-column: 1 / -1; }
    .mt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 金矿子页面 ---------- */
.gold-mine-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 15px;
}
.gm-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.gm-header h2 {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: bold;
    color: var(--color-wood);
    display: flex; align-items: center; gap: 8px;
}
.gm-header h2 i { color: var(--color-wood); }
.gm-subtitle { margin: 4px 0 0; color: #8B9BB0; font-size: 12px; line-height: 1.5; }

.gm-side-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.gm-stat {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-width: 0;
}
.gm-stat-label { font-size: 12px; color: #8B9BB0; }
.gm-stat-value { font-size: 16px; color: var(--color-text); font-weight: bold; font-family: var(--font-secondary); }
.gm-stat-label,
.gm-stat-value {
    min-width: 0;
}
.gm-stat-value {
    overflow-wrap: anywhere;
    text-align: right;
}
.gm-stat-value.gm-gold { color: var(--color-wood); }
.gm-stat-sub { font-size: 12px; color: #6B7D8F; margin-left: 2px; font-weight: normal; }
.gm-gold { color: var(--color-wood); font-weight: bold; }

/* 横向 2 列分栏:左 = 自己金矿,右 = 公共池 */
.gm-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 14px;
    padding: 14px 18px;
    align-items: start;
}
.gm-section {
    padding: 12px 14px;
    background-color: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    min-width: 0;
    min-height: 100%;
}
.gm-section h3 {
    margin: 0 0 6px;
    font-family: var(--font-secondary);
    font-size: 14px; font-weight: bold;
    color: var(--color-text);
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--color-border);
}
.gm-section h3 i { color: var(--color-accent); }
.gm-section-desc { margin: 0 0 10px; color: #8B9BB0; font-size: 12px; line-height: 1.55; }

.gm-section .sh-action-btn.major {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: bold;
}
.gm-disabled-reason { margin: 6px 0 0; color: var(--color-accent); font-size: 12px; }
.gm-empty-hint {
    margin: 0;
    color: #6B7D8F;
    font-size: 12px; line-height: 1.55;
    text-align: center;
    padding: 14px;
    background: rgba(0,0,0,0.18);
    border: 1px dashed var(--color-border);
    border-radius: 6px;
}

.gm-own-block { margin-top: 10px; }
.gm-own-listing {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.gm-own-stat {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: #8B9BB0;
    gap: 8px;
}
.gm-own-stat span,
.gm-own-stat strong {
    min-width: 0;
}
.gm-own-stat strong {
    overflow-wrap: anywhere;
    text-align: right;
}
.gm-own-stat strong { color: var(--color-text); font-size: 13px; font-weight: bold; }

.gm-other-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 2px;
    padding-bottom: 4px;
}
.gm-other-listing {
    padding: 10px 12px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    scroll-snap-align: start;
    min-width: 0;
}
.gm-other-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 6px;
}
.gm-other-name {
    font-family: var(--font-secondary);
    font-size: 14px; font-weight: bold;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-other-ttl {
    font-size: 11px; color: #8B9BB0;
    background: rgba(255,255,255,0.04);
    padding: 2px 8px; border-radius: 4px;
    flex-shrink: 0;
}
.gm-other-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin-bottom: 8px;
}
.gm-other-stats > div {
    display: flex; flex-direction: column;
    text-align: center;
    padding: 4px 4px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.gm-other-stats > div span {
    font-size: 10.5px; color: #8B9BB0;
    margin-bottom: 2px;
}
.gm-other-stats > div strong { font-size: 13px; color: var(--color-text); font-weight: bold; }
.gm-other-listing .sh-action-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .gm-body-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }
    .gm-side-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .gm-header { padding: 12px 14px; }
    .gm-header h2 { font-size: 17px; }
    .gm-own-listing { grid-template-columns: 1fr; gap: 4px; }
}

@media (min-width: 769px) and (max-width: 1120px) {
    .gm-body-grid { grid-template-columns: 1fr 1fr; }
    .gm-side-stats {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .wealth-path-tri-card,
    .money-tree-panel,
    .gold-mine-panel {
        max-width: 100%;
    }

    .wp-tri-header,
    .mt-header,
    .gm-header {
        padding: 10px 12px;
        align-items: flex-start;
    }

    .wp-tri-grid,
    .mt-body-grid,
    .gm-body-grid {
        gap: 8px;
        padding: 10px;
    }

    .wp-tri-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1fr);
    }

    .wp-col {
        padding: 8px;
    }

    .wp-col-label,
    .gm-section h3 {
        font-size: 12px;
        gap: 4px;
    }

    .wp-col-body .wp-inner h4,
    .mt-result-card h3 {
        font-size: 12px;
    }

    .wp-col-body .wp-inner .stage-desc,
    .wp-stat-row,
    .wp-hint,
    .mt-subtitle,
    .gm-subtitle,
    .gm-section-desc {
        font-size: 10.5px;
    }

    .wp-stat-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 6px;
    }

    .wp-stat-row strong {
        font-size: 12px;
    }

    .wp-stat-value {
        font-size: 11.5px;
    }

    .wp-col .stage-entry-btn,
    .mt-action-card .sh-action-btn.major,
    .gm-section .sh-action-btn.major,
    .gm-other-listing .sh-action-btn {
        padding: 8px 6px;
        font-size: 11px;
        line-height: 1.25;
    }

    .mt-body-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.04fr) minmax(0, 1.04fr);
    }

    .mt-stats {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mt-stat,
    .gm-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding: 7px 8px;
    }

    .mt-stat-value,
    .gm-stat-value {
        text-align: left;
        font-size: 13px;
    }

    .mt-hint-card,
    .mt-action-card,
    .mt-result-card,
    .gm-section {
        padding: 8px;
    }

    .mt-hint-card,
    .mt-result-card p,
    .gm-empty-hint,
    .gm-disabled-reason,
    .mt-disabled-reason {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .mt-formula {
        font-size: 10px !important;
    }

    .mt-crits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .mt-crit-label {
        font-size: 10px;
    }

    .mt-crit-count {
        font-size: 13px;
    }

    .gm-body-grid {
        grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr) minmax(0, 1.32fr);
    }

    .gm-own-listing,
    .gm-other-stats {
        grid-template-columns: 1fr;
    }

    .gm-own-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .gm-own-stat strong {
        text-align: left;
    }

    .gm-other-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .gm-other-name {
        max-width: 100%;
    }

    .gm-other-ttl {
        padding: 1px 5px;
        font-size: 10px;
    }
}

/* ============================================================================
   世界均衡之白金龙王灭世战 (raidTier=2) — 黑红末世主题
   命名空间:.doomsday-raid-page (页面)、.dd-* (子组件)、.dd-mg-* (mini-game 面板)
   ============================================================================ */

.doomsday-raid-page {
    position: relative;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px 28px;     /* 主内容区窄,左右 padding 也收紧 */
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(180, 30, 30, 0.32), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(60, 6, 6, 0.45), transparent 70%),
        linear-gradient(180deg, #0a0507 0%, #16070a 40%, #0d0509 100%);
    color: #f1d8d8;
    overflow: hidden;
}
.doomsday-raid-page .dd-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 90%),
        repeating-linear-gradient(45deg, rgba(255, 60, 60, 0.03) 0 2px, transparent 2px 8px);
    mix-blend-mode: overlay;
    z-index: 0;
}

.dd-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(220, 60, 60, 0.22);
}
.dd-topbar-title { text-align: center; flex: 1; }
.dd-topbar-title span {
    display: block;
    font-size: 11px;
    letter-spacing: 4px;
    color: #c08080;
    text-transform: uppercase;
}
.dd-topbar-title h1 {
    margin: 4px 0 0;
    font-size: 26px;
    font-weight: 800;
    color: #ffd1d1;
    text-shadow: 0 0 20px rgba(255, 60, 60, 0.5), 0 0 4px #1a0b0d;
    letter-spacing: 2px;
}
.dd-topbar-right { display: flex; align-items: center; gap: 8px; }

.dd-summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    padding: 16px 18px;
    margin: 18px 0 22px;
    background: linear-gradient(180deg, rgba(40, 8, 12, 0.82), rgba(15, 5, 8, 0.72));
    border: 1px solid rgba(220, 60, 60, 0.28);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(150, 0, 0, 0.18) inset;
}
.dd-summary > div { display: flex; flex-direction: column; gap: 4px; }
.dd-summary span {
    font-size: 11px;
    color: #b08080;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.dd-summary strong { font-size: 16px; color: #ffe7e0; font-weight: 700; }
.dd-summary .dd-count-attempts { color: #ff6b6b; text-shadow: 0 0 12px rgba(255, 80, 80, 0.5); }

.dd-boss-portrait {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
    padding: 28px 24px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 80, 80, 0.18), transparent 60%),
        linear-gradient(180deg, #1c0508 0%, #0e0306 100%);
    border: 1px solid rgba(220, 80, 80, 0.32);
    overflow: hidden;
}
.dd-boss-portrait .dd-boss-aura {
    position: absolute;
    width: 320px;
    height: 320px;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 60, 60, 0.32) 0%, transparent 70%);
    filter: blur(8px);
    animation: dd-boss-pulse 4s ease-in-out infinite;
}
@keyframes dd-boss-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.6; }
    50% { transform: translateY(-50%) scale(1.18); opacity: 1; }
}
.dd-boss-runes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.dd-boss-rune {
    font-size: 96px;
    color: rgba(255, 80, 80, 0.06);
    font-weight: 900;
    letter-spacing: 12px;
    text-shadow: 0 0 30px rgba(255, 60, 60, 0.18);
    animation: dd-rune-float 6s ease-in-out infinite;
}
.rune-2 { animation-delay: 1.5s; }
.rune-3 { animation-delay: 3s; }
.rune-4 { animation-delay: 4.5s; }
@keyframes dd-rune-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-12px) rotate(2deg); }
}
.dd-boss-card {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-left: auto;
    text-align: right;
}
.dd-boss-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(220, 60, 60, 0.18);
    color: #ffb0b0;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.dd-boss-card h2 {
    margin: 12px 0 8px;
    font-size: 32px;
    font-weight: 900;
    color: #fff0e8;
    letter-spacing: 4px;
    text-shadow: 0 0 24px rgba(255, 80, 80, 0.6), 0 0 4px #000;
}
.dd-boss-tagline { margin: 0 0 18px; color: #d4a8a8; font-style: italic; font-size: 14px; }
.dd-boss-stats {
    display: inline-flex;
    gap: 26px;
    padding: 12px 20px;
    background: rgba(20, 5, 8, 0.78);
    border: 1px solid rgba(255, 100, 100, 0.32);
    border-radius: 10px;
}
.dd-boss-stats > div { text-align: center; }
.dd-boss-stats span { font-size: 11px; color: #b08080; letter-spacing: 1.5px; }
.dd-boss-stats strong { display: block; font-size: 18px; color: #ff8a8a; font-weight: 800; margin-top: 4px; }

.dd-section-title { text-align: center; margin-bottom: 18px; }
.dd-section-title span {
    font-size: 11px;
    color: #b08080;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.dd-section-title h2 {
    margin: 6px 0 4px;
    font-size: 22px;
    color: #ffd6d6;
    font-weight: 800;
    letter-spacing: 2px;
}
.dd-section-title p { margin: 0; color: #c4a0a0; font-size: 13px; }

.dd-buff-section { position: relative; z-index: 1; margin-bottom: 32px; }
.dd-buff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.dd-buff-card {
    position: relative;
    padding: 22px 20px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(60, 12, 18, 0.85), rgba(20, 6, 10, 0.92));
    border: 1px solid rgba(220, 70, 70, 0.32);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
    color: #f4d8d8;
    isolation: isolate;
}
.dd-buff-card:hover:not(.disabled):not(:disabled) {
    transform: translateY(-3px);
    border-color: rgba(255, 100, 100, 0.6);
    box-shadow: 0 14px 40px rgba(255, 60, 60, 0.18);
}
.dd-buff-card.selected {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 1px #ff6b6b inset, 0 18px 40px rgba(255, 60, 60, 0.32);
    background: linear-gradient(180deg, rgba(120, 20, 30, 0.92), rgba(40, 10, 16, 0.95));
}
.dd-buff-card.disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.dd-buff-card .dd-buff-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 80, 80, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.dd-buff-card.selected .dd-buff-glow { opacity: 1; animation: dd-buff-glow-spin 8s linear infinite; }
@keyframes dd-buff-glow-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.dd-buff-card .dd-buff-aura {
    position: absolute;
    top: -20%;
    right: -20%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 60, 60, 0.2), transparent 70%);
    filter: blur(10px);
}
.dd-buff-tagline { font-size: 11px; color: #c08080; letter-spacing: 2px; }
.dd-buff-card h3 {
    margin: 6px 0 10px;
    font-size: 19px;
    font-weight: 800;
    color: #ffe0e0;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.4);
}
.dd-buff-desc { margin: 0 0 14px; color: #d4b0b0; font-size: 13px; line-height: 1.7; }
.dd-buff-footer { margin-top: 10px; display: flex; justify-content: flex-end; }
.dd-buff-cta {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 80, 80, 0.18);
    color: #ffd0d0;
    font-size: 12px;
    letter-spacing: 1.5px;
}
.dd-buff-selected-flag {
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff5050, #c02020);
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(255, 80, 80, 0.6);
}

.dd-rounds-section { position: relative; z-index: 1; margin-bottom: 32px; }
.dd-rounds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 980px) {
    .dd-rounds-grid { grid-template-columns: 1fr; }
}
.dd-round-card {
    position: relative;
    padding: 26px 22px 22px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(50, 10, 16, 0.78), rgba(20, 6, 10, 0.92));
    border: 1px solid rgba(220, 70, 70, 0.25);
    overflow: hidden;
}
.dd-round-card.is-current {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 1px rgba(255, 100, 100, 0.4) inset, 0 12px 32px rgba(255, 60, 60, 0.18);
}
.dd-round-card.is-attempted { opacity: 0.62; filter: saturate(0.8); }
.dd-round-card.is-complete { opacity: 0.7; }
.dd-round-card.is-locked { opacity: 0.5; filter: grayscale(0.6); }
.dd-round-orbit {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -80px;
    border: 1px dashed rgba(255, 80, 80, 0.18);
    border-radius: 50%;
    animation: dd-orbit-spin 30s linear infinite;
}
@keyframes dd-orbit-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.dd-round-step {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #6a1818, #2a0808);
    border: 1px solid rgba(255, 100, 100, 0.4);
    color: #ffe0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}
.dd-round-header { margin-bottom: 14px; }
.dd-round-kicker { font-size: 11px; letter-spacing: 2px; color: #b88080; text-transform: uppercase; }
.dd-round-card h3 {
    margin: 6px 0 8px;
    font-size: 18px;
    color: #ffd6d6;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.dd-round-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 1.5px;
}
.dd-round-locked { background: rgba(80, 80, 80, 0.4); color: #aaa; }
.dd-round-attempted { background: rgba(180, 100, 80, 0.32); color: #f0b8a0; }
.dd-round-current { background: linear-gradient(90deg, #ff5050, #c02020); color: #fff; }
.dd-round-complete { background: rgba(80, 200, 120, 0.32); color: #80f0a0; }
.dd-round-buffs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dd-round-buff-chip {
    padding: 4px 10px;
    background: rgba(220, 60, 60, 0.18);
    border: 1px solid rgba(255, 100, 100, 0.32);
    border-radius: 999px;
    font-size: 12px;
    color: #ffd0d0;
}
.dd-round-buff-chip strong { font-weight: 700; }
.dd-round-extra {
    margin: 8px 0 14px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 8px;
    color: #ffb8b8;
    font-size: 13px;
    border-left: 3px solid #ff6b6b;
}
.dd-round-action {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #c02020, #ff5a5a);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 4px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 18px rgba(255, 60, 60, 0.32);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.dd-round-action:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 60, 60, 0.5);
}
.dd-round-action:disabled { opacity: 0.5; cursor: not-allowed; }

.dd-shop {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding: 24px;
    border-radius: 14px;
    background:
        radial-gradient(800px 300px at 50% 0%, rgba(255, 200, 80, 0.18), transparent 70%),
        linear-gradient(180deg, rgba(60, 30, 8, 0.92), rgba(20, 10, 4, 0.92));
    border: 1px solid rgba(255, 200, 80, 0.32);
}
.dd-shop-header { text-align: center; margin-bottom: 18px; }
.dd-shop-header span { font-size: 11px; letter-spacing: 3px; color: #f0c080; text-transform: uppercase; }
.dd-shop-header h2 {
    margin: 6px 0 8px;
    font-size: 22px;
    color: #ffe8b0;
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: 0 0 18px rgba(255, 200, 80, 0.5);
}
.dd-shop-countdown {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255, 100, 100, 0.18);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 999px;
    color: #ffb8b8;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.dd-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.dd-shop-item {
    position: relative;
    padding: 16px;
    background: linear-gradient(180deg, rgba(80, 40, 12, 0.6), rgba(40, 20, 8, 0.85));
    border: 1px solid rgba(255, 200, 80, 0.32);
    border-radius: 10px;
    overflow: hidden;
}
.dd-shop-item.purchased { opacity: 0.45; filter: grayscale(0.6); }
.dd-shop-item-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 0%, rgba(255, 200, 100, 0.18), transparent 60%);
    pointer-events: none;
}
.dd-shop-item h4 { margin: 0 0 6px; color: #ffe2a8; font-weight: 800; font-size: 14px; }
.dd-shop-item p { margin: 0 0 12px; color: #f0c890; font-size: 13px; }
.dd-shop-buy-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(90deg, #c08020, #ffb050);
    border: none;
    border-radius: 8px;
    color: #1a0d04;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 1.5px;
}
.dd-shop-buy-btn:disabled { background: rgba(120, 80, 40, 0.5); color: #aaa; cursor: not-allowed; }

/* ============================================================================
   战斗中 mini-game 面板 (.dd-mg-*)
   ============================================================================ */
.dd-mg-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    animation: dd-mg-fade-in 0.28s ease-out;
}
@keyframes dd-mg-fade-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.dd-mg-overlay.dd-mg-leaving { animation: dd-mg-fade-out 0.32s ease-in forwards; }
@keyframes dd-mg-fade-out { to { opacity: 0; transform: scale(0.92); } }
.dd-mg-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.32) 30%, rgba(60,0,0,0.6) 100%);
    backdrop-filter: blur(2px);
}
.dd-mg-frame {
    position: relative;
    z-index: 1;
    min-width: 480px;
    max-width: 720px;
    padding: 22px 24px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(36,8,12,0.96), rgba(16,4,6,0.98));
    border: 1px solid rgba(255, 80, 80, 0.5);
    box-shadow: 0 24px 60px rgba(255, 30, 30, 0.32), 0 0 80px rgba(255, 60, 60, 0.2) inset;
}
.dd-mg-frame-glow {
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 80, 80, 0.4), transparent 50%, rgba(255, 80, 80, 0.4));
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    filter: blur(1px);
    animation: dd-mg-glow-spin 4s linear infinite;
}
@keyframes dd-mg-glow-spin { from { filter: hue-rotate(0deg) blur(1px); } to { filter: hue-rotate(360deg) blur(1px); } }
.dd-mg-header { text-align: center; }
.dd-mg-eyebrow { font-size: 11px; letter-spacing: 3px; color: #ff8080; text-transform: uppercase; }
.dd-mg-frame h3 {
    margin: 6px 0 4px;
    font-size: 18px;
    color: #ffd6d6;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.4);
}
.dd-mg-tip { margin: 0 0 14px; color: #c89090; font-size: 12px; }

.dd-mg-slots {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 10px 0;
}
.dd-mg-slot {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.3s ease;
}
.dd-mg-slot-tag {
    position: absolute;
    bottom: -4px;
    right: -4px;
    padding: 3px 9px;
    background: linear-gradient(90deg, #ff5050, #ffb050);
    color: #1a0a0a;
    font-weight: 800;
    font-size: 12px;
    border-radius: 999px;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(255, 80, 80, 0.4);
}
.dd-mg-timer-ring { position: absolute; inset: -4px; pointer-events: none; }
.dd-mg-timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dd-mg-timer-ring-bg { fill: none; stroke: rgba(255, 100, 100, 0.18); stroke-width: 1.5; }
.dd-mg-timer-ring-fg {
    fill: none;
    stroke: #ff6b6b;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.05s linear;
    filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.6));
}
.dd-mg-slot-success { transform: scale(1.1); animation: dd-mg-success-flash 0.5s ease-out; }
.dd-mg-slot-success .dd-mg-timer-ring-fg { stroke: #80ffa0; }
.dd-mg-slot-timeout { opacity: 0.4; filter: grayscale(0.7); }
@keyframes dd-mg-success-flash {
    0% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.6); }
    50% { box-shadow: 0 0 0 24px rgba(255, 100, 100, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0); }
}

.dd-mg-circle-btn {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: radial-gradient(circle at 30% 30%, #ff8080, #c01818);
    box-shadow: 0 0 0 3px rgba(255, 100, 100, 0.32), 0 8px 24px rgba(255, 60, 60, 0.4);
    transition: transform 0.12s ease;
}
.dd-mg-circle-btn:active { transform: scale(0.92); }
.dd-mg-circle-core {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, transparent 65%);
    opacity: 0.6;
    animation: dd-mg-circle-pulse 1.6s ease-in-out infinite;
}
@keyframes dd-mg-circle-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 0.95; transform: scale(1.05); }
}
.dd-mg-circle-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 200, 200, 0.5);
    animation: dd-mg-circle-ring 2s ease-out infinite;
}
@keyframes dd-mg-circle-ring {
    0% { transform: scale(0.7); opacity: 0; }
    50% { opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
}

.dd-mg-multitap { width: 130px; }
.dd-mg-multitap-aura {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 180, 80, 0.32), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
    animation: dd-mg-multi-aura 1.4s ease-in-out infinite;
}
@keyframes dd-mg-multi-aura {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}
.dd-mg-multitap-btn {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    background: linear-gradient(180deg, #ffb050, #c06010);
    color: #1a0a04;
    font-weight: 800;
    box-shadow: 0 6px 22px rgba(255, 150, 50, 0.4), 0 0 0 3px rgba(255, 180, 80, 0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: transform 0.1s ease;
}
.dd-mg-multitap-btn:active { transform: scale(0.93); }
.dd-mg-multitap-label { font-size: 12px; letter-spacing: 3px; }
.dd-mg-multitap-progress {
    width: 70px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    overflow: hidden;
}
.dd-mg-multitap-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #fff080, #ff6020);
    transition: width 0.18s ease;
}
.dd-mg-multitap-counter { font-size: 11px; color: #1a0a04; font-weight: 700; }

.dd-mg-footer { margin-top: 16px; text-align: center; color: #c89090; font-size: 13px; }
.dd-mg-multiplier-readout strong {
    color: #ffd070;
    font-size: 18px;
    margin-left: 6px;
    text-shadow: 0 0 8px rgba(255, 180, 60, 0.4);
}

#combat-view { position: relative; }

/* ============================================================================
   世界均衡之白金龙王灭世战 — 舞台式布局 (.doomsday-stage-page)
   要点:
     - 顶部紧凑信息条(单行,占用极小高度)
     - 中央舞台 .dd-stage-arena:BOSS 卡居中,3 神兵卡环绕在下方
     - SVG 连线层(.dd-stage-connections)绝对定位铺满舞台
     - R1 失败:BOSS 卡 .dd-boss-state-flame 加深 + 龙炎氛围
     - R2 失败/死斗:BOSS 卡 .dd-boss-state-deathmatch 三神兵共鸣
   ============================================================================ */

.doomsday-stage-page {
    /* 在原有 .doomsday-raid-page 基础上微调,保留黑红主题但改紧凑 */
    padding: 14px 22px 24px;
    /* 保证页面占满容器宽度,不被外层 flex/grid 父级压缩 */
    width: 100%;
    box-sizing: border-box;
    display: block;
}

/* 灭世战 view 容器:确保占满 main-content-section,不被 flex 兄弟压缩 */
#doomsday-dragon-raid-view,
#doomsday-dragon-raid-content {
    width: 100%;
    display: block;
}

/* ---- 紧凑顶部条(三行: 标题 / 操作行 / 信息条) ---- */
.dd-stage-topbar {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 18px 14px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, rgba(40, 8, 12, 0.85), rgba(20, 5, 8, 0.65));
    border: 1px solid rgba(220, 60, 60, 0.28);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(150, 0, 0, 0.18);
}

/* 第 1 行:标题独占居中 */
.dd-stage-topbar > .dd-stage-title {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #ffd1d1;
    letter-spacing: 1.2px;
    text-shadow: 0 0 16px rgba(255, 60, 60, 0.5), 0 0 4px #1a0b0d;
    line-height: 1.3;
    word-break: keep-all;
}
@media (max-width: 480px) {
    .dd-stage-topbar > .dd-stage-title { font-size: 15px; letter-spacing: 0.6px; }
}

/* 第 2 行:左 [返回 + tag] / 右 [? 刷新] */
.dd-stage-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.dd-stage-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.dd-stage-topbar-left .view-back-btn {
    flex-shrink: 0;
}
.dd-stage-eyebrow {
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 80, 80, 0.18);
    color: #ffb0b0;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}
.dd-stage-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* 第 3 行:6 个等宽信息胶囊 — 默认 3 列(2 行),适配主内容区窄宽布局 */
.dd-stage-topbar-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 520px) {
    .dd-stage-topbar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dd-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;       /* 居中对齐,整齐 */
    justify-content: center;
    padding: 6px 10px;
    background: rgba(15, 5, 8, 0.7);
    border: 1px solid rgba(180, 50, 50, 0.32);
    border-radius: 8px;
    line-height: 1.2;
    min-width: 0;
    text-align: center;
    cursor: default;
}
.dd-stat-pill span {
    font-size: 10px;
    color: #b08080;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 2px;
}
.dd-stat-pill strong {
    font-size: 14px;
    color: #ffe7e0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.dd-stat-attempts {
    color: #ff7a7a !important;
    text-shadow: 0 0 8px rgba(255, 80, 80, 0.5);
}
.dd-stat-next-sat {
    font-size: 11px !important;
}
.dd-stage-help-btn {
    width: 32px; height: 32px; padding: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 80, 80, 0.18);
    color: #ffd0d0;
    border: 1px solid rgba(255, 100, 100, 0.4);
    cursor: pointer;
    font-weight: 700;
}
.dd-stage-help-btn:hover {
    background: rgba(255, 100, 100, 0.3);
    color: #fff;
}

/* ---- 中央舞台 ---- */
.dd-stage-arena {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 10px 24px;
    min-height: 620px;
    align-items: center;
    overflow: hidden;
}
.dd-stage-boss-slot {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dd-stage-buffs-slot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
}
@media (max-width: 880px) {
    .dd-stage-buffs-slot { grid-template-columns: 1fr; }
}

/* ---- SVG 连线层(覆盖整个舞台,不阻挡点击) ---- */
.dd-stage-connections {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.dd-conn-path {
    stroke-dasharray: 8 6;
    animation: dd-conn-flow 1.2s linear infinite;
    opacity: 0.92;
}
@keyframes dd-conn-flow {
    to { stroke-dashoffset: -28; }
}
.dd-conn-end-dot {
    animation: dd-conn-pulse 1.4s ease-in-out infinite;
}
@keyframes dd-conn-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); transform-origin: center; }
    50% { opacity: 1; transform: scale(1.25); }
}

/* ---- BOSS 卡(居中) ---- */
.dd-stage-boss-slot .dd-boss-card {
    position: relative;
    width: min(560px, 92%);
    padding: 28px 32px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 80, 80, 0.18), transparent 65%),
        linear-gradient(180deg, rgba(50, 10, 16, 0.92), rgba(15, 4, 8, 0.96));
    border: 2px solid rgba(220, 80, 80, 0.5);
    box-shadow: 0 24px 60px rgba(255, 30, 30, 0.22),
                0 0 0 1px rgba(255, 100, 100, 0.32) inset,
                0 0 80px rgba(255, 60, 60, 0.18) inset;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    z-index: 3;  /* 高于 SVG 连线 */
}
.dd-stage-boss-slot .dd-boss-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 80px rgba(255, 30, 30, 0.32),
                0 0 0 2px rgba(255, 100, 100, 0.6) inset,
                0 0 120px rgba(255, 80, 80, 0.32) inset;
}
.dd-stage-boss-slot .dd-boss-card[data-disabled="true"] {
    cursor: not-allowed;
}
.dd-stage-boss-slot .dd-boss-card[data-disabled="true"]:hover {
    transform: none;
}
.dd-boss-glow-aura {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(255, 60, 60, 0.32) 0%, transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    animation: dd-boss-aura-pulse 4s ease-in-out infinite;
    z-index: -1;
}
@keyframes dd-boss-aura-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
.dd-boss-orbit {
    position: absolute;
    border: 1px dashed rgba(255, 80, 80, 0.18);
    border-radius: 50%;
    pointer-events: none;
    animation: dd-orbit-spin 28s linear infinite;
}
.dd-boss-orbit-1 { inset: -28px; }
.dd-boss-orbit-2 { inset: -64px; animation-duration: 50s; animation-direction: reverse; opacity: 0.5; }
.dd-boss-card-header {
    text-align: center;
    margin-bottom: 16px;
}
.dd-boss-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(220, 60, 60, 0.22);
    color: #ffb0b0;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.dd-boss-card-header h2 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 900;
    color: #fff0e8;
    letter-spacing: 4px;
    text-shadow: 0 0 24px rgba(255, 80, 80, 0.6), 0 0 4px #000;
}
.dd-boss-tagline {
    margin: 0;
    color: #d4a8a8;
    font-style: italic;
    font-size: 13px;
}
.dd-boss-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
    padding: 12px 16px;
    background: rgba(20, 5, 8, 0.78);
    border: 1px solid rgba(255, 100, 100, 0.32);
    border-radius: 10px;
}
.dd-boss-stat-row > div {
    text-align: center;
    border-right: 1px solid rgba(255, 100, 100, 0.18);
}
.dd-boss-stat-row > div:last-child { border-right: none; }
.dd-boss-stat-row span {
    display: block;
    font-size: 11px;
    color: #b08080;
    letter-spacing: 1.5px;
}
.dd-boss-stat-row strong {
    display: block;
    font-size: 17px;
    color: #ff8a8a;
    font-weight: 800;
    margin-top: 4px;
}

/* ---- BOSS 卡 CTA(底部 ) ---- */
.dd-boss-card-cta {
    text-align: center;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px dashed rgba(255, 100, 100, 0.4);
}
.dd-boss-cta-active {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #ffe0e0;
    letter-spacing: 6px;
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.6);
    animation: dd-cta-blink 1.6s ease-in-out infinite;
}
@keyframes dd-cta-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.dd-boss-cta-locked {
    display: block;
    font-size: 14px;
    color: #c89090;
    font-weight: 600;
    letter-spacing: 1.5px;
}
.dd-boss-cta-hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #a07070;
    letter-spacing: 1.5px;
}

/* ---- BOSS 卡 状态: 龙炎氛围 (R1 失败后) ---- */
.dd-boss-card.dd-boss-state-flame {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 100, 60, 0.28), transparent 65%),
        radial-gradient(circle at 70% 80%, rgba(255, 60, 30, 0.22), transparent 65%),
        linear-gradient(180deg, rgba(40, 4, 6, 0.95), rgba(8, 2, 4, 0.98));
    border-color: #ff5050;
    box-shadow: 0 24px 60px rgba(255, 30, 30, 0.4),
                0 0 0 1px rgba(255, 100, 100, 0.5) inset,
                0 0 100px rgba(255, 80, 50, 0.45) inset;
}
.dd-boss-card.dd-boss-state-flame .dd-boss-glow-aura {
    background: radial-gradient(circle, rgba(255, 80, 30, 0.45) 0%, transparent 60%);
    animation-duration: 2.4s;
}
.dd-boss-flame-layer {
    position: absolute;
    inset: -30px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.dd-boss-flame {
    position: absolute;
    bottom: -20%;
    width: 50%;
    height: 80%;
    background: radial-gradient(ellipse at center bottom,
                rgba(255, 220, 80, 0.7) 0%,
                rgba(255, 100, 30, 0.55) 30%,
                rgba(180, 30, 0, 0.32) 60%,
                transparent 100%);
    filter: blur(14px);
    mix-blend-mode: screen;
    animation: dd-flame-flicker 2.6s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}
.dd-boss-flame-1 { left: 8%; animation-delay: 0s; }
.dd-boss-flame-2 { left: 32%; animation-delay: 0.7s; height: 70%; }
.dd-boss-flame-3 { left: 56%; animation-delay: 1.3s; height: 90%; }
@keyframes dd-flame-flicker {
    0% { transform: scaleY(0.85) scaleX(1); opacity: 0.65; }
    50% { transform: scaleY(1.05) scaleX(0.92); opacity: 0.95; }
    100% { transform: scaleY(0.88) scaleX(1.06); opacity: 0.7; }
}
.dd-boss-ember {
    position: absolute;
    width: 4px; height: 4px;
    background: radial-gradient(circle, #ffe080 0%, transparent 80%);
    border-radius: 50%;
    bottom: 0;
    animation: dd-ember-rise 3.2s ease-in infinite;
    filter: blur(0.6px);
}
.dd-boss-ember-1 { left: 18%; animation-delay: 0s; }
.dd-boss-ember-2 { left: 38%; animation-delay: 0.8s; }
.dd-boss-ember-3 { left: 62%; animation-delay: 1.5s; }
.dd-boss-ember-4 { left: 78%; animation-delay: 2.2s; }
@keyframes dd-ember-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-220px) translateX(20px); opacity: 0; }
}

/* ---- BOSS 卡内的提示折叠 ---- */
.dd-boss-hint {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 120, 60, 0.35);
    background: rgba(50, 14, 4, 0.55);
    font-size: 12px;
    color: #ffd0a0;
}
.dd-boss-hint summary {
    cursor: pointer;
    font-weight: 700;
    color: #ffe080;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dd-boss-hint summary::-webkit-details-marker { display: none; }
.dd-boss-hint summary::after {
    content: '▾';
    margin-left: auto;
    transition: transform 0.2s ease;
}
.dd-boss-hint[open] summary::after { transform: rotate(180deg); }
.dd-boss-hint p {
    margin: 8px 0 0;
    color: #ffe2c0;
    line-height: 1.6;
}
.dd-boss-hint-deathmatch {
    border-color: rgba(255, 80, 200, 0.5);
    background: rgba(60, 6, 40, 0.6);
}
.dd-boss-hint-deathmatch summary { color: #ff80ff; }
.dd-boss-hint-deathmatch p { color: #ffd0ff; }

/* ---- BOSS 卡 状态: 死斗(R2 失败后) ---- */
.dd-boss-card.dd-boss-state-deathmatch {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 60, 200, 0.28), transparent 70%),
        radial-gradient(circle at 0% 100%, rgba(255, 30, 30, 0.32), transparent 70%),
        linear-gradient(180deg, rgba(48, 6, 32, 0.96), rgba(8, 2, 6, 0.98));
    border-color: #ff70d0;
    box-shadow: 0 24px 70px rgba(255, 60, 200, 0.42),
                0 0 0 2px rgba(255, 100, 200, 0.5) inset,
                0 0 120px rgba(255, 60, 200, 0.4) inset;
    animation: dd-deathmatch-tremor 5s ease-in-out infinite;
}
@keyframes dd-deathmatch-tremor {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 0.5px); }
    50% { transform: translate(1px, -0.5px); }
    75% { transform: translate(-0.5px, -1px); }
}
.dd-boss-card.dd-boss-state-deathmatch .dd-boss-card-header h2 {
    color: #ffd0ff;
    text-shadow: 0 0 30px rgba(255, 80, 220, 0.7), 0 0 4px #000;
}
.dd-boss-card.dd-boss-state-deathmatch .dd-boss-glow-aura {
    background: radial-gradient(circle, rgba(255, 60, 200, 0.5) 0%, transparent 60%);
    animation-duration: 1.8s;
}

/* ---- 三神兵节点 ---- */
.dd-buff-node {
    position: relative;
    padding: 18px 18px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(50, 12, 18, 0.78), rgba(15, 5, 8, 0.92));
    border: 1px solid rgba(220, 80, 80, 0.32);
    color: #f4d8d8;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
    z-index: 3;
    isolation: isolate;
}
.dd-buff-node:hover:not(.is-disabled):not(:disabled):not(.is-active) {
    transform: translateY(-3px);
    border-color: rgba(255, 100, 100, 0.6);
    box-shadow: 0 12px 32px rgba(255, 60, 60, 0.18);
}
.dd-buff-node.is-active {
    border-color: #ff7878;
    box-shadow: 0 0 0 2px #ff5050 inset, 0 18px 50px rgba(255, 60, 60, 0.4);
    background: linear-gradient(180deg, rgba(120, 30, 40, 0.95), rgba(40, 12, 20, 0.98));
    transform: translateY(-2px);
}
.dd-buff-node.is-disabled {
    opacity: 0.4;
    filter: grayscale(0.5);
    cursor: not-allowed;
}
.dd-buff-node-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 80, 80, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.dd-buff-node.is-active .dd-buff-node-glow {
    opacity: 1;
    animation: dd-buff-glow-spin 8s linear infinite;
}
@keyframes dd-buff-glow-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.dd-buff-node-rune {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 100, 0.32), transparent 70%);
    filter: blur(5px);
}
.dd-buff-node.is-active .dd-buff-node-rune {
    background: radial-gradient(circle, rgba(255, 200, 80, 0.55), transparent 70%);
    animation: dd-buff-glow-spin 4s linear infinite;
}
.dd-buff-node header { margin-bottom: 8px; }
.dd-buff-node-tagline { font-size: 10px; color: #c08080; letter-spacing: 2px; }
.dd-buff-node h3 {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffe0e0;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px rgba(255, 80, 80, 0.4);
}
.dd-buff-node p {
    margin: 0 0 12px;
    color: #d4b0b0;
    font-size: 12px;
    line-height: 1.7;
}
.dd-buff-node-flag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 80, 80, 0.18);
    color: #ffd0d0;
    font-size: 11px;
    letter-spacing: 1.5px;
}
.dd-buff-node.is-active .dd-buff-node-flag {
    background: linear-gradient(90deg, #ff5050, #ffb050);
    color: #1a0a04;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(255, 100, 100, 0.5);
}

/* ---- 底部脚注 ---- */
.dd-stage-footnote {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    padding: 10px 14px;
    text-align: center;
    color: #c4a8a8;
    font-size: 12px;
    background: rgba(20, 5, 8, 0.6);
    border-radius: 8px;
    border: 1px dashed rgba(220, 80, 80, 0.28);
}
.dd-stage-footnote strong {
    color: #ffd0a0;
}

/* ---- 攻坚商店分区(.raid-shop-section-*) — shopUI 中显示 ---- */
.raid-shop-section {
    margin-top: 20px;
    padding: 16px;
    border-radius: 10px;
    background: rgba(20, 6, 10, 0.5);
    border: 1px solid rgba(180, 60, 60, 0.32);
}
.raid-shop-section-doomsday {
    border-color: rgba(255, 80, 200, 0.4);
    background: linear-gradient(180deg, rgba(40, 6, 32, 0.45), rgba(20, 5, 8, 0.5));
}
.raid-shop-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(220, 80, 80, 0.28);
}
.raid-shop-section-doomsday .raid-shop-section-header {
    border-bottom-color: rgba(255, 80, 200, 0.32);
}
.raid-shop-section-header h4 {
    margin: 0;
    font-size: 15px;
    color: #ffd6d6;
    font-weight: 700;
    letter-spacing: 1px;
}
.raid-shop-section-doomsday .raid-shop-section-header h4 { color: #ffd0ff; }
.raid-shop-section-time {
    font-size: 12px;
    color: #c4a8a8;
}

.raid-shop-section .shop-item-meta {
    margin: 4px 0 8px;
    color: #c4b5fd;
    font-size: 12px;
    line-height: 1.35;
}
/* World Boss calamity nodes */
.calamity-panel {
    padding: 16px;
    border: 1px solid rgba(183, 150, 104, 0.24);
    background: linear-gradient(180deg, rgba(23, 28, 38, 0.96), rgba(15, 18, 26, 0.98));
}

.calamity-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.calamity-panel-head h3 {
    margin: 0 0 5px;
    color: #f2d6a2;
    font-size: 18px;
}

.calamity-panel-head p,
.calamity-factor {
    margin: 0;
    color: #aeb8c7;
    font-size: 13px;
}

.calamity-factor {
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(242, 214, 162, 0.08);
    border: 1px solid rgba(242, 214, 162, 0.18);
}

.calamity-map-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    cursor: grab;
    scrollbar-color: rgba(183, 150, 104, 0.58) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
    touch-action: pan-x;
}

.calamity-map-scroll.dragging {
    cursor: grabbing;
    user-select: none;
}

.calamity-map {
    display: flex;
    align-items: stretch;
    gap: 22px;
    min-width: max-content;
}

.calamity-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 188px;
    flex: 0 0 188px;
}

.calamity-stage.has-next::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: rgba(183, 150, 104, 0.42);
}

.calamity-node-btn {
    min-height: 118px;
    width: 100%;
    padding: 11px;
    text-align: left;
    border: 1px solid rgba(129, 140, 158, 0.28);
    border-radius: 8px;
    background: rgba(20, 25, 34, 0.92);
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.calamity-node-btn.attackable {
    border-color: rgba(242, 214, 162, 0.58);
    background: rgba(46, 38, 26, 0.94);
    cursor: pointer;
}

.calamity-node-btn.selected {
    box-shadow: 0 0 0 2px rgba(242, 214, 162, 0.5);
}

.calamity-node-btn.defeated {
    opacity: 0.72;
    background: rgba(28, 45, 38, 0.85);
}

.calamity-node-btn:disabled {
    cursor: not-allowed;
}

.gauntlet-map-node,
.gauntlet-map-node:hover:not(:disabled),
.gauntlet-map-node:active,
.gauntlet-map-node:disabled {
    transform: translate(-50%, -50%) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gauntlet-map-node,
.gauntlet-map-node .gauntlet-map-orb,
.gauntlet-map-node .gauntlet-map-action {
    transition: none !important;
}

.node-title {
    font-weight: 700;
    color: #f4ead6;
    line-height: 1.28;
}

.node-meta,
.node-hp {
    color: #aeb8c7;
    font-size: 12px;
    line-height: 1.35;
}

.node-bar {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    margin-top: auto;
}

.node-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b98d54, #e8cf92);
}

.abyss-tech-item {
    background: rgba(28, 32, 43, 0.72);
}

.wb-node-reward-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wb-node-reward {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(183, 150, 104, 0.18);
    border-radius: 8px;
    background: rgba(18, 22, 30, 0.72);
}

.wb-node-reward h4 {
    margin: 0 0 4px;
    color: #f2d6a2;
}

.wb-node-reward p {
    margin: 0;
    color: #c5ceda;
}

@media (max-width: 720px) {
    .calamity-panel-head,
    .wb-node-reward {
        flex-direction: column;
        align-items: stretch;
    }

    .calamity-stage {
        width: 164px;
        flex-basis: 164px;
    }

    .calamity-node-btn {
        min-height: 112px;
    }
}
/* 匠魂系统 */
.artisan-panel,
.artisan-workshop {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(229, 196, 118, 0.32);
    background:
        radial-gradient(circle at 50% 36%, rgba(245, 210, 128, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(24, 29, 38, 0.96), rgba(39, 32, 44, 0.94));
    border-radius: 8px;
    padding: 16px;
    margin-top: 14px;
}

.artisan-panel.inactive {
    filter: saturate(0.72);
}

.artisan-head,
.artisan-workshop-hero,
.artisan-work-card-main,
.artisan-craft-title,
.artisan-level-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.artisan-level-note {
    margin: 4px 0 8px;
    color: rgba(236, 238, 242, 0.66);
    font-size: 12px;
    line-height: 1.45;
}

.artisan-level-card {
    display: grid;
    gap: 10px;
}

.artisan-level-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.artisan-level-head h4 {
    margin: 0 0 3px;
}

.artisan-level-head p {
    margin: 0;
    color: rgba(236, 238, 242, 0.68);
    font-size: 12px;
    line-height: 1.45;
}

.artisan-level-head strong {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(229, 196, 118, 0.42);
    border-radius: 999px;
    background: rgba(229, 196, 118, 0.12);
    color: #ffe6a6;
    font-size: 15px;
}

.artisan-level-head strong span {
    color: rgba(255, 230, 166, 0.62);
    font-size: 12px;
}

.artisan-level-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(9, 12, 18, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.artisan-level-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8fd3ff, #ffe08a);
    box-shadow: 0 0 12px rgba(255, 224, 138, 0.32);
}

.artisan-level-hero {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(143, 211, 255, 0.24);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(87, 134, 176, 0.18), rgba(229, 196, 118, 0.10));
}

.artisan-level-hero span,
.artisan-level-stats span {
    color: rgba(236, 238, 242, 0.66);
    font-size: 12px;
}

.artisan-level-hero strong {
    color: #fff0bd;
    font-size: 24px;
    line-height: 1.1;
}

.artisan-level-hero em {
    color: #9ed7ff;
    font-size: 12px;
    font-style: normal;
}

.artisan-level-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.artisan-level-stats div {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.artisan-level-stats strong {
    min-width: 0;
    color: #f4e7c5;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.artisan-level-help {
    border: 1px solid rgba(229, 196, 118, 0.18);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.26);
}

.artisan-level-help summary {
    cursor: pointer;
    padding: 8px 10px;
    color: #ffe6a6;
    font-size: 13px;
    font-weight: 700;
}

.artisan-level-help div {
    display: grid;
    gap: 6px;
    padding: 0 10px 10px;
}

.artisan-level-help p {
    margin: 0;
    color: rgba(236, 238, 242, 0.72);
    font-size: 12px;
    line-height: 1.55;
}

.artisan-level-help strong {
    color: #fff0bd;
}

.artisan-head h4,
.artisan-workshop h4 {
    margin: 0 0 4px;
}

.artisan-head p,
.artisan-workshop p {
    margin: 0;
    color: rgba(236, 238, 242, 0.72);
}

.artisan-state {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

.artisan-state.on {
    color: #7df0b1;
    border-color: rgba(125, 240, 177, 0.45);
}

.artisan-state.off {
    color: #c9ccd3;
}

.artisan-acquire-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 227, 154, 0.28);
    border-radius: 8px;
    background: rgba(255, 227, 154, 0.08);
    color: #fff1bf;
}

.artisan-acquire-notice span {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    line-height: 1.35;
}

.artisan-acquire-notice button {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    min-width: 112px;
    margin: 0;
    padding: 6px 12px;
    border-color: rgba(255, 227, 154, 0.52);
}

.artisan-stage {
    position: relative;
    min-height: 360px;
    margin: 18px auto 14px;
    display: grid;
    place-items: center;
}

.artisan-outer-ring,
.artisan-core-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.artisan-outer-ring.ring-1 {
    width: min(78vw, 520px);
    height: min(78vw, 520px);
    max-width: 520px;
    max-height: 520px;
    border: 1px solid rgba(125, 205, 240, 0.20);
}

.artisan-outer-ring.ring-2 {
    width: min(62vw, 410px);
    height: min(62vw, 410px);
    max-width: 410px;
    max-height: 410px;
    border: 1px dashed rgba(229, 196, 118, 0.26);
}

.artisan-outer-ring.ring-3 {
    width: min(46vw, 305px);
    height: min(46vw, 305px);
    max-width: 305px;
    max-height: 305px;
    border: 1px solid rgba(200, 130, 92, 0.28);
}

.artisan-core {
    position: relative;
    z-index: 3;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: #fff6df;
    background: radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.35), rgba(194, 133, 58, 0.30) 34%, rgba(33, 25, 34, 0.96) 72%);
    border: 1px solid rgba(255, 231, 160, 0.56);
    box-shadow: 0 0 26px rgba(229, 186, 95, 0.34), inset 0 0 22px rgba(255, 255, 255, 0.08);
}

.artisan-core.empty {
    color: rgba(245, 245, 245, 0.72);
    background: radial-gradient(circle at 50% 35%, rgba(130, 145, 165, 0.18), rgba(28, 32, 39, 0.92) 72%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.artisan-core.effect-legendary {
    border-color: var(--color-quality-legendary);
    background: radial-gradient(circle at 38% 28%, rgba(255, 245, 204, 0.42), rgba(243, 188, 99, 0.36) 34%, rgba(33, 25, 34, 0.96) 72%);
    box-shadow: 0 0 24px rgba(243, 188, 99, 0.36), inset 0 0 22px rgba(255, 255, 255, 0.10);
}

.artisan-core.effect-epic {
    border-color: var(--color-quality-epic);
    background: radial-gradient(circle at 38% 28%, rgba(255, 250, 218, 0.52), rgba(255, 228, 138, 0.38) 34%, rgba(35, 29, 26, 0.96) 72%);
    box-shadow: 0 0 30px rgba(255, 228, 138, 0.40), inset 0 0 24px rgba(255, 255, 255, 0.12);
    animation: epic-item-breathe 3.2s ease-in-out infinite;
}

.artisan-core.effect-world-shattering {
    border-color: var(--color-quality-world-shattering);
    background:
        radial-gradient(circle at 40% 26%, rgba(255, 255, 218, 0.54), rgba(255, 213, 79, 0.26) 25%, transparent 48%),
        linear-gradient(135deg, rgba(255, 82, 82, 0.42), rgba(180, 79, 208, 0.20) 42%, rgba(33, 20, 26, 0.96) 78%);
    box-shadow: 0 0 34px rgba(255, 82, 82, 0.40), 0 0 48px rgba(255, 213, 79, 0.18), inset 0 0 26px rgba(255, 255, 255, 0.12);
    animation: world-shattering-breathe 2.4s ease-in-out infinite;
}

.artisan-core.is-locked,
.artisan-core-line.is-locked,
.artisan-inventory-core.is-locked {
    box-shadow: inset 0 0 0 1px rgba(145, 165, 190, 0.18), 0 0 14px rgba(80, 96, 120, 0.16);
}

.artisan-core-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(130, 145, 165, 0.20);
    color: #cbd6e2;
    font-size: 11px;
    line-height: 1.3;
}

.artisan-core-ring {
    inset: -10px;
    border: 1px solid rgba(255, 225, 151, 0.38);
    animation: artisan-spin 18s linear infinite;
}

.artisan-core-ring::before,
.artisan-core-ring::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffe39a;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.artisan-core-ring::after {
    top: auto;
    bottom: 8px;
}

.artisan-core-name {
    font-weight: 700;
    font-size: 18px;
}

.artisan-core-pixel-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
}

.artisan-core-pixel-icon .item-pixel-icon-wrap,
.artisan-core-pixel-icon .item-pixel-icon {
    width: 44px;
    height: 44px;
}

.artisan-core-value {
    margin-top: 6px;
    font-size: 20px;
    color: #ffe39a;
}

.artisan-core-count {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
}

.artisan-artifact-ring {
    position: absolute;
    inset: 0;
    max-width: 480px;
    width: min(76vw, 480px);
    height: min(76vw, 480px);
    max-height: 480px;
    margin: auto;
}

.artisan-artifact-node {
    position: absolute;
    width: 132px;
    min-height: 118px;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 18, 25, 0.72);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%); }
.artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); }
.artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(3) { left: 50%; bottom: 0; transform: translateX(-50%); }
.artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); }

.artisan-artifact-node.active {
    border-color: rgba(125, 205, 240, 0.45);
    background: linear-gradient(180deg, rgba(47, 70, 86, 0.78), rgba(19, 23, 32, 0.84));
}

.artifact-orb {
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    background: conic-gradient(from 0deg, #d76c54, #e2c56d, #65b68a, #6c9dd6, #d76c54);
    font-size: 13px;
}

.artifact-title {
    font-weight: 700;
    font-size: 13px;
}

.artifact-tier,
.artifact-stat {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(236, 238, 242, 0.76);
}

.artisan-placeholder-rings {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
}

.artisan-placeholder-rings span {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(236, 238, 242, 0.56);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
}

.artisan-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 8px;
}

.artisan-summary-grid > div,
.artisan-work-card,
.artisan-craft-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 10, 16, 0.48);
    border-radius: 8px;
    padding: 10px;
}

.artisan-summary-grid span {
    display: block;
    color: rgba(236, 238, 242, 0.64);
    font-size: 12px;
}

.artisan-summary-grid strong {
    color: #ffe39a;
}

.artisan-workshop-hero {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 227, 154, 0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 227, 154, 0.08), rgba(7, 10, 16, 0.32));
}

.artisan-workshop-core .artisan-core {
    width: 116px;
    height: 116px;
}

.artisan-workshop-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid rgba(255, 227, 154, 0.14);
    border-radius: 8px;
    background: rgba(7, 10, 16, 0.42);
}

.artisan-workshop-tabs button {
    min-height: 36px;
    margin: 0;
    padding: 8px 10px;
    border-color: rgba(255, 227, 154, 0.18);
    background: rgba(16, 20, 28, 0.76);
    color: rgba(236, 238, 242, 0.74);
}

.artisan-workshop-tabs button.active {
    color: #1b1b1b;
    border-color: #ffe39a;
    background: linear-gradient(180deg, #ffe7a6, #d7ad55);
    box-shadow: 0 0 18px rgba(255, 213, 112, 0.18);
}

.artisan-workshop-tab-content {
    display: none;
}

.artisan-workshop-tab-content.active {
    display: block;
}

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

.artisan-material-guide {
    margin-top: 10px;
}

.artisan-material-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.artisan-material-guide-item {
    min-height: 106px;
    padding: 9px;
    border: 1px solid rgba(255, 227, 154, 0.14);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.48);
}

.artisan-material-guide-item strong,
.artisan-material-guide-item span {
    display: block;
}

.artisan-material-guide-item strong {
    color: #ffe39a;
}

.artisan-material-guide-item span {
    margin-top: 2px;
    color: rgba(236, 238, 242, 0.66);
    font-size: 12px;
}

.artisan-material-guide-item .artisan-material-source {
    margin-top: 6px;
    color: #ffe39a;
    line-height: 1.4;
}

.artisan-material-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.artisan-material-actions button {
    width: auto;
    min-height: 28px;
    margin: 0;
    padding: 5px 9px;
    border-color: rgba(255, 227, 154, 0.36);
    font-size: 12px;
    line-height: 1.2;
}

.artisan-material-guide-item p {
    margin-top: 7px;
    line-height: 1.45;
    font-size: 12px;
}

.artisan-craft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.artisan-next {
    margin: 8px 0;
    color: #ffe39a;
}

.artisan-costs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.artisan-cost {
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 3px 8px;
    color: rgba(236, 238, 242, 0.82);
}

.artisan-cost.missing {
    border-color: rgba(224, 107, 107, 0.42);
    color: #ffb5aa;
}

.artisan-cost.proxy {
    border-color: rgba(125, 205, 240, 0.36);
    color: #9bd8ff;
}

.artisan-core-bag {
    margin: 12px 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 227, 154, 0.16);
    border-radius: 8px;
    background: rgba(7, 10, 16, 0.38);
}

.artisan-core-bag-head,
.artisan-core-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.artisan-core-bag-head {
    flex-wrap: wrap;
}

.artisan-core-bag-head strong,
.artisan-core-bag-head span {
    display: block;
}

.artisan-core-bag-head button {
    width: auto;
    margin: 0;
    min-height: 32px;
    padding: 6px 12px;
}

.artisan-core-bag-head span,
.artisan-core-line span {
    color: rgba(236, 238, 242, 0.66);
    font-size: 12px;
}

.artisan-core-bag.collapsed .artisan-core-bag-body {
    display: none;
}

.artisan-core-bag-list {
    display: grid;
    gap: 8px;
}

.artisan-core-bag-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: rgba(236, 238, 242, 0.68);
    font-size: 12px;
}

.artisan-core-bag-pager button {
    width: auto;
    margin: 0;
    min-height: 30px;
    padding: 5px 10px;
}

.artisan-core-line {
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(7, 10, 16, 0.5);
}

.artisan-core-line.effect-legendary {
    border-color: rgba(243, 188, 99, 0.42);
    background: linear-gradient(135deg, rgba(243, 188, 99, 0.14), rgba(7, 10, 16, 0.58) 70%);
}

.artisan-core-line.effect-epic {
    border-color: rgba(255, 228, 138, 0.48);
    background: linear-gradient(135deg, rgba(255, 228, 138, 0.17), rgba(7, 10, 16, 0.58) 70%);
    animation: epic-item-breathe 3.2s ease-in-out infinite;
}

.artisan-core-line.effect-world-shattering {
    border-color: rgba(255, 82, 82, 0.52);
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.22), rgba(180, 79, 208, 0.13) 38%, rgba(7, 10, 16, 0.58) 78%);
    animation: world-shattering-breathe 2.4s ease-in-out infinite;
}

.artisan-core-line strong,
.artisan-core-line span {
    display: block;
}

.artisan-inventory-core {
    border-left: 2px solid rgba(255, 227, 154, 0.72);
}

.artisan-inventory-core.quality-bg-legendary {
    border-left-color: var(--color-quality-legendary);
}

.artisan-inventory-core.quality-bg-epic {
    border-left-color: var(--color-quality-epic);
}

.artisan-inventory-core.quality-bg-world-shattering {
    border-left-color: var(--color-quality-world-shattering);
}

.artisan-core-tools {
    margin-bottom: 10px;
}

.artisan-core-tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.artisan-core-tool-row strong,
.artisan-core-tool-row span {
    display: block;
}

.artisan-core-tool-row span {
    color: rgba(236, 238, 242, 0.68);
    font-size: 12px;
    margin-top: 3px;
}

.artisan-core-tool-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.artisan-core-threshold-input {
    width: 88px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 227, 154, 0.32);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.22);
    color: #f4e9c8;
    text-align: center;
}

.first-ring-panel {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(236, 184, 84, 0.34);
    border-radius: 8px;
    color: #f7ecd1;
    background:
        radial-gradient(circle at 26% 40%, rgba(41, 132, 154, 0.28), transparent 35%),
        radial-gradient(circle at 78% 18%, rgba(187, 67, 190, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(18, 15, 21, 0.97), rgba(38, 28, 24, 0.93) 46%, rgba(11, 25, 34, 0.96));
    box-shadow: inset 0 0 42px rgba(255, 217, 134, 0.06), 0 18px 38px rgba(0, 0, 0, 0.28);
}

.first-ring-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255, 231, 160, 0.10) 42%, transparent 56%),
        radial-gradient(circle at 18% 78%, rgba(72, 224, 211, 0.16), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(255, 227, 154, 0.14), transparent 28%);
}

.first-ring-head,
.first-ring-card-title,
.first-ring-level-line,
.first-ring-current-channel,
.first-ring-direct-row,
.first-ring-essence-row,
.first-ring-bag-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.first-ring-head {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.first-ring-head h4,
.first-ring-head p {
    margin: 0;
}

.first-ring-head p,
.first-ring-level-line,
.first-ring-current-channel span,
.first-ring-current-channel em,
.first-ring-direct-row span,
.first-ring-bag-row span,
.first-ring-speed-toggle small {
    color: rgba(247, 236, 209, 0.7);
    font-size: 12px;
}

.first-ring-current-badge {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid rgba(255, 221, 137, 0.42);
    border-radius: 999px;
    background: rgba(255, 188, 64, 0.08);
    color: #ffe39a;
}

.first-ring-guide,
.first-ring-top-actions {
    position: relative;
    z-index: 1;
}

.first-ring-guide {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.first-ring-guide > div {
    padding: 9px 10px;
    border: 1px solid rgba(255, 228, 138, 0.18);
    border-radius: 8px;
    background: rgba(5, 8, 13, 0.48);
}

.first-ring-guide strong,
.first-ring-guide span {
    display: block;
}

.first-ring-guide strong {
    color: #ffe39a;
    font-size: 13px;
}

.first-ring-guide span {
    margin-top: 3px;
    color: rgba(247, 236, 209, 0.72);
    font-size: 12px;
    line-height: 1.45;
}

.first-ring-top-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.first-ring-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.first-ring-ritual {
    min-height: auto;
    display: grid;
    align-content: start;
    gap: 12px;
}

.first-ring-wheel {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 8px auto 0;
    display: grid;
    place-items: center;
}

.first-ring-wheel::before,
.first-ring-wheel::after,
.first-ring-wheel-rune {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.first-ring-wheel::before {
    inset: 24px;
    border: 1px solid rgba(255, 214, 132, 0.38);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 218, 129, 0.16), transparent 32%),
        radial-gradient(circle, transparent 56%, rgba(236, 184, 84, 0.08) 57%, transparent 60%),
        radial-gradient(circle, rgba(18, 52, 58, 0.18), rgba(7, 10, 16, 0.15) 62%);
    box-shadow: inset 0 0 54px rgba(0, 0, 0, 0.62), 0 0 44px rgba(229, 177, 76, 0.14);
}

.first-ring-wheel::after {
    inset: 72px;
    border: 1px solid rgba(80, 214, 224, 0.34);
    background: radial-gradient(circle, rgba(30, 91, 100, 0.28), rgba(8, 14, 20, 0.66) 68%);
    box-shadow: 0 0 28px rgba(69, 216, 230, 0.12), inset 0 0 30px rgba(0, 0, 0, 0.34);
}

.first-ring-wheel-rune.ring-one {
    inset: 44px;
    border: 1px dashed rgba(255, 231, 160, 0.2);
    animation: firstRingSpin 42s linear infinite;
}

.first-ring-wheel-rune.ring-two {
    inset: 98px;
    border: 1px solid rgba(170, 116, 72, 0.24);
    animation: firstRingSpinReverse 34s linear infinite;
}

.first-ring-slots {
    position: absolute;
    inset: 0;
}

.first-ring-slot {
    --slot-radius: 142px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(var(--slot-angle)) translate(var(--slot-radius)) rotate(var(--slot-face));
    border: 1px solid rgba(220, 175, 95, 0.5);
    background:
        radial-gradient(circle at 40% 28%, rgba(255, 245, 204, 0.24), transparent 34%),
        radial-gradient(circle, rgba(24, 27, 32, 0.94), rgba(5, 6, 10, 0.96) 70%);
    box-shadow: 0 0 16px rgba(236, 184, 84, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.06);
    color: #f7ecd1;
    text-align: center;
}

.first-ring-slot.inner {
    --slot-radius: 88px;
    width: 46px;
    height: 46px;
    border-color: rgba(120, 232, 238, 0.78);
    background:
        radial-gradient(circle at 40% 28%, rgba(180, 252, 255, 0.20), transparent 34%),
        radial-gradient(circle, rgba(20, 43, 48, 0.96), rgba(6, 12, 18, 0.98) 70%);
    box-shadow:
        0 0 18px rgba(92, 228, 238, 0.24),
        inset 0 0 16px rgba(185, 252, 255, 0.08);
    color: #dffbff;
}

.first-ring-slot.locked {
    opacity: 0.48;
    filter: grayscale(0.45);
}

.first-ring-slot.inner.locked {
    opacity: 0.66;
    border-color: rgba(126, 224, 232, 0.58);
    background:
        radial-gradient(circle at 50% 32%, rgba(126, 224, 232, 0.16), transparent 38%),
        radial-gradient(circle, rgba(14, 30, 36, 0.94), rgba(7, 10, 15, 0.96) 72%);
    box-shadow:
        0 0 16px rgba(88, 219, 231, 0.18),
        inset 0 0 14px rgba(126, 224, 232, 0.08);
    color: rgba(223, 251, 255, 0.78);
}

.first-ring-slot-glyph {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.08);
}

.first-ring-slot small {
    max-width: 46px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.first-ring-center {
    position: relative;
    z-index: 2;
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 228, 138, 0.52);
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 223, 119, 0.24), transparent 36%),
        radial-gradient(circle, rgba(34, 68, 78, 0.86), rgba(9, 12, 18, 0.94) 72%);
    box-shadow: 0 0 34px rgba(255, 198, 77, 0.18), inset 0 0 24px rgba(255, 255, 255, 0.08);
}

.artisan-first-ring-zone {
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 232, 167, 0.13), transparent 31%),
        radial-gradient(circle at 22% 24%, rgba(67, 220, 216, 0.11), transparent 28%),
        linear-gradient(135deg, rgba(7, 10, 16, 0.26), rgba(21, 13, 28, 0.18));
}

.artisan-first-ring-zone::before,
.artisan-first-ring-zone::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.artisan-first-ring-zone::before {
    inset: 18px;
    border: 1px solid rgba(255, 227, 154, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 227, 154, 0.05), transparent),
        radial-gradient(1px 1px at 18% 30%, rgba(255, 238, 181, 0.82), transparent 70%),
        radial-gradient(1px 1px at 78% 64%, rgba(90, 224, 230, 0.78), transparent 70%),
        radial-gradient(1px 1px at 62% 20%, rgba(255, 238, 181, 0.68), transparent 70%);
}

.artisan-first-ring-zone::after {
    left: 14%;
    right: 14%;
    bottom: 62px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 227, 154, 0.26), rgba(80, 214, 224, 0.18), transparent);
}

.first-ring-map-wheel {
    position: relative;
    width: min(82vw, 330px);
    height: min(82vw, 330px);
    max-width: 330px;
    max-height: 330px;
    touch-action: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 238, 181, 0.18), transparent 17%),
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(255, 227, 154, 0.06) 39%, transparent 42%),
        radial-gradient(circle at 50% 50%, transparent 61%, rgba(80, 214, 224, 0.05) 62%, transparent 65%);
    box-shadow: 0 0 52px rgba(255, 209, 105, 0.08);
    z-index: 1;
}

.first-ring-map-ring,
.first-ring-map-wheel::before,
.first-ring-map-wheel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.first-ring-map-wheel::before {
    inset: 34%;
    border: 1px solid rgba(255, 227, 154, 0.16);
    background: radial-gradient(circle, rgba(255, 240, 182, 0.15), rgba(8, 11, 18, 0.18) 68%);
    box-shadow: 0 0 44px rgba(255, 216, 113, 0.13), inset 0 0 26px rgba(0, 0, 0, 0.42);
}

.first-ring-map-wheel::after {
    inset: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%);
    background: #fff1b8;
    box-shadow: 0 0 32px 15px rgba(255, 216, 113, 0.12), 0 0 58px 30px rgba(80, 214, 224, 0.08);
}

.first-ring-map-ring.outer {
    inset: 18px;
    border: 2px solid rgba(255, 218, 129, 0.46);
    box-shadow: 0 0 24px rgba(255, 218, 129, 0.15), inset 0 0 22px rgba(255, 218, 129, 0.06);
}

.first-ring-map-ring.inner {
    inset: 88px;
    border: 2px solid rgba(80, 214, 224, 0.39);
    box-shadow: 0 0 22px rgba(80, 214, 224, 0.13), inset 0 0 18px rgba(80, 214, 224, 0.07);
}

.first-ring-map-ring::before,
.first-ring-map-ring::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    pointer-events: none;
}

.first-ring-map-ring::before {
    border: 1px dashed rgba(255, 236, 185, 0.22);
    animation: firstRingSpin 54s linear infinite;
}

.first-ring-map-ring::after {
    border-top: 2px solid rgba(255, 242, 191, 0.32);
    border-bottom: 2px solid rgba(80, 214, 224, 0.18);
    filter: blur(0.2px);
    animation: firstRingSpinReverse 38s linear infinite;
}

.first-ring-map-ring.inner::before {
    border-color: rgba(95, 229, 231, 0.20);
    animation-duration: 42s;
}

.first-ring-map-ring.inner::after {
    border-top-color: rgba(95, 229, 231, 0.28);
    border-bottom-color: rgba(255, 227, 154, 0.16);
    animation-duration: 46s;
}

.first-ring-map-core {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 232, 167, 0.58);
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 235, 164, 0.22), transparent 42%),
        radial-gradient(circle, rgba(10, 18, 22, 0.96), rgba(3, 5, 8, 0.98) 70%);
    box-shadow: 0 0 26px rgba(255, 218, 129, 0.22), inset 0 0 20px rgba(255, 255, 255, 0.06);
}

.first-ring-map-core strong,
.first-ring-map-core span,
.first-ring-map-core em {
    display: block;
    font-style: normal;
}

.first-ring-map-core strong {
    color: #ffe39a;
}

.first-ring-map-core span,
.first-ring-map-core em {
    color: rgba(247, 236, 209, 0.78);
    font-size: 12px;
}

.first-ring-map-slot {
    --slot-radius: 145px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(var(--slot-angle)) translate(var(--slot-radius)) rotate(var(--slot-face));
    border: 1px solid rgba(255, 218, 129, 0.46);
    background:
        linear-gradient(135deg, rgba(255, 236, 185, 0.10), transparent 34%),
        radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.13), rgba(9, 12, 18, 0.97) 68%);
    box-shadow: 0 0 14px rgba(255, 218, 129, 0.13), inset 0 0 14px rgba(255, 255, 255, 0.04);
    text-align: center;
    overflow: visible;
    user-select: none;
    touch-action: none;
}

.first-ring-map-slot.unlocked {
    cursor: grab;
}

.first-ring-slot-dragging,
.first-ring-slot-dragging * {
    user-select: none;
}

.first-ring-slot-dragging .first-ring-map-slot.unlocked {
    cursor: grabbing;
}

.first-ring-map-slot.drag-source {
    outline: 2px solid rgba(255, 238, 175, 0.62);
    outline-offset: 4px;
}

.first-ring-map-slot.drag-source-active {
    filter: brightness(1.18);
    box-shadow:
        0 0 22px rgba(255, 238, 175, 0.34),
        0 0 18px rgba(80, 214, 224, 0.18),
        inset 0 0 14px rgba(255, 255, 255, 0.08);
}

.first-ring-map-slot.drag-target {
    border-color: rgba(128, 244, 255, 0.92);
    outline: 2px solid rgba(128, 244, 255, 0.68);
    outline-offset: 5px;
    box-shadow:
        0 0 24px rgba(128, 244, 255, 0.34),
        0 0 16px rgba(255, 238, 175, 0.20),
        inset 0 0 16px rgba(255, 255, 255, 0.08);
}

.first-ring-map-slot::before,
.first-ring-map-slot::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.first-ring-map-slot::before {
    inset: 5px;
    border: 1px solid rgba(255, 236, 185, 0.16);
    border-radius: 8px;
    transform: rotate(45deg);
}

.first-ring-map-slot::after {
    inset: -8px;
    border-radius: 16px;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(circle, currentColor, transparent 66%);
}

.first-ring-map-slot.inner {
    --slot-radius: 82px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border-color: rgba(80, 214, 224, 0.42);
}

.first-ring-map-slot.locked {
    opacity: 0.36;
    filter: grayscale(0.8);
}

.first-ring-map-slot span,
.first-ring-map-slot small {
    position: relative;
    z-index: 1;
    display: block;
    line-height: 1;
}

.first-ring-map-slot span {
    font-weight: 800;
}

.first-ring-map-slot small {
    max-width: 42px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
}

.first-ring-map-slot.wuhun-quality-exquisite::after,
.first-ring-map-slot.wuhun-quality-sacred::after,
.first-ring-map-slot.wuhun-quality-true::after,
.first-ring-map-slot.wuhun-quality-god::after {
    opacity: 0.16;
}

.first-ring-map-slot.wuhun-quality-sacred::after {
    opacity: 0.22;
}

.first-ring-map-slot.wuhun-quality-true::after {
    opacity: 0.28;
}

.first-ring-map-slot.wuhun-quality-god::after {
    opacity: 0.34;
}

.first-ring-map-footer {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.first-ring-map-footer span {
    padding: 3px 7px;
    border: 1px solid rgba(255, 227, 154, 0.16);
    border-radius: 999px;
    background: rgba(7, 10, 16, 0.54);
    color: rgba(247, 236, 209, 0.74);
    font-size: 11px;
}

.first-ring-center strong {
    font-size: 20px;
    color: #ffe39a;
}

.first-ring-center span,
.first-ring-center em {
    font-style: normal;
    color: rgba(247, 236, 209, 0.82);
}

.first-ring-stage-section {
    display: grid;
    gap: 8px;
}

.first-ring-section-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.first-ring-section-title strong {
    color: #ffe39a;
}

.first-ring-section-title span {
    color: rgba(247, 236, 209, 0.62);
    font-size: 12px;
}

.first-ring-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.first-ring-stage {
    min-height: 126px;
    margin: 0;
    padding: 9px 7px;
    border: 1px solid rgba(255, 228, 138, 0.28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(30, 39, 47, 0.86), rgba(8, 12, 18, 0.86));
    color: #f7ecd1;
    text-align: left;
}

.first-ring-stage.active {
    border-color: rgba(255, 223, 119, 0.72);
    background: linear-gradient(180deg, rgba(105, 68, 25, 0.64), rgba(17, 22, 28, 0.88));
    box-shadow: 0 0 18px rgba(255, 192, 74, 0.22);
}

.first-ring-stage.direct {
    border-color: rgba(255, 227, 154, 0.48);
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 227, 154, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(66, 45, 25, 0.78), rgba(12, 14, 20, 0.92));
}

.first-ring-stage.active:not(:disabled),
.first-ring-stage.direct:not(:disabled) {
    cursor: pointer;
}

.first-ring-stage.bag-full {
    border-color: rgba(255, 142, 100, 0.58);
}

.first-ring-stage:disabled {
    cursor: default;
    opacity: 0.66;
}

.first-ring-stage.active:disabled {
    opacity: 1;
}

.first-ring-stage.direct:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.first-ring-stage.first-ring-channel-flash {
    animation: firstRingChannelFlash 0.32s ease-out;
}

.first-ring-stage strong,
.first-ring-stage span,
.first-ring-stage small {
    display: block;
}

.first-ring-stage span,
.first-ring-stage small {
    margin-top: 4px;
    font-size: 10px;
    color: rgba(247, 236, 209, 0.68);
    line-height: 1.35;
}

.first-ring-stage b {
    color: #ffe39a;
    font-weight: 700;
}

.first-ring-stage .first-ring-stage-state {
    color: rgba(255, 227, 154, 0.82);
}

.first-ring-side {
    display: grid;
    gap: 10px;
}

.first-ring-info-card,
.first-ring-awaken-panel,
.first-ring-bag,
.first-ring-summary > div {
    border: 1px solid rgba(255, 228, 138, 0.16);
    border-radius: 8px;
    background: rgba(5, 8, 13, 0.58);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.03);
}

.first-ring-info-card,
.first-ring-awaken-panel,
.first-ring-bag {
    padding: 12px;
}

.first-ring-card-title strong {
    color: #ffe39a;
}

.first-ring-exp-bar {
    height: 9px;
    margin: 9px 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.first-ring-exp-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #35c5d4, #ffe39a, #df6ee9);
    box-shadow: 0 0 12px rgba(255, 227, 154, 0.34);
}

.first-ring-awaken-panel {
    display: grid;
    gap: 10px;
    margin: 12px 0;
}

.first-ring-current-channel {
    flex-wrap: wrap;
}

.first-ring-current-channel > div {
    display: grid;
    gap: 2px;
}

.first-ring-current-channel strong {
    color: #ffe39a;
    font-size: 18px;
}

.first-ring-action-hint {
    margin: 0;
    color: rgba(247, 236, 209, 0.68);
    font-size: 12px;
    line-height: 1.45;
}

.first-ring-bag-full-hint {
    display: block;
    color: #ffb391;
    font-size: 12px;
    line-height: 1.35;
}

.first-ring-speed-toggle {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(88, 220, 178, 0.24);
    border-radius: 8px;
    background: rgba(17, 68, 54, 0.22);
}

.first-ring-speed-title {
    color: #ffe39a;
    font-weight: 700;
    font-size: 13px;
}

.first-ring-speed-switch {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
}

.first-ring-speed-toggle input {
    width: auto;
    margin: 0;
}

.first-ring-speed-switch span {
    color: rgba(247, 236, 209, 0.8);
    font-weight: 400;
    line-height: 1.4;
}

.first-ring-speed-toggle small {
    color: rgba(247, 236, 209, 0.62);
    line-height: 1.4;
}

.first-ring-batch-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.first-ring-batch-control input,
.first-ring-batch-control select {
    min-width: 0;
    text-align: center;
    margin: 0;
    padding: 8px;
}

.second-ring-convert-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
}

.second-ring-convert-control select {
    color: #f7ecd1;
    background: rgba(10, 16, 24, 0.74);
    border: 1px solid rgba(255, 228, 138, 0.22);
    border-radius: 8px;
}

.second-ring-equipped-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.second-ring-equipped-cell {
    min-height: 64px;
    padding: 8px 6px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid rgba(255, 228, 138, 0.20);
    border-radius: 10px;
    color: #f7ecd1;
    background: rgba(8, 14, 21, 0.72);
    text-align: center;
    cursor: pointer;
}

.second-ring-equipped-cell strong,
.second-ring-equipped-cell span,
.second-ring-equipped-cell em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.second-ring-equipped-cell strong {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 228, 138, 0.14);
    color: #ffe59c;
    font-size: 13px;
}

.second-ring-equipped-cell span {
    font-size: 12px;
    font-weight: 700;
}

.second-ring-equipped-cell em {
    color: rgba(247, 236, 209, 0.70);
    font-size: 11px;
    font-style: normal;
}

.second-ring-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.second-ring-flow-explain {
    margin: 0 0 10px;
    color: rgba(247, 236, 209, 0.72);
    font-size: 12px;
    line-height: 1.6;
}

.second-ring-flow-cell {
    --flow-tone: rgba(120, 232, 238, 0.16);
    --flow-glow: rgba(120, 232, 238, 0);
    min-height: 58px;
    padding: 8px 6px;
    display: grid;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--flow-tone);
    border-radius: 10px;
    color: rgba(247, 236, 209, 0.68);
    background: rgba(8, 14, 21, 0.58);
    text-align: center;
}

.second-ring-flow-cell.active {
    color: #fdf0be;
    background:
        radial-gradient(circle at 50% 0, var(--flow-glow), transparent 58%),
        rgba(8, 14, 21, 0.72);
    box-shadow: 0 0 16px var(--flow-glow), inset 0 0 12px rgba(255, 255, 255, 0.04);
}

.second-ring-flow-cell.tone-common {
    --flow-tone: rgba(160, 160, 160, 0.50);
    --flow-glow: rgba(160, 160, 160, 0.18);
}

.second-ring-flow-cell.tone-rare {
    --flow-tone: rgba(79, 168, 232, 0.62);
    --flow-glow: rgba(79, 168, 232, 0.24);
}

.second-ring-flow-cell.tone-exquisite {
    --flow-tone: rgba(180, 79, 208, 0.66);
    --flow-glow: rgba(180, 79, 208, 0.28);
}

.second-ring-flow-cell.tone-legendary {
    --flow-tone: rgba(255, 176, 48, 0.70);
    --flow-glow: rgba(255, 176, 48, 0.32);
}

.second-ring-flow-cell.tone-epic {
    --flow-tone: rgba(255, 213, 79, 0.78);
    --flow-glow: rgba(255, 213, 79, 0.38);
    animation: epic-item-breathe 3.2s ease-in-out infinite;
}

.second-ring-flow-cell.tone-world-shattering {
    --flow-tone: rgba(255, 82, 82, 0.86);
    --flow-glow: rgba(255, 82, 82, 0.42);
    color: #fff3c4;
    animation: world-shattering-breathe 2.4s ease-in-out infinite;
}

.second-ring-flow-cell strong,
.second-ring-flow-cell span,
.second-ring-flow-cell em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.second-ring-flow-cell strong {
    font-size: 12px;
}

.second-ring-flow-cell span,
.second-ring-flow-cell em {
    font-size: 11px;
    font-style: normal;
}

.first-ring-batch-control button {
    white-space: normal;
    line-height: 1.2;
}

.first-ring-batch-control button[data-action="first-ring-speed-awaken-batch"] {
    grid-column: 1 / -1;
}

.first-ring-direct-row {
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 228, 138, 0.12);
}

.first-ring-direct-row > div {
    display: grid;
    gap: 2px;
}

.first-ring-direct-row button,
.first-ring-batch-control button,
.first-ring-bag-actions button,
.first-ring-essence-row button,
.first-ring-level-card button {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 10px;
}

.first-ring-bag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.first-ring-bag-note {
    margin: 4px 0 0;
    color: rgba(247, 236, 209, 0.64);
    font-size: 12px;
    line-height: 1.4;
}

.first-ring-bag-row {
    width: 100%;
    min-height: 62px;
    display: grid;
    gap: 4px;
    align-content: center;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(7, 10, 16, 0.5);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.first-ring-bag-row:hover:not(:disabled) {
    border-color: rgba(255, 228, 138, 0.42);
    background: rgba(255, 228, 138, 0.07);
}

.first-ring-bag-row:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.first-ring-bag-row small {
    color: rgba(247, 236, 209, 0.58);
    font-size: 11px;
}

.first-ring-bag-row.first-ring-gain-flash {
    animation: firstRingGainFlash 1.8s ease-out;
}

.first-ring-disassemble-dialog {
    display: grid;
    gap: 12px;
}

.first-ring-disassemble-dialog p {
    margin: 0;
    color: rgba(247, 236, 209, 0.78);
}

.first-ring-disassemble-field {
    display: grid;
    gap: 6px;
}

.first-ring-disassemble-field input {
    width: 100%;
}

.first-ring-disassemble-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.first-ring-disassemble-actions button {
    width: auto;
    margin: 0;
}

.first-ring-special-bag {
    margin-top: 10px;
}

.first-ring-special-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.first-ring-special-card {
    min-height: 106px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(255, 228, 138, 0.16);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 24, 31, 0.92), rgba(9, 13, 19, 0.96));
}

.first-ring-special-card.owned {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-color: rgba(255, 238, 174, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 28%, rgba(255, 255, 255, 0.10) 54%, transparent 78%),
        linear-gradient(115deg, rgba(255, 79, 216, 0.34) 0%, rgba(255, 223, 110, 0.42) 18%, rgba(98, 255, 181, 0.30) 36%, rgba(85, 223, 255, 0.34) 54%, rgba(141, 121, 255, 0.32) 72%, rgba(255, 106, 213, 0.34) 100%),
        radial-gradient(circle at 20% 10%, rgba(255, 228, 138, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(31, 29, 35, 0.94), rgba(11, 16, 23, 0.98));
    background-size: 220% 220%, 260% 260%, 100% 100%, 100% 100%;
    animation:
        firstRingGodGlow 3.4s ease-in-out infinite,
        firstRingRainbowFlow 7.2s linear infinite;
}

.first-ring-special-card.equipped {
    box-shadow: inset 0 0 0 1px rgba(125, 230, 220, 0.28), 0 0 18px rgba(125, 230, 220, 0.10);
}

.first-ring-special-card.owned::before,
.first-ring-special-card.owned::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.first-ring-special-card.owned::before {
    inset: -10px;
    z-index: -1;
    background: rgba(255, 240, 170, 0.62);
    clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
    filter: drop-shadow(0 0 4px rgba(255, 248, 188, 0.34));
    opacity: 0.34;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    animation: firstRingSpecialStarSpin 5.8s linear infinite;
}

.first-ring-special-card.owned::after {
    inset: -26px;
    z-index: -2;
    border-radius: 18px;
    background: conic-gradient(from 0deg, #ff55d6, #ffe86f, #63ffbd, #56e0ff, #927dff, #ff55d6);
    filter: blur(18px);
    opacity: 0.16;
    animation: firstRingGodHalo 7s linear infinite;
}

.first-ring-special-card.owned > * {
    position: relative;
    z-index: 1;
}

.first-ring-special-card strong,
.first-ring-special-card span,
.first-ring-special-card em {
    display: block;
}

.first-ring-special-card strong {
    color: #fff2bf;
    font-size: 13px;
}

.first-ring-special-card span,
.first-ring-special-card em {
    color: rgba(247, 236, 209, 0.68);
    font-size: 12px;
    font-style: normal;
}

.first-ring-special-card.empty {
    opacity: 0.58;
}

.first-ring-special-card button {
    width: 100%;
    min-height: 32px;
}

.first-ring-level-card.first-ring-exp-flash {
    animation: firstRingExpFlash 1.5s ease-out;
}

.wuhun-quality-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #f7ecd1;
    font-weight: 700;
}

.first-ring-essence-row,
.first-ring-bag-actions {
    flex-wrap: wrap;
    margin-top: 8px;
}

.first-ring-summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.first-ring-summary > div {
    padding: 10px;
}

.first-ring-summary span,
.first-ring-summary strong {
    display: block;
}

.first-ring-summary span {
    color: rgba(247, 236, 209, 0.62);
    font-size: 12px;
}

.first-ring-summary strong {
    margin-top: 3px;
    color: #ffe39a;
    font-size: 18px;
}

.first-ring-result {
    display: grid;
    gap: 10px;
}

.first-ring-result-grid,
.first-ring-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.first-ring-result-grid span,
.first-ring-result-tags span {
    padding: 5px 8px;
    border: 1px solid rgba(255, 228, 138, 0.18);
    border-radius: 999px;
    background: rgba(7, 10, 16, 0.42);
}

.wuhun-quality-dim {
    color: #b9c0c8;
    border-color: rgba(185, 192, 200, 0.34);
    box-shadow: 0 0 12px rgba(185, 192, 200, 0.12);
}

.wuhun-quality-shining {
    color: #7fe8ff;
    border-color: rgba(127, 232, 255, 0.42);
    box-shadow: 0 0 16px rgba(65, 190, 230, 0.2);
}

.wuhun-quality-brilliant {
    color: #80f2a8;
    border-color: rgba(128, 242, 168, 0.44);
    box-shadow: 0 0 18px rgba(94, 220, 135, 0.22);
}

.wuhun-quality-exquisite {
    color: #f0b2ff;
    border-color: rgba(240, 178, 255, 0.48);
    box-shadow: 0 0 20px rgba(196, 92, 224, 0.28);
}

.wuhun-quality-sacred {
    color: #ffe39a;
    border-color: rgba(255, 227, 154, 0.58);
    box-shadow: 0 0 24px rgba(255, 205, 84, 0.32);
}

.wuhun-quality-true {
    color: #ff8c7f;
    border-color: rgba(255, 140, 127, 0.64);
    box-shadow: 0 0 28px rgba(255, 83, 83, 0.34), 0 0 18px rgba(255, 220, 112, 0.18);
    animation: firstRingPulse 2.8s ease-in-out infinite;
}

.wuhun-quality-god {
    color: #fff6d8;
    border-color: rgba(255, 246, 204, 0.72);
    text-shadow: 0 0 5px rgba(255, 248, 220, 0.42), 0 0 10px rgba(107, 226, 255, 0.24);
    box-shadow:
        0 0 22px rgba(255, 236, 139, 0.30),
        0 0 20px rgba(83, 220, 255, 0.18),
        0 0 16px rgba(225, 96, 255, 0.12);
    animation: firstRingGodGlow 3.4s ease-in-out infinite;
}

.first-ring-slot.wuhun-quality-god,
.first-ring-slot.special-soul,
.first-ring-map-slot.wuhun-quality-god,
.first-ring-map-slot.special-soul,
.first-ring-bag-row.wuhun-quality-god {
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(255, 252, 219, 0.96);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 28%, rgba(255, 255, 255, 0.10) 54%, transparent 78%),
        linear-gradient(115deg, rgba(255, 79, 216, 0.46) 0%, rgba(255, 223, 110, 0.58) 18%, rgba(98, 255, 181, 0.42) 36%, rgba(85, 223, 255, 0.46) 54%, rgba(141, 121, 255, 0.44) 72%, rgba(255, 106, 213, 0.46) 100%),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), rgba(18, 14, 31, 0.94) 68%);
    background-size: 220% 220%, 260% 260%, 100% 100%;
    box-shadow:
        0 0 24px rgba(255, 244, 170, 0.34),
        0 0 22px rgba(77, 221, 255, 0.20),
        0 0 18px rgba(241, 92, 255, 0.14),
        inset 0 0 14px rgba(255, 255, 255, 0.10);
    animation:
        firstRingGodGlow 3.4s ease-in-out infinite,
        firstRingRainbowFlow 7.2s linear infinite;
}

.first-ring-slot.special-soul,
.first-ring-map-slot.special-soul {
    overflow: visible;
    border-color: rgba(255, 252, 219, 0.82);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 34%, rgba(255, 255, 255, 0.06) 72%),
        linear-gradient(115deg, rgba(255, 79, 216, 0.22) 0%, rgba(255, 223, 110, 0.28) 20%, rgba(85, 223, 255, 0.24) 54%, rgba(141, 121, 255, 0.22) 78%, rgba(255, 106, 213, 0.22) 100%),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.14), rgba(18, 14, 31, 0.94) 68%);
    box-shadow:
        0 0 18px rgba(255, 244, 170, 0.28),
        0 0 18px rgba(77, 221, 255, 0.16),
        0 0 14px rgba(241, 92, 255, 0.12),
        inset 0 0 12px rgba(255, 255, 255, 0.10);
}

.first-ring-bag-row.wuhun-quality-god {
    position: relative;
}

.first-ring-bag-row.wuhun-quality-god::before,
.first-ring-slot.wuhun-quality-god::before,
.first-ring-slot.special-soul::before {
    content: "";
    position: absolute;
    inset: -35%;
    z-index: -1;
    background:
        conic-gradient(from 0deg, #ff55d6, #ffe86f, #63ffbd, #56e0ff, #927dff, #ff55d6);
    opacity: 0.16;
    filter: blur(12px);
    animation: firstRingGodHalo 6s linear infinite;
}

.first-ring-bag-row.wuhun-quality-god > *,
.first-ring-slot.wuhun-quality-god > *,
.first-ring-slot.special-soul > * {
    position: relative;
    z-index: 1;
}

.first-ring-slot.wuhun-quality-god .first-ring-slot-glyph,
.first-ring-slot.special-soul .first-ring-slot-glyph {
    color: #1c1028;
    background: radial-gradient(circle, #fffbe8, #f7e99b 48%, #77ddea 82%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 104, 231, 0.22);
}

.first-ring-map-slot.wuhun-quality-god::before,
.first-ring-map-slot.special-soul::before {
    border-color: rgba(255, 255, 255, 0.52);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.18);
}

.first-ring-map-slot.wuhun-quality-god::after {
    inset: -12px;
    opacity: 0.24;
    border-radius: 20px;
    background: conic-gradient(from 0deg, #ff55d6, #ffe86f, #63ffbd, #56e0ff, #927dff, #ff55d6);
    filter: blur(14px);
    animation: firstRingGodHalo 6s linear infinite;
}

.first-ring-slot.special-soul::after,
.first-ring-map-slot.special-soul::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    inset: -8px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 240, 170, 0.74);
    clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
    filter: drop-shadow(0 0 4px rgba(255, 248, 188, 0.34));
    opacity: 0.42;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    animation: firstRingSpecialStarSpin 4.8s linear infinite;
}

.first-ring-slot.special-soul.inner::after,
.first-ring-map-slot.special-soul.inner::after {
    inset: -6px;
}

.first-ring-map-slot.special-soul > *,
.first-ring-slot.special-soul > * {
    position: relative;
    z-index: 1;
}

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

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

@keyframes firstRingPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.24); }
}

@keyframes firstRingGodGlow {
    0%, 100% {
        filter: brightness(1) saturate(1.02);
        box-shadow: 0 0 20px rgba(255, 236, 139, 0.28), 0 0 18px rgba(83, 220, 255, 0.14), 0 0 14px rgba(225, 96, 255, 0.10);
    }
    50% {
        filter: brightness(1.12) saturate(1.14);
        box-shadow: 0 0 28px rgba(255, 236, 139, 0.40), 0 0 24px rgba(83, 220, 255, 0.22), 0 0 18px rgba(225, 96, 255, 0.16);
    }
}

@keyframes firstRingRainbowFlow {
    0% { background-position: 0% 50%, 0% 50%, center; }
    100% { background-position: 200% 50%, 260% 50%, center; }
}

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

@keyframes firstRingSpecialStarSpin {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.08); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes firstRingChannelFlash {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    45% {
        transform: translateY(-5px) scale(1.04);
        filter: brightness(1.45);
        box-shadow: 0 0 24px rgba(255, 222, 126, 0.42), 0 0 18px rgba(86, 226, 232, 0.22);
    }
    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes firstRingGainFlash {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(255, 236, 139, 0), inset 0 0 0 rgba(255, 255, 255, 0);
    }
    22% {
        transform: translateY(-2px) scale(1.025);
        filter: brightness(1.65);
        box-shadow: 0 0 28px currentColor, inset 0 0 22px rgba(255, 255, 255, 0.18);
    }
    58% {
        transform: translateY(0) scale(1);
        filter: brightness(1.22);
        box-shadow: 0 0 16px currentColor, inset 0 0 14px rgba(255, 255, 255, 0.10);
    }
    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes firstRingExpFlash {
    0% { box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.03); filter: brightness(1); }
    28% { box-shadow: 0 0 26px rgba(80, 214, 224, 0.32), inset 0 0 24px rgba(255, 255, 255, 0.10); filter: brightness(1.35); }
    100% { box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.03); filter: brightness(1); }
}

@media (max-width: 960px) {
    .first-ring-stage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .first-ring-special-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .first-ring-panel {
        padding: 12px;
    }

    .first-ring-wheel {
        width: min(100%, 330px);
    }

    .first-ring-slot {
        --slot-radius: 128px;
        width: 48px;
        height: 48px;
    }

    .first-ring-slot.inner {
        --slot-radius: 80px;
        width: 42px;
        height: 42px;
    }

    .first-ring-slot-glyph {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .first-ring-slot small {
        max-width: 42px;
        font-size: 9px;
    }

    .first-ring-center {
        width: 112px;
        height: 112px;
    }

    .first-ring-center strong {
        font-size: 18px;
    }

    .first-ring-batch-control {
        grid-template-columns: 1fr;
    }

    .first-ring-stage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .first-ring-special-grid {
        grid-template-columns: 1fr;
    }
}

#modal-overlay:has(.artisan-open-dialog.batch) {
    padding: 12px;
}

#modal-content:has(.artisan-open-dialog.batch) {
    width: min(1040px, calc(100vw - 24px));
    max-width: min(1040px, calc(100vw - 24px));
    max-height: min(88vh, 820px);
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#modal-content:has(.artisan-open-dialog.batch) .modal-actions {
    display: none;
}

#modal-content:has(.artisan-open-dialog.batch) .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.artisan-open-dialog.batch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.artisan-open-summary {
    display: grid;
    grid-template-columns: minmax(210px, 1.25fr) minmax(0, 1.5fr);
    gap: 10px;
    align-items: stretch;
}

.artisan-open-summary-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 227, 154, 0.24);
    border-radius: 12px;
    padding: 11px 13px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 227, 154, 0.22), transparent 36%),
        linear-gradient(135deg, rgba(51, 34, 17, 0.94), rgba(11, 14, 22, 0.94));
}

.artisan-open-summary-hero span,
.artisan-open-summary-stats span,
.artisan-open-summary-chips span {
    color: rgba(236, 238, 242, 0.68);
    font-size: 12px;
}

.artisan-open-summary-hero strong {
    display: block;
    margin-top: 4px;
    color: #ffe39a;
    font-size: 18px;
    line-height: 1.2;
}

.artisan-open-summary-stats,
.artisan-open-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: center;
}

.artisan-open-summary-stats span,
.artisan-open-summary-chips span {
    border: 1px solid rgba(255, 227, 154, 0.14);
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.045);
}

.artisan-open-summary-chips {
    grid-column: 1 / -1;
}

.artisan-open-reveal {
    display: grid;
    gap: 10px;
}

.artisan-open-reveal.batch {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

@supports not selector(:has(*)) {
    .artisan-open-reveal.batch {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.artisan-open-repeat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 227, 154, 0.16);
    opacity: 0;
    transform: translateY(8px);
    animation: artisanOpenControlsReveal 280ms ease-out var(--controls-delay, 0ms) forwards;
}

.artisan-open-repeat-actions button {
    width: auto;
    min-width: 108px;
    margin: 0;
}

.artisan-open-repeat-actions span {
    color: rgba(236, 238, 242, 0.68);
    font-size: 12px;
}

.artisan-auto-disassemble-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 227, 154, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(236, 238, 242, 0.78);
    font-size: 12px;
}

.artisan-auto-disassemble-control input {
    width: 74px;
    min-width: 0;
    margin: 0;
    padding: 4px 6px;
    text-align: right;
}

.artisan-open-repeat-actions small {
    flex-basis: 100%;
    color: rgba(236, 238, 242, 0.52);
    font-size: 11px;
    text-align: right;
}

.artisan-open-dialog.batch .artisan-open-repeat-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 0;
    padding: 10px;
    border: 1px solid rgba(255, 227, 154, 0.18);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(28, 18, 11, 0.94), rgba(9, 11, 16, 0.96)),
        rgba(9, 11, 16, 0.96);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(12px);
}

.artisan-open-repeat-primary,
.artisan-open-repeat-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.artisan-open-repeat-primary button {
    min-height: 34px;
}

.artisan-open-repeat-meta {
    justify-content: flex-end;
}

.artisan-open-repeat-meta small {
    flex-basis: auto;
    text-align: left;
}

.artisan-open-core-card {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 12px;
    border: 1px solid rgba(255, 227, 154, 0.24);
    border-radius: 8px;
    background: rgba(8, 11, 18, 0.92);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    animation: artisanOpenCardReveal 320ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--card-delay, 0ms) forwards;
}

.artisan-open-core-card.compact {
    min-height: 118px;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background:
        linear-gradient(145deg, rgba(16, 20, 30, 0.96), rgba(5, 8, 14, 0.94)),
        rgba(8, 11, 18, 0.92);
}

.artisan-open-core-card.is-best {
    border-color: rgba(255, 227, 154, 0.82);
    box-shadow: inset 0 0 24px rgba(255, 227, 154, 0.16), 0 0 24px rgba(255, 211, 96, 0.28);
}

.artisan-open-core-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.42), transparent 58%);
    animation: artisanOpenCardFlash 900ms ease-out var(--card-delay, 0ms) forwards;
    pointer-events: none;
    z-index: 0;
}

.artisan-open-core-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.artisan-open-core-card.effect-legendary {
    border-color: rgba(243, 188, 99, 0.52);
    box-shadow: inset 0 0 22px rgba(243, 188, 99, 0.18), 0 0 18px rgba(243, 188, 99, 0.18);
}

.artisan-open-core-card.effect-legendary::before {
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 248, 207, 0.82), rgba(247, 194, 91, 0.38) 30%, transparent 62%),
        conic-gradient(from 18deg, transparent, rgba(255, 231, 153, 0.52), transparent 34%, rgba(243, 188, 99, 0.35), transparent 72%);
    animation: artisanOpenLegendaryFlash 1200ms ease-out var(--card-delay, 0ms) forwards;
}

.artisan-open-core-card.effect-legendary::after {
    background:
        linear-gradient(105deg, transparent 0%, rgba(255, 245, 210, 0.58) 46%, transparent 56%),
        radial-gradient(2px 2px at 18% 28%, rgba(255, 235, 168, 0.9), transparent 65%),
        radial-gradient(2px 2px at 78% 68%, rgba(255, 235, 168, 0.8), transparent 65%);
    animation: artisanOpenLegendarySheen 1300ms ease-out var(--card-delay, 0ms) forwards;
}

.artisan-open-core-card.effect-epic {
    border-color: rgba(255, 228, 138, 0.58);
    box-shadow: inset 0 0 24px rgba(255, 228, 138, 0.20), 0 0 22px rgba(255, 228, 138, 0.24);
}

.artisan-open-core-card.effect-epic::before {
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 252, 220, 0.92), rgba(255, 228, 138, 0.48) 28%, transparent 58%),
        conic-gradient(from -26deg, rgba(255, 228, 138, 0.08), rgba(255, 255, 220, 0.68), rgba(182, 124, 255, 0.28), transparent 58%, rgba(255, 228, 138, 0.48));
    animation: artisanOpenEpicFlash 1450ms ease-out var(--card-delay, 0ms) forwards;
}

.artisan-open-core-card.effect-epic::after {
    background:
        linear-gradient(100deg, transparent 0%, rgba(255, 252, 220, 0.72) 42%, rgba(255, 228, 138, 0.30) 50%, transparent 60%),
        radial-gradient(2px 2px at 17% 72%, rgba(255, 244, 190, 0.95), transparent 68%),
        radial-gradient(2px 2px at 38% 22%, rgba(255, 244, 190, 0.85), transparent 68%),
        radial-gradient(3px 3px at 82% 36%, rgba(204, 166, 255, 0.78), transparent 70%);
    animation: artisanOpenEpicSheen 1550ms ease-out var(--card-delay, 0ms) forwards;
}

.artisan-open-core-card.effect-world-shattering {
    border-color: rgba(255, 82, 82, 0.62);
    box-shadow: inset 0 0 26px rgba(255, 82, 82, 0.22), 0 0 26px rgba(255, 82, 82, 0.28), 0 0 36px rgba(255, 213, 79, 0.14);
}

.artisan-open-core-card.effect-world-shattering::before {
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 230, 0.98), rgba(255, 213, 79, 0.58) 22%, rgba(255, 82, 82, 0.32) 42%, transparent 68%),
        conic-gradient(from 0deg, rgba(255, 82, 82, 0.0), rgba(255, 213, 79, 0.74), rgba(255, 82, 82, 0.50), rgba(180, 79, 208, 0.34), rgba(255, 213, 79, 0.64), rgba(255, 82, 82, 0.0));
    animation: artisanOpenSupremeFlash 1700ms ease-out var(--card-delay, 0ms) forwards;
}

.artisan-open-core-card.effect-world-shattering::after {
    background:
        linear-gradient(96deg, transparent 0%, rgba(255, 255, 230, 0.82) 40%, rgba(255, 213, 79, 0.42) 49%, transparent 62%),
        radial-gradient(3px 3px at 14% 28%, rgba(255, 238, 160, 0.95), transparent 70%),
        radial-gradient(2px 2px at 28% 78%, rgba(255, 118, 118, 0.9), transparent 70%),
        radial-gradient(3px 3px at 68% 20%, rgba(255, 238, 160, 0.9), transparent 70%),
        radial-gradient(2px 2px at 84% 64%, rgba(214, 150, 255, 0.82), transparent 70%);
    animation: artisanOpenSupremeSheen 1750ms ease-out var(--card-delay, 0ms) forwards;
}

.artisan-open-core-head,
.artisan-open-core-name,
.artisan-open-core-quality,
.artisan-open-core-total,
.artisan-open-core-meta,
.artisan-open-rolls,
.artisan-open-best-badge {
    position: relative;
    z-index: 1;
}

.artisan-open-core-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.artisan-open-core-pixel-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}

.artisan-open-core-pixel-icon .item-pixel-icon-wrap,
.artisan-open-core-pixel-icon .item-pixel-icon {
    width: 38px;
    height: 38px;
}

.artisan-open-core-name {
    color: #ffe39a;
    font-weight: 700;
    line-height: 1.2;
}

.artisan-open-core-quality,
.artisan-open-core-meta {
    color: rgba(236, 238, 242, 0.56);
    font-size: 11px;
}

.artisan-open-core-index {
    flex: 0 0 auto;
    color: rgba(255, 227, 154, 0.58);
    font-size: 11px;
    font-weight: 700;
}

.artisan-open-core-total {
    margin: 2px 0 4px;
    color: #f5f0df;
}

.artisan-open-core-total span {
    display: block;
    color: rgba(236, 238, 242, 0.56);
    font-size: 11px;
}

.artisan-open-core-total strong {
    display: block;
    color: #fff4d5;
    font-size: 19px;
    line-height: 1.1;
}

.artisan-open-core-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: -2px;
}

.artisan-open-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.artisan-open-core-card.compact .artisan-open-rolls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: auto;
}

.artisan-open-roll {
    opacity: 0;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    animation: artisanOpenRollFlash 700ms ease-out calc(var(--card-delay, 0ms) + var(--roll-delay, 0ms) + 180ms) forwards;
}

.artisan-open-core-card.compact .artisan-open-roll {
    min-width: 0;
    padding: 2px 4px;
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
}

.artisan-open-best-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 227, 154, 0.16);
    color: #ffe39a;
    font-size: 10px;
    font-weight: 700;
}

.artisan-open-light-green { color: #a9f7b7; box-shadow: 0 0 10px rgba(88, 214, 141, 0.28); }
.artisan-open-light-blue { color: #9bd8ff; box-shadow: 0 0 12px rgba(90, 169, 255, 0.35); }
.artisan-open-light-violet { color: #d9b5ff; box-shadow: 0 0 14px rgba(174, 108, 255, 0.42); }
.artisan-open-light-gold { color: #ffe08a; box-shadow: 0 0 16px rgba(255, 200, 87, 0.48); }
.artisan-open-light-supreme { color: #fff4d5; box-shadow: 0 0 20px rgba(255, 245, 210, 0.62); }

@media (max-width: 980px) {
    .artisan-open-reveal.batch {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .artisan-open-summary {
        grid-template-columns: 1fr;
    }

    .artisan-open-reveal.batch {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    #modal-overlay:has(.artisan-open-dialog.batch) {
        align-items: flex-start;
        padding: 8px;
    }

    #modal-content:has(.artisan-open-dialog.batch) {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .artisan-open-reveal.batch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .artisan-open-core-card.compact {
        min-height: 108px;
        padding: 8px;
        gap: 5px;
    }

    .artisan-open-core-name {
        font-size: 13px;
    }

    .artisan-open-core-quality,
    .artisan-open-core-meta,
    .artisan-open-core-total span {
        font-size: 10px;
    }

    .artisan-open-core-total strong {
        font-size: 17px;
    }

    .artisan-open-core-card.compact .artisan-open-roll {
        padding: 2px 3px;
        font-size: 10px;
    }

    .artisan-open-dialog.batch .artisan-open-repeat-actions {
        align-items: stretch;
        gap: 8px;
    }

    .artisan-open-repeat-primary,
    .artisan-open-repeat-meta {
        width: 100%;
    }

    .artisan-open-repeat-primary button {
        flex: 1 1 0;
        min-width: 0;
    }

    .artisan-auto-disassemble-control {
        width: 100%;
        justify-content: space-between;
    }
}

@keyframes artisanOpenRollFlash {
    0% { opacity: 0; transform: scale(0.72); filter: brightness(1); }
    45% { opacity: 1; transform: scale(1.12); filter: brightness(1.8); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes artisanOpenCardReveal {
    0% { opacity: 0; transform: translateY(12px) scale(0.96); filter: brightness(0.9); }
    70% { opacity: 1; transform: translateY(-2px) scale(1.015); filter: brightness(1.18); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes artisanOpenControlsReveal {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes artisanOpenCardFlash {
    0% { opacity: 0; transform: rotate(0deg) scale(0.9); }
    35% { opacity: 0.55; }
    100% { opacity: 0; transform: rotate(18deg) scale(1.2); }
}

@keyframes artisanOpenLegendaryFlash {
    0% { opacity: 0; transform: rotate(-8deg) scale(0.72); filter: brightness(1); }
    24% { opacity: 0.86; transform: rotate(6deg) scale(1.02); filter: brightness(1.75); }
    56% { opacity: 0.38; transform: rotate(18deg) scale(1.18); filter: brightness(1.18); }
    100% { opacity: 0; transform: rotate(28deg) scale(1.34); filter: brightness(1); }
}

@keyframes artisanOpenLegendarySheen {
    0% { opacity: 0; transform: translateX(-58%) skewX(-10deg); }
    28% { opacity: 0.92; }
    100% { opacity: 0; transform: translateX(58%) skewX(-10deg); }
}

@keyframes artisanOpenEpicFlash {
    0% { opacity: 0; transform: rotate(-16deg) scale(0.66); filter: brightness(1); }
    20% { opacity: 0.98; transform: rotate(4deg) scale(1.04); filter: brightness(2); }
    44% { opacity: 0.50; transform: rotate(22deg) scale(1.26); filter: brightness(1.28); }
    100% { opacity: 0; transform: rotate(42deg) scale(1.48); filter: brightness(1); }
}

@keyframes artisanOpenEpicSheen {
    0% { opacity: 0; transform: translateX(-64%) skewX(-12deg); }
    22% { opacity: 1; }
    68% { opacity: 0.42; }
    100% { opacity: 0; transform: translateX(64%) skewX(-12deg); }
}

@keyframes artisanOpenSupremeFlash {
    0% { opacity: 0; transform: rotate(-22deg) scale(0.58); filter: brightness(1) saturate(1); }
    16% { opacity: 1; transform: rotate(3deg) scale(1.08); filter: brightness(2.35) saturate(1.25); }
    36% { opacity: 0.68; transform: rotate(30deg) scale(1.34); filter: brightness(1.55) saturate(1.2); }
    68% { opacity: 0.26; transform: rotate(58deg) scale(1.62); filter: brightness(1.12) saturate(1.05); }
    100% { opacity: 0; transform: rotate(84deg) scale(1.88); filter: brightness(1) saturate(1); }
}

@keyframes artisanOpenSupremeSheen {
    0% { opacity: 0; transform: translateX(-72%) skewX(-14deg) scaleY(0.92); }
    18% { opacity: 1; }
    44% { opacity: 0.72; }
    100% { opacity: 0; transform: translateX(72%) skewX(-14deg) scaleY(1.06); }
}

@keyframes artisan-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 680px) {
    .artisan-stage {
        min-height: 520px;
    }

    .artisan-stage .artisan-artifact-ring {
        position: relative;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 18px;
    }

    .artisan-stage .artisan-artifact-node {
        position: static;
        transform: none !important;
        width: auto;
        min-height: 112px;
    }

    .artisan-core {
        margin-top: 10px;
    }

    .artisan-work-card-main,
    .artisan-workshop-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* 匠魂小地图视窗 */
.artisan-map {
    margin: 16px 0 14px;
}

.artisan-map-viewport {
    position: relative;
    overflow: hidden;
    height: 390px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(229, 196, 118, 0.13), rgba(8, 10, 16, 0.88) 66%);
    background-size: 34px 34px, 34px 34px, 100% 100%;
}

.artisan-map-world {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 400%;
    height: 100%;
    transition: transform 320ms ease;
}

.artisan-map[data-focus="core"] .artisan-map-world { transform: translateX(0); }
.artisan-map[data-focus="ring1"] .artisan-map-world { transform: translateX(-25%); }
.artisan-map[data-focus="ring2"] .artisan-map-world { transform: translateX(-50%); }
.artisan-map[data-focus="ring3"] .artisan-map-world { transform: translateX(-75%); }

.artisan-map-zone {
    position: relative;
    min-width: 0;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.artisan-core-zone {
    isolation: isolate;
}

.artisan-map-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.artisan-map-ring.ring-a {
    width: min(88%, 360px);
    height: min(88%, 360px);
    border: 1px solid rgba(125, 205, 240, 0.24);
}

.artisan-map-ring.ring-b {
    width: min(68%, 280px);
    height: min(68%, 280px);
    border: 1px dashed rgba(229, 196, 118, 0.34);
}

.artisan-core-zone .artisan-core {
    width: 128px;
    height: 128px;
}

.artisan-core-zone .artisan-artifact-ring {
    position: absolute;
    inset: 0;
    --orbit-radius: min(37vw, 142px);
    --orbit-duration: 58s;
    width: min(92%, 350px);
    height: min(92%, 350px);
    max-width: 350px;
    max-height: 350px;
    margin: auto;
}

.artisan-orbit-item {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    animation: artisanArtifactOrbit var(--orbit-duration) linear infinite;
    transform: rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) translate(-50%, -50%);
    transform-origin: 0 0;
}

.artisan-core-zone .artisan-artifact-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 116px;
    min-height: 96px;
    margin: 0;
    padding: 7px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: center;
    appearance: none;
    animation: artisanArtifactFace var(--orbit-duration) linear infinite;
    transform-origin: center;
}

.artisan-core-zone .artisan-artifact-node:hover,
.artisan-core-zone .artisan-artifact-node.selected {
    border-color: rgba(255, 227, 154, 0.78);
    box-shadow: 0 0 18px rgba(255, 213, 112, 0.24);
}

.artisan-artifact-ring:hover .artisan-orbit-item,
.artisan-artifact-ring:hover .artisan-artifact-node,
.artisan-map.is-inspecting .artisan-orbit-item,
.artisan-map.is-inspecting .artisan-artifact-node {
    animation-play-state: paused;
}

@keyframes artisanArtifactOrbit {
    from {
        transform: rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) translate(-50%, -50%);
    }
    to {
        transform: rotate(calc(var(--orbit-angle) + 360deg)) translateX(var(--orbit-radius)) translate(-50%, -50%);
    }
}

@keyframes artisanArtifactFace {
    from {
        transform: rotate(var(--face-angle));
    }
    to {
        transform: rotate(calc(var(--face-angle) - 360deg));
    }
}

.artisan-core-zone .artifact-orb {
    width: 40px;
    height: 40px;
    font-size: 12px;
}

.artisan-core-zone .artifact-title {
    font-size: 12px;
}

.artisan-core-zone .artifact-stat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artisan-artifact-detail {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 3;
    min-height: 52px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 227, 154, 0.25);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.78);
    color: rgba(236, 238, 242, 0.74);
    pointer-events: none;
}

.artisan-artifact-detail strong,
.artisan-artifact-detail span {
    display: block;
}

.artisan-artifact-detail strong {
    color: #ffe39a;
    font-size: 13px;
}

.artisan-artifact-detail span {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
}

.artisan-map.is-hovering-artifact .artisan-artifact-detail,
.artisan-map.is-inspecting .artisan-artifact-detail {
    border-color: rgba(255, 227, 154, 0.48);
    background: rgba(12, 16, 24, 0.9);
}

.artisan-zone-title {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #fff6df;
}

.artisan-zone-title strong {
    font-size: 18px;
}

.artisan-zone-title span {
    color: rgba(236, 238, 242, 0.62);
    font-size: 12px;
}

.artisan-empty-ring {
    position: relative;
    width: min(80vw, 310px);
    height: min(80vw, 310px);
    max-width: 310px;
    max-height: 310px;
    min-width: 250px;
    min-height: 250px;
    border-radius: 50%;
    border: 1px dashed rgba(229, 196, 118, 0.30);
}

.artisan-empty-ring::before,
.artisan-empty-ring::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid rgba(125, 205, 240, 0.16);
}

.artisan-empty-ring::after {
    inset: 35%;
    border-style: dashed;
}

.artisan-ring-slot {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(12, 16, 24, 0.72);
    color: rgba(236, 238, 242, 0.62);
}

.artisan-ring-slot:nth-child(1) { left: calc(50% - 21px); top: -21px; }
.artisan-ring-slot:nth-child(2) { right: 12%; top: 8%; }
.artisan-ring-slot:nth-child(3) { right: -21px; top: calc(50% - 21px); }
.artisan-ring-slot:nth-child(4) { right: 12%; bottom: 8%; }
.artisan-ring-slot:nth-child(5) { left: calc(50% - 21px); bottom: -21px; }
.artisan-ring-slot:nth-child(6) { left: 12%; bottom: 8%; }
.artisan-ring-slot:nth-child(7) { left: -21px; top: calc(50% - 21px); }
.artisan-ring-slot:nth-child(8) { left: 12%; top: 8%; }

.artisan-empty-center {
    position: absolute;
    inset: 36%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgba(255, 227, 154, 0.78);
    background: rgba(13, 17, 24, 0.80);
    border: 1px solid rgba(229, 196, 118, 0.24);
}

.artisan-map-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.artisan-map-controls button {
    min-height: 34px;
    border-radius: 8px;
}

.artisan-map-controls button.active {
    color: #1b1b1b;
    background: #ffe39a;
    border-color: #ffe39a;
}

@media (max-width: 680px) {
    .artisan-acquire-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .artisan-map-viewport {
        height: 430px;
    }

    .artisan-core-zone .artisan-artifact-ring {
        position: absolute;
        display: block;
        inset: 0;
        width: min(94%, 330px);
        height: min(94%, 330px);
        margin: auto;
    }

    .artisan-core-zone .artisan-artifact-node {
        position: relative;
        width: 104px;
        min-height: 92px;
    }

    .artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%) !important; }
    .artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%) !important; }
    .artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(3) { left: 50%; bottom: 0; transform: translateX(-50%) !important; }
    .artisan-stage .artisan-artifact-ring > .artisan-artifact-node:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%) !important; }

    .artisan-map-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#dungeon-view .dungeon-new-recommend-section {
    margin-bottom: 10px;
}

#dungeon-view .dungeon-new-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0 2px;
}

#dungeon-view .dungeon-new-row-head h3 {
    margin: 0;
    border: 0;
    color: #F2E1C2;
    font-size: 16px;
    line-height: 1.2;
}

#dungeon-view .dungeon-new-row-head span {
    color: #AFA092;
    font-size: 12px;
    white-space: nowrap;
}

#dungeon-view .dungeon-new-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#dungeon-view .dungeon-new-shortcut {
    min-height: 92px;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(48, 36, 28, 0.96), rgba(28, 21, 17, 0.98));
    color: #E8D8BE;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

#dungeon-view .dungeon-new-shortcut i {
    color: #E5C56F;
    font-size: 18px;
    line-height: 1;
}

#dungeon-view .dungeon-new-shortcut strong {
    color: #F3E0B4;
    font-size: 13px;
    line-height: 1.25;
}

#dungeon-view .dungeon-new-shortcut span {
    color: #AFA092;
    font-size: 11px;
    line-height: 1.3;
}

#dungeon-view .dungeon-new-category-head {
    margin-top: 8px;
}

#dungeon-view .dungeon-new-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dungeon-view .dungeon-new-tabs button {
    min-height: 86px;
    padding: 10px 8px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
}

#dungeon-view .dungeon-new-tabs button i {
    color: #DDBF74;
    font-size: 16px;
}

#dungeon-view .dungeon-new-tabs button strong {
    font-size: 14px;
    line-height: 1.2;
}

#dungeon-view .dungeon-new-tabs button span {
    color: #B6A68F;
    font-size: 11px;
    line-height: 1.25;
}

#dungeon-view .dungeon-new-tabs button.active i,
#dungeon-view .dungeon-new-tabs button.active span {
    color: #2D210F;
}

@media (max-width: 380px) {
    #dungeon-view .dungeon-new-shortcut-grid {
        gap: 6px;
    }

    #dungeon-view .dungeon-new-shortcut {
        min-height: 86px;
        padding: 9px 6px;
    }

    #dungeon-view .dungeon-new-tabs button {
        min-height: 82px;
        padding: 9px 6px;
    }
}

/* 新版副本最终覆盖：快速通道最多两行，每行 5 个；副本系统每行 5 个 */
#dungeon-view .dungeon-new-shell .dungeon-new-shortcut-grid,
#dungeon-view .dungeon-new-shell .dungeon-new-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px;
}

#dungeon-view .dungeon-new-shell .dungeon-new-tabs {
    position: static;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
}

#dungeon-view .dungeon-new-shell .dungeon-new-shortcut,
#dungeon-view .dungeon-new-shell .dungeon-new-tabs .dungeon-new-shortcut,
#dungeon-view .dungeon-new-shell .dungeon-new-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 7px 3px !important;
    border-radius: 11px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    text-align: center;
    white-space: normal;
}

#dungeon-view .dungeon-new-shell .dungeon-new-shortcut i {
    font-size: 17px;
    line-height: 1;
}

#dungeon-view .dungeon-new-shell .dungeon-new-shortcut strong {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-shell .dungeon-new-shortcut span {
    max-width: 100%;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-shell .dungeon-new-shortcut.active {
    border-color: rgba(255, 222, 145, 0.66);
    background: linear-gradient(180deg, #C9A84C 0%, #9B7933 100%);
}

#dungeon-view .dungeon-new-shell .dungeon-new-shortcut.active i,
#dungeon-view .dungeon-new-shell .dungeon-new-shortcut.active strong,
#dungeon-view .dungeon-new-shell .dungeon-new-shortcut.active span {
    color: #2D210F;
}

#dungeon-view .dungeon-quick-config-btn {
    width: auto !important;
    min-height: 28px;
    margin: 0;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 12px;
}

#dungeon-view .dungeon-quick-config-panel {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding: 10px;
    border: 1px solid rgba(183, 150, 104, 0.24);
    border-radius: 12px;
    background: rgba(16, 11, 8, 0.52);
}

#dungeon-view .dungeon-quick-config-panel label {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

#dungeon-view .dungeon-quick-config-panel label span {
    color: #AFA092;
    font-size: 12px;
}

#dungeon-view .dungeon-quick-config-panel select {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 8px;
    background: #1C1511;
    color: #E8D8BE;
}

#dungeon-view .dungeon-quick-config-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#dungeon-view .dungeon-quick-config-actions button {
    width: 100% !important;
    min-height: 34px;
    margin: 0;
}

@media (max-width: 380px) {
    #dungeon-view .dungeon-new-shell .dungeon-new-shortcut-grid,
    #dungeon-view .dungeon-new-shell .dungeon-new-tabs {
        gap: 5px;
    }

    #dungeon-view .dungeon-new-shell .dungeon-new-shortcut,
    #dungeon-view .dungeon-new-shell .dungeon-new-tabs .dungeon-new-shortcut,
    #dungeon-view .dungeon-new-shell .dungeon-new-tabs button {
        min-height: 72px !important;
        padding-inline: 2px !important;
    }

    #dungeon-view .dungeon-new-shell .dungeon-new-shortcut strong {
        font-size: 10px;
    }
}

/* 新版副本三次结构：快速通道可配置，最多两行 10 个入口 */
#dungeon-view .dungeon-new-shortcut-grid,
#dungeon-view .dungeon-new-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

#dungeon-view .dungeon-new-tabs {
    position: static;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
}

#dungeon-view .dungeon-new-shortcut,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut,
#dungeon-view .dungeon-new-tabs button {
    width: 100% !important;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 7px 3px;
    border-radius: 11px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    text-align: center;
    white-space: normal;
}

#dungeon-view .dungeon-new-shortcut i,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut i {
    font-size: 17px;
    line-height: 1;
}

#dungeon-view .dungeon-new-shortcut strong,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut strong {
    max-width: 100%;
    color: #F3E0B4;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-shortcut span,
#dungeon-view .dungeon-new-tabs .dungeon-new-shortcut span {
    max-width: 100%;
    color: #AFA092;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-shortcut.active {
    border-color: rgba(255, 222, 145, 0.66);
    background: linear-gradient(180deg, #C9A84C 0%, #9B7933 100%);
    color: #1B140F;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 248, 207, 0.24);
}

#dungeon-view .dungeon-new-shortcut.active i,
#dungeon-view .dungeon-new-shortcut.active strong,
#dungeon-view .dungeon-new-shortcut.active span {
    color: #2D210F;
}

#dungeon-view .dungeon-quick-config-btn {
    width: auto !important;
    min-height: 28px;
    margin: 0;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 12px;
}

#dungeon-view .dungeon-quick-config-panel {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding: 10px;
    border: 1px solid rgba(183, 150, 104, 0.24);
    border-radius: 12px;
    background: rgba(16, 11, 8, 0.52);
}

#dungeon-view .dungeon-quick-config-panel label {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

#dungeon-view .dungeon-quick-config-panel label span {
    color: #AFA092;
    font-size: 12px;
}

#dungeon-view .dungeon-quick-config-panel select {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 8px;
    background: #1C1511;
    color: #E8D8BE;
}

#dungeon-view .dungeon-quick-config-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#dungeon-view .dungeon-quick-config-actions button {
    width: 100% !important;
    min-height: 34px;
    margin: 0;
}

@media (max-width: 380px) {
    #dungeon-view .dungeon-new-shortcut-grid,
    #dungeon-view .dungeon-new-tabs {
        gap: 5px;
    }

    #dungeon-view .dungeon-new-shortcut,
    #dungeon-view .dungeon-new-tabs .dungeon-new-shortcut,
    #dungeon-view .dungeon-new-tabs button {
        min-height: 72px;
        padding-inline: 2px;
    }

    #dungeon-view .dungeon-new-shortcut strong,
    #dungeon-view .dungeon-new-tabs .dungeon-new-shortcut strong {
        font-size: 10px;
    }
}

/* =========================================================================
 * 新版副本页最终皮肤
 * 放在文件末尾，避免被全局 panel / button / dungeon-stage 规则覆盖。
 * ========================================================================= */
#dungeon-view .dungeon-mode-toolbar {
    padding: 2px;
    color: #F2E1C2;
}

#dungeon-view .dungeon-mode-status span {
    color: #AFA092;
}

#dungeon-view .dungeon-mode-status strong {
    color: #F2E1C2;
}

#dungeon-view .dungeon-mode-switch {
    flex: 0 0 auto;
    gap: 5px;
    padding: 4px;
    border-color: rgba(183, 150, 104, 0.34);
    background: rgba(20, 14, 10, 0.72);
    border-radius: 12px;
}

#dungeon-view .dungeon-mode-switch button {
    width: auto !important;
    min-width: 58px;
    min-height: 34px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: #B8A997;
    box-shadow: none;
}

#dungeon-view .dungeon-mode-switch button.active {
    background: linear-gradient(180deg, #C9A84C 0%, #9C7B36 100%);
    border-color: rgba(255, 224, 150, 0.56);
    color: #1B140F;
    font-weight: 800;
}

#dungeon-view .dungeon-new-shell {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    color: #E7D8BE;
}

#dungeon-view .dungeon-new-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid rgba(183, 150, 104, 0.32);
    border-radius: 12px;
    background:
        radial-gradient(circle at 94% 0%, rgba(201, 168, 76, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(54, 39, 28, 0.95), rgba(30, 21, 16, 0.98));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 226, 177, 0.08);
}

#dungeon-view .dungeon-new-kicker {
    display: inline-flex;
    margin-bottom: 5px;
    color: #C9A84C;
    font-size: 12px;
    font-weight: 800;
}

#dungeon-view .dungeon-new-intro h2 {
    margin: 0;
    color: #F6E4C0;
    font-size: 20px;
    line-height: 1.25;
    border: 0;
}

#dungeon-view .dungeon-new-intro p {
    margin: 5px 0 0;
    color: #B8A997;
    font-size: 12px;
    line-height: 1.5;
}

#dungeon-view .dungeon-new-run-card {
    min-width: 72px;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 8px 9px;
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-radius: 10px;
    background: rgba(16, 11, 8, 0.52);
}

#dungeon-view .dungeon-new-run-card span {
    color: #AFA092;
    font-size: 11px;
    white-space: nowrap;
}

#dungeon-view .dungeon-new-run-card strong {
    color: #F6E4C0;
    font-size: 20px;
    line-height: 1.1;
}

#dungeon-view .dungeon-new-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 10px;
    padding: 8px 0;
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(21, 15, 12, 0.98), rgba(21, 15, 12, 0.9));
}

#dungeon-view .dungeon-new-tabs button {
    width: 100% !important;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid rgba(183, 150, 104, 0.22);
    background: linear-gradient(180deg, rgba(50, 37, 28, 0.94), rgba(34, 25, 20, 0.98));
    color: #D8C8AE;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

#dungeon-view .dungeon-new-tabs button.active {
    border-color: rgba(255, 222, 145, 0.66);
    background: linear-gradient(180deg, #C9A84C 0%, #9B7933 100%);
    color: #1B140F;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 248, 207, 0.24);
}

#dungeon-view .dungeon-new-content {
    gap: 10px;
}

#dungeon-view .dungeon-new-section {
    border: 1px solid rgba(183, 150, 104, 0.28);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(43, 31, 24, 0.96), rgba(25, 18, 14, 0.98));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

#dungeon-view .dungeon-new-section-head {
    padding: 13px 13px 8px;
}

#dungeon-view .dungeon-new-section-head h3 {
    color: #DDBF74;
    font-size: 17px;
}

#dungeon-view .dungeon-new-section-head span,
#dungeon-view .dungeon-new-group-title span,
#dungeon-view .dungeon-new-action-card p,
#dungeon-view .dungeon-new-source-item p,
#dungeon-view .dungeon-new-empty {
    color: #AFA092;
}

#dungeon-view .dungeon-new-card-list,
#dungeon-view .dungeon-new-stage-list,
#dungeon-view .dungeon-new-source-list {
    gap: 9px;
    padding: 0 12px 12px;
}

#dungeon-view .dungeon-new-action-card,
#dungeon-view .dungeon-new-source-item,
#dungeon-view .dungeon-new-empty,
#dungeon-view .dungeon-new-shell .dungeon-stage.panel {
    border: 1px solid rgba(183, 150, 104, 0.24);
    border-radius: 11px;
    background:
        radial-gradient(circle at 100% 0%, rgba(183, 150, 104, 0.09), transparent 26%),
        linear-gradient(180deg, rgba(54, 40, 30, 0.96), rgba(35, 25, 20, 0.99));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 232, 187, 0.06);
}

#dungeon-view .dungeon-new-action-card {
    position: relative;
    padding: 12px;
    overflow: hidden;
}

#dungeon-view .dungeon-new-action-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #C9A84C;
}

#dungeon-view .dungeon-new-action-card h4,
#dungeon-view .dungeon-new-source-item h4,
#dungeon-view .dungeon-new-group-title h4,
#dungeon-view .dungeon-new-shell .dungeon-stage .stage-info h4 {
    color: #F0D6A0;
    border: 0;
}

#dungeon-view .dungeon-new-badge,
#dungeon-view .dungeon-new-source-item span {
    background: rgba(201, 168, 76, 0.16);
    color: #E5C56F;
    border: 1px solid rgba(201, 168, 76, 0.28);
}

#dungeon-view .dungeon-new-badge.blue {
    background: rgba(89, 135, 172, 0.18);
    color: #9EC4DC;
    border-color: rgba(89, 135, 172, 0.3);
}

#dungeon-view .dungeon-new-badge.gold {
    background: rgba(201, 168, 76, 0.2);
    color: #F0D580;
}

#dungeon-view .dungeon-new-chip-row span,
#dungeon-view .dungeon-new-shell .dungeon-stage .stage-details span {
    border: 1px solid rgba(183, 150, 104, 0.18);
    background: rgba(13, 9, 7, 0.36);
    color: #C8B99F;
}

#dungeon-view .dungeon-new-actions button,
#dungeon-view .dungeon-new-shell .dungeon-stage button,
#dungeon-view .dungeon-new-shell .stage-entry-btn,
#dungeon-view .dungeon-new-shell .start-dungeon-btn {
    width: 100% !important;
    min-height: 38px;
    margin-top: 7px;
    border-color: rgba(183, 150, 104, 0.32);
    border-radius: 9px;
    background: linear-gradient(180deg, #634A35 0%, #463125 100%);
    color: #F4E6CC;
    font-weight: 700;
}

#dungeon-view .dungeon-new-actions button:hover:not(:disabled),
#dungeon-view .dungeon-new-shell .dungeon-stage button:hover:not(:disabled) {
    border-color: #C9A84C;
    background: linear-gradient(180deg, #765A3D 0%, #523827 100%);
}

#dungeon-view .dungeon-new-shell .dungeon-stage button:disabled {
    opacity: 0.55;
    color: #9B8F83;
}

#dungeon-view .dungeon-new-story-picker {
    gap: 8px;
    padding: 0 12px 12px;
}

#dungeon-view .dungeon-new-story-picker button {
    width: 148px !important;
    flex: 0 0 148px;
    min-height: 72px;
    border-color: rgba(183, 150, 104, 0.22);
    background: linear-gradient(180deg, rgba(48, 36, 28, 0.95), rgba(31, 23, 19, 0.98));
    color: #DDCEB9;
    box-shadow: none;
}

#dungeon-view .dungeon-new-story-picker button.active {
    border-color: rgba(201, 168, 76, 0.58);
    background: linear-gradient(180deg, rgba(105, 80, 45, 0.88), rgba(61, 43, 25, 0.98));
}

#dungeon-view .dungeon-new-story-picker span {
    color: #AFA092;
}

#dungeon-view .dungeon-new-shell .dungeon-stage {
    padding: 12px;
    color: #E6D6BC;
}

#dungeon-view .dungeon-new-shell .dungeon-stage .stage-desc,
#dungeon-view .dungeon-new-shell .dungeon-stage p,
#dungeon-view .dungeon-new-shell .dungeon-stage .possible-loot {
    color: #AFA092;
}

#dungeon-view .dungeon-new-shell .dungeon-stage .stage-details {
    color: #D0B478;
    border-top-color: rgba(183, 150, 104, 0.22);
    border-bottom-color: rgba(183, 150, 104, 0.22);
}

#dungeon-view .dungeon-new-source-search {
    border-color: rgba(183, 150, 104, 0.26);
    background: rgba(14, 10, 8, 0.52);
    color: #E8D8BE;
}

#dungeon-view .dungeon-new-source-search::placeholder {
    color: #8F8071;
}

@media (max-width: 380px) {
    #dungeon-view .dungeon-new-intro {
        grid-template-columns: 1fr;
    }

    #dungeon-view .dungeon-new-run-card {
        justify-items: start;
    }

    #dungeon-view .dungeon-new-tabs {
        gap: 6px;
    }

    #dungeon-view .dungeon-new-tabs button {
        font-size: 12px;
        padding-inline: 4px;
    }
}

/* 新版副本二次结构：推荐图标置顶，大类入口在其下方 */
#dungeon-view .dungeon-new-shell {
    max-width: 430px;
}

#dungeon-view .dungeon-new-recommend-section {
    margin: 0 0 12px;
}

#dungeon-view .dungeon-new-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0 2px;
}

#dungeon-view .dungeon-new-row-head h3 {
    margin: 0;
    border: 0;
    color: #F2E1C2;
    font-size: 17px;
    line-height: 1.2;
}

#dungeon-view .dungeon-new-row-head span {
    color: #AFA092;
    font-size: 12px;
    white-space: nowrap;
}

#dungeon-view .dungeon-new-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

#dungeon-view .dungeon-new-shortcut {
    width: 100% !important;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 7px 3px;
    border: 1px solid rgba(183, 150, 104, 0.26);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(48, 36, 28, 0.96), rgba(28, 21, 17, 0.98));
    color: #E8D8BE;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    text-align: center;
    white-space: normal;
}

#dungeon-view .dungeon-new-shortcut i {
    color: #E5C56F;
    font-size: 17px;
    line-height: 1;
}

#dungeon-view .dungeon-new-shortcut strong {
    color: #F3E0B4;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-shortcut span {
    color: #AFA092;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-coming-soon] {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.78;
}

#dungeon-view .dungeon-new-shortcut[data-dungeon-coming-soon] i {
    color: #9aa4b2;
}

#dungeon-view .dungeon-coming-soon-mark {
    display: inline-flex;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.36);
    color: #cbd5e1 !important;
    font-size: 9px;
    line-height: 1.1;
}

#dungeon-view .dungeon-new-category-head {
    margin-top: 2px;
}

#dungeon-view .dungeon-new-tabs {
    position: static;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
}

#dungeon-view .dungeon-new-tabs button {
    width: 100% !important;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 7px 3px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    white-space: normal;
}

#dungeon-view .dungeon-new-tabs button i {
    color: #DDBF74;
    font-size: 17px;
}

#dungeon-view .dungeon-new-tabs button strong {
    color: #E8D8BE;
    font-size: 11px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-tabs button span {
    color: #B6A68F;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#dungeon-view .dungeon-new-tabs button.active i,
#dungeon-view .dungeon-new-tabs button.active strong,
#dungeon-view .dungeon-new-tabs button.active span {
    color: #2D210F;
}

@media (max-width: 380px) {
    #dungeon-view .dungeon-new-shortcut-grid {
        gap: 6px;
    }

    #dungeon-view .dungeon-new-shortcut {
        min-height: 72px;
        padding: 7px 2px;
    }

    #dungeon-view .dungeon-new-tabs button {
        min-height: 72px;
        padding: 7px 2px;
    }
}

#dungeon-view .dungeon-new-system-groups {
    display: grid;
    gap: 10px;
}

#dungeon-view .dungeon-new-system-group {
    display: grid;
    gap: 8px;
}

#dungeon-view .dungeon-new-system-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

#dungeon-view .dungeon-new-system-title {
    color: #F2E1C2;
    font-size: 16px;
    font-weight: 800;
}

#dungeon-view .dungeon-new-group-bulk-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#dungeon-view .dungeon-new-open-group-btn {
    width: auto !important;
    min-height: 30px;
    margin: 0 !important;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}

#dungeon-view .dungeon-new-system-group .dungeon-new-tabs {
    margin: 0;
}

#dungeon-view .dungeon-new-system-group .dungeon-new-shortcut,
#dungeon-view .dungeon-new-system-group .dungeon-new-tabs button {
    min-height: 82px;
}

#dungeon-view .dungeon-new-system-detail:empty {
    display: none;
}

#dungeon-view .dungeon-new-system-detail:not(:empty) {
    display: grid;
    gap: 10px;
    overflow: visible;
    transform-origin: top center;
    animation: dungeon-detail-expand 0.24s ease-out both;
}

#dungeon-view .dungeon-new-system-detail.is-collapsing {
    animation: dungeon-detail-collapse 0.22s ease-in both;
}

#dungeon-view .dungeon-new-system-detail:not(:empty) > * {
    animation: dungeon-detail-content-rise 0.28s ease-out both;
}

#dungeon-view .dungeon-new-system-detail-card {
    overflow: visible;
}

#dungeon-view .dungeon-new-system-detail-card.is-collapsing {
    overflow: hidden;
    animation: dungeon-detail-collapse 0.22s ease-in both;
}

#dungeon-view .dungeon-new-shell.suppress-system-detail-animation .dungeon-new-system-detail:not(:empty),
#dungeon-view .dungeon-new-shell.suppress-system-detail-animation .dungeon-new-system-detail:not(:empty) > * {
    animation: none !important;
}

#dungeon-view .dungeon-new-shortcut.is-collapsing {
    transform: scale(0.98);
    filter: brightness(0.88);
}

#dungeon-view .activity-dungeon-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(49, 46, 129, 0.82));
    border-radius: 8px;
    padding: 16px;
    color: #f8fafc;
}

#dungeon-view .activity-dungeon-aura {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.18), transparent 48%);
    animation: activityPulse 0.7s ease-out both;
    pointer-events: none;
}

#dungeon-view .activity-dungeon-main {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

#dungeon-view .activity-dungeon-title-row,
#dungeon-view .activity-dungeon-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

#dungeon-view .activity-dungeon-title-row h4 {
    margin: 0 0 5px;
    font-size: 20px;
}

#dungeon-view .activity-dungeon-title-row p,
#dungeon-view .activity-dungeon-footer span {
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
}

#dungeon-view .activity-dungeon-glow {
    position: relative;
    min-width: 122px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.68);
    overflow: hidden;
}

#dungeon-view .activity-dungeon-glow-aura {
    --aura-c: rgba(148, 163, 184, 0.4);
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aura-c), transparent 60%);
    opacity: 0.7;
    pointer-events: none;
    animation: activityPulse 2.6s ease-in-out infinite alternate;
}
#dungeon-view .activity-glow-exquisite .activity-dungeon-glow-aura { --aura-c: rgba(125, 211, 252, 0.42); }
#dungeon-view .activity-glow-legendary .activity-dungeon-glow-aura { --aura-c: rgba(249, 115, 22, 0.48); }
#dungeon-view .activity-glow-epic .activity-dungeon-glow-aura { --aura-c: rgba(251, 191, 36, 0.5); }
#dungeon-view .activity-glow-world .activity-dungeon-glow-aura { --aura-c: rgba(251, 113, 133, 0.55); }
#dungeon-view .activity-glow-none .activity-dungeon-glow-aura { opacity: 0.15; }

#dungeon-view .activity-dungeon-glow span,
#dungeon-view .activity-dungeon-glow strong {
    position: relative;
    z-index: 1;
}

#dungeon-view .activity-dungeon-card.activity-glow-exquisite {
    border-color: rgba(125, 211, 252, 0.45);
    box-shadow: 0 0 18px rgba(125, 211, 252, 0.18);
}
#dungeon-view .activity-dungeon-card.activity-glow-legendary {
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 0 22px rgba(249, 115, 22, 0.22);
}
#dungeon-view .activity-dungeon-card.activity-glow-epic {
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.26);
}
#dungeon-view .activity-dungeon-card.activity-glow-world {
    border-color: rgba(251, 113, 133, 0.55);
    box-shadow: 0 0 28px rgba(251, 113, 133, 0.28);
}

#dungeon-view .activity-dungeon-glow span,
#dungeon-view .activity-dungeon-stats span {
    display: block;
    color: #94a3b8;
    font-size: 12px;
}

#dungeon-view .activity-dungeon-glow strong {
    display: block;
    margin-top: 3px;
    font-size: 17px;
}

#dungeon-view .activity-dungeon-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

#dungeon-view .activity-dungeon-stats > div {
    background: rgba(15, 23, 42, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 9px 10px;
}

#dungeon-view .activity-dungeon-progress {
    display: grid;
    gap: 5px;
}

#dungeon-view .activity-dungeon-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #cbd5e1;
}

#dungeon-view .activity-dungeon-progress-track {
    height: 8px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 999px;
}

#dungeon-view .activity-dungeon-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #facc15);
}

#dungeon-view .activity-dungeon-progress.epic .activity-dungeon-progress-track span { background: linear-gradient(90deg, #fbbf24, #fde047); }
#dungeon-view .activity-dungeon-progress.world .activity-dungeon-progress-track span { background: linear-gradient(90deg, #f97316, #fde047); }
#dungeon-view .activity-dungeon-run-btn { white-space: nowrap; }

#synthesis-view .activity-dungeon-prize-disclosure {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.48);
    color: #cbd5e1;
    overflow: hidden;
}

#synthesis-view .activity-dungeon-prize-disclosure summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #f8fafc;
    font-weight: 700;
    list-style: none;
}

#synthesis-view .activity-dungeon-prize-disclosure summary::-webkit-details-marker {
    display: none;
}

#synthesis-view .activity-dungeon-prize-disclosure summary::after {
    content: '展开';
    margin-left: auto;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
}

#synthesis-view .activity-dungeon-prize-disclosure[open] summary::after {
    content: '收起';
}

#synthesis-view .activity-prize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}

#synthesis-view .activity-prize-section {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.34);
    padding: 10px;
}

#synthesis-view .activity-prize-section h5 {
    margin: 0 0 8px;
    color: #fde68a;
    font-size: 13px;
}

#synthesis-view .activity-prize-section ul {
    margin: 0;
    padding-left: 18px;
}

#synthesis-view .activity-prize-section li {
    margin: 5px 0;
    line-height: 1.45;
    font-size: 12px;
}

#synthesis-view .activity-prize-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#synthesis-view .activity-prize-section th,
#synthesis-view .activity-prize-section td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    padding: 5px 4px;
    text-align: left;
}

#synthesis-view .activity-prize-section th {
    color: #f8fafc;
}

#synthesis-view .activity-prize-note {
    margin: 0;
    padding: 0 12px 12px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.activity-tier-exquisite, .activity-glow-exquisite strong { color: #7dd3fc; }
.activity-tier-legendary, .activity-glow-legendary strong { color: #fdba74; }
.activity-tier-epic, .activity-glow-epic strong { color: #fbbf24; }
.activity-tier-worldShattering, .activity-glow-world strong { color: #fb7185; }
.activity-tier-common, .activity-tier-normal { color: #cbd5e1; }

/* ============================================================
   鬼工宝球开宝仪式 (Ghostwork Orb Ceremony)
   状态机: idle → awakening → charging → ready → burst → reveal → summary
   ============================================================ */

#ghostwork-view,
#ghostwork-arena {
    width: 100%;
    min-height: 100%;
}

#synthesis-view .activity-dungeon-card {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(49, 46, 129, 0.82));
    border-radius: 8px;
    padding: 16px;
    color: #f8fafc;
}

#synthesis-view .synthesis-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    color: #f8fafc;
}

#synthesis-view .synthesis-box-title i {
    color: #facc15;
}

#synthesis-view .activity-dungeon-aura {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.18), transparent 48%);
    pointer-events: none;
}

#synthesis-view .activity-dungeon-main {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

#synthesis-view .activity-dungeon-title-row,
#synthesis-view .activity-dungeon-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

#synthesis-view .activity-dungeon-title-row h4 {
    margin: 0 0 5px;
    font-size: 20px;
}

#synthesis-view .activity-dungeon-title-row p,
#synthesis-view .activity-dungeon-footer span {
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
}

#synthesis-view .activity-dungeon-glow {
    position: relative;
    min-width: 122px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.68);
    overflow: hidden;
}

#synthesis-view .activity-dungeon-glow-aura {
    --aura-c: rgba(148, 163, 184, 0.4);
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aura-c), transparent 60%);
    opacity: 0.7;
    pointer-events: none;
}

#synthesis-view .activity-glow-exquisite .activity-dungeon-glow-aura { --aura-c: rgba(125, 211, 252, 0.42); }
#synthesis-view .activity-glow-legendary .activity-dungeon-glow-aura { --aura-c: rgba(249, 115, 22, 0.48); }
#synthesis-view .activity-glow-epic .activity-dungeon-glow-aura { --aura-c: rgba(251, 191, 36, 0.5); }
#synthesis-view .activity-glow-world .activity-dungeon-glow-aura { --aura-c: rgba(251, 113, 133, 0.55); }
#synthesis-view .activity-glow-none .activity-dungeon-glow-aura { opacity: 0.15; }

#synthesis-view .activity-dungeon-glow span,
#synthesis-view .activity-dungeon-stats span {
    display: block;
    color: #94a3b8;
    font-size: 12px;
}

#synthesis-view .activity-dungeon-glow strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 3px;
    font-size: 17px;
}

#synthesis-view .activity-dungeon-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

#synthesis-view .activity-dungeon-stats > div {
    background: rgba(15, 23, 42, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 9px 10px;
}

#synthesis-view .activity-dungeon-progress {
    display: grid;
    gap: 5px;
}

#synthesis-view .activity-dungeon-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #cbd5e1;
}

#synthesis-view .activity-dungeon-progress-track {
    height: 8px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 999px;
}

#synthesis-view .activity-dungeon-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #facc15);
}

#synthesis-view .activity-dungeon-progress.epic .activity-dungeon-progress-track span { background: linear-gradient(90deg, #fbbf24, #fde047); }
#synthesis-view .activity-dungeon-progress.world .activity-dungeon-progress-track span { background: linear-gradient(90deg, #f97316, #fde047); }
#synthesis-view .activity-dungeon-run-btn { white-space: nowrap; }

@media (max-width: 640px) {
    #synthesis-view .activity-dungeon-title-row,
    #synthesis-view .activity-dungeon-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

.ghostwork-stage {
    --gw-primary: #7dd3fc;
    --gw-secondary: #38bdf8;
    --gw-strong: rgba(125, 211, 252, 0.6);
    --gw-soft: rgba(125, 211, 252, 0.18);
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: min(680px, calc(100vh - 120px));
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 18px;
    padding: 28px 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--gw-primary) 20%, transparent), transparent 36%),
        radial-gradient(circle at 18% 22%, rgba(56, 189, 248, 0.12), transparent 32%),
        linear-gradient(180deg, #060913, #111827 58%, #05070d);
    transition: background 0.4s ease;
}

.ghostwork-stage.tier-exquisite { --gw-primary: #7dd3fc; --gw-secondary: #38bdf8; --gw-strong: rgba(125, 211, 252, 0.7); --gw-soft: rgba(125, 211, 252, 0.22); }
.ghostwork-stage.tier-legendary { --gw-primary: #fb923c; --gw-secondary: #f97316; --gw-strong: rgba(249, 115, 22, 0.78); --gw-soft: rgba(249, 115, 22, 0.24); }
.ghostwork-stage.tier-epic { --gw-primary: #fbbf24; --gw-secondary: #f59e0b; --gw-strong: rgba(251, 191, 36, 0.82); --gw-soft: rgba(251, 191, 36, 0.26); }
.ghostwork-stage.tier-world { --gw-primary: #fb7185; --gw-secondary: #fde047; --gw-strong: rgba(251, 113, 133, 0.88); --gw-soft: rgba(251, 113, 133, 0.3); }

.ghostwork-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(circle at 22% 30%, var(--gw-soft) 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 74% 26%, var(--gw-soft) 0 1.2px, transparent 2px),
        radial-gradient(circle at 42% 78%, var(--gw-soft) 0 1.3px, transparent 2.2px);
    background-size: 180px 180px, 220px 220px, 260px 260px;
}

.ghostwork-stage.omen-glimmer.phase-awakening,
.ghostwork-stage.omen-glimmer.phase-charging,
.ghostwork-stage.omen-rune.phase-awakening,
.ghostwork-stage.omen-rune.phase-charging,
.ghostwork-stage.omen-dark.phase-awakening,
.ghostwork-stage.omen-dark.phase-charging,
.ghostwork-stage.omen-anomaly.phase-awakening,
.ghostwork-stage.omen-anomaly.phase-charging,
.ghostwork-stage.omen-anomaly.phase-ready {
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--gw-primary) 28%, transparent), transparent 34%),
        radial-gradient(circle at 50% 72%, rgba(2, 6, 23, 0.4), transparent 42%),
        linear-gradient(180deg, #020409, #0f172a 56%, #02030a);
}

.ghostwork-stage.omen-dark.phase-awakening,
.ghostwork-stage.omen-dark.phase-charging,
.ghostwork-stage.omen-anomaly.phase-awakening,
.ghostwork-stage.omen-anomaly.phase-charging {
    animation: ghostworkOmenDim 1.05s ease-in-out both;
}

.ghostwork-stage.omen-anomaly.phase-ready {
    animation: ghostworkReadyHeartbeat 0.72s ease-in-out infinite alternate;
}

.ghostwork-stage.chain-5::before,
.ghostwork-stage.chain-10::before {
    opacity: 0.55;
    background-size: 130px 130px, 170px 170px, 210px 210px;
}

.ghostwork-stage.chain-10::before {
    opacity: 0.72;
    animation: ghostworkParticleDrift 3s linear infinite;
}

.ghostwork-stage.phase-burst.tier-epic,
.ghostwork-stage.phase-burst.tier-world,
.ghostwork-stage.phase-reveal.tier-epic,
.ghostwork-stage.phase-reveal.tier-world {
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gw-primary) 30%, transparent), transparent 30%),
        linear-gradient(180deg, #020409, #050810 58%, #02030a);
}

.ghostwork-stage.phase-burst.tier-legendary,
.ghostwork-stage.phase-burst.tier-epic {
    animation: ghostworkShake 0.42s cubic-bezier(.36,.07,.19,.97) both;
}
.ghostwork-stage.phase-burst.tier-world {
    animation: ghostworkShake 0.55s cubic-bezier(.36,.07,.19,.97) both;
    animation-iteration-count: 2;
}

.ghostwork-head {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    width: 100%;
    text-align: center;
}
.ghostwork-head span { color: #94a3b8; font-size: 13px; letter-spacing: 0.04em; }
.ghostwork-head strong {
    color: #f8fafc;
    font-size: clamp(22px, 4.4vw, 32px);
    line-height: 1.1;
    text-shadow: 0 0 18px var(--gw-soft);
}
.ghostwork-head em {
    color: var(--gw-primary);
    font-style: normal;
    font-weight: 700;
    text-shadow: 0 0 14px var(--gw-strong);
}
.ghostwork-head b.ghostwork-chain-badge {
    justify-self: center;
    width: fit-content;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gw-primary) 52%, rgba(255,255,255,0.18));
    background: color-mix(in srgb, var(--gw-primary) 18%, rgba(2, 6, 23, 0.82));
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.3;
    box-shadow: 0 0 12px var(--gw-soft);
}
.ghostwork-stage-line {
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.35;
}

.ghostwork-orb-zone {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 320px;
    width: 100%;
}

.ghostwork-orb {
    --orb-scale: 1;
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    position: relative;
    z-index: 2;
    border: 0;
    background: transparent;
    width: clamp(180px, 56vw, 280px);
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    filter: drop-shadow(0 0 30px var(--gw-strong));
    transform: scale(var(--orb-scale));
    transition: filter 0.32s ease, transform 0.32s ease;
}

.ghostwork-orb.phase-idle { --orb-scale: 0.92; }
.ghostwork-orb.phase-idle:hover { --orb-scale: 0.98; }
.ghostwork-orb.phase-awakening { animation: ghostworkAwaken 0.85s cubic-bezier(.18,.84,.28,1.08) both; }
.ghostwork-orb.phase-charging { --orb-scale: 1; }
.ghostwork-orb.phase-ready { animation: ghostworkUnstable 0.55s ease-in-out infinite alternate; cursor: pointer; }
.ghostwork-orb.phase-burst { animation: ghostworkBurst 0.62s ease-out both; pointer-events: none; }
.ghostwork-orb.phase-reveal { animation: ghostworkOpened 0.5s ease-out both; pointer-events: none; }
.ghostwork-orb.phase-summary { opacity: 0.36; --orb-scale: 0.74; filter: drop-shadow(0 0 12px var(--gw-soft)); pointer-events: none; }

.ghostwork-orb-glow {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gw-strong), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}
.ghostwork-orb.phase-awakening .ghostwork-orb-glow,
.ghostwork-orb.phase-charging .ghostwork-orb-glow,
.ghostwork-orb.phase-ready .ghostwork-orb-glow { opacity: 1; }
.ghostwork-orb.phase-ready .ghostwork-orb-glow {
    animation: ghostworkGlowBreath 0.55s ease-in-out infinite alternate;
}

.ghostwork-orb-core {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,0.92), transparent 9%),
        radial-gradient(circle at 50% 52%, var(--gw-primary), transparent 24%),
        repeating-conic-gradient(from 18deg, rgba(255,255,255,0.18) 0 9deg, transparent 9deg 18deg),
        radial-gradient(circle, #0f172a 0 54%, #020617 76%);
    box-shadow:
        inset 0 0 28px rgba(255,255,255,0.14),
        inset 0 0 56px var(--gw-strong),
        0 0 44px var(--gw-strong);
}

.ghostwork-orb-core::before,
.ghostwork-orb-core::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background:
        linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.22) 47%, transparent 51%),
        linear-gradient(-45deg, transparent 44%, rgba(255,255,255,0.16) 47%, transparent 52%);
    mask-image: radial-gradient(circle, transparent 0 28%, #000 30% 100%);
    animation: ghostworkSpin 3.6s linear infinite;
}
.ghostwork-orb-core::after { inset: 24%; animation-duration: 2.7s; animation-direction: reverse; }

.ghostwork-orb-rune {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 1.6px dashed color-mix(in srgb, var(--gw-primary) 65%, transparent);
    box-shadow: 0 0 14px var(--gw-strong), inset 0 0 10px var(--gw-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    animation: ghostworkSpin 6.4s linear infinite;
}
.ghostwork-orb-rune.rune-b {
    inset: 0;
    transform: rotateX(66deg) rotateZ(24deg);
    animation: ghostworkSpin 8s linear infinite reverse;
}
.ghostwork-orb-rune.rune-c {
    inset: 9%;
    transform: rotateY(60deg) rotateZ(-18deg);
    animation: ghostworkSpin 5.4s linear infinite;
}
.ghostwork-orb.phase-awakening .ghostwork-orb-rune,
.ghostwork-orb.phase-charging .ghostwork-orb-rune,
.ghostwork-orb.phase-ready .ghostwork-orb-rune { opacity: 1; }
.ghostwork-orb.phase-ready .ghostwork-orb-rune,
.ghostwork-orb.is-critical .ghostwork-orb-rune {
    animation-duration: 1.6s, 2s, 1.4s;
}

.ghostwork-orb-crack {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 32% 28%, transparent 0 18%, rgba(255,255,255,0.42) 19% 20%, transparent 21% 100%),
        radial-gradient(circle at 68% 32%, transparent 0 14%, rgba(255,255,255,0.34) 15% 16%, transparent 17% 100%),
        radial-gradient(circle at 50% 68%, transparent 0 22%, rgba(255,255,255,0.4) 23% 24%, transparent 25% 100%),
        radial-gradient(circle at 24% 60%, transparent 0 16%, rgba(255,255,255,0.28) 17% 18%, transparent 19% 100%);
    mix-blend-mode: screen;
    transition: opacity 0.3s ease;
}
.ghostwork-orb.is-cracking .ghostwork-orb-crack { opacity: 0.55; }
.ghostwork-orb.is-critical .ghostwork-orb-crack {
    opacity: 1;
    animation: ghostworkCrackPulse 0.42s ease-in-out infinite alternate;
}
.ghostwork-orb.omen-glimmer:not(.is-cracking):not(.is-critical) .ghostwork-orb-crack,
.ghostwork-orb.omen-rune:not(.is-cracking):not(.is-critical) .ghostwork-orb-crack {
    opacity: 0.34;
}
.ghostwork-orb.omen-rune .ghostwork-orb-rune,
.ghostwork-orb.omen-dark .ghostwork-orb-rune,
.ghostwork-orb.omen-anomaly .ghostwork-orb-rune {
    opacity: 1;
    box-shadow: 0 0 22px var(--gw-strong), inset 0 0 16px var(--gw-strong);
}
.ghostwork-orb.omen-dark .ghostwork-orb-core {
    animation: ghostworkOrbDimFlash 1.08s ease-in-out both;
}
.ghostwork-orb.omen-anomaly.phase-ready {
    animation: ghostworkOrbHeartbeat 0.42s ease-in-out infinite alternate;
}
.ghostwork-stage.is-critical-charge .ghostwork-orb {
    filter: drop-shadow(0 0 48px var(--gw-strong)) brightness(1.25);
}
.ghostwork-stage.is-critical-charge .ghostwork-orb-crack {
    opacity: 1;
    box-shadow: inset 0 0 24px var(--gw-strong);
}

.ghostwork-orb-shatter {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, var(--gw-primary) 0 10%, color-mix(in srgb, var(--gw-secondary) 80%, white) 12% 18%, transparent 20% 100%);
    opacity: 0;
    filter: blur(2px);
}
.ghostwork-orb.phase-burst .ghostwork-orb-shatter { animation: ghostworkShatter 0.5s ease-out both; }

.ghostwork-orb.is-pulsing { animation: ghostworkPulse 0.36s ease-out both; }

.ghostwork-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(720px, 96%);
    display: grid;
    gap: 10px;
}

.ghostwork-prompt {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(15, 23, 42, 0.74);
    text-align: center;
    box-shadow: 0 0 24px rgba(0,0,0,0.24);
}
.ghostwork-prompt strong { color: #f8fafc; font-size: 16px; letter-spacing: 0.04em; }
.ghostwork-prompt span { color: #cbd5e1; font-size: 12.5px; }
.ghostwork-prompt.is-ready {
    border-color: color-mix(in srgb, var(--gw-primary) 60%, rgba(255,255,255,0.2));
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), color-mix(in srgb, var(--gw-primary) 22%, transparent));
    animation: ghostworkPromptReady 0.5s ease-out both;
}
.ghostwork-prompt.is-ready strong {
    color: var(--gw-primary);
    text-shadow: 0 0 12px var(--gw-strong);
    font-size: 22px;
}
.ghostwork-prompt.is-bursting strong { color: var(--gw-primary); font-size: 20px; }

.ghostwork-pity-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    color: #94a3b8;
    font-size: 11.5px;
}
.ghostwork-pity-row span {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(2, 6, 23, 0.6);
}

.ghostwork-charge-bar {
    position: relative;
    height: 10px;
    margin-top: 4px;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.86);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
}
.ghostwork-charge-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gw-primary), var(--gw-secondary));
    box-shadow: 0 0 12px var(--gw-strong);
    transition: width 0.12s ease-out;
}
.ghostwork-charge-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%);
    animation: ghostworkChargeShine 1.4s linear infinite;
    pointer-events: none;
}

.ghostwork-feature-card {
    --feature-primary: var(--gw-primary);
    --feature-strong: var(--gw-strong);
    display: grid;
    gap: 6px;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--feature-primary) 60%, rgba(255,255,255,0.2));
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--feature-primary) 30%, transparent), transparent 60%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.92));
    box-shadow: 0 0 30px var(--feature-strong), inset 0 0 24px color-mix(in srgb, var(--feature-primary) 30%, transparent);
    text-align: center;
    animation: ghostworkFeatureRise 0.55s cubic-bezier(.18,.84,.28,1.08) both;
}
.ghostwork-feature-card.tier-legendary { --feature-primary: #fb923c; --feature-strong: rgba(249, 115, 22, 0.6); }
.ghostwork-feature-card.tier-epic { --feature-primary: #fbbf24; --feature-strong: rgba(251, 191, 36, 0.7); }
.ghostwork-feature-card.tier-world { --feature-primary: #fb7185; --feature-strong: rgba(251, 113, 133, 0.72); }
.ghostwork-feature-card span {
    color: var(--feature-primary);
    font-size: 13px;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-shadow: 0 0 12px var(--feature-strong);
}
.ghostwork-feature-card strong { color: #f8fafc; font-size: 22px; overflow-wrap: anywhere; }
.ghostwork-feature-card em { color: #fde68a; font-style: normal; font-size: 18px; font-weight: 800; }

.ghostwork-reward-burst {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.ghostwork-reward-chip {
    --chip-color: var(--gw-primary);
    --chip-strong: var(--gw-strong);
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid color-mix(in srgb, var(--chip-color) 45%, rgba(148, 163, 184, 0.3));
    color: #f8fafc;
    font-size: 12.5px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--chip-strong) 50%, transparent);
    opacity: 0;
    animation: ghostworkChipPop 0.42s cubic-bezier(.18,.84,.28,1.08) both;
    animation-delay: var(--delay, 0ms);
}
.ghostwork-reward-chip.tier-exquisite { --chip-color: #7dd3fc; --chip-strong: rgba(125, 211, 252, 0.45); }
.ghostwork-reward-chip.tier-legendary { --chip-color: #fb923c; --chip-strong: rgba(249, 115, 22, 0.5); }
.ghostwork-reward-chip.tier-epic { --chip-color: #fbbf24; --chip-strong: rgba(251, 191, 36, 0.55); }
.ghostwork-reward-chip.tier-world { --chip-color: #fb7185; --chip-strong: rgba(251, 113, 133, 0.6); }

.ghostwork-reveal-beat,
.ghostwork-reveal-curtain {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--gw-primary) 42%, rgba(255,255,255,0.16));
    background: rgba(2, 6, 23, 0.68);
    color: var(--gw-primary);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 0 18px var(--gw-soft);
    animation: ghostworkRevealBeat 0.62s ease-out both;
}
.ghostwork-reveal-curtain strong {
    color: #f8fafc;
    font-size: 18px;
}
.ghostwork-stage.reveal-world .ghostwork-feature-card {
    animation-delay: 0.34s;
}
.ghostwork-stage.reveal-epic .ghostwork-feature-card {
    animation-delay: 0.18s;
}

.ghostwork-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}
.ghostwork-flash.tier-epic {
    background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.6), rgba(2, 6, 23, 0.65) 70%);
    animation: ghostworkFlashEpic 0.6s ease-out both;
}
.ghostwork-flash.tier-world {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.92), rgba(251, 113, 133, 0.45) 40%, rgba(2, 6, 23, 0.78) 75%);
    animation: ghostworkFlashWorld 0.85s ease-out both;
}

.ghostwork-summary {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(6px);
    animation: ghostworkSummaryFade 0.42s ease-out both;
}

.ghostwork-summary-hero {
    --hero-primary: var(--gw-primary);
    --hero-strong: var(--gw-strong);
    display: grid;
    gap: 4px;
    padding: 15px 16px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--hero-primary) 58%, rgba(255,255,255,0.16));
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--hero-primary) 28%, transparent), transparent 58%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.9));
    box-shadow: 0 0 24px color-mix(in srgb, var(--hero-strong) 72%, transparent);
    text-align: center;
}
.ghostwork-summary-hero.tier-exquisite { --hero-primary: #7dd3fc; --hero-strong: rgba(125, 211, 252, 0.48); }
.ghostwork-summary-hero.tier-legendary { --hero-primary: #fb923c; --hero-strong: rgba(249, 115, 22, 0.54); }
.ghostwork-summary-hero.tier-epic { --hero-primary: #fbbf24; --hero-strong: rgba(251, 191, 36, 0.62); }
.ghostwork-summary-hero.tier-world { --hero-primary: #fb7185; --hero-strong: rgba(251, 113, 133, 0.68); }
.ghostwork-summary-hero.is-progress {
    --hero-primary: #94a3b8;
    --hero-strong: rgba(148, 163, 184, 0.32);
}
.ghostwork-summary-hero span {
    color: var(--hero-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.ghostwork-summary-hero strong {
    color: #f8fafc;
    font-size: clamp(19px, 4vw, 26px);
    overflow-wrap: anywhere;
}
.ghostwork-summary-hero em {
    color: #fde68a;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

.ghostwork-summary-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ghostwork-summary-progress > div {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.ghostwork-summary-progress span { color: #94a3b8; font-size: 11.5px; }
.ghostwork-summary-progress strong { color: #f8fafc; font-size: 14px; }
.ghostwork-summary-progress em { color: #cbd5e1; font-size: 11.5px; font-style: normal; }
.ghostwork-summary-progress > div.is-near {
    border-color: rgba(250, 204, 21, 0.55);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(250, 204, 21, 0.12));
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.18);
}
.ghostwork-summary-progress > div.is-near strong,
.ghostwork-summary-progress > div.is-near em {
    color: #fde68a;
}

.ghostwork-near-miss,
.ghostwork-chain-summary {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.ghostwork-near-miss span,
.ghostwork-chain-summary {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gw-primary) 42%, rgba(148, 163, 184, 0.24));
    background: color-mix(in srgb, var(--gw-primary) 14%, rgba(2, 6, 23, 0.72));
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
}

.ghostwork-normal-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ghostwork-summary-block.is-normal .ghostwork-reward-chip {
    opacity: 1;
    animation: none;
}

.ghostwork-summary-pointers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.ghostwork-summary-pointers > div {
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.ghostwork-summary-pointers span { display: block; color: #94a3b8; font-size: 11.5px; }
.ghostwork-summary-pointers strong {
    display: block;
    margin-top: 3px;
    color: #f8fafc;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.ghostwork-summary-block {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.ghostwork-summary-block h4 { margin: 0; color: #e2e8f0; font-size: 13px; letter-spacing: 0.04em; }
.ghostwork-summary-block.is-pity {
    border-color: color-mix(in srgb, #fde047 35%, rgba(148, 163, 184, 0.2));
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(250, 204, 21, 0.08));
}
.ghostwork-summary-block.is-glow {
    border-color: color-mix(in srgb, var(--gw-primary) 35%, rgba(148, 163, 184, 0.2));
}
.ghostwork-summary-block.is-surprise {
    border-color: color-mix(in srgb, var(--gw-primary) 45%, rgba(148, 163, 184, 0.2));
}

.ghostwork-summary-event {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.16);
}
.ghostwork-summary-event > div {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ghostwork-event-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gw-primary) 35%, rgba(15,23,42,0.8));
    border: 1px solid color-mix(in srgb, var(--gw-primary) 60%, rgba(255,255,255,0.2));
    color: #fde68a;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.04em;
    width: fit-content;
}

.activity-settle-reward {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.28);
    font-size: 11.5px;
    color: #e2e8f0;
}

.ghostwork-summary-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ghostwork-summary-hint {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.04em;
    animation: ghostworkHintBreath 1.8s ease-in-out infinite alternate;
}

/* 顶部返回按钮 - stage 内定位 */
.view-back-btn.ghostwork-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    margin: 0;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    color: #e2e8f0;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.view-back-btn.ghostwork-back-btn:hover {
    border-color: var(--gw-primary, #94a3b8);
    color: var(--gw-primary, #e2e8f0);
    background: rgba(15, 23, 42, 0.92);
}

/* reveal/summary 阶段:整个 stage 暗示可点击 */
.ghostwork-stage.phase-reveal,
.ghostwork-stage.phase-summary {
    cursor: pointer;
}
.ghostwork-stage.phase-reveal .view-back-btn.ghostwork-back-btn,
.ghostwork-stage.phase-summary .view-back-btn.ghostwork-back-btn {
    cursor: pointer;
}

/* 碎裂层 - 默认隐藏,is-crumbling 时碎片飞散 */
.ghostwork-crumble-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
    display: grid;
    place-items: center;
}
.ghostwork-crumble-shard {
    position: absolute;
    width: clamp(22px, 7vw, 38px);
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95), transparent 70%),
        linear-gradient(135deg, var(--gw-primary, #fff), var(--gw-secondary, #cbd5e1));
    clip-path: polygon(35% 0, 100% 30%, 82% 100%, 12% 80%, 0 36%);
    opacity: 0;
    filter: drop-shadow(0 0 14px var(--gw-strong, rgba(255, 255, 255, 0.5)));
}

/* 碎裂整体效果 */
.ghostwork-stage.is-crumbling {
    pointer-events: none;
    animation: ghostworkStageImpact 0.32s ease-out;
}
.ghostwork-stage.is-crumbling .ghostwork-orb {
    animation: ghostworkOrbCrumble 0.36s ease-in forwards !important;
}
.ghostwork-stage.is-crumbling .ghostwork-blessing-aura {
    animation: ghostworkContentBlur 0.3s ease-out forwards !important;
}
.ghostwork-stage.is-crumbling .ghostwork-head,
.ghostwork-stage.is-crumbling .ghostwork-bottom {
    animation: ghostworkContentBlur 0.32s ease-out forwards;
}
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard {
    animation: ghostworkShardFly 0.4s ease-out forwards;
}
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard.shard-1 { --dx: -180px; --dy: -120px; --r: -45deg; }
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard.shard-2 { --dx: 200px; --dy: -80px; --r: 60deg; animation-delay: 30ms; }
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard.shard-3 { --dx: -140px; --dy: 160px; --r: -75deg; animation-delay: 60ms; }
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard.shard-4 { --dx: 160px; --dy: 200px; --r: 90deg; animation-delay: 90ms; }
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard.shard-5 { --dx: -260px; --dy: 40px; --r: -120deg; animation-delay: 120ms; }
.ghostwork-stage.is-crumbling .ghostwork-crumble-shard.shard-6 { --dx: 220px; --dy: 60px; --r: 130deg; animation-delay: 150ms; }

@media (max-width: 640px) {
    .ghostwork-stage { min-height: calc(100vh - 100px); padding: 20px 12px; }
    .ghostwork-summary-pointers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ghostwork-summary-progress { grid-template-columns: 1fr; }
    .ghostwork-feature-card { padding: 14px; }
    .ghostwork-feature-card strong { font-size: 18px; }
}

@keyframes activityPulse {
    from { transform: scale(0.84); opacity: 0; }
    45% { opacity: 1; }
    to { transform: scale(1.08); opacity: 0.65; }
}

@keyframes ghostworkAwaken {
    0% { transform: scale(0.7); opacity: 0; filter: blur(8px) drop-shadow(0 0 0 transparent); }
    65% { transform: scale(1.04); opacity: 1; filter: blur(0) drop-shadow(0 0 32px var(--gw-strong)); }
    100% { transform: scale(var(--orb-scale, 1)); opacity: 1; filter: drop-shadow(0 0 28px var(--gw-strong)); }
}

@keyframes ghostworkSpin { to { rotate: 360deg; } }

@keyframes ghostworkPulse {
    0% { transform: scale(var(--orb-scale, 1)); }
    36% { transform: scale(calc(var(--orb-scale, 1) * 0.88)); }
    68% { transform: scale(calc(var(--orb-scale, 1) * 1.08)); }
    100% { transform: scale(var(--orb-scale, 1)); }
}

@keyframes ghostworkUnstable {
    0% { transform: scale(var(--orb-scale, 1)) rotate(-1.2deg); filter: drop-shadow(0 0 30px var(--gw-strong)) brightness(1.05); }
    100% { transform: scale(calc(var(--orb-scale, 1) * 1.04)) rotate(1.2deg); filter: drop-shadow(0 0 46px var(--gw-strong)) brightness(1.25); }
}

@keyframes ghostworkBurst {
    0% { transform: scale(var(--orb-scale, 1)); filter: brightness(1); }
    34% { transform: scale(0.78); filter: brightness(1.45); }
    66% { transform: scale(1.22); filter: brightness(2.1); }
    100% { transform: scale(0.96); filter: brightness(1.6); opacity: 0.85; }
}

@keyframes ghostworkOpened {
    0% { opacity: 0.85; transform: scale(0.96); }
    100% { opacity: 0.42; transform: scale(0.82); }
}

@keyframes ghostworkShatter {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(1.9); }
}

@keyframes ghostworkShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, -2px); }
    25% { transform: translate(5px, 3px); }
    40% { transform: translate(-5px, 2px); }
    55% { transform: translate(4px, -3px); }
    70% { transform: translate(-3px, 1px); }
    85% { transform: translate(2px, -1px); }
}

@keyframes ghostworkGlowBreath { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes ghostworkCrackPulse { from { opacity: 0.55; } to { opacity: 1; } }

@keyframes ghostworkChargeShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

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

@keyframes ghostworkFeatureRise {
    0% { opacity: 0; transform: translateY(20px) scale(0.86); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes ghostworkChipPop {
    0% { opacity: 0; transform: translateY(14px) scale(0.86); }
    50% { opacity: 1; transform: translateY(-4px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ghostworkFlashEpic {
    0% { opacity: 0; }
    40% { opacity: 0.85; }
    100% { opacity: 0; }
}

@keyframes ghostworkFlashWorld {
    0% { opacity: 0; }
    18% { opacity: 1; }
    55% { opacity: 0.6; }
    100% { opacity: 0; }
}

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

@keyframes ghostworkOmenDim {
    0%, 100% { filter: brightness(1); }
    36% { filter: brightness(0.62); }
    64% { filter: brightness(1.35); }
}

@keyframes ghostworkReadyHeartbeat {
    from { filter: brightness(0.82); }
    to { filter: brightness(1.25); }
}

@keyframes ghostworkParticleDrift {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 130px 80px, -170px 110px, 210px -90px; }
}

@keyframes ghostworkOrbDimFlash {
    0%, 100% { filter: brightness(1); }
    40% { filter: brightness(0.55); }
    70% { filter: brightness(1.55); }
}

@keyframes ghostworkOrbHeartbeat {
    from { transform: scale(var(--orb-scale, 1)); filter: drop-shadow(0 0 28px var(--gw-strong)) brightness(0.95); }
    to { transform: scale(calc(var(--orb-scale, 1) * 1.08)); filter: drop-shadow(0 0 58px var(--gw-strong)) brightness(1.35); }
}

@keyframes ghostworkRevealBeat {
    from { opacity: 0; transform: translateY(8px) scale(0.96); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ============================================================
   祝福外环 (Blessing Aura) - 独立视觉层
   颜色读取 glow.from / preState.glow,与本次掉落稀有度分离
   blessing-${tier}: 外环颜色;action-${enter|hold|upgrade|settle|none}: 外环行为
   ============================================================ */

.ghostwork-blessing-aura {
    --aura-primary: rgba(148, 163, 184, 0.5);
    --aura-secondary: rgba(148, 163, 184, 0.3);
    --aura-strong: rgba(148, 163, 184, 0.3);
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    position: relative;
    width: clamp(232px, 70vw, 360px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.ghostwork-blessing-aura.blessing-exquisite { --aura-primary: #7dd3fc; --aura-secondary: #38bdf8; --aura-strong: rgba(125, 211, 252, 0.55); }
.ghostwork-blessing-aura.blessing-legendary { --aura-primary: #fb923c; --aura-secondary: #f97316; --aura-strong: rgba(249, 115, 22, 0.62); }
.ghostwork-blessing-aura.blessing-epic { --aura-primary: #fbbf24; --aura-secondary: #f59e0b; --aura-strong: rgba(251, 191, 36, 0.68); }
.ghostwork-blessing-aura.blessing-world { --aura-primary: #fb7185; --aura-secondary: #fde047; --aura-strong: rgba(251, 113, 133, 0.7); }

.ghostwork-blessing-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.8px solid color-mix(in srgb, var(--aura-primary) 60%, transparent);
    box-shadow: 0 0 22px var(--aura-strong), inset 0 0 18px var(--aura-strong);
    opacity: 0.85;
}
.ghostwork-blessing-ring.ring-outer {
    inset: -8%;
    border-style: dashed;
    animation: blessingRingSpin 14s linear infinite, blessingRingBreath 2.6s ease-in-out infinite alternate;
}
.ghostwork-blessing-ring.ring-middle {
    inset: -2%;
    animation: blessingRingSpin 9s linear infinite reverse, blessingRingBreath 3.4s ease-in-out infinite alternate;
}

.ghostwork-blessing-pulse {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aura-strong) 0%, transparent 56%);
    opacity: 0.4;
    animation: blessingPulse 3.2s ease-in-out infinite alternate;
}

.ghostwork-blessing-particles {
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 20% 30%, var(--aura-primary) 0 1.2px, transparent 1.6px),
        radial-gradient(circle at 78% 22%, var(--aura-primary) 0 1.1px, transparent 1.5px),
        radial-gradient(circle at 30% 78%, var(--aura-primary) 0 1.4px, transparent 1.8px),
        radial-gradient(circle at 85% 70%, var(--aura-primary) 0 1.1px, transparent 1.5px),
        radial-gradient(circle at 50% 12%, var(--aura-primary) 0 1px, transparent 1.4px);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: blessingParticles 2.8s ease-in-out infinite alternate;
}

/* blessing-none: 极弱,只剩微弱呼吸 */
.ghostwork-blessing-aura.blessing-none { opacity: 0.5; }
.ghostwork-blessing-aura.blessing-none .ghostwork-blessing-ring { opacity: 0.2; border-color: rgba(148, 163, 184, 0.25); box-shadow: none; }
.ghostwork-blessing-aura.blessing-none .ghostwork-blessing-pulse { opacity: 0.08; }
.ghostwork-blessing-aura.blessing-none .ghostwork-blessing-particles { display: none; }

/* action-none: 几乎不存在 */
.ghostwork-blessing-aura.action-none { opacity: 0.45; }
.ghostwork-blessing-aura.action-none.blessing-none { opacity: 0.32; }

/* action-enter: 从无到有,1.4s 慢慢成形 */
.ghostwork-blessing-aura.action-enter {
    animation: blessingFormIn 1.4s ease-out 0.2s both;
}

/* action-hold: 默认呼吸,无额外动画 */

/* action-upgrade: 颜色 + 向外扩散波纹 */
.ghostwork-blessing-aura.action-upgrade .ghostwork-blessing-pulse {
    animation: blessingUpgradeWave 1.6s ease-out infinite;
}
.ghostwork-blessing-aura.action-upgrade .ghostwork-blessing-ring.ring-outer {
    animation-duration: 8s, 1.6s;
}

/* action-settle: ready 不稳定 / burst 被吸入 / 之后近乎消失 */
.ghostwork-stage.phase-ready .ghostwork-blessing-aura.action-settle {
    animation: blessingUnstable 0.55s ease-in-out infinite alternate;
}
.ghostwork-stage.phase-ready .ghostwork-blessing-aura.action-settle .ghostwork-blessing-pulse {
    animation: blessingPulse 0.6s ease-in-out infinite alternate;
}
.ghostwork-stage.phase-burst .ghostwork-blessing-aura.action-settle {
    animation: blessingSettleAbsorb 0.6s ease-in both;
}
.ghostwork-stage.phase-reveal .ghostwork-blessing-aura.action-settle,
.ghostwork-stage.phase-summary .ghostwork-blessing-aura.action-settle {
    opacity: 0.08;
}

/* awakening / idle 时 aura 渐入 */
.ghostwork-stage.phase-idle .ghostwork-blessing-aura,
.ghostwork-stage.phase-awakening .ghostwork-blessing-aura {
    animation: blessingFadeIn 0.55s ease-out both;
}

/* burst/reveal 高稀有度时让 aura 退后避免抢戏(settle 时除外) */
.ghostwork-stage.phase-burst.tier-epic .ghostwork-blessing-aura:not(.action-settle),
.ghostwork-stage.phase-burst.tier-world .ghostwork-blessing-aura:not(.action-settle),
.ghostwork-stage.phase-reveal.tier-epic .ghostwork-blessing-aura:not(.action-settle),
.ghostwork-stage.phase-reveal.tier-world .ghostwork-blessing-aura:not(.action-settle) {
    opacity: 0.42;
}

/* ============================================================
   祝福残响 Banner (Summary 顶部独立横条)
   ============================================================ */

.ghostwork-blessing-banner {
    --banner-primary: #94a3b8;
    --banner-strong: rgba(148, 163, 184, 0.4);
    --banner-soft: rgba(148, 163, 184, 0.16);
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.2px solid color-mix(in srgb, var(--banner-primary) 45%, rgba(255,255,255,0.16));
    background:
        radial-gradient(circle at 18% 18%, var(--banner-soft), transparent 60%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.85));
    box-shadow: 0 0 22px var(--banner-strong), inset 0 0 18px var(--banner-soft);
    animation: blessingBannerRise 0.42s ease-out both;
}

.ghostwork-blessing-banner.blessing-exquisite { --banner-primary: #7dd3fc; --banner-strong: rgba(125, 211, 252, 0.5); --banner-soft: rgba(125, 211, 252, 0.16); }
.ghostwork-blessing-banner.blessing-legendary { --banner-primary: #fb923c; --banner-strong: rgba(249, 115, 22, 0.55); --banner-soft: rgba(249, 115, 22, 0.18); }
.ghostwork-blessing-banner.blessing-epic { --banner-primary: #fbbf24; --banner-strong: rgba(251, 191, 36, 0.6); --banner-soft: rgba(251, 191, 36, 0.2); }
.ghostwork-blessing-banner.blessing-world { --banner-primary: #fb7185; --banner-strong: rgba(251, 113, 133, 0.65); --banner-soft: rgba(251, 113, 133, 0.22); }
.ghostwork-blessing-banner.action-none {
    --banner-primary: #94a3b8;
    --banner-strong: rgba(148, 163, 184, 0.32);
    --banner-soft: rgba(148, 163, 184, 0.1);
}

.ghostwork-blessing-banner-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.ghostwork-blessing-banner-head span {
    color: var(--banner-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-shadow: 0 0 12px var(--banner-strong);
}
.ghostwork-blessing-banner-head strong {
    color: #f8fafc;
    font-size: 17px;
    text-shadow: 0 0 10px var(--banner-strong);
}

.ghostwork-blessing-banner-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ghostwork-blessing-banner-flow em {
    font-style: normal;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}
.ghostwork-blessing-banner-flow em.blessing-exquisite { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.5); box-shadow: 0 0 10px rgba(125, 211, 252, 0.28); }
.ghostwork-blessing-banner-flow em.blessing-legendary { color: #fdba74; border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 0 10px rgba(249, 115, 22, 0.32); }
.ghostwork-blessing-banner-flow em.blessing-epic { color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 0 10px rgba(251, 191, 36, 0.36); }
.ghostwork-blessing-banner-flow em.blessing-world { color: #fb7185; border-color: rgba(251, 113, 133, 0.55); box-shadow: 0 0 10px rgba(251, 113, 133, 0.38); }

.ghostwork-blessing-banner-flow i.arrow {
    color: var(--banner-primary);
    font-style: normal;
}
.ghostwork-blessing-banner-flow i.arrow::before {
    content: "→";
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 0 8px var(--banner-strong);
}

.ghostwork-blessing-banner-tag {
    color: #cbd5e1;
    font-size: 12.5px;
}

.ghostwork-blessing-banner-marks {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ghostwork-blessing-banner-marks:empty { display: none; }
.ghostwork-blessing-banner-marks .mark {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--banner-strong);
    background: color-mix(in srgb, var(--banner-primary) 18%, rgba(2, 6, 23, 0.7));
    color: #f8fafc;
}
.ghostwork-blessing-banner-marks .mark.is-reward {
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.5);
    background: rgba(250, 204, 21, 0.14);
}
.ghostwork-blessing-banner-marks .mark.is-next::before {
    content: "✦ ";
    color: var(--banner-primary);
}

/* action 强调:upgrade 升级流光 */
.ghostwork-blessing-banner.action-upgrade {
    animation: blessingBannerRise 0.42s ease-out both, blessingBannerUpgradePulse 1.8s ease-in-out 0.5s 2;
}
.ghostwork-blessing-banner.action-upgrade::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--banner-primary) 28%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: blessingBannerSheen 1.6s ease-out 0.4s 2;
    pointer-events: none;
}
.ghostwork-blessing-banner.action-settle {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--banner-primary) 25%, transparent), transparent 60%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
}
.ghostwork-blessing-banner.action-settle .ghostwork-blessing-banner-head strong {
    animation: blessingBannerSettleGlow 1.4s ease-in-out infinite alternate;
}

/* idle 阶段祝福小提示标签 */
.ghostwork-prompt-blessing-tag {
    --tag-color: #94a3b8;
    --tag-strong: rgba(148, 163, 184, 0.36);
    display: inline-block;
    align-self: center;
    margin: 4px auto 0;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid var(--tag-strong);
    background: color-mix(in srgb, var(--tag-color) 18%, rgba(2, 6, 23, 0.7));
    color: var(--tag-color);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 12px var(--tag-strong);
}
.ghostwork-prompt-blessing-tag.blessing-exquisite { --tag-color: #7dd3fc; --tag-strong: rgba(125, 211, 252, 0.42); }
.ghostwork-prompt-blessing-tag.blessing-legendary { --tag-color: #fdba74; --tag-strong: rgba(249, 115, 22, 0.5); }
.ghostwork-prompt-blessing-tag.blessing-epic { --tag-color: #fbbf24; --tag-strong: rgba(251, 191, 36, 0.55); }
.ghostwork-prompt-blessing-tag.blessing-world { --tag-color: #fb7185; --tag-strong: rgba(251, 113, 133, 0.6); }
.ghostwork-prompt-blessing-tag.is-empty {
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.4);
    background: rgba(15, 23, 42, 0.5);
    box-shadow: none;
}

/* ready 阶段 settle 提示 */
.ghostwork-prompt-settle-hint {
    margin-top: 4px;
    color: #fde68a !important;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
    animation: blessingHintFlicker 0.9s ease-in-out infinite alternate;
}

/* feature-card 祝福结算变体 */
.ghostwork-feature-card { position: relative; }
.ghostwork-feature-card.source-glow::before {
    content: "祝福奖励";
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.18);
    border: 1px solid rgba(250, 204, 21, 0.45);
    color: #fde68a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* reward chip 来源前缀 */
.ghostwork-reward-chip.source-pity {
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}
.ghostwork-reward-chip.source-pity::before {
    content: "保底 · ";
    color: #fde68a;
    font-weight: 800;
}
.ghostwork-reward-chip.source-glow::before {
    content: "祝福 · ";
    color: var(--chip-color);
    font-weight: 800;
}
.ghostwork-reward-chip.source-round::before {
    content: "开宝 · ";
    color: var(--chip-color);
    font-weight: 700;
}

/* 祝福结算 flash:中等强度,颜色来自 blessing 等级 */
.ghostwork-flash.tier-settle-exquisite {
    background: radial-gradient(circle at 50% 45%, rgba(125, 211, 252, 0.5), rgba(2, 6, 23, 0.55) 70%);
    animation: ghostworkFlashEpic 0.55s ease-out both;
}
.ghostwork-flash.tier-settle-legendary {
    background: radial-gradient(circle at 50% 45%, rgba(249, 115, 22, 0.55), rgba(2, 6, 23, 0.6) 70%);
    animation: ghostworkFlashEpic 0.6s ease-out both;
}
.ghostwork-flash.tier-settle-epic {
    background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.6), rgba(2, 6, 23, 0.65) 70%);
    animation: ghostworkFlashEpic 0.65s ease-out both;
}
.ghostwork-flash.tier-settle-world {
    background: radial-gradient(circle at 50% 45%, rgba(251, 113, 133, 0.6), rgba(2, 6, 23, 0.65) 65%);
    animation: ghostworkFlashEpic 0.7s ease-out both;
}

/* 保底共鸣 - 让保底块更醒目 */
.ghostwork-summary-block.is-pity {
    animation: blessingBannerRise 0.42s ease-out both, pityResonancePulse 2.2s ease-in-out 0.3s infinite alternate;
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.18);
}
.ghostwork-summary-block.is-pity h4 {
    color: #fde68a;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}
.ghostwork-summary-block.is-pity h4::before {
    content: "♦ ";
    color: #fde68a;
}

/* "再开一次"按钮带祝福残光 */
.stage-entry-btn.has-blessing {
    position: relative;
    box-shadow: 0 0 14px rgba(125, 211, 252, 0.35);
}
.stage-entry-btn.has-blessing::after {
    content: "下一发有祝福";
    position: absolute;
    top: -10px;
    right: -8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.32), rgba(192, 132, 252, 0.32));
    border: 1px solid rgba(192, 132, 252, 0.5);
    color: #f0abfc;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Blessing Keyframes */
@keyframes blessingRingSpin { to { rotate: 360deg; } }
@keyframes blessingRingBreath {
    from { transform: scale(0.95); opacity: 0.6; }
    to { transform: scale(1.04); opacity: 1; }
}
@keyframes blessingPulse {
    from { opacity: 0.22; transform: scale(0.92); }
    to { opacity: 0.55; transform: scale(1.08); }
}
@keyframes blessingParticles {
    from { opacity: 0.4; transform: scale(0.96) rotate(0deg); }
    to { opacity: 0.85; transform: scale(1.06) rotate(8deg); }
}
@keyframes blessingFormIn {
    from { opacity: 0; transform: scale(0.7); filter: blur(8px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes blessingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes blessingUpgradeWave {
    0% { transform: scale(0.9); opacity: 0.2; }
    50% { transform: scale(1.22); opacity: 0.55; }
    100% { transform: scale(1.48); opacity: 0; }
}
@keyframes blessingUnstable {
    from { transform: scale(0.95) rotate(-2.2deg); filter: brightness(1); }
    to { transform: scale(1.06) rotate(2.2deg); filter: brightness(1.4); }
}
@keyframes blessingSettleAbsorb {
    0% { opacity: 1; transform: scale(1); filter: blur(0); }
    50% { opacity: 0.6; transform: scale(0.62); filter: blur(2px); }
    100% { opacity: 0; transform: scale(0.32); filter: blur(8px); }
}
@keyframes blessingBannerRise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes blessingBannerUpgradePulse {
    0%, 100% { box-shadow: 0 0 22px var(--banner-strong), inset 0 0 18px var(--banner-soft); }
    50% { box-shadow: 0 0 38px var(--banner-strong), inset 0 0 28px var(--banner-soft); }
}
@keyframes blessingBannerSheen {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes blessingBannerSettleGlow {
    from { text-shadow: 0 0 10px var(--banner-strong); }
    to { text-shadow: 0 0 22px var(--banner-strong), 0 0 4px #fff; }
}
@keyframes blessingHintFlicker {
    from { opacity: 0.7; }
    to { opacity: 1; }
}
@keyframes pityResonancePulse {
    from { box-shadow: 0 0 12px rgba(250, 204, 21, 0.18); border-color: color-mix(in srgb, #fde047 30%, rgba(148, 163, 184, 0.2)); }
    to { box-shadow: 0 0 26px rgba(250, 204, 21, 0.45); border-color: color-mix(in srgb, #fde047 55%, rgba(148, 163, 184, 0.2)); }
}

@keyframes ghostworkHintBreath {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

@keyframes ghostworkStageImpact {
    0% { transform: translate(0, 0); filter: brightness(1); }
    25% { transform: translate(-3px, 2px); filter: brightness(1.25); }
    50% { transform: translate(3px, -2px); filter: brightness(1.45); }
    75% { transform: translate(-2px, 1px); filter: brightness(1.18); }
    100% { transform: translate(0, 0); filter: brightness(1); }
}

@keyframes ghostworkOrbCrumble {
    0% { transform: scale(var(--orb-scale, 0.74)); opacity: 0.4; filter: blur(0); }
    35% { transform: scale(1.12); opacity: 0.85; filter: blur(0) brightness(1.5); }
    100% { transform: scale(0.28); opacity: 0; filter: blur(10px) brightness(2); }
}

@keyframes ghostworkContentBlur {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to { opacity: 0; transform: translateY(-10px); filter: blur(6px); }
}

@keyframes ghostworkShardFly {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.7); }
    18% { opacity: 1; transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18)) rotate(calc(var(--r) * 0.2)) scale(1.06); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.4); filter: blur(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .ghostwork-stage,
    .ghostwork-stage::before,
    .ghostwork-orb,
    .ghostwork-orb-core::before,
    .ghostwork-orb-core::after,
    .ghostwork-orb-rune,
    .ghostwork-blessing-ring,
    .ghostwork-blessing-pulse,
    .ghostwork-blessing-particles,
    .ghostwork-flash,
    .ghostwork-feature-card,
    .ghostwork-reward-chip,
    .ghostwork-summary,
    .ghostwork-summary-hint,
    .ghostwork-reveal-beat,
    .ghostwork-reveal-curtain {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes dungeon-detail-expand {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dungeon-detail-collapse {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 4000px;
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.94);
        max-height: 0;
    }
}

@keyframes dungeon-detail-content-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#dungeon-view .dungeon-new-focus-pulse {
    outline: 2px solid rgba(201, 168, 76, 0.55);
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2), 0 0 0 6px rgba(201, 168, 76, 0.08);
}


#dungeon-view .dungeon-system-quick-actions,
#dungeon-view .dungeon-daily-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 7px;
}

#dungeon-view .dungeon-daily-actions button {
    width: 100% !important;
    min-height: 36px;
    margin: 0 !important;
    font-size: 12px;
}

#dungeon-view .dungeon-privilege-hint,
#money-tree-view .dungeon-privilege-hint {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 8px;
    margin-bottom: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(201, 168, 76, 0.34);
    border-radius: 8px;
    background: rgba(201, 168, 76, 0.12);
}

#dungeon-view .dungeon-privilege-hint span,
#money-tree-view .dungeon-privilege-hint span {
    color: #F0D580;
    font-size: 12px;
    font-weight: 800;
}

#dungeon-view .dungeon-privilege-hint strong,
#money-tree-view .dungeon-privilege-hint strong {
    justify-self: end;
    color: #FFE2A3;
    font-size: 14px;
}

#dungeon-view .dungeon-privilege-hint em,
#money-tree-view .dungeon-privilege-hint em {
    grid-column: 1 / -1;
    color: #C8B99F;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}
/* --- 铸剑系统 --- */
.sword-forging-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.sword-forging-page {
    --sword-bg: #0a0d14;
    --sword-panel: rgba(15, 21, 31, 0.92);
    --sword-panel-strong: rgba(22, 31, 45, 0.96);
    --sword-line: rgba(148, 163, 184, 0.18);
    --sword-text: #eef2f7;
    --sword-muted: #9aa8ba;
    --sword-fire: #ff7a1a;
    --sword-gold: #f6c65b;
    --sword-cyan: #6ee7f9;
    --sword-jade: #69d39f;
    padding: 12px 0 28px;
    color: var(--sword-text);
}

.sword-forging-page .panel {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        var(--sword-panel);
    border: 1px solid var(--sword-line);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.sword-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 260px;
    background:
        radial-gradient(circle at 18% 70%, rgba(255, 118, 28, 0.28), transparent 28%),
        radial-gradient(circle at 84% 12%, rgba(110, 231, 249, 0.12), transparent 32%),
        linear-gradient(135deg, #101521, #111827 54%, #1d1720);
}

.sword-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(246, 198, 91, 0.72), transparent);
}

.sword-hero-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 42%) 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
}

.sword-forge-scene {
    position: relative;
    min-height: 220px;
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(4, 8, 14, 0.18), rgba(4, 8, 14, 0.72)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 28px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sword-forge-flame {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 170px;
    height: 170px;
    transform: translateX(-50%);
    border-radius: 50% 50% 46% 46%;
    background:
        radial-gradient(circle at 50% 64%, #fff3a3 0 14%, #ffbd45 15% 31%, #f15a24 32% 54%, rgba(166, 35, 35, 0.05) 68%);
    filter: blur(0.2px);
    opacity: 0.94;
    animation: swordFlame 1.35s ease-in-out infinite alternate;
}

.sword-forge-flame::before,
.sword-forge-flame::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 48% 52% 45% 55%;
    background: radial-gradient(circle, rgba(255, 244, 171, 0.9), rgba(255, 154, 42, 0.05) 64%);
    animation: swordFlame 1.05s ease-in-out infinite alternate-reverse;
}

.sword-anvil {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 210px;
    height: 72px;
    transform: translateX(-50%);
    border-radius: 8px 8px 18px 18px;
    background: linear-gradient(180deg, #8fa3b9, #2d3a49 62%, #151c25);
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255,255,255,0.35);
}

.sword-anvil::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 12px;
    width: 270px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #526273, #c7d4df 45%, #536778);
}

.sword-blade {
    position: absolute;
    left: 50%;
    top: -44px;
    width: 162px;
    height: 18px;
    transform: translateX(-50%) rotate(-8deg);
    border-radius: 999px 999px 999px 2px;
    background: linear-gradient(90deg, #eff6ff, #7dd3fc 34%, #fb923c 70%, #fff3a3);
    box-shadow: 0 0 24px rgba(251, 146, 60, 0.56);
    animation: swordBladePulse 1.8s ease-in-out infinite;
}

.sword-sparks i {
    position: absolute;
    left: calc(28% + var(--spark-x, 0px));
    bottom: 84px;
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: #ffe08a;
    box-shadow: 0 0 12px #ff8a22;
    animation: swordSpark 1.2s ease-out infinite;
}

.sword-sparks i:nth-child(2) { --spark-x: 46px; animation-delay: .16s; }
.sword-sparks i:nth-child(3) { --spark-x: 118px; animation-delay: .32s; }
.sword-sparks i:nth-child(4) { --spark-x: 190px; animation-delay: .52s; }
.sword-sparks i:nth-child(5) { --spark-x: 250px; animation-delay: .72s; }

.sword-hero-copy {
    min-width: 0;
}

.sword-kicker {
    width: fit-content;
    padding: 5px 10px;
    border: 1px solid rgba(246, 198, 91, 0.45);
    border-radius: 999px;
    color: #ffe3a2;
    font-size: 12px;
    background: rgba(246, 198, 91, 0.1);
}

.sword-hero-copy h3 {
    margin: 12px 0 18px;
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.16;
    letter-spacing: 0;
}

.sword-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sword-hero-stats div,
.sword-summary,
.sword-empty-panel,
.sword-shop-item,
.sword-luck-grid label {
    background: rgba(8, 13, 22, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
}

.sword-hero-stats div {
    padding: 10px;
    min-width: 0;
}

.sword-hero-stats span,
.sword-section-head span,
.sword-summary span,
.sword-shop-item span,
.sword-iron-info span,
.sword-iron-info small {
    color: var(--sword-muted);
}

.sword-hero-stats strong {
    display: block;
    margin: 3px 0;
    color: var(--sword-text);
    font-size: 22px;
}

.sword-hero-stats small {
    display: block;
    color: #c9d2df;
    white-space: normal;
}

.sword-forge-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.sword-check {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: center;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(105, 211, 159, 0.08);
    border: 1px solid rgba(105, 211, 159, 0.24);
}

.sword-check input {
    grid-row: span 2;
}

.sword-check em {
    color: var(--sword-jade);
    font-style: normal;
    font-size: 12px;
}

.sword-forge-btn {
    min-height: 46px;
    padding: 0 18px;
    box-shadow: 0 0 24px rgba(255, 122, 26, 0.22);
}

.sword-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.sword-layout main,
.sword-layout aside {
    display: grid;
    gap: 16px;
}

.sword-summary {
    display: grid;
    grid-template-columns: minmax(210px, 270px) 1fr;
    gap: 14px;
    align-items: center;
    padding: 16px;
}

.sword-summary strong {
    display: block;
    margin: 4px 0;
    font-size: 30px;
    color: #fef3c7;
}

.sword-summary small {
    color: var(--sword-cyan);
}

.sword-mult-bars {
    display: grid;
    gap: 8px;
}

.sword-mult-row {
    display: grid;
    grid-template-columns: 44px 1fr 58px;
    gap: 8px;
    align-items: center;
    min-width: 0;
    font-size: 13px;
}

.sword-mult-row strong {
    margin: 0;
    text-align: right;
    font-size: 12px;
    color: var(--quality-color, #d7dee8);
    white-space: nowrap;
}

.sword-mult-track,
.sword-entry-meter,
.sword-iron-exp {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

.sword-mult-track i,
.sword-entry-meter i,
.sword-iron-exp i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--quality-color, #90a4b8), #fff1b8);
    box-shadow: 0 0 16px color-mix(in srgb, var(--quality-color, #90a4b8) 55%, transparent);
}

.sword-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 10px;
}

.sword-section-head h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.sword-billet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
}

.sword-billet-global-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(246, 198, 91, 0.24);
    border-radius: 8px;
    background: rgba(8, 13, 22, 0.58);
}

.sword-billet-global-actions button {
    min-height: 32px;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
}

.sword-billet-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
        #101722;
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
    animation: swordCardIn .46s ease both;
    animation-delay: var(--reveal-offset, 0ms);
}

.sword-billet-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(246,198,91,.8), rgba(110,231,249,.72), transparent);
}

.sword-billet-card::after {
    content: none;
}

.sword-card-sword {
    position: absolute;
    right: 7px;
    bottom: 14px;
    width: 126px;
    height: 66px;
    pointer-events: none;
    opacity: 0.22;
    transform: rotate(-33deg);
    transform-origin: 74% 62%;
    filter: drop-shadow(0 0 10px rgba(110, 231, 249, 0.24));
    z-index: 0;
}

.sword-card-sword i {
    position: absolute;
    display: block;
}

.sword-card-blade {
    left: 8px;
    top: 24px;
    width: 88px;
    height: 15px;
    clip-path: polygon(0 50%, 10% 10%, 84% 10%, 100% 50%, 84% 90%, 10% 90%);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(164, 221, 240, 0.72) 46%, rgba(255,255,255,0.96) 50%, rgba(108, 141, 156, 0.72) 54%, rgba(255,255,255,0.82));
}

.sword-card-guard {
    left: 91px;
    top: 15px;
    width: 10px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe8a8, #c98f32);
    box-shadow: 0 0 8px rgba(246, 198, 91, 0.42);
}

.sword-card-hilt {
    left: 99px;
    top: 27px;
    width: 22px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6f4a2e, #d8a45a, #6f4a2e);
}

.sword-card-pommel {
    left: 118px;
    top: 24px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff2b8, #c98f32 62%, #69421d);
}

.sword-billet-card[open] .sword-card-sword {
    opacity: 0.12;
    right: 18px;
    top: 62px;
    bottom: auto;
    transform: rotate(-25deg) scale(1.15);
}

.sword-billet-title {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.sword-billet-title span {
    color: var(--sword-muted);
    font-size: 12px;
}

.sword-billet-title strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
}

.sword-billet-title i {
    color: #e5eef8;
    text-shadow: 0 0 14px rgba(110, 231, 249, 0.38);
}

.sword-entry-list {
    display: grid;
    gap: 7px;
}

.sword-entry {
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--quality-color, #9aa8ba) 34%, transparent);
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--quality-color, #9aa8ba) 12%, transparent), rgba(6, 10, 18, 0.58));
}

.sword-entry-feedbar {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 7px;
    align-items: center;
    min-height: 30px;
    overflow: hidden;
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(148, 163, 184, 0.14);
}

.sword-entry-feedbar > i {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--quality-color, #90a4b8) 72%, #111827), color-mix(in srgb, var(--quality-color, #90a4b8) 48%, #fff1b8));
    box-shadow: 0 0 14px color-mix(in srgb, var(--quality-color, #90a4b8) 40%, transparent);
}

.sword-entry-feedbar > span,
.sword-entry-feedbar > strong,
.sword-entry-feedbar > em {
    position: relative;
    z-index: 1;
}

.sword-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 8px;
}

.sword-entry-head strong {
    margin-left: auto;
    color: var(--quality-color, #e8eef6);
}

.sword-entry-head em {
    padding: 2px 6px;
    border-radius: 999px;
    color: #172033;
    background: #ffe08a;
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}

.sword-entry-feedbar em {
    padding: 2px 6px;
    border-radius: 999px;
    color: #172033;
    background: #ffe08a;
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
}

.sword-quality-pill {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--quality-color, #d7dee8);
    background: color-mix(in srgb, var(--quality-color, #9aa8ba) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--quality-color, #9aa8ba) 38%, transparent);
    font-size: 12px;
}

.sword-entry-actions,
.sword-billet-tools,
.sword-luck-actions {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto minmax(94px, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
}

.sword-entry-actions input,
.sword-entry-actions select,
.sword-billet-tools select,
.sword-shop-item input,
.sword-luck-grid input {
    min-width: 0;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(5, 9, 15, 0.76);
    color: #eef2f7;
    padding: 0 9px;
}

.sword-entry-actions button,
.sword-billet-tools button,
.sword-shop-item button,
.sword-luck-actions button {
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.92);
    color: #eff6ff;
    padding: 0 10px;
    white-space: nowrap;
}

.sword-entry-actions button:hover,
.sword-billet-tools button:hover,
.sword-shop-item button:hover,
.sword-luck-actions button:hover {
    border-color: rgba(110, 231, 249, 0.56);
    box-shadow: 0 0 0 2px rgba(110, 231, 249, 0.1);
}

.sword-billet-tools {
    grid-template-columns: minmax(110px, 1fr) auto auto auto;
    align-items: center;
}

.sword-billet-tools .danger-btn {
    background: rgba(127, 29, 29, 0.78);
    border-color: rgba(248, 113, 113, 0.34);
}

.sword-empty-panel {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: var(--sword-muted);
}

.sword-side-panel,
.sword-iron {
    padding: 14px;
}

.sword-iron {
    position: relative;
}

.sword-iron-help-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    min-height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(246, 198, 91, 0.48);
    background: rgba(15, 23, 42, 0.88);
    color: #ffe4a3;
    font-weight: 900;
    line-height: 1;
}

.sword-help-modal {
    display: grid;
    gap: 10px;
    color: #dbe6f3;
    line-height: 1.6;
}

.sword-help-modal p {
    margin: 0;
}

.sword-help-levels {
    display: grid;
    gap: 7px;
}

.sword-help-levels div {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid rgba(246, 198, 91, 0.18);
    border-radius: 7px;
    background: rgba(8, 13, 22, 0.42);
}

.sword-help-levels strong {
    color: #f6c65b;
    white-space: nowrap;
}

.sword-help-levels span {
    color: #dbe6f3;
}

.sword-shop-grid {
    display: grid;
    gap: 10px;
}

.sword-shop-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 64px auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.sword-shop-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(105, 211, 159, 0.12);
    color: var(--sword-jade);
}

.sword-shop-item.glass .sword-shop-icon {
    background: rgba(110, 231, 249, 0.12);
    color: var(--sword-cyan);
}

.sword-shop-item strong {
    display: block;
    margin-bottom: 2px;
}

.sword-shop-item span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
}

.sword-iron-top {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: center;
    padding-right: 32px;
}

.sword-iron-art {
    position: relative;
    width: 88px;
    aspect-ratio: 1;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.24), transparent 22%),
        linear-gradient(145deg, #2d3748, #0f172a);
    border: 1px solid color-mix(in srgb, var(--quality-color, #8290a3) 32%, transparent);
    box-shadow: inset 0 0 18px rgba(255,255,255,.04), 0 0 22px color-mix(in srgb, var(--quality-color, #8290a3) 22%, transparent);
}

.sword-meteor-core {
    width: 54px;
    aspect-ratio: 1;
    transform: rotate(18deg);
    border-radius: 32% 48% 40% 52%;
    background:
        linear-gradient(135deg, rgba(255,255,255,.44), transparent 18%),
        linear-gradient(145deg, var(--quality-color, #7f8ea3), #1f2937 64%, #070b12);
    box-shadow: 0 0 18px color-mix(in srgb, var(--quality-color, #7f8ea3) 48%, transparent);
}

.sword-iron-info strong {
    display: block;
    margin: 2px 0 8px;
    font-size: 26px;
}

.sword-iron-effects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.sword-iron-effects span {
    min-width: 0;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    color: #dbe6f3;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 12px;
}

.sword-luck-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sword-luck-grid label {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    align-items: center;
    padding: 9px;
    border-color: color-mix(in srgb, var(--quality-color, #9aa8ba) 24%, transparent);
}

.sword-luck-grid label span {
    color: var(--quality-color, #d7dee8);
}

.sword-luck-grid label strong {
    color: #fff7d6;
}

.sword-luck-grid input {
    grid-column: 1 / -1;
    width: 100%;
}

.sword-luck-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}

.sword-luck-actions button[data-action="sword-iron-blessing"] {
    grid-column: 1 / -1;
    border-color: rgba(251, 191, 36, 0.34);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.92), rgba(30, 41, 59, 0.94));
    color: #fde68a;
}

.quality-common { --quality-color: #b8c0cc; }
.quality-rare { --quality-color: #5bb6ff; }
.quality-exquisite { --quality-color: #45e0c4; }
.quality-legendary { --quality-color: #f7c948; }
.quality-epic { --quality-color: #ffd54f; }
.quality-worldShattering { --quality-color: #ff5f5f; }

@keyframes swordFlame {
    from { transform: translateX(-50%) scale(0.96, 1.03) rotate(-1deg); filter: brightness(0.95); }
    to { transform: translateX(-50%) scale(1.05, 0.98) rotate(2deg); filter: brightness(1.16); }
}

@keyframes swordBladePulse {
    0%, 100% { box-shadow: 0 0 18px rgba(251, 146, 60, 0.42); }
    50% { box-shadow: 0 0 34px rgba(110, 231, 249, 0.36), 0 0 22px rgba(251, 146, 60, 0.6); }
}

@keyframes swordSpark {
    from { transform: translate(0, 0) rotate(18deg); opacity: 0; }
    18% { opacity: 1; }
    to { transform: translate(26px, -86px) rotate(36deg); opacity: 0; }
}

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

@media (max-width: 980px) {
    .sword-hero-main,
    .sword-layout,
    .sword-summary {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .sword-forging-page {
        padding-top: 8px;
    }

    .sword-hero-main {
        padding: 14px;
        gap: 14px;
    }

    .sword-forge-scene {
        min-height: 180px;
    }

    .sword-hero-stats,
    .sword-iron-effects,
    .sword-luck-grid {
        grid-template-columns: 1fr;
    }

    .sword-entry-actions,
    .sword-billet-tools,
    .sword-shop-item {
        grid-template-columns: 1fr 1fr;
    }

    .sword-shop-item > div:nth-child(2) {
        grid-column: span 1;
    }

    .sword-shop-icon {
        width: 38px;
        height: 38px;
    }

    .sword-mult-row {
        grid-template-columns: 44px 1fr 62px;
    }
}

/* 铸剑系统最终布局修正：覆盖全局窄屏/按钮规则，保证桌面与手机都不塌陷 */
#sword-forging-view {
    width: 100%;
}

.sword-forging-shell {
    max-width: min(1420px, calc(100vw - 30px));
}

.sword-hero {
    padding: 0;
}

.sword-hero-main {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-items: stretch;
}

.sword-forge-scene {
    min-height: 260px;
}

.sword-hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.sword-hero-copy h3 {
    writing-mode: horizontal-tb;
    max-width: 760px;
    word-break: keep-all;
    overflow-wrap: normal;
}

.sword-hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.sword-hero-stats div {
    min-height: 86px;
}

.sword-hero-stats span,
.sword-hero-stats strong,
.sword-hero-stats small {
    writing-mode: horizontal-tb;
}

.sword-forge-console {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    padding: 0 24px 24px;
}

.sword-resource-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sword-resource-line span {
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    color: #aeb9c8;
    background: rgba(8, 13, 22, 0.52);
    font-size: 12px;
}

.sword-resource-line strong {
    color: #fef3c7;
}

.sword-console-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(170px, auto);
    gap: 10px;
    align-items: stretch;
}

.sword-console-item {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(8, 13, 22, 0.68);
}

.sword-console-item.agarwood {
    border-color: rgba(105, 211, 159, 0.26);
}

.sword-console-item.glass {
    border-color: rgba(110, 231, 249, 0.24);
}

.sword-console-item small {
    color: #99a8ba;
}

.sword-check {
    width: 100%;
    min-height: 54px;
    cursor: pointer;
}

.sword-check input {
    width: 18px;
    height: 18px;
    accent-color: #f6c65b;
    cursor: pointer;
}

.sword-check span,
.sword-check em {
    writing-mode: horizontal-tb;
}

.sword-buy-inline {
    display: grid;
    grid-template-columns: minmax(70px, 96px) minmax(120px, auto);
    gap: 8px;
}

.sword-buy-inline input,
.sword-console-item input {
    width: 100%;
    min-width: 0;
    height: 38px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(5, 9, 15, 0.78);
    color: #eef2f7;
    padding: 0 10px;
}

.sword-buy-inline button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.sword-glass-status {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
}

.sword-glass-status i {
    color: #6ee7f9;
}

.sword-glass-status span {
    color: #e8eef6;
}

.sword-glass-status strong {
    min-width: 34px;
    text-align: right;
    color: #fef3c7;
    font-size: 22px;
}

.sword-glass-status em {
    grid-column: 1 / -1;
    color: #99a8ba;
    font-size: 12px;
    font-style: normal;
}

.sword-forge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 8px;
    font-size: 16px;
}

.sword-forge-btn span {
    white-space: nowrap;
}

.sword-forge-tenfold-btn {
    border-color: rgba(248, 113, 113, 0.42);
    background: linear-gradient(135deg, #7f1d1d, #c2410c 52%, #f59e0b);
    box-shadow: 0 0 28px rgba(248, 113, 113, 0.28);
}

.sword-forge-tenfold-btn:not(:disabled):hover {
    box-shadow: 0 0 34px rgba(251, 146, 60, 0.42);
}

.sword-forge-extra-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.sword-forge-extra-actions button {
    min-height: 36px;
    margin: 0;
    border-radius: 7px;
    border: 1px solid rgba(246, 198, 91, 0.28);
    background: rgba(30, 41, 59, 0.88);
    color: #f6e6bd;
    font-size: 13px;
}

.sword-forge-extra-actions button:last-child {
    border-color: rgba(110, 231, 249, 0.28);
    color: #c9f6ff;
}

.sword-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.sword-billet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sword-billet-card {
    display: block;
    min-width: 0;
}

.sword-billet-card > summary {
    list-style: none;
}

.sword-billet-card > summary::-webkit-details-marker {
    display: none;
}

.sword-billet-title {
    cursor: pointer;
    margin-bottom: 8px;
}

.sword-billet-title::after {
    content: "展开";
    align-self: center;
    padding: 4px 8px;
    border: 1px solid rgba(246, 198, 91, 0.34);
    border-radius: 999px;
    color: #f8d98d;
    background: rgba(246, 198, 91, 0.08);
    font-size: 12px;
}

.sword-billet-card[open] .sword-billet-title::after {
    content: "收起";
}

.sword-tenfold-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 1px 6px;
    border: 1px solid rgba(251, 146, 60, 0.42);
    border-radius: 999px;
    background: rgba(127, 29, 29, 0.5);
    color: #fed7aa;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    vertical-align: middle;
}

.sword-billet-meta {
    display: grid;
    justify-items: end;
    gap: 3px;
    margin-left: auto;
}

.sword-billet-meta em {
    color: var(--quality-color, #e8eef6);
    font-style: normal;
    font-size: 12px;
    white-space: nowrap;
}

.sword-billet-meta small {
    color: #9aa8ba;
}

.sword-billet-preview {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 6px;
    min-height: 18px;
    margin: 6px 0 0;
}

.sword-billet-preview span {
    width: 28px;
    height: 8px;
    border-radius: 999px;
    background: var(--quality-color, #9aa8ba);
    box-shadow: 0 0 10px color-mix(in srgb, var(--quality-color, #9aa8ba) 38%, transparent);
}

.sword-billet-quick {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.sword-batch-select {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.sword-batch-select span {
    color: #aeb9c8;
    font-size: 11px;
    white-space: nowrap;
}

.sword-billet-quick .sword-batch-select,
.sword-billet-tools .sword-batch-select,
.sword-billet-global-actions .sword-batch-select {
    grid-column: 1 / -1;
}

.sword-batch-select select {
    width: 100%;
    min-width: 0;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(5, 9, 15, 0.76);
    color: #eef2f7;
    padding: 0 8px;
}

.sword-billet-quick button {
    min-height: 30px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11px;
}

.sword-billet-card[open] .sword-billet-quick {
    display: none;
}

.sword-billet-detail {
    position: relative;
    z-index: 1;
    display: none;
    margin-top: 12px;
}

.sword-billet-card[open] .sword-billet-detail {
    display: grid;
    gap: 12px;
}

.sword-entry-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.sword-feed-control,
.sword-reshape-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.sword-reshape-control {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.sword-reshape-control span {
    color: #aeb9c8;
    font-size: 12px;
    white-space: nowrap;
}

.sword-feed-control input,
.sword-reshape-control select {
    width: 100%;
}

.sword-billet-tools {
    grid-template-columns: minmax(105px, 1fr) auto auto auto;
}

.sword-result-modal {
    position: relative;
    display: grid;
    gap: 16px;
    color: #eef2f7;
}

.sword-result-modal.has-world::before,
.sword-result-modal.has-world::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: -18px;
    border-radius: 14px;
    background:
        conic-gradient(from 0deg, transparent, rgba(255, 95, 95, 0.42), rgba(255, 238, 138, 0.36), transparent 38%);
    filter: blur(10px);
    opacity: 0.9;
    animation: swordWorldSpin 2.4s linear infinite;
    z-index: -1;
}

.sword-result-modal.has-world::after {
    inset: 4px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.56), transparent 7%),
        radial-gradient(circle at 72% 24%, rgba(255, 238, 138, 0.72), transparent 8%),
        radial-gradient(circle at 60% 78%, rgba(255, 95, 95, 0.56), transparent 9%);
    filter: none;
    animation: swordWorldSparkle 1.1s ease-in-out infinite alternate;
}

.sword-result-core {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(246, 198, 91, 0.28);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 122, 26, 0.28), transparent 36%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(8, 13, 22, 0.96));
}

.sword-result-blade {
    width: min(260px, 86%);
    height: 20px;
    border-radius: 999px 999px 999px 3px;
    transform: rotate(-7deg);
    background: linear-gradient(90deg, #f8fafc, #67e8f9 34%, #fb923c 76%, #fef3c7);
    box-shadow: 0 0 30px rgba(251, 146, 60, 0.5), 0 0 18px rgba(103, 232, 249, 0.32);
    animation: swordBladePulse 1.4s ease-in-out infinite;
}

.sword-result-core strong {
    color: #fef3c7;
    font-size: 22px;
}

.sword-result-core span {
    color: #9aa8ba;
}

.sword-exp-result {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    align-items: center;
    color: #9aa8ba;
}

.sword-exp-result > span,
.sword-exp-result > strong,
.sword-exp-result > em {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(8, 13, 22, 0.72);
    font-size: 12px;
}

.sword-exp-result > strong {
    color: #fef3c7;
}

.sword-exp-result > em {
    color: #1b1408;
    border-color: rgba(255, 224, 120, 0.82);
    background: linear-gradient(90deg, #ffe08a, #ffb84d);
    box-shadow: 0 0 18px rgba(255, 184, 77, 0.5);
    font-style: normal;
    font-weight: 800;
    animation: swordCritBadge 1.2s ease-in-out infinite;
}

.sword-result-entry-list {
    display: grid;
    gap: 8px;
}

.sword-result-entry {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--quality-color, #9aa8ba) 34%, transparent);
    border-radius: 8px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--quality-color, #9aa8ba) 14%, transparent), rgba(8, 13, 22, 0.72));
    animation: swordCardIn .38s ease both;
    animation-delay: var(--reveal-offset, 0ms);
}

.sword-result-entry.quality-legendary::before,
.sword-result-entry.quality-epic::before,
.sword-result-entry.quality-worldShattering::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -70%;
    width: 70%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.62), transparent);
    animation: swordLegendSweep 1.55s ease-in-out infinite;
    animation-delay: calc(var(--reveal-offset, 0ms) + 260ms);
}

.sword-result-entry.quality-legendary {
    animation-duration: .52s;
}

.sword-result-entry.quality-epic {
    animation: swordCardIn .38s ease both, swordEpicBreath 1.65s ease-in-out infinite;
    animation-delay: var(--reveal-offset, 0ms), calc(var(--reveal-offset, 0ms) + 260ms);
}

.sword-result-entry.quality-worldShattering {
    border-color: rgba(255, 115, 115, 0.58);
    background: linear-gradient(90deg, rgba(255, 95, 95, 0.18), rgba(12, 16, 25, 0.78) 54%, rgba(246, 198, 91, 0.1));
    animation: swordCardIn .38s ease both, swordWorldPulse 1.8s ease-in-out infinite;
    animation-delay: var(--reveal-offset, 0ms), calc(var(--reveal-offset, 0ms) + 260ms);
}

.sword-result-entry.quality-worldShattering::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 50%, rgba(255,255,255,0.22), transparent 9%),
        radial-gradient(circle at 82% 42%, rgba(255,238,138,0.24), transparent 8%),
        linear-gradient(90deg, transparent, rgba(255,95,95,0.12), transparent);
    mix-blend-mode: screen;
    opacity: 0.28;
    animation: swordWorldFlash 1.8s ease-in-out infinite;
    animation-delay: calc(var(--reveal-offset, 0ms) + 340ms);
}

.sword-result-entry span {
    position: relative;
    z-index: 1;
    color: var(--quality-color, #e8eef6);
}

.sword-result-entry strong {
    position: relative;
    z-index: 1;
    color: #fff7d6;
}

.sword-result-entry em {
    position: relative;
    z-index: 1;
    padding: 2px 6px;
    border-radius: 999px;
    color: #172033;
    background: #ffe08a;
    font-size: 11px;
    font-style: normal;
}

.sword-result-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.sword-result-actions button {
    min-height: 38px;
    margin: 0;
    border-radius: 7px;
    border: 1px solid rgba(246, 198, 91, 0.34);
    background: rgba(30, 41, 59, 0.92);
    color: #f6e6bd;
}

.sword-result-actions .btn-primary {
    border-color: rgba(110, 231, 249, 0.34);
    color: #071016;
    background: linear-gradient(90deg, #f6c65b, #6ee7f9);
    font-weight: 800;
}

@keyframes swordLegendSweep {
    from { left: -70%; opacity: 0; }
    18% { opacity: 1; }
    to { left: 130%; opacity: 0; }
}

@keyframes swordEpicBreath {
    0%, 100% {
        box-shadow: 0 0 10px color-mix(in srgb, var(--quality-color, #d77cf2) 20%, transparent);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 22px color-mix(in srgb, var(--quality-color, #d77cf2) 54%, transparent);
        filter: brightness(1.16);
    }
}

@keyframes swordWorldPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 95, 95, 0.24), 0 0 3px rgba(255, 238, 138, 0.34) inset;
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 18px rgba(255, 95, 95, 0.42), 0 0 8px rgba(255, 238, 138, 0.38) inset;
        transform: translateY(0);
    }
}

@keyframes swordWorldFlash {
    0%, 100% { opacity: 0.14; }
    50% { opacity: 0.36; }
}

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

@keyframes swordWorldSparkle {
    from { opacity: 0.32; transform: scale(0.96); }
    to { opacity: 0.86; transform: scale(1.02); }
}

@keyframes swordCritBadge {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.04); filter: brightness(1.16); }
}

@media (max-width: 1120px) {
    .sword-layout {
        grid-template-columns: 1fr;
    }

    .sword-console-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sword-forge-btn {
        grid-column: 1 / -1;
        min-height: 54px;
    }
}

@media (max-width: 980px) {
    .sword-billet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .sword-forging-shell {
        max-width: 100%;
    }

    .sword-hero-main,
    .sword-forge-console {
        padding-inline: 14px;
    }

    .sword-forge-console {
        padding-bottom: 14px;
    }

    .sword-console-grid,
    .sword-billet-grid,
    .sword-summary {
        grid-template-columns: 1fr;
    }

    .sword-forge-scene {
        min-height: 210px;
    }

    .sword-buy-inline,
    .sword-feed-control,
    .sword-reshape-control,
    .sword-billet-tools {
        grid-template-columns: 1fr;
    }

    .sword-billet-title {
        grid-template-columns: 1fr auto;
    }

    .sword-billet-meta {
        justify-items: start;
        grid-column: 1 / -1;
    }
}

/* 铸剑页采用统一手机壳布局：电脑端也按 450px 宽体验设计 */
#sword-forging-view .sword-forging-shell {
    width: 100%;
    max-width: 100%;
}

#sword-forging-view .sword-forging-page {
    padding-top: 4px;
}

#sword-forging-view .sword-hero {
    border-radius: 8px;
}

#sword-forging-view .sword-hero-main {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
}

#sword-forging-view .sword-forge-scene {
    min-height: 190px;
}

#sword-forging-view .sword-forge-flame {
    width: 142px;
    height: 142px;
}

#sword-forging-view .sword-anvil {
    width: 190px;
}

#sword-forging-view .sword-anvil::before {
    left: -20px;
    width: 230px;
}

#sword-forging-view .sword-blade {
    width: 148px;
}

#sword-forging-view .sword-hero-copy h3 {
    margin: 10px 0 12px;
    max-width: 100%;
    font-size: 25px;
    line-height: 1.18;
    writing-mode: horizontal-tb;
    word-break: keep-all;
    overflow-wrap: normal;
}

#sword-forging-view .sword-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#sword-forging-view .sword-hero-stats div {
    min-height: 76px;
    padding: 9px;
}

#sword-forging-view .sword-hero-stats strong {
    font-size: 20px;
}

#sword-forging-view .sword-forge-console {
    padding: 0 14px 14px;
}

#sword-forging-view .sword-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#sword-forging-view .sword-console-item {
    padding: 10px;
    align-content: start;
    gap: 7px;
}

#sword-forging-view .sword-buy-inline {
    grid-template-columns: minmax(48px, 1fr) auto;
    gap: 6px;
}

#sword-forging-view .sword-buy-inline button {
    min-width: 54px;
    padding-inline: 8px;
    font-size: 12px;
}

#sword-forging-view .sword-check {
    min-height: 58px;
    padding: 8px;
}

#sword-forging-view .sword-check span {
    font-size: 13px;
}

#sword-forging-view .sword-check em,
#sword-forging-view .sword-console-item small,
#sword-forging-view .sword-glass-status em {
    font-size: 11px;
}

#sword-forging-view .sword-glass-status {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
}

#sword-forging-view .sword-glass-status strong {
    min-width: 24px;
    font-size: 20px;
}

#sword-forging-view .sword-forge-btn {
    grid-column: 1 / -1;
    min-height: 52px;
    font-size: 15px;
}

#sword-forging-view .sword-layout {
    grid-template-columns: 1fr;
    gap: 12px;
}

#sword-forging-view .sword-layout main,
#sword-forging-view .sword-layout aside {
    gap: 12px;
}

#sword-forging-view .sword-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
}

#sword-forging-view .sword-summary strong {
    font-size: 26px;
}

#sword-forging-view .sword-mult-row {
    grid-template-columns: 42px minmax(0, 62%) 46px;
    gap: 5px;
}

#sword-forging-view .sword-mult-track {
    width: 100%;
}

#sword-forging-view .sword-mult-row strong {
    max-width: 46px;
    overflow: hidden;
    text-overflow: clip;
    font-size: 11px;
}

#sword-forging-view .sword-billet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#sword-forging-view .sword-billet-card {
    padding: 10px;
}

#sword-forging-view .sword-billet-card[open] {
    grid-column: 1 / -1;
}

#sword-forging-view .sword-billet-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: start;
}

#sword-forging-view .sword-billet-title > i {
    display: none;
}

#sword-forging-view .sword-billet-title strong {
    font-size: 15px;
}

#sword-forging-view .sword-billet-title::after {
    padding: 3px 6px;
    font-size: 11px;
}

#sword-forging-view .sword-billet-meta {
    grid-column: 1 / -1;
    justify-items: start;
}

#sword-forging-view .sword-billet-preview {
    flex-wrap: wrap;
    gap: 4px;
}

#sword-forging-view .sword-billet-preview span {
    width: 22px;
}

#sword-forging-view .sword-billet-card[open] .sword-billet-preview span {
    width: 30px;
}

#sword-forging-view .sword-feed-control {
    grid-template-columns: minmax(58px, 1fr) auto;
}

#sword-forging-view .sword-reshape-control {
    grid-template-columns: minmax(76px, 1fr) auto;
}

#sword-forging-view .sword-billet-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#sword-forging-view .sword-billet-tools .sword-batch-select {
    grid-column: 1 / -1;
}

#sword-forging-view .sword-billet-global-actions {
    grid-template-columns: 1fr 1fr;
}

#sword-forging-view .sword-billet-global-actions .sword-batch-select {
    grid-column: 1 / -1;
}

#sword-forging-view .sword-iron {
    padding: 12px;
}

#sword-forging-view .sword-iron-effects {
    grid-template-columns: 1fr;
}

#sword-forging-view .sword-luck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#sword-forging-view .sword-luck-actions {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 380px) {
    #sword-forging-view .sword-hero-stats,
    #sword-forging-view .sword-luck-grid,
    #sword-forging-view .sword-luck-actions,
    #sword-forging-view .sword-billet-tools,
    #sword-forging-view .sword-billet-global-actions {
        grid-template-columns: 1fr;
    }

    #sword-forging-view .sword-buy-inline {
        grid-template-columns: 1fr;
    }
}

#sword-forging-view .sword-entry {
    padding: 5px;
}

#sword-forging-view .sword-entry-actions {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 6px;
    margin-top: 4px;
    align-items: center;
}

#sword-forging-view .sword-feed-control,
#sword-forging-view .sword-reshape-control {
    display: flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
    height: 28px;
}

#sword-forging-view .sword-feed-control input,
#sword-forging-view .sword-reshape-control select,
#sword-forging-view .sword-feed-control button,
#sword-forging-view .sword-reshape-control button {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px;
    margin: 0;
    padding: 0 6px !important;
    font-size: 11px;
    line-height: 26px;
}

#sword-forging-view .sword-entry-feedbar {
    min-height: 26px;
    grid-template-columns: auto 1fr auto;
    padding-block: 3px;
}

#sword-forging-view .sword-entry-feedbar .sword-quality-pill {
    max-width: 64px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 900;
    color: #08111c;
    background: linear-gradient(180deg, color-mix(in srgb, var(--quality-color, #d7dee8) 96%, #ffffff), color-mix(in srgb, var(--quality-color, #d7dee8) 76%, #111827));
    border-color: rgba(255, 255, 255, 0.56);
    box-shadow: 0 0 10px color-mix(in srgb, var(--quality-color, #d7dee8) 46%, transparent);
    text-shadow: 0 1px rgba(255,255,255,0.26);
}

#sword-forging-view .sword-entry-feedbar strong {
    font-size: 12px;
}

#sword-forging-view .sword-entry-feedbar em {
    display: none;
}

#sword-forging-view .sword-entry-feedbar em:first-of-type {
    display: inline-block;
}

/* --- Dream System Visual Rebuild --- */
.dream-page {
    --dream-ink: #070a12;
    --dream-night: #0c1020;
    --dream-violet: #2b1f46;
    --dream-gold: #f0c66a;
    --dream-cyan: #75d7ef;
    --dream-red: #b64a4a;
    color: #eef2f7;
}

.dream-title-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(240, 198, 106, 0.34);
    background:
        linear-gradient(135deg, rgba(7, 10, 18, 0.94), rgba(23, 20, 40, 0.9) 48%, rgba(12, 24, 36, 0.86)),
        repeating-linear-gradient(120deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 44px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 0 44px rgba(117, 215, 239, 0.04);
}

.dream-title-panel::after,
.dream-shell::before,
.dream-gate-card::before,
.dream-destiny-setup-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    background:
        linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.045) 46%, transparent 66%),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(240, 198, 106, 0.025) 29px 30px);
    opacity: 0.42;
}

.dream-title-kicker,
.dream-section-kicker {
    display: inline-block;
    margin-bottom: 4px;
    color: rgba(117, 215, 239, 0.86);
    font-size: 12px;
    font-weight: 800;
}

.dream-title-panel h2 {
    font-size: 30px;
    line-height: 1.1;
}

.dream-title-panel p {
    max-width: 760px;
    color: rgba(232, 238, 247, 0.78);
}

.dream-shell {
    position: relative;
    border-color: rgba(240, 198, 106, 0.26);
    background:
        linear-gradient(180deg, rgba(11, 13, 24, 0.96), rgba(12, 18, 32, 0.92)),
        repeating-linear-gradient(90deg, transparent 0 40px, rgba(117, 215, 239, 0.025) 41px 42px);
}

.dream-tab-body {
    position: relative;
    z-index: 1;
}

.dream-gate-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(220px, 300px);
    gap: 18px;
    align-items: center;
    min-height: 360px;
    padding: clamp(16px, 2vw, 26px);
    overflow: hidden;
    border-color: transparent;
    background:
        linear-gradient(135deg, rgba(9, 11, 20, 0.94), rgba(31, 23, 50, 0.82) 52%, rgba(13, 31, 40, 0.8)),
        repeating-linear-gradient(140deg, transparent 0 42px, rgba(240, 198, 106, 0.035) 43px 44px);
}

.dream-hard-theme .dream-title-panel,
.dream-hard-theme .dream-shell,
.dream-gate-card-hard,
.dream-destiny-setup-hard,
.dream-hard-run .dream-run-head,
.dream-hard-run .dream-progress-block,
.dream-hard-run .dream-material-strip,
.dream-hard-run .dream-fate-timeline,
.dream-hard-run .dream-wheel-panel,
.dream-hard-run .dream-boss-panel,
.dream-hard-run .dream-self-status,
.dream-hard-run .dream-selected-destiny-panel,
.dream-hard-run .dream-settlement-panel {
    border-color: rgba(255, 91, 91, 0.42);
}

.dream-gate-card-hard,
.dream-destiny-setup-hard,
.dream-hard-run .dream-run-head,
.dream-hard-run .dream-progress-block,
.dream-hard-run .dream-material-strip,
.dream-hard-run .dream-fate-timeline,
.dream-hard-run .dream-wheel-panel,
.dream-hard-run .dream-boss-panel,
.dream-hard-run .dream-self-status,
.dream-hard-run .dream-selected-destiny-panel {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 78, 78, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(31, 9, 13, 0.94), rgba(55, 18, 26, 0.84) 52%, rgba(19, 10, 20, 0.88)),
        repeating-linear-gradient(140deg, transparent 0 42px, rgba(255, 91, 91, 0.04) 43px 44px);
    box-shadow: 0 0 30px rgba(182, 34, 34, 0.18), inset 0 0 42px rgba(255, 91, 91, 0.06);
}

.dream-hard-theme .dream-title-kicker,
.dream-hard-theme .dream-section-kicker,
.dream-hard-run .dream-run-head h3,
.dream-destiny-setup-hard .dream-destiny-setup-head h3,
.dream-gate-card-hard .dream-gate-copy h3 {
    color: #ffd0b8;
}

.dream-hard-theme .dream-title-panel,
.dream-hard-theme .dream-shell {
    background:
        linear-gradient(180deg, rgba(25, 8, 12, 0.97), rgba(18, 12, 24, 0.93)),
        repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 91, 91, 0.035) 41px 42px);
}

.dream-gate-card-hard .dream-gate-start {
    border-color: rgba(255, 126, 91, 0.72);
    color: #fff1e8;
    background: linear-gradient(90deg, #831f25, #d94b35, #ffb15f);
    box-shadow: 0 0 28px rgba(255, 91, 91, 0.3);
}

.dream-hard-theme .dream-difficulty-option.active {
    border-color: rgba(255, 126, 91, 0.86);
    background: linear-gradient(135deg, rgba(126, 23, 30, 0.88), rgba(57, 16, 22, 0.82));
    box-shadow: 0 0 22px rgba(255, 91, 91, 0.26);
}

.dream-hard-run .dream-progress span {
    background: linear-gradient(90deg, #ff4949, #ff8a4c, #ffd06b);
    box-shadow: 0 0 18px rgba(255, 91, 91, 0.36);
}

.dream-hard-run .dream-run-status.active,
.dream-hard-run .dream-run-status.event,
.dream-hard-run .dream-run-status.completed {
    color: #ffd0b8;
    background: rgba(182, 34, 34, 0.24);
}

.dream-hard-run .dream-settlement-panel {
    background:
        linear-gradient(135deg, rgba(28, 6, 10, 0.9), rgba(45, 16, 22, 0.86)),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(255, 91, 91, 0.035) 29px 30px);
}

.dream-gate-copy,
.dream-gate-summary,
.dream-gate-start {
    position: relative;
    z-index: 1;
}

.dream-gate-copy h3 {
    margin: 0 0 12px;
    color: #fff4d2;
    font-size: 38px;
    line-height: 1.08;
}

.dream-gate-rules {
    margin-top: 18px;
}

.dream-rule-note {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(240, 198, 106, 0.24);
    border-radius: 8px;
    color: rgba(255, 241, 204, 0.82);
    background: rgba(7, 10, 18, 0.42);
    line-height: 1.55;
}

.dream-hard-theme .dream-rule-note {
    border-color: rgba(255, 91, 91, 0.34);
    color: rgba(255, 224, 214, 0.88);
    background: rgba(47, 9, 13, 0.48);
}

.dream-settlement-rule-note {
    margin: 10px 0;
    font-size: 12px;
}

.dream-gate-rules span,
.dream-material-strip span,
.dream-progress-meta span {
    border-color: rgba(240, 198, 106, 0.22);
    background: rgba(7, 10, 18, 0.48);
}

.dream-gate-wheel,
.dream-wheel-core {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
}

.dream-gate-wheel {
    width: min(300px, 100%);
    justify-self: center;
}

.dream-wheel-ring {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(240, 198, 106, 0.38);
    background:
        radial-gradient(circle, rgba(7, 10, 18, 0.66) 0 42%, transparent 43%),
        conic-gradient(from 0deg, rgba(240, 198, 106, 0.0), rgba(240, 198, 106, 0.44), rgba(117, 215, 239, 0.22), rgba(169, 113, 220, 0.26), rgba(240, 198, 106, 0.0));
    box-shadow: 0 0 34px rgba(240, 198, 106, 0.12), inset 0 0 28px rgba(117, 215, 239, 0.08);
    animation: dreamWheelSpin 26s linear infinite;
}

.dream-wheel-ring::before,
.dream-wheel-ring::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(240, 198, 106, 0.34);
}

.dream-wheel-ring::after {
    inset: 30%;
    border-style: solid;
    border-color: rgba(117, 215, 239, 0.22);
    animation: dreamWheelSpin 18s linear infinite reverse;
}

.dream-gate-silhouette,
.dream-wheel-inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    color: #fff3cf;
}

.dream-gate-silhouette i {
    font-size: 42px;
    color: var(--dream-gold);
    filter: drop-shadow(0 0 12px rgba(240, 198, 106, 0.38));
}

.dream-gate-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dream-gate-summary div,
.dream-health-block,
.dream-boss-kv span,
.dream-reward-scroll,
.dream-biography-scroll {
    border: 1px solid rgba(240, 198, 106, 0.22);
    border-radius: 8px;
    background: rgba(7, 10, 18, 0.45);
}

.dream-gate-summary div {
    display: grid;
    gap: 3px;
    padding: 10px;
}

.dream-gate-summary span,
.dream-gate-summary small {
    color: rgba(232, 238, 247, 0.62);
}

.dream-gate-summary strong {
    color: #fff3cf;
    font-size: 15px;
}

.dream-gate-start {
    grid-column: 1 / -1;
    min-height: 52px;
    border-color: rgba(255, 230, 166, 0.62);
    color: #170f05;
    background: linear-gradient(90deg, #e4ad48, #fff0bd, #75d7ef);
    font-weight: 900;
    box-shadow: 0 0 24px rgba(240, 198, 106, 0.24);
}

.dream-gate-actions {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dream-gate-actions .dream-gate-start {
    grid-column: auto;
}

.dream-difficulty-picker {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dream-difficulty-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 230, 166, 0.2);
    border-radius: 10px;
    color: rgba(232, 238, 247, 0.82);
    text-align: left;
    background: rgba(8, 12, 24, 0.68);
}

.dream-difficulty-option.active {
    border-color: rgba(255, 230, 166, 0.72);
    color: #fff4d2;
    background: linear-gradient(135deg, rgba(121, 45, 45, 0.72), rgba(28, 39, 70, 0.72));
    box-shadow: 0 0 18px rgba(240, 102, 102, 0.18);
}

.dream-difficulty-option strong {
    font-size: 15px;
}

.dream-difficulty-option small {
    color: rgba(232, 238, 247, 0.62);
    line-height: 1.45;
}

.dream-destiny-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.dream-destiny-slots {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(240, 198, 106, 0.28);
    border-radius: 8px;
    background: rgba(7, 10, 18, 0.38);
}

.dream-destiny-slot {
    display: grid;
    gap: 8px;
}

.dream-destiny-slot-name {
    color: var(--dream-gold);
    font-size: 12px;
    font-weight: 800;
}

.dream-destiny-slot-card {
    display: grid;
    gap: 5px;
    min-height: 82px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--quality-color, #9aa8ba) 44%, rgba(240,198,106,0.2));
    border-radius: 8px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--quality-color, #9aa8ba) 12%, transparent), rgba(7, 10, 18, 0.7));
}

.dream-destiny-slot-card.empty {
    place-items: center;
    color: rgba(232, 238, 247, 0.42);
    border-style: dashed;
    background: rgba(255,255,255,0.025);
}

.dream-destiny-pool {
    min-width: 0;
}

.dream-destiny-pool-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(232, 238, 247, 0.72);
}

.dream-destiny-pool-head span {
    color: #fff3cf;
    font-weight: 800;
}

.dream-destiny-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dream-destiny-card {
    min-height: 178px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--quality-color, #9aa8ba) 13%, transparent), rgba(7, 10, 18, 0.72)),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.025) 23px 24px);
}

.dream-destiny-card.locked-out {
    opacity: 0.48;
    filter: grayscale(0.35);
}

.dream-mini-card em {
    color: var(--dream-gold);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.dream-run-page {
    display: grid;
    gap: 12px;
}

.dream-run-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: start;
}

.dream-run-side,
.dream-run-center {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.dream-run-details {
    display: block;
}

.dream-run-details > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(240, 198, 106, 0.28);
    border-radius: 8px;
    color: #fff3cf;
    background: rgba(7, 10, 18, 0.46);
    cursor: pointer;
    list-style: none;
}

.dream-run-details > summary::-webkit-details-marker {
    display: none;
}

.dream-run-details > summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 900;
}

.dream-run-details > summary small {
    color: rgba(232, 238, 247, 0.62);
    font-size: 12px;
    text-align: right;
}

.dream-run-details > summary i {
    color: var(--dream-gold);
    transition: transform 160ms ease;
}

.dream-run-details[open] > summary i {
    transform: rotate(180deg);
}

.dream-run-details-body,
.dream-run-details-panels {
    display: grid;
    gap: 12px;
}

.dream-run-details-body {
    margin-top: 10px;
}

.dream-run-details-body > .dream-inner-section + .dream-inner-section,
.dream-run-details-panels > .dream-inner-section + .dream-inner-section {
    margin-top: 0;
}

.dream-run-head,
.dream-progress-block,
.dream-material-strip,
.dream-fate-timeline,
.dream-wheel-panel,
.dream-boss-panel,
.dream-self-status,
.dream-selected-destiny-panel {
    border-color: rgba(240, 198, 106, 0.24);
    background: rgba(7, 10, 18, 0.38);
}

.dream-run-head {
    padding: 12px;
    border: 1px solid rgba(240, 198, 106, 0.24);
    border-radius: 8px;
}

.dream-run-head h3 {
    color: #fff3cf;
}

.dream-run-status {
    border-color: rgba(240, 198, 106, 0.34);
    border-radius: 999px;
    font-weight: 900;
}

.dream-run-status.active { color: #b9eeff; background: rgba(117, 215, 239, 0.13); }
.dream-run-status.event { color: #ffe6a6; background: rgba(240, 198, 106, 0.16); }
.dream-run-status.completed { color: #fff6d6; background: rgba(240, 198, 106, 0.18); }
.dream-run-status.failed { color: #ffb2b2; background: rgba(182, 74, 74, 0.18); }

.dream-progress {
    height: 12px;
    border-color: rgba(240, 198, 106, 0.2);
    background: rgba(7, 10, 18, 0.72);
}

.dream-progress span {
    background: linear-gradient(90deg, #75d7ef, #f0c66a, #b675ff);
    box-shadow: 0 0 16px rgba(240, 198, 106, 0.22);
}

.dream-health-block {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
}

.dream-health-block > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.dream-health-block span,
.dream-stat-grid span {
    color: rgba(232, 238, 247, 0.64);
}

.dream-health-block b,
.dream-stat-grid b {
    color: #fff3cf;
}

.dream-health-bar,
.dream-boss-progress div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}

.dream-health-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #75d7ef, #f0c66a);
}

.dream-buff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.dream-buff-list span {
    padding: 5px 7px;
    border: 1px solid rgba(117, 215, 239, 0.22);
    border-radius: 999px;
    background: rgba(117, 215, 239, 0.07);
    color: rgba(232, 238, 247, 0.78);
    font-size: 12px;
}

.dream-buff-list b {
    color: #75d7ef;
}

.dream-wheel-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 0.92fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 320px;
    padding: clamp(14px, 2vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(240, 198, 106, 0.26);
    border-radius: 8px;
}

.dream-wheel-panel.high-quality {
    border-color: color-mix(in srgb, var(--quality-color, #f0c66a) 58%, rgba(240,198,106,0.26));
    box-shadow: 0 0 24px color-mix(in srgb, var(--quality-color, #f0c66a) 16%, transparent);
}

.dream-wheel-panel.mythic-event {
    animation: dreamMythicPause 720ms ease both;
}

.dream-wheel-panel.mythic-event::after {
    content: "";
    position: absolute;
    inset: -18%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 247, 210, 0.34), transparent 58%);
    animation: dreamMythicGlow 760ms ease both;
}

.dream-wheel-core {
    min-height: 240px;
}

.dream-wheel-inner span {
    color: rgba(232, 238, 247, 0.62);
}

.dream-wheel-inner strong {
    color: #fff3cf;
    font-size: 22px;
}

.dream-current-event {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--quality-color, #f0c66a) 42%, rgba(240,198,106,0.18));
    border-radius: 8px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--quality-color, #f0c66a) 10%, rgba(7, 10, 18, 0.86)), rgba(7, 10, 18, 0.7));
}

.dream-current-event-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: rgba(232, 238, 247, 0.62);
}

.dream-current-event h4 {
    margin: 0;
    color: var(--quality-color, #fff3cf);
    font-size: 27px;
    line-height: 1.15;
}

.dream-current-event p {
    margin: 0;
    color: rgba(232, 238, 247, 0.84);
    line-height: 1.65;
}

.dream-current-event.warning p { color: #ffe2a2; }
.dream-current-event.danger p { color: #ffb3b3; }

.dream-boss-panel {
    position: relative;
    overflow: hidden;
}

.dream-boss-figure {
    position: absolute;
    right: 12px;
    top: 44px;
    color: rgba(182, 74, 74, 0.18);
    font-size: 76px;
}

.dream-boss-panel.ready .dream-boss-figure {
    color: rgba(240, 198, 106, 0.22);
    filter: drop-shadow(0 0 14px rgba(240, 198, 106, 0.28));
}

.dream-boss-panel.near {
    border-color: rgba(240, 198, 106, 0.42);
}

.dream-boss-panel.ready {
    border-color: rgba(255, 240, 189, 0.62);
    box-shadow: inset 0 0 28px rgba(240, 198, 106, 0.12);
}

.dream-boss-kv {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
}

.dream-boss-kv span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    color: rgba(232, 238, 247, 0.66);
}

.dream-boss-kv b {
    color: #fff3cf;
}

.dream-boss-progress {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.dream-boss-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #b64a4a, #f0c66a, #fff4d2);
}

.dream-boss-progress small,
.dream-boss-panel p {
    color: rgba(232, 238, 247, 0.72);
}

.dream-boss-panel p {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    line-height: 1.45;
}

.dream-fate-timeline {
    overflow: hidden;
}

.dream-timeline-track {
    position: relative;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 12px 4px 4px;
}

.dream-timeline-track::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 22px;
    height: 1px;
    background: linear-gradient(90deg, rgba(117,215,239,0.18), rgba(240,198,106,0.38), rgba(182,74,74,0.2));
}

.dream-timeline-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 48px;
    color: rgba(232, 238, 247, 0.66);
    font-size: 12px;
}

.dream-timeline-node i {
    width: 14px;
    height: 14px;
    border: 1px solid var(--quality-color, #9aa8ba);
    border-radius: 50%;
    background: color-mix(in srgb, var(--quality-color, #9aa8ba) 62%, #071016);
    box-shadow: 0 0 12px color-mix(in srgb, var(--quality-color, #9aa8ba) 28%, transparent);
}

.dream-timeline-node.adventure i {
    border-radius: 3px;
    transform: rotate(45deg);
}

.dream-timeline-node.success i {
    width: 18px;
    height: 18px;
    background: #fff0bd;
}

.dream-timeline-node.failed i {
    border-color: #b64a4a;
    background: #5f1e24;
}

.dream-adventure-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(240, 198, 106, 0.44);
    background:
        linear-gradient(135deg, rgba(7,10,18,0.86), rgba(32,22,46,0.82)),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(240,198,106,0.035) 35px 36px);
}

.dream-adventure-orbit {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    border: 1px solid rgba(240, 198, 106, 0.08);
    animation: dreamWheelSpin 38s linear infinite reverse;
    pointer-events: none;
}

.dream-adventure-panel > :not(.dream-adventure-orbit) {
    position: relative;
    z-index: 1;
}

.dream-choice-card {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    border-radius: 8px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--quality-color, #f0c66a) 12%, rgba(7,10,18,0.9)), rgba(7,10,18,0.72));
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dream-choice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28), 0 0 18px color-mix(in srgb, var(--quality-color, #f0c66a) 18%, transparent);
}

.dream-choice-card > i {
    color: var(--quality-color, var(--dream-gold));
    font-size: 24px;
}

.dream-choice-card em {
    color: rgba(232, 238, 247, 0.66);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.dream-choice-card.stable { --choice-tone: #75d7ef; }
.dream-choice-card.breakthrough { --choice-tone: #ff9a6b; }
.dream-choice-card.crown { --choice-tone: #d6a2ff; }

.dream-choice-risk {
    color: rgba(255, 226, 162, 0.88);
    font-size: 12px;
    line-height: 1.35;
}

.dream-choice-cost {
    width: 100%;
    margin-top: auto;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--choice-tone, #f0c66a) 46%, transparent);
    border-radius: 999px;
    color: #071016;
    background: linear-gradient(90deg, var(--choice-tone, #f0c66a), #fff0bd);
    text-align: center;
    font-weight: 900;
}

.dream-settlement-panel {
    border-color: rgba(240, 198, 106, 0.38);
    background:
        linear-gradient(135deg, rgba(7,10,18,0.88), rgba(28,22,40,0.84)),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(240,198,106,0.025) 29px 30px);
}

.dream-settlement-title {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    text-align: center;
}

.dream-settlement-title span {
    color: rgba(117, 215, 239, 0.82);
    font-weight: 800;
}

.dream-settlement-title h3 {
    margin: 0;
    color: #fff3cf;
    font-size: 32px;
}

.dream-settlement-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    gap: 12px;
}

.dream-biography-scroll,
.dream-reward-scroll {
    padding: 14px;
}

.dream-biography-scroll {
    animation: dreamScrollOpen 520ms ease both;
}

.dream-biography-scroll p {
    margin: 0 0 10px;
    color: rgba(232, 238, 247, 0.82);
    line-height: 1.75;
}

.dream-biography-scroll p:last-child {
    margin-bottom: 0;
}

.dream-final-reward {
    border-color: rgba(240, 198, 106, 0.42);
    background: rgba(240, 198, 106, 0.10);
    color: #fff3cf;
    font-weight: 800;
}

.dream-playback-actions {
    position: relative;
    z-index: 5;
    padding: 8px;
    border: 1px solid rgba(240, 198, 106, 0.22);
    border-radius: 8px;
    background: rgba(7,10,18,0.56);
}

.dream-playback-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-color: rgba(240, 198, 106, 0.34);
    background: rgba(18, 28, 42, 0.92);
    color: #f6e6bd;
}

.dream-playback-actions .dream-primary-btn {
    color: #170f05;
    background: linear-gradient(90deg, #e4ad48, #fff0bd);
}

.dream-quality-common { --quality-color: #cfd7e4; }
.dream-quality-rare { --quality-color: #65b7ff; }
.dream-quality-exquisite { --quality-color: #c074f2; }
.dream-quality-heirloom,
.dream-quality-legendary { --quality-color: #f0a94e; }
.dream-quality-epic { --quality-color: #ffcf67; }
.dream-quality-mythic,
.dream-quality-worldShattering { --quality-color: #fff4d2; }

.dream-destiny-card.dream-quality-heirloom::after,
.dream-choice-card.dream-quality-heirloom::after,
.dream-destiny-card.dream-quality-epic::after,
.dream-choice-card.dream-quality-epic::after,
.dream-destiny-card.dream-quality-mythic::after,
.dream-choice-card.dream-quality-mythic::after {
    content: "";
    position: absolute;
    inset: -45% auto -45% -80%;
    width: 65%;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    animation: dreamQualitySweep 2.8s ease-in-out infinite;
}

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

@keyframes dreamQualitySweep {
    0% { left: -80%; opacity: 0; }
    28% { opacity: 0.9; }
    70%, 100% { left: 130%; opacity: 0; }
}

@keyframes dreamMythicPause {
    0% { transform: scale(1); filter: brightness(1); }
    34% { transform: scale(0.992); filter: brightness(0.92); }
    100% { transform: scale(1); filter: brightness(1.12); }
}

@keyframes dreamMythicGlow {
    from { opacity: 0; transform: scale(0.9); }
    45% { opacity: 0.85; }
    to { opacity: 0; transform: scale(1.08); }
}

@keyframes dreamScrollOpen {
    from { opacity: 0; transform: scaleY(0.96); transform-origin: top; }
    to { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (min-width: 1180px) {
    .dream-overview-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    }

    .dream-overview-main {
        grid-column: auto;
    }

    .dream-side-column {
        grid-column: auto;
    }
}

@media (max-width: 1120px) {
    .dream-gate-card,
    .dream-run-layout,
    .dream-settlement-layout {
        grid-template-columns: 1fr;
    }

    .dream-gate-wheel {
        width: min(250px, 78vw);
    }

    .dream-wheel-panel {
        grid-template-columns: 1fr;
    }

    .dream-wheel-core {
        min-height: 220px;
    }

    .dream-destiny-layout {
        grid-template-columns: 1fr;
    }

    .dream-destiny-slots {
        order: -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dream-destiny-slots .dream-panel-title {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .dream-tab-body {
        padding: 10px;
    }

    .dream-title-panel h2 {
        font-size: 24px;
    }

    .dream-settlement-title h3 {
        font-size: 26px;
    }

    .dream-destiny-grid,
    .dream-choice-grid,
    .dream-selected-destiny-row,
    .dream-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dream-destiny-slots {
        grid-template-columns: 1fr;
    }

    .dream-choice-grid {
        grid-template-columns: 1fr;
    }

    .dream-destiny-card {
        min-height: 164px;
        padding-inline: 10px;
    }

    .dream-wheel-panel {
        min-height: 0;
    }

    .dream-wheel-core {
        min-height: 190px;
    }

    .dream-playback-actions {
        position: sticky;
        bottom: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-shadow: 0 -10px 28px rgba(0,0,0,0.28);
    }

    .dream-settle-actions,
    .dream-event-paused-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .dream-destiny-grid,
    .dream-selected-destiny-row,
    .dream-stat-grid {
        grid-template-columns: 1fr;
    }

    .dream-gate-copy h3 {
        font-size: 27px;
    }

    .dream-current-event h4 {
        font-size: 21px;
    }

    .dream-timeline-node {
        min-width: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dream-wheel-ring,
    .dream-wheel-ring::after,
    .dream-adventure-orbit,
    .dream-destiny-card,
    .dream-biography-scroll,
    .dream-destiny-card::after,
    .dream-choice-card::after,
    .dream-wheel-panel.mythic-event,
    .dream-wheel-panel.mythic-event::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Dream Responsive Repair: desktop shell + container-safe layouts --- */
.dream-page,
.dream-page * {
    min-width: 0;
}

.dream-page {
    width: 100%;
}

.dream-title-panel {
    flex-wrap: wrap;
}

.dream-title-panel > div {
    flex: 1 1 320px;
    min-width: min(100%, 260px);
}

.dream-currency-bar {
    flex: 1 1 320px;
    justify-content: flex-start;
}

.dream-shell,
.dream-tab-body {
    container-type: inline-size;
    container-name: dream-flow;
}

.dream-run-center {
    container-type: inline-size;
    container-name: dream-center;
}

.dream-main-tabs {
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
    padding: 10px;
}

.dream-main-tabs .tab-btn {
    flex: 1 1 86px;
    justify-content: center;
    min-width: 0;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
}

.dream-title-panel h2,
.dream-gate-copy h3,
.dream-current-event h4,
.dream-settlement-title h3,
.dream-destiny-setup-head h3 {
    writing-mode: horizontal-tb;
    word-break: normal;
    overflow-wrap: anywhere;
}

.dream-overview-layout,
.dream-gate-card,
.dream-destiny-layout,
.dream-run-layout,
.dream-wheel-panel,
.dream-settlement-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}

.dream-overview-main,
.dream-side-column {
    grid-column: 1 / -1;
}

.dream-gate-card {
    min-height: 0;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
}

.dream-gate-copy h3 {
    font-size: 30px;
}

.dream-gate-wheel {
    width: min(240px, 100%);
    position: relative;
}

.dream-origin-switch {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(247, 207, 111, 0.55);
    background: rgba(24, 18, 38, 0.78);
    color: #ffe6a4;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(244, 194, 94, 0.18);
}

.dream-origin-switch.prev {
    left: -12px;
}

.dream-origin-switch.next {
    right: -12px;
}

.dream-origin-switch:hover {
    border-color: rgba(255, 232, 170, 0.9);
    background: rgba(69, 47, 82, 0.92);
}

.dream-gate-card-body-god .dream-wheel-ring {
    background: radial-gradient(circle, rgba(255, 98, 70, 0.22), rgba(244, 192, 85, 0.18) 45%, rgba(88, 45, 115, 0.18) 70%, transparent 72%);
}

.dream-body-rank-panel {
    position: relative;
}

.dream-body-altar {
    position: relative;
    flex: 1;
    min-height: 172px;
    margin-top: 12px;
    border: 1px solid rgba(255, 148, 91, 0.28);
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 210, 119, 0.20), transparent 26%),
        radial-gradient(circle at 50% 72%, rgba(255, 78, 56, 0.24), transparent 34%),
        linear-gradient(180deg, rgba(74, 34, 42, 0.62), rgba(28, 18, 32, 0.76));
    box-shadow: inset 0 0 24px rgba(255, 100, 74, 0.10), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.dream-body-altar::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    filter: blur(3px);
}

.dream-body-altar::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 139, 0.10);
    box-shadow: inset 0 0 20px rgba(255, 214, 139, 0.06);
    pointer-events: none;
}

.dream-body-halo,
.dream-body-ring,
.dream-body-silhouette,
.dream-body-spine,
.dream-body-core,
.dream-body-meridian {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.dream-body-halo {
    top: 22px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 224, 153, 0.14), transparent 48%),
        conic-gradient(from 20deg, rgba(255, 121, 80, 0), rgba(255, 196, 112, 0.48), rgba(255, 121, 80, 0), rgba(255, 77, 66, 0.36), rgba(255, 121, 80, 0));
    filter: blur(0.3px);
    opacity: 0.86;
}

.dream-body-ring {
    border-radius: 50%;
    border: 1px solid rgba(255, 211, 139, 0.40);
    box-shadow: 0 0 16px rgba(255, 133, 74, 0.18), inset 0 0 18px rgba(255, 133, 74, 0.08);
}

.dream-body-ring.outer {
    top: 30px;
    width: 98px;
    height: 98px;
}

.dream-body-ring.inner {
    top: 47px;
    width: 64px;
    height: 64px;
    border-color: rgba(255, 146, 88, 0.52);
}

.dream-body-silhouette {
    top: 42px;
    width: 48px;
    height: 88px;
    border-radius: 26px 26px 18px 18px;
    background:
        radial-gradient(circle at 50% 16%, #ffdfa4 0 8px, transparent 9px),
        linear-gradient(90deg, transparent 0 6px, rgba(255, 181, 102, 0.42) 7px 13px, transparent 14px 34px, rgba(255, 181, 102, 0.42) 35px 41px, transparent 42px),
        linear-gradient(180deg, rgba(255, 113, 77, 0.84), rgba(119, 40, 55, 0.88));
    border: 1px solid rgba(255, 206, 136, 0.34);
    box-shadow: inset 0 0 20px rgba(255, 230, 174, 0.14), 0 10px 16px rgba(0, 0, 0, 0.24);
    z-index: 3;
}

.dream-body-spine {
    top: 68px;
    width: 4px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe2a7, #ff7b5b 52%, rgba(255, 123, 91, 0.14));
    box-shadow: 0 0 10px rgba(255, 194, 119, 0.50);
    z-index: 4;
}

.dream-body-core {
    top: 82px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff0bd;
    background: radial-gradient(circle, rgba(255, 239, 180, 0.34), rgba(255, 92, 72, 0.62) 48%, rgba(54, 23, 37, 0.86));
    border: 1px solid rgba(255, 222, 154, 0.56);
    box-shadow: inset 0 0 16px rgba(255, 224, 155, 0.22), 0 0 18px rgba(255, 108, 73, 0.42);
    z-index: 5;
}

.dream-body-core i {
    font-size: 16px;
}

.dream-body-meridian {
    top: 66px;
    width: 2px;
    height: 66px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 229, 160, 0.02), rgba(255, 183, 105, 0.82), rgba(255, 88, 70, 0.06));
    box-shadow: 0 0 8px rgba(255, 150, 90, 0.38);
    z-index: 4;
}

.dream-body-meridian.m1 { transform: translateX(-50%) rotate(-28deg); transform-origin: 50% 12px; }
.dream-body-meridian.m2 { transform: translateX(-50%) rotate(28deg); transform-origin: 50% 12px; }
.dream-body-meridian.m3 { top: 80px; transform: translateX(-50%) rotate(-54deg); transform-origin: 50% 8px; opacity: 0.72; }
.dream-body-meridian.m4 { top: 80px; transform: translateX(-50%) rotate(54deg); transform-origin: 50% 8px; opacity: 0.72; }

.dream-gate-card-weapon-sage .dream-wheel-ring {
    background: radial-gradient(circle, rgba(215, 178, 83, 0.22), rgba(119, 136, 146, 0.18) 46%, rgba(111, 43, 45, 0.16) 70%, transparent 72%);
}

.privilege-hero > div:first-child {
    flex: 1 1 180px;
    min-width: 0;
}

.privilege-hero-stats {
    display: flex;
    flex: 1 1 300px;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.privilege-naming-status {
    flex: 1 1 190px;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-left: 1px solid rgba(255, 228, 161, 0.28);
}

.privilege-naming-status b {
    display: flex;
    gap: 8px;
    color: rgba(248, 234, 209, 0.25);
}

.privilege-naming-status b i.active {
    color: #ffd56e;
    filter: drop-shadow(0 0 7px rgba(255, 206, 93, 0.42));
}

.privilege-naming-status small {
    color: rgba(248, 234, 209, 0.72);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@container (max-width: 620px) {
    .privilege-balance-vip {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 11px;
        padding: 13px;
    }

    .privilege-balance-vip-mark {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .privilege-balance-vip-effects {
        grid-column: 1 / -1;
    }

    .privilege-vip-target-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .privilege-vip-target-summary > div:nth-child(2) {
        border-left: 0;
        border-top: 1px solid rgba(158, 218, 231, 0.14);
    }
}

@media (max-width: 680px) {
    .privilege-balance-vip {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 11px;
        padding: 13px;
    }

    .privilege-balance-vip-mark {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .privilege-balance-vip-effects {
        grid-column: 1 / -1;
    }

    .privilege-vip-target-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .privilege-vip-target-summary > div:nth-child(2) {
        border-left: 0;
        border-top: 1px solid rgba(158, 218, 231, 0.14);
    }

    .privilege-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .privilege-hero-stats {
        justify-content: stretch;
    }

    .privilege-naming-status {
        min-width: 0;
        flex: 1;
        border-left: 0;
        border-top: 1px solid rgba(255, 228, 161, 0.22);
        padding-left: 0;
    }

    .privilege-total-badge {
        width: 92px;
        flex-basis: 92px;
        min-height: 82px;
    }
}

.dream-arsenal-rank-panel {
    position: relative;
}

.dream-arsenal-rack {
    position: relative;
    flex: 1;
    min-height: 172px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(210, 179, 99, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 49%, rgba(225, 196, 118, 0.16) 50%, transparent 51%),
        linear-gradient(180deg, rgba(61, 70, 75, 0.78), rgba(34, 26, 27, 0.92));
    box-shadow: inset 0 0 28px rgba(218, 185, 102, 0.10), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.dream-arsenal-rack::before,
.dream-arsenal-rack::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 7px;
    border: 1px solid rgba(225, 195, 120, 0.34);
    background: #44332e;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}

.dream-arsenal-rack::before { top: 42px; }
.dream-arsenal-rack::after { bottom: 34px; }

.dream-arsenal-rack > i {
    position: absolute;
    left: 50%;
    top: 34px;
    z-index: 3;
    transform: translateX(-50%);
    color: #f0d58e;
    font-size: 88px;
    text-shadow: 0 0 18px rgba(231, 190, 87, 0.34), 0 8px 12px rgba(0, 0, 0, 0.4);
}

.dream-arsenal-rack .blade {
    position: absolute;
    top: 28px;
    width: 7px;
    height: 116px;
    border: 1px solid rgba(230, 222, 194, 0.55);
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(90deg, #69757b, #d9d6c6 50%, #6e777c);
    box-shadow: 0 0 10px rgba(216, 207, 171, 0.16);
}

.dream-arsenal-rack .blade.left {
    left: 38px;
    transform: rotate(-16deg);
}

.dream-arsenal-rack .blade.right {
    right: 38px;
    transform: rotate(16deg);
}

.dream-arsenal-rack .arsenal-seal {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 4;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 211, 126, 0.70);
    background: #8d3132;
    color: #ffe7a8;
    font-weight: 800;
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(162, 48, 49, 0.42);
}

.dream-royal-arsenal-panel .dream-growth-stats b {
    overflow-wrap: anywhere;
}

.dream-gate-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dream-gate-summary div {
    gap: 3px;
    padding: 10px;
}

.dream-gate-summary span,
.dream-gate-summary small {
    font-size: 12px;
    line-height: 1.35;
}

.dream-gate-summary strong {
    font-size: 15px;
    line-height: 1.3;
}

.dream-gate-summary .dream-gate-use-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
}

.dream-gate-use-card span,
.dream-gate-use-card strong,
.dream-gate-use-card small {
    grid-column: 1;
}

.dream-gate-card-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.dream-gate-use-btn {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.dream-gate-start {
    grid-column: 1 / -1;
}

.dream-gate-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dream-difficulty-picker {
    grid-template-columns: 1fr;
}

@media (max-width: 680px) {
    .dream-gate-summary,
    .dream-gate-actions {
        grid-template-columns: 1fr;
    }
}

.dream-destiny-setup-head {
    flex-wrap: wrap;
}

.dream-destiny-slots {
    order: -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 10px;
}

.dream-destiny-slots .dream-panel-title {
    grid-column: 1 / -1;
}

.dream-destiny-slot {
    gap: 5px;
}

.dream-destiny-slot-name {
    font-size: 11px;
}

.dream-destiny-slot-card {
    min-height: 118px;
    padding: 8px;
}

.dream-destiny-slot-card strong {
    font-size: 13px;
    line-height: 1.3;
}

.dream-destiny-slot-card small,
.dream-destiny-slot-card span {
    font-size: 11px;
    line-height: 1.35;
}

.dream-destiny-slot-card .dream-quality-badge {
    width: 100%;
    min-width: 0;
    padding: 1px 5px;
    font-size: 10px;
}

.dream-destiny-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
}

.dream-destiny-card {
    min-height: 158px;
    gap: 5px;
    padding: 29px 8px 10px;
    font-size: 12px;
}

.dream-destiny-card.special {
    padding-bottom: 31px;
}

.dream-destiny-card .dream-card-head {
    display: grid;
    gap: 3px;
    align-items: start;
}

.dream-destiny-card .dream-card-head strong {
    font-size: 13px;
    line-height: 1.25;
}

.dream-destiny-card em {
    font-size: 11px;
    line-height: 1.25;
}

.dream-destiny-card > span:not(.dream-destiny-order):not(.dream-destiny-inherited):not(.dream-destiny-special):not(.dream-destiny-selected-mark) {
    font-size: 12px;
    line-height: 1.45;
}

.dream-destiny-card .dream-quality-badge {
    width: fit-content;
    min-width: 34px;
    padding: 1px 6px;
    font-size: 11px;
}

.dream-destiny-order {
    left: 8px;
    top: 8px;
    width: 19px;
    height: 19px;
    font-size: 11px;
}

.dream-destiny-inherited {
    left: 31px;
    top: 10px;
    font-size: 10px;
}

.dream-destiny-special,
.dream-destiny-selected-mark {
    font-size: 10px;
}

.dream-destiny-special {
    right: 8px;
    bottom: 8px;
    padding: 3px 6px;
}

.dream-destiny-selected-mark {
    right: 8px;
    top: 8px;
    padding: 4px 6px;
}

.dream-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
}

.dream-choice-card {
    min-height: 138px;
    gap: 5px;
    padding: 8px;
    font-size: 11px;
}

.dream-choice-card > i {
    font-size: 18px;
}

.dream-choice-card em {
    font-size: 10px;
    line-height: 1.2;
}

.dream-choice-card .dream-card-head {
    display: grid;
    gap: 3px;
    align-items: start;
}

.dream-choice-card .dream-card-head strong {
    font-size: 12px;
    line-height: 1.22;
}

.dream-choice-card span {
    font-size: 11px;
    line-height: 1.35;
}

.dream-choice-card .dream-quality-badge {
    width: fit-content;
    min-width: 32px;
    padding: 1px 5px;
    font-size: 10px;
}

.dream-choice-risk {
    font-size: 10px;
    line-height: 1.25;
}

.dream-choice-cost {
    padding: 5px 6px;
    font-size: 10px;
    line-height: 1.2;
}

.dream-stat-grid,
.dream-equipment-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)) !important;
}

.dream-selected-destiny-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
}

.dream-mini-card {
    gap: 4px;
    min-height: 154px;
    padding: 8px;
    font-size: 11px;
}

.dream-mini-card em {
    font-size: 11px;
    line-height: 1.25;
}

.dream-mini-card strong {
    font-size: 13px;
    line-height: 1.25;
}

.dream-mini-card span {
    font-size: 11px;
    line-height: 1.45;
}

.dream-mini-card .dream-quality-badge {
    width: 100%;
    min-width: 0;
    padding: 1px 5px;
    font-size: 10px;
}

.dream-wheel-panel {
    min-height: 0;
}

.dream-wheel-core {
    min-height: 190px;
}

.dream-run-right {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.dream-playback-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
}

.dream-settle-banner {
    margin: 0 0 10px;
}

.dream-settle-banner button {
    width: 100%;
    min-height: 42px;
    border-color: rgba(255, 230, 166, 0.8);
    background: linear-gradient(90deg, #e4ad48, #fff0bd);
    color: #170f05;
    font-weight: 800;
    box-shadow: 0 0 18px rgba(240, 198, 106, 0.22);
}

.dream-shop-actions {
    flex-direction: column;
    align-items: stretch;
}

.dream-shop-actions span {
    width: 100%;
    min-width: 0;
    writing-mode: horizontal-tb;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.dream-shop-actions button {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.dream-shop-benefit {
    flex-direction: column;
    align-items: stretch;
}

.dream-shop-benefit button {
    width: 100%;
    min-width: 0;
}

@container dream-flow (min-width: 680px) {
    .dream-gate-card {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) !important;
        align-items: center;
        min-height: 320px;
        gap: 18px;
    }

    .dream-gate-summary {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dream-destiny-layout {
        grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) !important;
    }

    .dream-destiny-slots {
        order: 0;
        grid-template-columns: minmax(0, 1fr);
    }

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

    .dream-run-layout {
        grid-template-columns: minmax(210px, 0.82fr) minmax(0, 1.18fr) !important;
    }

    .dream-run-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .dream-shop-actions {
        flex-direction: row;
        align-items: center;
    }

    .dream-shop-actions button {
        width: auto;
        flex: 0 0 auto;
    }

    .dream-shop-benefit {
        flex-direction: row;
        align-items: center;
    }

    .dream-shop-benefit button {
        width: auto;
        min-width: 128px;
    }
}

@container dream-flow (min-width: 980px) {
    .dream-overview-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    }

    .dream-overview-main,
    .dream-side-column {
        grid-column: auto;
    }

    .dream-gate-card {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(220px, 280px) !important;
        min-height: 360px;
    }

    .dream-gate-copy h3 {
        font-size: 38px;
    }

    .dream-gate-wheel {
        width: min(300px, 100%);
    }

    .dream-gate-summary {
        grid-column: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dream-run-layout {
        grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.2fr) !important;
    }

    .dream-run-right {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }
}

@container dream-flow (min-width: 680px) {
    .dream-run-details-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container dream-flow (min-width: 1080px) {
    .dream-destiny-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@container dream-center (min-width: 560px) {
    .dream-wheel-panel {
        grid-template-columns: minmax(180px, 0.88fr) minmax(0, 1fr) !important;
        min-height: 300px;
    }

    .dream-wheel-core {
        min-height: 220px;
    }
}

.dream-run-page.event .dream-run-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}

.dream-run-page.event .dream-run-left {
    order: 0;
}

.dream-run-page.event .dream-run-center {
    order: 1;
}

.dream-run-page.event .dream-run-right {
    order: 2;
    grid-column: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

#dungeon-view .dungeon-new-shell .dungeon-stage .material-abyss-sweep-panel {
    flex-wrap: nowrap;
    align-items: center;
}

#dungeon-view .dungeon-new-shell .dungeon-stage .material-abyss-sweep-panel .material-abyss-sweep-count input[type="number"] {
    width: 96px;
    min-width: 96px;
}

#dungeon-view .dungeon-new-shell .dungeon-stage .material-abyss-sweep-panel button {
    width: auto !important;
    min-height: 30px;
    margin-top: 0;
    padding: 5px 14px;
    white-space: nowrap;
}

.material-abyss-sweep-panel button {
    width: auto !important;
    min-height: 28px;
    margin-top: 0 !important;
    padding: 4px 12px;
    white-space: nowrap;
}

/* 仙魔大战 */
#immortal-demon-view.panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.immortal-demon-view {
    --immortal-gold: #f6d98a;
    --immortal-jade: #8df2cf;
    --immortal-blue: #7ac8ff;
    --demon-red: #ff5b4a;
    --demon-orange: #ff9d45;
    --demon-purple: #a45cff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #fff5dc;
}

.immortal-demon-dual-hero,
.immortal-demon-realm-cards,
.immortal-demon-side-detail,
.immortal-demon-grid,
.immortal-demon-branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.immortal-demon-realm,
.realm-detail,
.immortal-demon-hero,
.immortal-demon-card,
.immortal-demon-section {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
    isolation: isolate;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}

.immortal-demon-dual-hero {
    align-items: start;
}

.immortal-demon-realm-cards,
.immortal-demon-side-detail {
    grid-column: 1 / -1;
    align-items: start;
}

.immortal-demon-side-detail {
    position: relative;
    margin-top: -10px;
    padding-top: 10px;
}

.immortal-demon-side-detail::before {
    content: "";
    position: absolute;
    top: 0;
    width: calc((100% - 14px) / 2);
    height: 24px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    pointer-events: none;
    z-index: 0;
    animation: realmBridgeReveal 0.24s ease-out;
}

.immortal-demon-side-detail.treading::before {
    left: 0;
    border-color: rgba(156, 239, 215, 0.28);
    background:
        linear-gradient(180deg, rgba(58, 87, 112, 0.92), rgba(42, 50, 91, 0.96)),
        radial-gradient(circle at 22% 0%, rgba(197, 255, 235, 0.25), transparent 62%);
    box-shadow: 0 10px 22px rgba(35, 116, 144, 0.12);
}

.immortal-demon-side-detail.palace::before {
    right: 0;
    border-color: rgba(255, 91, 74, 0.30);
    background:
        linear-gradient(180deg, rgba(67, 22, 29, 0.94), rgba(34, 14, 28, 0.97)),
        radial-gradient(circle at 78% 0%, rgba(255, 157, 69, 0.22), transparent 62%);
    box-shadow: 0 10px 22px rgba(255, 91, 74, 0.10);
}

.immortal-demon-side-detail.treading .realm-detail,
.immortal-demon-side-detail.palace .realm-detail {
    grid-column: 1 / -1;
}

.immortal-demon-realm {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    transform: translateZ(0);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.immortal-demon-realm.is-active {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.12);
}

.immortal-demon-realm:focus-visible {
    outline: 2px solid rgba(246, 217, 138, 0.72);
    outline-offset: 3px;
}

.realm-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.immortal-demon-realm::before,
.immortal-demon-realm::after,
.realm-detail::before,
.realm-detail::after,
.immortal-demon-card::before,
.immortal-demon-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.immortal-demon-realm.treading,
.realm-detail.treading,
.immortal-demon-card.treading {
    border: 1px solid rgba(156, 239, 215, 0.34);
    background:
        radial-gradient(circle at 12% 18%, rgba(197, 255, 235, 0.38), transparent 24%),
        radial-gradient(circle at 88% 6%, rgba(119, 197, 255, 0.24), transparent 30%),
        linear-gradient(145deg, rgba(22, 42, 64, 0.96), rgba(28, 24, 68, 0.94) 58%, rgba(20, 17, 38, 0.98));
}

.immortal-demon-realm.treading::before {
    inset: -28% -18% auto -16%;
    height: 86%;
    background:
        radial-gradient(ellipse at 18% 55%, rgba(255,255,255,0.34), transparent 38%),
        radial-gradient(ellipse at 60% 35%, rgba(148,255,224,0.24), transparent 44%),
        radial-gradient(ellipse at 92% 64%, rgba(122,200,255,0.22), transparent 42%);
    filter: blur(18px);
    animation: immortalCloudDrift 8s ease-in-out infinite alternate;
}

.immortal-demon-realm.treading::after {
    inset: auto 8% -26% 8%;
    height: 58%;
    background:
        linear-gradient(90deg, transparent, rgba(246,217,138,0.26), transparent),
        repeating-linear-gradient(105deg, rgba(141,242,207,0.11) 0 2px, transparent 2px 16px);
    border-radius: 50%;
    transform: rotate(-4deg);
    animation: immortalStairGlow 5.8s ease-in-out infinite;
}

.immortal-demon-realm.palace,
.realm-detail.palace,
.immortal-demon-card.palace {
    border: 1px solid rgba(255, 91, 74, 0.38);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 122, 66, 0.28), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(164, 92, 255, 0.22), transparent 30%),
        linear-gradient(145deg, rgba(56, 14, 18, 0.98), rgba(32, 14, 28, 0.98) 54%, rgba(13, 9, 14, 1));
}

.immortal-demon-realm.palace::before {
    inset: auto -16% -34% -16%;
    height: 76%;
    background:
        radial-gradient(ellipse at 18% 68%, rgba(255, 69, 42, 0.48), transparent 38%),
        radial-gradient(ellipse at 62% 82%, rgba(255, 157, 69, 0.46), transparent 44%),
        radial-gradient(ellipse at 90% 62%, rgba(164, 92, 255, 0.22), transparent 36%);
    filter: blur(16px);
    animation: demonLavaPulse 3.6s ease-in-out infinite;
}

.immortal-demon-realm.palace::after {
    inset: -10% 0 0 0;
    background:
        radial-gradient(circle at 20% 70%, rgba(255, 157, 69, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 28%, rgba(255, 91, 74, 0.28) 0 2px, transparent 3px),
        radial-gradient(circle at 52% 52%, rgba(255, 211, 112, 0.26) 0 1px, transparent 2px);
    background-size: 120px 150px, 170px 130px, 90px 110px;
    opacity: 0.66;
    animation: demonEmberRise 6s linear infinite;
}

.realm-aura {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.82;
    animation: realmAuraFloat 4.8s ease-in-out infinite alternate;
}

.treading .realm-aura {
    background: radial-gradient(circle, rgba(224,255,242,0.42), rgba(141,242,207,0.18) 44%, transparent 70%);
    box-shadow: 0 0 34px rgba(141, 242, 207, 0.28);
}

.palace .realm-aura {
    background: radial-gradient(circle, rgba(255,157,69,0.42), rgba(255,91,74,0.18) 46%, transparent 72%);
    box-shadow: 0 0 36px rgba(255, 91, 74, 0.30);
}

.immortal-demon-kicker {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    color: var(--immortal-gold);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.immortal-demon-realm h2,
.immortal-demon-hero h2,
.immortal-demon-card h3,
.immortal-demon-section h3,
.immortal-demon-branch-card h4 {
    margin: 6px 0;
    color: #fff0b8;
    text-shadow: 0 0 18px rgba(246, 217, 138, 0.18);
}

.immortal-demon-realm h2 {
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.1;
}

.immortal-demon-realm p,
.immortal-demon-hero p,
.immortal-demon-card p,
.immortal-demon-section p,
.immortal-demon-branch-card p {
    margin: 0;
    color: rgba(255, 245, 220, 0.72);
    line-height: 1.65;
}

.realm-stats,
.immortal-demon-materials,
.immortal-demon-stats,
.immortal-demon-branch-meta,
.immortal-demon-reward-list,
.immortal-demon-actions,
.immortal-demon-exchange-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.realm-stats span,
.immortal-demon-materials span,
.immortal-demon-reward,
.immortal-demon-stats span,
.immortal-demon-branch-meta span {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 245, 220, 0.72);
    backdrop-filter: blur(6px);
}

.realm-stats span {
    display: grid;
    gap: 3px;
    min-width: 104px;
    padding: 8px 11px;
    border-radius: 14px;
}

.realm-stats em {
    color: rgba(255, 245, 220, 0.58);
    font-style: normal;
    font-size: 11px;
}

.realm-stats strong,
.immortal-demon-power strong,
.immortal-demon-materials strong,
.immortal-demon-stats b {
    color: #fff2bf;
}

.immortal-demon-materials {
    padding: 12px;
    border: 1px solid rgba(246, 217, 138, 0.16);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
}

.immortal-demon-materials span,
.immortal-demon-reward {
    padding: 8px 12px;
}

.immortal-demon-materials .crystal {
    border-color: rgba(141, 242, 207, 0.28);
}

.immortal-demon-materials .demon-yuan {
    border-color: rgba(255, 91, 74, 0.3);
}

.immortal-demon-card,
.immortal-demon-section,
.immortal-demon-hero {
    border: 1px solid rgba(246, 217, 138, 0.20);
    background: linear-gradient(145deg, rgba(45, 32, 48, 0.95), rgba(23, 18, 31, 0.98));
}

.immortal-demon-card.treading::before {
    inset: -40% auto auto -18%;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141,242,207,0.22), transparent 68%);
    animation: immortalCloudDrift 7s ease-in-out infinite alternate;
}

.immortal-demon-card.palace::before {
    inset: auto -22% -46% auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,91,74,0.30), transparent 68%);
    animation: demonLavaPulse 3.8s ease-in-out infinite;
}

.immortal-demon-card-head,
.immortal-demon-section-head,
.immortal-demon-hero {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.immortal-demon-card-head > strong {
    color: #ffe5a1;
    white-space: nowrap;
}

.immortal-demon-stock-badge {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 138px;
    padding: 9px 12px;
    border: 1px solid rgba(246, 217, 138, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 245, 220, 0.70);
}

.immortal-demon-stock-badge span {
    font-size: 12px;
}

.immortal-demon-stock-badge strong {
    color: #fff2bf;
    font-size: 18px;
    line-height: 1.1;
}

.immortal-demon-stats span,
.immortal-demon-branch-meta span {
    min-width: 135px;
    padding: 7px 10px;
}

.immortal-demon-reward-list {
    margin: 14px 0;
}

.immortal-demon-reward.extra {
    background: rgba(255, 199, 79, 0.18);
    border-color: rgba(255, 199, 79, 0.28);
    color: #ffe5a1;
}

.immortal-demon-actions input,
.immortal-demon-exchange-row input {
    width: 132px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(0,0,0,0.28);
    color: #fff8dc;
    padding: 0 10px;
}

.immortal-demon-exchange-input {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 220px;
}

.immortal-demon-exchange-input input {
    width: 100%;
    min-width: 0;
}

.immortal-demon-actions button,
.immortal-demon-exchange-row button {
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.13);
    padding: 0 15px;
    color: #fff8dc;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(214,154,53,0.96), rgba(112,82,219,0.92));
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.immortal-demon-exchange-row .immortal-demon-exchange-max {
    width: 100%;
    padding: 0 12px;
    font-weight: 700;
}

.immortal-demon-card.treading .immortal-demon-actions button:first-of-type,
.realm-detail.treading .realm-detail-actions button:first-of-type {
    background: linear-gradient(135deg, rgba(85, 198, 173, 0.98), rgba(91, 142, 255, 0.92));
}

.immortal-demon-card.palace .immortal-demon-actions button:first-of-type,
.realm-detail.palace .realm-detail-actions button:first-of-type {
    background: linear-gradient(135deg, rgba(255, 91, 74, 0.96), rgba(141, 55, 31, 0.94));
}

.immortal-demon-actions button:disabled,
.immortal-demon-exchange-row button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.immortal-demon-actions.compact button {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: none;
}

.immortal-demon-realm .realm-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.immortal-demon-realm .realm-stats span {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 12px;
}

.realm-toggle-hint {
    width: fit-content;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 245, 220, 0.68);
    font-size: 12px;
}

.immortal-demon-realm.is-active .realm-toggle-hint {
    color: #fff2bf;
    background: rgba(255, 255, 255, 0.10);
}

.realm-detail {
    display: block;
    min-height: 230px;
    padding: 16px;
    z-index: 1;
    animation: realmDetailReveal 0.24s ease-out;
}

.realm-detail::before {
    inset: -28% -18% auto -16%;
    height: 76%;
    filter: blur(18px);
    opacity: 0.74;
}

.realm-detail.treading::before {
    background:
        radial-gradient(ellipse at 18% 55%, rgba(255,255,255,0.26), transparent 38%),
        radial-gradient(ellipse at 62% 42%, rgba(141,242,207,0.20), transparent 44%),
        radial-gradient(ellipse at 92% 64%, rgba(122,200,255,0.18), transparent 42%);
    animation: immortalCloudDrift 8s ease-in-out infinite alternate;
}

.realm-detail.palace::before {
    inset: auto -16% -32% -16%;
    background:
        radial-gradient(ellipse at 18% 68%, rgba(255, 69, 42, 0.34), transparent 38%),
        radial-gradient(ellipse at 62% 82%, rgba(255, 157, 69, 0.30), transparent 44%),
        radial-gradient(ellipse at 90% 62%, rgba(164, 92, 255, 0.18), transparent 36%);
    animation: demonLavaPulse 3.6s ease-in-out infinite;
}

.realm-detail::after {
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,0.06), transparent 42%, rgba(0,0,0,0.16));
    opacity: 0.8;
}

.realm-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.realm-detail-stats {
    grid-column: 1 / -1;
}

.realm-detail-rewards {
    grid-column: 1;
}

.realm-detail-actions {
    grid-column: 2;
}

.realm-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.realm-detail-stats span {
    min-width: 0;
    border-radius: 12px;
}

.realm-detail-rewards {
    display: grid;
    gap: 8px;
}

.realm-detail-label {
    color: rgba(255, 245, 220, 0.62);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.realm-detail-rewards .immortal-demon-reward-list {
    margin: 0;
}

.realm-detail-actions {
    align-items: center;
    margin-top: 2px;
}

.realm-floor-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 8px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.20);
    color: rgba(255, 245, 220, 0.72);
}

.realm-floor-input span {
    font-size: 12px;
    white-space: nowrap;
}

.realm-floor-input input {
    width: 92px;
    min-height: 30px;
    border-radius: 9px;
    padding: 0 8px;
}

.immortal-demon-branch-card {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 14px;
    background: rgba(0,0,0,0.18);
}

.immortal-demon-power {
    min-width: 170px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    text-align: right;
}

.immortal-demon-view.cultivation {
    gap: 16px;
}

.immortal-demon-view.cultivation .cultivation-hero {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 0;
    padding: 18px;
    border: 1px solid rgba(246, 217, 138, 0.24);
    background:
        radial-gradient(circle at 12% 20%, rgba(141, 242, 207, 0.18), transparent 30%),
        radial-gradient(circle at 92% 16%, rgba(255, 91, 74, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(20, 20, 44, 0.96), rgba(35, 18, 40, 0.98) 58%, rgba(18, 11, 18, 0.99));
}

.immortal-demon-view.cultivation .cultivation-hero::before,
.immortal-demon-view.cultivation .cultivation-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.immortal-demon-view.cultivation .cultivation-hero::before {
    inset: -42% auto auto -18%;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141, 242, 207, 0.30), transparent 66%);
    filter: blur(6px);
    animation: immortalCloudDrift 8s ease-in-out infinite alternate;
}

.immortal-demon-view.cultivation .cultivation-hero::after {
    inset: auto -16% -48% auto;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 91, 74, 0.28), transparent 66%);
    filter: blur(8px);
    animation: demonLavaPulse 4.2s ease-in-out infinite;
}

.immortal-demon-view.cultivation .cultivation-hero h2 {
    font-size: clamp(26px, 3.2vw, 34px);
    letter-spacing: 0.02em;
    word-break: keep-all;
}

.immortal-demon-view.cultivation .cultivation-hero p {
    max-width: 450px;
    color: rgba(255, 245, 220, 0.78);
}

.cultivation-hero-copy {
    grid-row: 1 / span 2;
    min-width: 0;
}

.immortal-demon-view.cultivation .immortal-demon-power {
    justify-self: stretch;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(246, 217, 138, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(141, 242, 207, 0.12), rgba(255, 91, 74, 0.12)),
        rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 28px rgba(0,0,0,0.18);
}

.immortal-demon-bonus-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-self: start;
}

.bonus-rune {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 3px;
    min-height: 52px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.bonus-rune::before {
    content: "";
    position: absolute;
    inset: -48% auto auto -24%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    opacity: 0.52;
    pointer-events: none;
}

.bonus-rune.immortal {
    border-color: rgba(141, 242, 207, 0.20);
    background: linear-gradient(135deg, rgba(44, 91, 98, 0.36), rgba(30, 31, 70, 0.42));
}

.bonus-rune.immortal::before {
    background: radial-gradient(circle, rgba(141, 242, 207, 0.34), transparent 66%);
}

.bonus-rune.demon {
    border-color: rgba(255, 91, 74, 0.22);
    background: linear-gradient(135deg, rgba(89, 27, 34, 0.38), rgba(38, 23, 59, 0.42));
}

.bonus-rune.demon::before {
    background: radial-gradient(circle, rgba(255, 91, 74, 0.32), transparent 66%);
}

.bonus-rune span {
    position: relative;
    color: rgba(255, 245, 220, 0.70);
    font-size: 11px;
    line-height: 1.25;
}

.bonus-rune strong {
    position: relative;
    color: #fff0b8;
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 1.05;
    text-shadow: 0 0 14px rgba(246, 217, 138, 0.18);
}

.immortal-demon-branches {
    grid-template-columns: 1fr;
    gap: 12px;
}

.immortal-demon-branch-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    border-radius: 18px;
    padding: 16px;
    isolation: isolate;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.immortal-demon-branch-card::before,
.immortal-demon-branch-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.immortal-demon-branch-card::before {
    inset: -55% auto auto -10%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.72;
}

.immortal-demon-branch-card::after {
    inset: 0;
    background:
        linear-gradient(110deg, rgba(255,255,255,0.07), transparent 36%, rgba(0,0,0,0.20)),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 18px);
    opacity: 0.76;
}

.immortal-demon-branch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}

.immortal-demon-branch-card.immortal {
    border-color: rgba(141, 242, 207, 0.26);
    background:
        radial-gradient(circle at 88% 10%, rgba(122, 200, 255, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(20, 39, 58, 0.96), rgba(26, 24, 58, 0.98));
}

.immortal-demon-branch-card.immortal::before {
    background: radial-gradient(circle, rgba(141, 242, 207, 0.28), transparent 68%);
    animation: immortalCloudDrift 8s ease-in-out infinite alternate;
}

.immortal-demon-branch-card.demon {
    border-color: rgba(255, 91, 74, 0.32);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 157, 69, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(58, 16, 22, 0.98), rgba(30, 14, 34, 0.98));
}

.immortal-demon-branch-card.demon::before {
    background: radial-gradient(circle, rgba(255, 91, 74, 0.32), transparent 68%);
    animation: demonLavaPulse 3.8s ease-in-out infinite;
}

.immortal-demon-branch-card.finger {
    border-color: rgba(246, 217, 138, 0.28);
    background:
        radial-gradient(circle at 90% 12%, rgba(164, 92, 255, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(36, 28, 58, 0.98), rgba(24, 20, 38, 0.98));
}

.immortal-demon-branch-card .immortal-demon-card-head {
    align-items: flex-start;
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.immortal-demon-view.cultivation .immortal-demon-branch-card .immortal-demon-card-head {
    flex-direction: column;
}

.immortal-demon-branch-card .immortal-demon-card-head > div {
    min-width: 0;
}

.immortal-demon-branch-card h4 {
    font-size: clamp(20px, 2.4vw, 28px);
    margin-bottom: 8px;
    word-break: keep-all;
}

.immortal-demon-branch-card p {
    max-width: 100%;
    color: rgba(255, 245, 220, 0.78);
}

.immortal-demon-branch-card .immortal-demon-card-head > strong {
    width: fit-content;
    min-width: 76px;
    padding: 8px 11px;
    border: 1px solid rgba(246, 217, 138, 0.18);
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    text-align: center;
}

.immortal-demon-branch-card .immortal-demon-branch-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.immortal-demon-branch-card .immortal-demon-branch-meta span {
    min-width: 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.09);
    word-break: break-word;
}

.immortal-demon-branch-card .immortal-demon-actions.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.immortal-demon-branch-card.immortal .immortal-demon-actions.compact button:first-child {
    background: linear-gradient(135deg, rgba(85, 198, 173, 0.96), rgba(91, 142, 255, 0.9));
}

.immortal-demon-branch-card.demon .immortal-demon-actions.compact button:first-child {
    background: linear-gradient(135deg, rgba(255, 91, 74, 0.96), rgba(164, 92, 255, 0.86));
}

.challenge-cultivation-panel {
    padding: 0;
    border-color: rgba(246, 217, 138, 0.18);
    background:
        radial-gradient(circle at 12% 10%, rgba(141, 242, 207, 0.12), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(255, 91, 74, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(36, 27, 41, 0.92), rgba(22, 18, 30, 0.98));
}

.challenge-cultivation-toggle {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 15px 16px;
    border: 0;
    background: transparent;
    color: #fff5dc;
    text-align: left;
    cursor: pointer;
}

.challenge-cultivation-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(141, 242, 207, 0.08), transparent 44%, rgba(255, 91, 74, 0.09));
    opacity: 0.9;
    pointer-events: none;
}

.challenge-cultivation-toggle > span,
.challenge-cultivation-toggle > i {
    position: relative;
}

.challenge-cultivation-toggle strong {
    display: block;
    margin-top: 4px;
    color: #fff0b8;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px rgba(246, 217, 138, 0.18);
}

.challenge-cultivation-toggle small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 245, 220, 0.66);
    font-size: 12px;
    line-height: 1.5;
}

.challenge-cultivation-power {
    display: inline-grid;
    gap: 2px;
    min-width: 176px;
    padding: 9px 12px;
    border: 1px solid rgba(246, 217, 138, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 245, 220, 0.68);
    text-align: right;
    font-size: 12px;
}

.challenge-cultivation-power b {
    color: #fff0b8;
    font-size: 15px;
}

.challenge-cultivation-toggle > i {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.20);
    color: rgba(255, 245, 220, 0.72);
}

.challenge-cultivation-body {
    padding: 0 14px 14px;
    animation: realmDetailReveal 0.22s ease-out;
}

.challenge-cultivation-body .immortal-demon-branches {
    margin-top: 0;
}

@keyframes immortalCloudDrift {
    0% { transform: translate3d(-10px, 0, 0) scale(1); opacity: 0.72; }
    100% { transform: translate3d(18px, 10px, 0) scale(1.08); opacity: 0.95; }
}

@keyframes immortalStairGlow {
    0%, 100% { transform: translateY(0) rotate(-4deg); opacity: 0.42; }
    50% { transform: translateY(-12px) rotate(-2deg); opacity: 0.86; }
}

@keyframes demonLavaPulse {
    0%, 100% { transform: scale(0.94); opacity: 0.58; }
    50% { transform: scale(1.08); opacity: 0.95; }
}

@keyframes demonEmberRise {
    0% { background-position: 0 120px, 0 80px, 0 40px; opacity: 0.32; }
    50% { opacity: 0.76; }
    100% { background-position: 0 -120px, 0 -90px, 0 -70px; opacity: 0.32; }
}

@keyframes realmAuraFloat {
    0% { transform: translate3d(0, 0, 0) scale(0.95); }
    100% { transform: translate3d(-10px, 9px, 0) scale(1.08); }
}

@keyframes realmDetailReveal {
    0% { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes realmBridgeReveal {
    0% { opacity: 0; transform: scaleY(0.65); transform-origin: top; }
    100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (max-width: 980px) {
    .immortal-demon-view.cultivation .cultivation-hero {
        grid-template-columns: 1fr;
    }
    .cultivation-hero-copy {
        grid-row: auto;
    }
    .immortal-demon-bonus-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .immortal-demon-realm::before,
    .immortal-demon-realm::after,
    .immortal-demon-card::before,
    .realm-detail::before,
    .realm-detail::after,
    .immortal-demon-side-detail::before,
    .immortal-demon-branch-card::before,
    .immortal-demon-view.cultivation .cultivation-hero::before,
    .immortal-demon-view.cultivation .cultivation-hero::after,
    .realm-aura,
    .realm-detail {
        animation: none !important;
    }
}

@media (max-width: 760px) {
    .immortal-demon-dual-hero,
    .immortal-demon-realm-cards,
    .immortal-demon-side-detail,
    .immortal-demon-grid,
    .immortal-demon-branches {
        grid-template-columns: 1fr;
    }
    .immortal-demon-side-detail.treading .realm-detail,
    .immortal-demon-side-detail.palace .realm-detail,
    .realm-detail-stats,
    .realm-detail-rewards,
    .realm-detail-actions {
        grid-column: 1;
    }
    .realm-detail-body,
    .realm-detail-stats {
        grid-template-columns: 1fr;
    }
    .immortal-demon-card-head,
    .immortal-demon-section-head,
    .immortal-demon-hero {
        flex-direction: column;
    }
    .immortal-demon-power {
        width: 100%;
        text-align: left;
    }
    .immortal-demon-view.cultivation .cultivation-hero,
    .immortal-demon-bonus-panel {
        grid-template-columns: 1fr;
    }
    .cultivation-hero-copy {
        grid-row: auto;
    }
    .immortal-demon-branch-card,
    .immortal-demon-branch-card .immortal-demon-card-head {
        grid-template-columns: 1fr;
    }
    .immortal-demon-branch-card .immortal-demon-branch-meta,
    .immortal-demon-branch-card .immortal-demon-actions.compact {
        grid-template-columns: 1fr;
        min-width: 0;
    }
    .challenge-cultivation-toggle {
        grid-template-columns: 1fr;
    }
    .challenge-cultivation-power {
        width: 100%;
        min-width: 0;
        text-align: left;
    }
}

/* 妖异原爆点 */
.aberrant-origin-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

.aberrant-origin-view .view-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(142, 103, 182, 0.34);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 25, 52, 0.92), rgba(13, 25, 23, 0.9));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.aberrant-origin-view .view-header-row h3 {
    margin: 0 0 6px;
    color: #ead9ff;
}

.aberrant-origin-view .view-header-row p {
    margin: 0;
    color: var(--color-text-muted);
}

.aberrant-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.aberrant-title-row .view-back-btn {
    margin: 0;
}

.aberrant-eyebrow {
    color: #b999df;
    font-size: 12px;
    letter-spacing: 0.08em;
}


.aberrant-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(34px, 46px));
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(101, 79, 128, 0.42);
    border-radius: 16px;
    background:
        radial-gradient(circle at center, rgba(117, 71, 145, 0.25), transparent 42%),
        linear-gradient(135deg, rgba(10, 16, 22, 0.96), rgba(24, 35, 27, 0.93));
}

.aberrant-grid-cell {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(12, 18, 28, 0.72);
    color: var(--color-text-light);
    cursor: pointer;
    display: grid;
    place-items: center;
    text-align: center;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.aberrant-grid-cell:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgba(224, 196, 255, 0.72);
    box-shadow: 0 8px 18px rgba(71, 47, 99, 0.34);
}

.aberrant-grid-cell:disabled {
    cursor: default;
    opacity: 0.78;
}

.aberrant-grid-cell strong {
    font-size: 20px;
    line-height: 1;
}

.aberrant-grid-cell.selected {
    border-color: rgba(255, 221, 151, 0.88);
    box-shadow: 0 0 0 2px rgba(255, 221, 151, 0.18), 0 0 16px rgba(177, 115, 255, 0.3);
}

.aberrant-grid-cell.empty strong {
    opacity: 0.36;
    font-size: 15px;
}

.aberrant-grid-cell.empty {
    opacity: 0.42;
    background: rgba(255, 255, 255, 0.03);
}

.aberrant-grid-cell.mother {
    background: radial-gradient(circle, rgba(147, 60, 155, 0.5), rgba(45, 19, 60, 0.9));
    border-color: rgba(234, 158, 255, 0.55);
}

.aberrant-grid-cell.child {
    background: linear-gradient(135deg, rgba(88, 45, 110, 0.86), rgba(35, 31, 58, 0.9));
    border-color: rgba(181, 133, 212, 0.42);
}

.aberrant-grid-cell.minion {
    background: linear-gradient(135deg, rgba(45, 75, 55, 0.88), rgba(27, 46, 36, 0.9));
    border-color: rgba(128, 190, 121, 0.45);
}

.aberrant-grid-cell.bomb {
    background: linear-gradient(135deg, rgba(106, 59, 28, 0.92), rgba(71, 28, 20, 0.92));
    border-color: rgba(255, 143, 91, 0.52);
}

.aberrant-grid-cell.bomb.armed {
    animation: aberrant-bomb-pulse 1.2s infinite ease-in-out;
}

.aberrant-grid-cell.aid {
    background: linear-gradient(135deg, rgba(55, 82, 111, 0.9), rgba(35, 52, 85, 0.92));
    border-color: rgba(148, 200, 255, 0.56);
}

.aberrant-panel {
    padding: 16px;
    border: 1px solid rgba(104, 83, 130, 0.36);
    border-radius: 14px;
    background: rgba(12, 18, 28, 0.86);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.aberrant-panel h4 {
    margin: 0 0 12px;
    color: #dec9f2;
}

.aberrant-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.aberrant-detail-grid > div {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.aberrant-detail-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.aberrant-detail-grid strong {
    color: #f1eaff;
}

.aberrant-cell-detail.empty p {
    margin: 0;
    color: var(--color-text-muted);
}

.aberrant-cell-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.aberrant-cell-detail-header h4 {
    margin: 0 0 4px;
    color: #f0dcff;
}

.aberrant-cell-detail-header p {
    margin: 0;
    color: var(--color-text-muted);
}

.aberrant-cell-detail-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-size: 20px;
}

.aberrant-cell-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.aberrant-cell-detail-grid > div {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.aberrant-cell-detail-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.aberrant-cell-detail-grid strong {
    color: #f1eaff;
}


.aberrant-cell-detail.compact {
    padding: 14px 16px;
}

.aberrant-cell-detail-grid.one-line {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.7fr) auto;
    align-items: stretch;
}

.aberrant-cell-detail-grid.one-line > div {
    min-width: 0;
}

.aberrant-cell-detail-grid.one-line strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aberrant-cell-detail-grid.one-line button {
    width: 100%;
    min-height: 39px;
    border: 1px solid rgba(183, 150, 221, 0.48);
    border-radius: 9px;
    background: linear-gradient(135deg, #3d2a58, #6d4d35);
    color: #f4eef8;
    cursor: pointer;
}

.aberrant-cell-detail-grid.one-line button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.aberrant-event-countdown {
    padding: 14px 16px;
    border: 1px solid rgba(221, 174, 255, 0.32);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(42, 27, 62, 0.86), rgba(20, 30, 35, 0.86));
}

.aberrant-event-countdown > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aberrant-event-countdown span {
    color: #dec9f2;
    font-weight: 700;
}

.aberrant-event-countdown strong {
    color: #ffd98e;
    font-size: 20px;
}

.aberrant-event-countdown p {
    margin: 8px 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}


.aberrant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.aberrant-actions button,
.aberrant-clear-actions button,
.aberrant-shop-list button {
    border: 1px solid rgba(183, 150, 221, 0.48);
    border-radius: 9px;
    background: linear-gradient(135deg, #3d2a58, #426047);
    color: #f4eef8;
    padding: 8px 12px;
    cursor: pointer;
}

.aberrant-actions button:disabled,
.aberrant-clear-actions button:disabled,
.aberrant-shop-list button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.aberrant-actions .danger-btn {
    border-color: rgba(255, 107, 107, 0.5);
    background: linear-gradient(135deg, #5b2633, #7b3b2e);
}

.aberrant-last-message {
    margin: 12px 0 0;
    color: #cfe9c7;
}

.aberrant-clear-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(221, 174, 255, 0.42);
    border-radius: 16px;
    background: radial-gradient(circle at top left, rgba(108, 47, 132, 0.35), rgba(14, 18, 30, 0.92));
    box-shadow: 0 14px 28px rgba(33, 11, 48, 0.32);
}

.aberrant-clear-rune {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #f6e8ff;
    background: rgba(166, 88, 195, 0.28);
    border: 1px solid rgba(236, 192, 255, 0.48);
    box-shadow: 0 0 22px rgba(185, 105, 219, 0.32);
}

.aberrant-clear-content h4 {
    margin: 0 0 8px;
    color: #fff0ff;
    font-size: 20px;
}

.aberrant-clear-content p {
    margin: 0 0 8px;
    color: #ded2e8;
}

.aberrant-clear-eyebrow {
    color: #ffc879 !important;
    font-size: 12px;
    letter-spacing: 0.12em;
}

.aberrant-clear-shop {
    color: #c9f5d5 !important;
}

.aberrant-clear-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}


.aberrant-shop-list {
    display: grid;
    gap: 8px;
}

.aberrant-shop-list .raid-shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.aberrant-shop-list .raid-shop-item.purchased {
    opacity: 0.62;
}

@keyframes aberrant-bomb-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 138, 76, 0); }
    50% { box-shadow: 0 0 18px rgba(255, 138, 76, 0.42); }
}

@media (max-width: 720px) {
    .aberrant-grid {
        gap: 5px;
        padding: 8px;
    }

    .aberrant-grid-cell {
        min-height: 56px;
        border-radius: 9px;
    }

    .aberrant-grid-cell span,
    .aberrant-grid-cell small {
        display: none;
    }
}



/* 境界系统面板 */
#attribute-rank.panel:has(.cultivation-shell),
.system-quick-content.panel:has(.cultivation-shell) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.cultivation-shell {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    display: grid;
    gap: 16px;
    padding: clamp(14px, 2.2vw, 22px);
    border: 1px solid rgba(233, 204, 127, 0.26);
    border-radius: 22px;
    color: #f7ecd3;
    background:
        radial-gradient(circle at 16% 8%, rgba(93, 236, 200, 0.18), transparent 28%),
        radial-gradient(circle at 88% 4%, rgba(255, 209, 102, 0.16), transparent 27%),
        radial-gradient(circle at 52% 118%, rgba(114, 80, 216, 0.20), transparent 42%),
        linear-gradient(145deg, rgba(11, 17, 34, 0.98), rgba(24, 19, 42, 0.97) 52%, rgba(10, 12, 24, 0.98));
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    isolation: isolate;
}

.cultivation-shell::before,
.cultivation-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.cultivation-shell::before {
    inset: -38% -18% auto auto;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: conic-gradient(from 40deg, transparent, rgba(246, 217, 138, 0.18), transparent, rgba(88, 236, 205, 0.16), transparent);
    filter: blur(2px);
    animation: cultivationMist 13s linear infinite;
}

.cultivation-shell::after {
    inset: auto auto -32% -18%;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.16), transparent 66%);
    animation: cultivationQiPulse 5.4s ease-in-out infinite;
}

.cultivation-titlebar,
.cultivation-stage,
.cultivation-grid,
.cultivation-card,
.cultivation-qi-pool,
.cultivation-realm-panel {
    position: relative;
    z-index: 1;
}

.cultivation-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.cultivation-titlebar h3 {
    margin: 2px 0 0;
    color: #fff3cb;
    font-size: clamp(22px, 2.8vw, 30px);
    letter-spacing: 0.08em;
    text-shadow: 0 0 20px rgba(246, 217, 138, 0.28);
}

.cultivation-kicker,
.cultivation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8ff8dd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cultivation-kicker::before,
.cultivation-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}

.cultivation-seal {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: 1px solid rgba(246, 217, 138, 0.42);
    border-radius: 50%;
    color: #ffe6a6;
    font-size: 24px;
    font-weight: 800;
    background: radial-gradient(circle, rgba(246, 217, 138, 0.16), rgba(12, 18, 32, 0.86) 66%);
    box-shadow: 0 0 24px rgba(246, 217, 138, 0.22), inset 0 0 20px rgba(246, 217, 138, 0.08);
}

.cultivation-inner-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 7px;
    border: 1px solid rgba(246, 217, 138, 0.16);
    border-radius: 16px;
    background: rgba(4, 9, 18, 0.28);
}

.cultivation-inner-tabs button {
    display: inline-grid;
    gap: 2px;
    min-width: 148px;
    min-height: 54px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: rgba(247, 236, 211, 0.72);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.cultivation-inner-tabs button span {
    color: inherit;
    font-weight: 800;
}

.cultivation-inner-tabs button small {
    color: rgba(143, 248, 221, 0.72);
    font-size: 12px;
}

.cultivation-inner-tabs button.active {
    color: #fff4c0;
    border-color: rgba(246, 217, 138, 0.34);
    background: linear-gradient(135deg, rgba(246, 217, 138, 0.16), rgba(143, 248, 221, 0.08));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cultivation-inner-tabs button:hover {
    transform: translateY(-1px);
    color: #fff4c0;
}

.cultivation-stage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
    align-items: stretch;
}

.cultivation-stage-copy,
.cultivation-realm-panel,
.cultivation-qi-pool,
.cultivation-card {
    border: 1px solid rgba(246, 217, 138, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
}
.cultivation-stage > *,
.cultivation-grid > *,
.cultivation-card-head > div,
.cultivation-qi-content {
    min-width: 0;
}

.cultivation-stage-copy,
.cultivation-realm-panel {
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
}

.cultivation-stage-copy h2,
.cultivation-realm-panel h2 {
    margin: 8px 0;
    color: #fff8db;
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-shadow: 0 0 28px rgba(246, 217, 138, 0.22);
}

.cultivation-realm-panel h2 small {
    margin-left: 10px;
    color: #8ff8dd;
    font-size: 0.45em;
    vertical-align: middle;
}

.cultivation-stage-copy p,
.cultivation-realm-panel p,
.cultivation-card p,
.cultivation-qi-content p {
    margin: 0;
    color: rgba(247, 236, 211, 0.78);
    line-height: 1.65;
}

.cultivation-rule-list,
.cultivation-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.cultivation-rule-list span,
.cultivation-chip-row span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(143, 248, 221, 0.20);
    border-radius: 999px;
    color: #d7fff3;
    background: rgba(143, 248, 221, 0.08);
    font-size: 12px;
}

.cultivation-primary,
.cultivation-secondary {
    width: auto;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.cultivation-primary {
    padding: 11px 18px;
    color: #2d1d03;
    background: linear-gradient(135deg, #fff3b0, #f5b84b 52%, #d9792b);
    box-shadow: 0 10px 24px rgba(245, 184, 75, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cultivation-secondary {
    padding: 9px 14px;
    color: #dcfff6;
    border: 1px solid rgba(143, 248, 221, 0.28);
    background: linear-gradient(135deg, rgba(143, 248, 221, 0.16), rgba(88, 166, 255, 0.12));
}

.cultivation-primary:hover:not(:disabled),
.cultivation-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(245, 184, 75, 0.25), 0 0 22px rgba(143, 248, 221, 0.12);
}

.cultivation-primary:disabled,
.cultivation-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    box-shadow: none;
}

.cultivation-mandala {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
    border: 1px solid rgba(143, 248, 221, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle, rgba(143, 248, 221, 0.17), transparent 34%),
        radial-gradient(circle, rgba(246, 217, 138, 0.13), transparent 58%);
    overflow: hidden;
}

.cultivation-mandala span {
    position: absolute;
    border: 1px solid rgba(246, 217, 138, 0.22);
    border-radius: 50%;
    animation: cultivationMist 10s linear infinite;
}

.cultivation-mandala span:nth-child(1) { width: 72%; height: 72%; }
.cultivation-mandala span:nth-child(2) { width: 52%; height: 52%; animation-direction: reverse; }
.cultivation-mandala span:nth-child(3) { width: 32%; height: 32%; }

.cultivation-mandala strong {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    color: #fff4c0;
    font-size: 44px;
    background: radial-gradient(circle, rgba(246, 217, 138, 0.22), rgba(12, 18, 32, 0.72));
    text-shadow: 0 0 28px rgba(246, 217, 138, 0.5);
}

.cultivation-star-orbit {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, minmax(24px, 1fr));
    gap: 8px;
    margin: 18px 0 14px;
    padding: 14px;
    border: 1px solid rgba(143, 248, 221, 0.14);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(143, 248, 221, 0.06), rgba(246, 217, 138, 0.10), rgba(143, 248, 221, 0.06));
}

.cultivation-star-orbit::before {
    content: "";
    position: absolute;
    inset: 50% 18px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(246, 217, 138, 0.46), transparent);
    transform: translateY(-50%);
}

.cultivation-star {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 24px;
    border-radius: 50%;
    color: rgba(247, 236, 211, 0.34);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.cultivation-star i {
    font-style: normal;
    filter: drop-shadow(0 0 6px currentColor);
}

.cultivation-star.filled {
    color: #fff1a9;
    background: radial-gradient(circle, rgba(255, 239, 165, 0.42), rgba(245, 184, 75, 0.16) 62%, rgba(255, 255, 255, 0.05));
    box-shadow: 0 0 18px rgba(245, 184, 75, 0.34), inset 0 0 0 1px rgba(255, 239, 165, 0.34);
}

.cultivation-star.next {
    color: #8ff8dd;
    animation: cultivationNextStar 1.8s ease-in-out infinite;
}

.cultivation-star.bottleneck-star {
    color: #ffdf8a;
    box-shadow: 0 0 18px rgba(255, 102, 102, 0.28), inset 0 0 0 1px rgba(255, 187, 90, 0.34);
}

.cultivation-qi-pool {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: clamp(15px, 2vw, 20px);
    min-height: 100%;
}

.cultivation-qi-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    color: #dcfff6;
    background:
        radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.92), transparent 10%),
        radial-gradient(circle, rgba(143, 248, 221, 0.54), rgba(60, 129, 214, 0.24) 48%, rgba(12, 18, 32, 0.70));
    box-shadow: 0 0 36px rgba(143, 248, 221, 0.34), inset 0 0 28px rgba(255, 255, 255, 0.12);
    animation: cultivationQiFloat 3.8s ease-in-out infinite;
}

.cultivation-qi-orb span {
    position: absolute;
    inset: -10px;
    border: 1px dashed rgba(143, 248, 221, 0.34);
    border-radius: inherit;
    animation: cultivationMist 7s linear infinite;
}

.cultivation-qi-orb b {
    font-size: 34px;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.42);
}

.cultivation-qi-content {
    display: grid;
    gap: 8px;
}

.cultivation-qi-content > strong {
    color: #fff7d2;
    font-size: clamp(24px, 4vw, 40px);
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-shadow: 0 0 24px rgba(246, 217, 138, 0.24);
}

.cultivation-qi-content p i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #8ff8dd;
    box-shadow: 0 0 12px #8ff8dd;
    animation: cultivationQiPulse 1.4s ease-in-out infinite;
}

.cultivation-last-gain {
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(143, 248, 221, 0.24);
    border-radius: 999px;
    color: #aefeea;
    background: rgba(143, 248, 221, 0.08);
    font-size: 12px;
}

.cultivation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px;
}

.cultivation-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
}

.cultivation-card-head {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

.cultivation-card-head h4 {
    margin: 0 0 3px;
    color: #fff4c0;
    font-size: 18px;
}

.cultivation-card-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(246, 217, 138, 0.28);
    border-radius: 12px;
    color: #fff0a8;
    background: rgba(246, 217, 138, 0.10);
    box-shadow: inset 0 0 18px rgba(246, 217, 138, 0.08);
    font-weight: 800;
}

.cultivation-progress {
    display: grid;
    gap: 7px;
}

.cultivation-progress.compact {
    margin-top: 10px;
}

.cultivation-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: rgba(247, 236, 211, 0.72);
    font-size: 13px;
}

.cultivation-progress-meta strong {
    color: #fff2b8;
    white-space: nowrap;
}

.cultivation-progress-bar {
    overflow: hidden;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.cultivation-progress-bar span {
    display: block;
    width: 0;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #72f6dc, #fff0a8, #f3a346);
    box-shadow: 0 0 16px rgba(143, 248, 221, 0.32);
    transition: width 0.35s ease;
}

.cultivation-caves-view {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
}

.cultivation-caves-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
    align-items: stretch;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(246, 217, 138, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 20%, rgba(143, 248, 221, 0.10), transparent 34%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
    backdrop-filter: blur(10px);
}

.cultivation-caves-hero h2 {
    margin: 8px 0;
    color: #fff8db;
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.1;
    word-break: keep-all;
}

.cultivation-caves-hero p {
    margin: 0;
    color: rgba(247, 236, 211, 0.76);
    line-height: 1.68;
}

.cultivation-caves-total {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(143, 248, 221, 0.16);
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 0%, rgba(143, 248, 221, 0.16), transparent 55%),
        rgba(5, 11, 22, 0.28);
}

.cultivation-caves-total span,
.cultivation-caves-total small {
    color: rgba(247, 236, 211, 0.66);
    font-size: 12px;
}

.cultivation-caves-total strong {
    color: #fff3bd;
    font-size: clamp(24px, 3.3vw, 36px);
    overflow-wrap: anywhere;
    text-shadow: 0 0 22px rgba(246, 217, 138, 0.24);
}

.cultivation-cave-field {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(12px, 2vw, 18px);
    padding: clamp(16px, 2.4vw, 24px);
    min-height: 440px;
    border: 1px solid rgba(246, 217, 138, 0.14);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(246, 217, 138, 0.16), transparent 46%),
        radial-gradient(circle at 22% 22%, rgba(143, 248, 221, 0.12), transparent 26%),
        radial-gradient(circle at 80% 18%, rgba(115, 88, 214, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(5, 9, 19, 0.30), rgba(2, 5, 12, 0.50));
    perspective: 900px;
    overflow: hidden;
}

.cultivation-cave-field::before,
.cultivation-cave-field::after,
.cultivation-cave-ledge {
    content: "";
    position: absolute;
    pointer-events: none;
}

.cultivation-cave-field::before {
    inset: 12% 8% auto;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(143, 248, 221, 0.12), transparent 64%);
    filter: blur(2px);
    transform: translateZ(-90px) scale(0.82);
}

.cultivation-cave-field::after {
    inset: auto 4% 8%;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.48), transparent 68%);
    transform: rotateX(72deg);
}

.cultivation-cave-ledge {
    left: 8%;
    right: 8%;
    bottom: 24%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(246, 217, 138, 0.24), transparent);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
}

.cultivation-cave {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 178px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    align-self: end;
    transform-style: preserve-3d;
}

.cultivation-cave.cave-1 {
    transform: translateY(18px) translateZ(-70px) scale(0.92);
}

.cultivation-cave.cave-2 {
    transform: translateY(-16px) translateZ(28px) scale(1.04);
}

.cultivation-cave.cave-3 {
    transform: translateY(26px) translateZ(-96px) scale(0.88);
}

.cultivation-cave.cave-4 {
    transform: translateY(8px) translateZ(4px) scale(0.98);
}

.cultivation-cave-mouth {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    transform-style: preserve-3d;
}

.cultivation-cave-mouth::before {
    content: "";
    position: absolute;
    width: clamp(118px, 14vw, 168px);
    aspect-ratio: 1.18;
    border-radius: 50% 50% 44% 44% / 46% 46% 58% 58%;
    background:
        radial-gradient(ellipse at 50% 58%, rgba(0, 0, 0, 0.96) 0 38%, rgba(13, 20, 34, 0.96) 48%, rgba(54, 49, 72, 0.84) 64%, rgba(246, 217, 138, 0.22) 78%, transparent 80%),
        linear-gradient(145deg, rgba(91, 76, 92, 0.78), rgba(31, 27, 48, 0.92));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.42),
        inset 0 0 28px rgba(0, 0, 0, 0.76),
        inset 0 8px 18px rgba(255, 245, 187, 0.10),
        0 0 0 1px rgba(246, 217, 138, 0.18);
}

.cultivation-cave-mouth::after {
    content: "";
    position: absolute;
    width: clamp(92px, 10.5vw, 128px);
    aspect-ratio: 1.08;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 54%, rgba(0, 0, 0, 0.94) 0 46%, rgba(14, 18, 30, 0.74) 62%, transparent 70%);
    transform: translateY(7px) translateZ(26px);
    box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.92);
}

.cave-depth {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.depth-a {
    width: clamp(70px, 8vw, 96px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(143, 248, 221, 0.13), transparent 68%);
    transform: translateY(3px) translateZ(50px);
    filter: blur(1px);
}

.depth-b {
    width: clamp(46px, 5vw, 62px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(246, 217, 138, 0.16), transparent 72%);
    transform: translateY(15px) translateZ(78px);
}

.cave-core {
    position: absolute;
    width: 18px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #8ff8dd;
    box-shadow: 0 0 22px rgba(143, 248, 221, 0.76);
    transform: translateY(20px) translateZ(96px);
    opacity: 0.22;
}

.cultivation-cave.unlocked .cave-core {
    opacity: 1;
    animation: cultivationQiPulse 2.4s ease-in-out infinite;
}

.cultivation-cave.locked .cultivation-cave-mouth {
    filter: saturate(0.7) brightness(0.76);
}

.cultivation-cave-info {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(246, 217, 138, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.032));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
}

.cultivation-cave.unlocked .cultivation-cave-info {
    border-color: rgba(143, 248, 221, 0.24);
}

.cultivation-cave-info h4 {
    margin: 0;
    color: #fff4c0;
    font-size: 18px;
}

.cultivation-cave-info p {
    margin: 0;
    color: rgba(247, 236, 211, 0.74);
    line-height: 1.58;
}

.cultivation-cave-level {
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid rgba(246, 217, 138, 0.22);
    border-radius: 999px;
    color: #fff1ae;
    background: rgba(246, 217, 138, 0.08);
    font-weight: 800;
}

.cultivation-cave-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cultivation-cave-stats span {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    color: #d7fff3;
    background: rgba(255, 255, 255, 0.045);
    overflow-wrap: anywhere;
    font-size: 12px;
}

.cultivation-cave-recycle {
    display: grid;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid rgba(143, 248, 221, 0.20);
    border-radius: 10px;
    color: rgba(247, 236, 211, 0.74);
    background: rgba(143, 248, 221, 0.055);
    font-size: 11px;
}

.cultivation-cave-recycle i {
    color: #8ff8dd;
    margin-right: 4px;
}

.cultivation-cave-recycle strong {
    color: #fff1ae;
    font-size: 12px;
}

.cultivation-recycle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
}

.cultivation-recycle-button i {
    color: #8ff8dd;
}

@container (max-width: 760px) {
    .cultivation-caves-hero {
        grid-template-columns: 1fr;
    }

    .cultivation-cave-field {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cultivation-cave,
    .cultivation-cave.cave-1,
    .cultivation-cave.cave-2,
    .cultivation-cave.cave-3,
    .cultivation-cave.cave-4 {
        transform: none;
    }

    .cultivation-cave {
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
    }

    .cultivation-caves-hero h2 {
        font-size: clamp(28px, 8cqw, 36px);
    }
}

@container (max-width: 480px) {
    .cultivation-cave {
        grid-template-columns: 1fr;
        grid-template-rows: 142px auto;
    }

    .cultivation-cave-stats {
        grid-template-columns: 1fr;
    }
}

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

.cultivation-stat-grid > div,
.cultivation-breathe-count {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
}

.cultivation-stat-grid span,
.cultivation-breathe-count span {
    display: block;
    color: rgba(247, 236, 211, 0.62);
    font-size: 12px;
}

.cultivation-stat-grid strong,
.cultivation-breathe-count strong {
    display: block;
    overflow-wrap: anywhere;
    color: #fff3bd;
    font-size: 17px;
    margin-top: 4px;
}

.cultivation-breathe-count strong {
    font-size: 30px;
    line-height: 1;
}

.cultivation-muted {
    color: rgba(247, 236, 211, 0.62) !important;
    font-size: 13px;
}

.cultivation-break-card.ready {
    border-color: rgba(143, 248, 221, 0.34);
    box-shadow: 0 0 26px rgba(143, 248, 221, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cultivation-break-card.locked {
    border-color: rgba(255, 112, 112, 0.20);
}

.cultivation-anim-star-up .cultivation-star.filled:last-of-type,
.cultivation-anim-star-up .cultivation-star.filled {
    animation: cultivationStarIgnite 0.9s ease-out both;
    animation-delay: calc(var(--star-index) * 0.035s);
}

.cultivation-anim-breakthrough {
    animation: cultivationBreakthrough 1.2s ease-out both;
}

.cultivation-anim-breakthrough .cultivation-stage,
.cultivation-anim-breakthrough .cultivation-card {
    animation: cultivationRealmReveal 1s ease-out both;
}

.cultivation-anim-breathe .cultivation-qi-orb,
.cultivation-anim-qi-refresh .cultivation-qi-orb,
.cultivation-anim-activate .cultivation-mandala strong {
    animation: cultivationBreath 1.05s ease-out both;
}

.cultivation-anim-qi-refresh .cultivation-last-gain,
.cultivation-anim-breathe .cultivation-last-gain {
    animation: cultivationGainFloat 1.25s ease-out both;
}

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

@keyframes cultivationQiPulse {
    0%, 100% { opacity: 0.62; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes cultivationQiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes cultivationNextStar {
    0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(143, 248, 221, 0.24); }
    50% { transform: scale(1.12); box-shadow: 0 0 18px rgba(143, 248, 221, 0.36), inset 0 0 0 1px rgba(143, 248, 221, 0.42); }
}

@keyframes cultivationStarIgnite {
    0% { transform: scale(0.72) rotate(-12deg); filter: brightness(1); }
    42% { transform: scale(1.22) rotate(5deg); filter: brightness(1.22); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes cultivationBreakthrough {
    0% { filter: brightness(1); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34); }
    28% { filter: brightness(1.22); box-shadow: 0 0 0 1px rgba(255, 241, 169, 0.30), 0 0 34px rgba(246, 217, 138, 0.24); }
    100% { filter: brightness(1); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
}

@keyframes cultivationRealmReveal {
    0% { transform: translateY(12px) scale(0.98); opacity: 0.68; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes cultivationBreath {
    0% { transform: scale(0.9); filter: brightness(1); }
    35% { transform: scale(1.18); filter: brightness(1.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes cultivationGainFloat {
    0% { transform: translateY(8px); opacity: 0; }
    24% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-6px); opacity: 0.9; }
}

@media (max-width: 980px) {
    .cultivation-stage,
    .cultivation-grid,
    .cultivation-caves-hero {
        grid-template-columns: 1fr;
    }

    .cultivation-cave-field {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cultivation-cave,
    .cultivation-cave.cave-1,
    .cultivation-cave.cave-2,
    .cultivation-cave.cave-3,
    .cultivation-cave.cave-4 {
        transform: none;
    }

    .cultivation-cave {
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
    }
}

@media (max-width: 620px) {
    .cultivation-shell {
        border-radius: 16px;
        padding: 12px;
    }

    .cultivation-titlebar {
        align-items: center;
    }

    .cultivation-seal {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .cultivation-qi-pool {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cultivation-qi-orb {
        margin: 0 auto;
    }

    .cultivation-stat-grid {
        grid-template-columns: 1fr;
    }

    .cultivation-star-orbit {
        grid-template-columns: repeat(5, minmax(28px, 1fr));
        border-radius: 18px;
    }

    .cultivation-star-orbit::before {
        display: none;
    }

    .cultivation-inner-tabs button,
    .cultivation-primary,
    .cultivation-secondary {
        width: 100%;
    }

    .cultivation-cave {
        grid-template-columns: 1fr;
        grid-template-rows: 142px auto;
    }

    .cultivation-cave-field {
        padding: 12px;
    }

    .cultivation-cave-stats {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cultivation-shell,
    .cultivation-shell::before,
    .cultivation-shell::after,
    .cultivation-mandala span,
    .cultivation-star,
    .cultivation-qi-orb,
    .cultivation-qi-orb span,
    .cultivation-qi-content p i,
    .cultivation-cave.unlocked .cave-core,
    .cultivation-anim-breakthrough,
    .cultivation-anim-breakthrough .cultivation-stage,
    .cultivation-anim-breakthrough .cultivation-card,
    .cultivation-anim-breathe .cultivation-qi-orb,
    .cultivation-anim-qi-refresh .cultivation-qi-orb,
    .cultivation-anim-activate .cultivation-mandala strong,
    .cultivation-anim-star-up .cultivation-star.filled {
        animation: none !important;
    }
}

.heavenly-prison-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 199, 104, 0.34);
    border-radius: 18px;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 214, 132, 0.24), transparent 30%),
        radial-gradient(circle at 88% 76%, rgba(164, 92, 255, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(48, 28, 17, 0.96), rgba(34, 23, 39, 0.96));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}

.heavenly-prison-copy,
.heavenly-prison-footer {
    display: grid;
    gap: 8px;
}

.heavenly-prison-copy h3 {
    margin: 0;
    color: #ffe0a0;
    font-size: 22px;
}

.heavenly-prison-copy p,
.heavenly-prison-footer span {
    margin: 0;
    color: rgba(255, 245, 220, 0.72);
    font-size: 13px;
    line-height: 1.5;
}

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

.heavenly-prison-stats span {
    min-width: 0;
    border-radius: 14px;
    padding: 8px 10px;
}

.heavenly-prison-stats em,
.heavenly-prison-stats strong {
    display: block;
}

.heavenly-prison-footer {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    align-items: center;
}

.heavenly-prison-footer button {
    justify-self: end;
    white-space: nowrap;
}

.heavenly-prison-footer button,
.exclusive-weapon-card button,
.chaos-actions button {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff7dc;
    background: linear-gradient(135deg, rgba(244, 172, 72, 0.96), rgba(122, 74, 255, 0.92));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.heavenly-prison-footer button:disabled,
.exclusive-weapon-card button:disabled,
.chaos-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chaos-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.chaos-summary span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 245, 220, 0.72);
}

.chaos-summary strong {
    color: #ffe0a0;
}

.chaos-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.chaos-actions > span {
    color: rgba(255, 245, 220, 0.76);
    margin-right: auto;
}

.exclusive-weapon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.exclusive-weapon-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.exclusive-weapon-toggle > span:first-child {
    display: grid;
    gap: 4px;
}

.exclusive-weapon-toggle strong {
    color: #fff0b8;
    font-size: 20px;
}

.exclusive-weapon-toggle small,
.exclusive-weapon-note,
.exclusive-weapon-summary {
    color: rgba(255, 245, 220, 0.68);
}

.exclusive-weapon-summary {
    white-space: nowrap;
}

.exclusive-weapon-summary b {
    color: #ffe0a0;
}

.exclusive-weapon-note {
    margin: 12px 0;
}

.exclusive-weapon-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.20);
}

.exclusive-weapon-card.is-maxed {
    border-color: rgba(255, 210, 94, 0.42);
    box-shadow: inset 0 0 24px rgba(255, 210, 94, 0.08);
}

.exclusive-weapon-card div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.exclusive-weapon-card .exclusive-weapon-progress {
    flex-wrap: wrap;
    align-items: center;
    border-radius: 8px;
    padding: 7px 9px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.exclusive-weapon-card .exclusive-weapon-progress span:last-child {
    color: #ffe0a0;
}

.exclusive-weapon-card .exclusive-weapon-pity-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
}

.exclusive-weapon-card .exclusive-weapon-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 224, 160, 0.16);
    border: 1px solid rgba(255, 224, 160, 0.30);
    color: #ffe0a0;
    box-shadow: none;
}

.exclusive-weapon-card .exclusive-weapon-icon-btn:disabled {
    opacity: 0.38;
}

.exclusive-weapon-card strong {
    color: #ffe0a0;
}

.exclusive-weapon-card span,
.exclusive-weapon-card small {
    color: rgba(255, 245, 220, 0.68);
}

@media (max-width: 760px) {
    .heavenly-prison-card,
    .heavenly-prison-footer,
    .exclusive-weapon-toggle {
        grid-template-columns: 1fr;
    }

    .heavenly-prison-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .heavenly-prison-footer button {
        justify-self: stretch;
    }
}

/* --- Territory MVP --- */
#territory-view {
    color: var(--color-text-light);
}

.territory-shell {
    display: grid;
    gap: 14px;
}

.territory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.territory-header h2 {
    margin: 0 0 6px;
    color: var(--color-wood);
}

.territory-header p,
.territory-muted {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.territory-icon-btn,
.territory-toolbar button,
.territory-card button,
.territory-plot button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-wood);
    color: #fff7df;
    cursor: pointer;
}

.territory-icon-btn {
    width: 38px;
    padding: 0;
}

.territory-toolbar button:disabled,
.territory-card button:disabled,
.territory-plot button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.territory-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 8px;
}

.territory-resource {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(118, 84, 48, 0.22);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.38);
}

.territory-resource span {
    font-size: 12px;
    color: var(--color-text-muted);
}

.territory-resource strong {
    color: var(--color-wood);
    font-size: 17px;
}

.territory-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.territory-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: max-content;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.46);
    color: var(--color-text-light);
    cursor: pointer;
}

.territory-tabs button.active {
    background: var(--color-wood);
    color: #fff7df;
}

.territory-tab-body {
    display: grid;
    gap: 14px;
}

.territory-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(118, 84, 48, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.35);
}

.territory-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.territory-toolbar select,
.territory-toolbar input,
.territory-plot select,
.territory-route-slot select {
    min-height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fffaf0;
    color: var(--color-text-light);
}

.territory-toolbar input {
    width: 82px;
    padding: 0 8px;
}

.territory-check input {
    width: auto;
}

.territory-field-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(92px, 1fr));
    gap: 8px;
}

.territory-plot {
    display: grid;
    gap: 8px;
    min-height: 148px;
    padding: 10px;
    border: 1px solid rgba(118, 84, 48, 0.24);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.46);
}

.territory-plot.locked {
    place-items: center;
    text-align: center;
    background: rgba(83, 73, 61, 0.14);
}

.territory-plot.ready {
    border-color: rgba(112, 154, 75, 0.75);
    box-shadow: inset 0 0 0 1px rgba(112, 154, 75, 0.18);
}

.territory-plot-head,
.territory-card header,
.territory-run-card,
.territory-route-slot > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.territory-plot-head i,
.territory-card header > i,
.territory-run-card > i,
.territory-route-slot i {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(118, 84, 48, 0.12);
    color: var(--color-wood);
}

.territory-plot p,
.territory-plot small,
.territory-card p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.territory-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(118, 84, 48, 0.16);
}

.territory-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6fa66a, #d1a84a);
}

.territory-plot-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.territory-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.territory-card-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.territory-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(118, 84, 48, 0.24);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.42);
}

.territory-card.selected {
    border-color: rgba(112, 154, 75, 0.75);
    background: rgba(112, 154, 75, 0.12);
}

.territory-card h3,
.territory-log h3 {
    margin: 0;
    border: 0;
    padding: 0;
    color: var(--color-wood);
    font-size: 16px;
}

.territory-card header span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.territory-cost,
.territory-info-strip,
.territory-chip-list,
.territory-last-draw {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.territory-cost span,
.territory-info-strip span,
.territory-chip-list span,
.territory-last-draw span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(118, 84, 48, 0.1);
    color: var(--color-text-muted);
    font-size: 12px;
}

.territory-info-strip.tight {
    gap: 5px;
}

.territory-dungeon-stage,
.territory-log {
    display: grid;
    gap: 10px;
}

.territory-run-card {
    padding: 12px;
    border: 1px solid rgba(118, 84, 48, 0.24);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.42);
}

.territory-run-card > div {
    flex: 1;
}

.territory-run-card h3 {
    margin: 0 0 4px;
    color: var(--color-wood);
}

.territory-run-card p {
    margin: 0 0 8px;
    color: var(--color-text-muted);
}

.territory-log {
    padding: 12px;
    border: 1px solid rgba(118, 84, 48, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.32);
}

.territory-log > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) minmax(120px, auto);
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid rgba(118, 84, 48, 0.12);
}

.territory-log small {
    text-align: right;
    color: var(--color-text-muted);
}

.territory-route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.territory-route-slot {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(118, 84, 48, 0.24);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.42);
}

.territory-lottery-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(48px, 1fr));
    gap: 6px;
}

.territory-lottery-grid > div {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 58px;
    padding: 6px;
    border: 1px solid rgba(118, 84, 48, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.42);
    text-align: center;
    font-size: 11px;
}

.territory-lottery-grid > div.claimed {
    background: rgba(209, 168, 74, 0.16);
}

.territory-empty,
.territory-loading {
    padding: 16px;
    border: 1px dashed rgba(118, 84, 48, 0.3);
    border-radius: 6px;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 900px) {
    .territory-field-grid {
        grid-template-columns: repeat(3, minmax(92px, 1fr));
    }

    .territory-lottery-grid {
        grid-template-columns: repeat(5, minmax(48px, 1fr));
    }
}

@media (max-width: 560px) {
    .territory-header,
    .territory-log > div {
        grid-template-columns: 1fr;
    }

    .territory-header {
        align-items: flex-start;
    }

    .territory-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-toolbar {
        align-items: stretch;
    }

    .territory-toolbar label,
    .territory-toolbar button {
        width: 100%;
    }
}

/* --- Territory v2 --- */
#territory-view {
    color: #25313b;
}

.territory-app {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(70, 84, 88, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(246, 247, 239, 0.96), rgba(232, 237, 225, 0.96)),
        var(--color-panel-bg);
    box-shadow: 0 14px 34px rgba(34, 42, 45, 0.1);
}

.territory-topbar,
.territory-workspace-head,
.territory-command-panel,
.territory-info-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.territory-topbar h2,
.territory-workspace-head h3 {
    margin: 0;
    color: #26323a;
    letter-spacing: 0;
}

.territory-topbar h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 24px;
}

.territory-topbar-meta,
.territory-muted {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    color: #69737a;
    font-size: 13px;
}

.territory-topbar-meta span,
.territory-pill,
.territory-info-band span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid rgba(78, 94, 94, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: #4f5c62;
    font-size: 12px;
}

.territory-pill b,
.territory-info-band b {
    color: #27323a;
}

.territory-icon-button,
.territory-command-panel button,
.territory-plot button,
.territory-building-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(45, 65, 67, 0.18);
    border-radius: 6px;
    background: #315b62;
    color: #f8fbef;
    cursor: pointer;
    font-size: 13px;
}

.territory-icon-button {
    width: 38px;
    padding: 0;
}

.territory-command-panel button:disabled,
.territory-plot button:disabled,
.territory-building-card button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.territory-resource-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.territory-resource-chip {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 7px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(72, 91, 92, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
}

.territory-resource-chip i {
    grid-row: 1 / span 2;
    align-self: center;
    color: #607b5a;
    font-size: 16px;
}

.territory-resource-chip span {
    overflow: hidden;
    color: #66727a;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-resource-chip strong {
    color: #26323a;
    font-size: 16px;
}

.territory-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.territory-district-list {
    display: grid;
    gap: 8px;
    position: sticky;
    top: 10px;
}

.territory-district {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: center;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-left: 4px solid #7c8b6b;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
    color: #334048;
    text-align: left;
    cursor: pointer;
}

.territory-district i {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(49, 91, 98, 0.1);
    color: #315b62;
}

.territory-district span,
.territory-district small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-district span {
    font-weight: 700;
}

.territory-district small {
    color: #707a80;
    font-size: 12px;
}

.territory-district.active {
    background: #26323a;
    color: #f7f5e8;
    box-shadow: 0 10px 24px rgba(37, 49, 56, 0.18);
}

.territory-district.active small {
    color: rgba(247, 245, 232, 0.72);
}

.territory-district.active i {
    background: rgba(255, 255, 255, 0.12);
    color: #f0ce78;
}

.territory-tone-green { border-left-color: #6fa66a; }
.territory-tone-gold { border-left-color: #c99b47; }
.territory-tone-stone { border-left-color: #75848a; }
.territory-tone-red { border-left-color: #b95e58; }
.territory-tone-violet { border-left-color: #7b74b7; }
.territory-tone-teal { border-left-color: #4f9a96; }
.territory-tone-blue { border-left-color: #5d8fb8; }

.territory-workspace {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.territory-workspace-head {
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(54, 70, 72, 0.15);
    border-left-width: 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.territory-kicker {
    display: block;
    margin-bottom: 4px;
    color: #6c767c;
    font-size: 12px;
}

.territory-workspace-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}

.territory-metric-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.territory-metric-row span {
    display: grid;
    gap: 2px;
    min-width: 92px;
    padding: 7px 9px;
    border-radius: 6px;
    background: rgba(38, 50, 58, 0.06);
}

.territory-metric-row em {
    color: #69737a;
    font-size: 11px;
    font-style: normal;
}

.territory-metric-row b {
    color: #26323a;
    font-size: 15px;
}

.territory-command-panel {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 10px;
    border: 1px solid rgba(54, 70, 72, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.territory-command-panel label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #5c6870;
    font-size: 13px;
}

.territory-command-panel select,
.territory-command-panel input,
.territory-plot select,
.territory-route-slot select {
    min-height: 32px;
    border: 1px solid rgba(53, 72, 75, 0.2);
    border-radius: 6px;
    background: #fbfcf4;
    color: #26323a;
}

.territory-command-panel input {
    width: 86px;
    padding: 0 8px;
}

.territory-switch {
    min-height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(38, 50, 58, 0.05);
}

.territory-switch input {
    width: auto;
}

.territory-field-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(96px, 1fr));
    gap: 8px;
}

.territory-plot {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 8px;
    min-height: 150px;
    padding: 10px;
    border: 1px solid rgba(70, 91, 77, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.territory-plot header,
.territory-building-card header,
.territory-dungeon-card header,
.territory-route-slot header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.territory-plot header i,
.territory-building-card header i,
.territory-dungeon-card header i,
.territory-route-slot header i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(49, 91, 98, 0.1);
    color: #315b62;
}

.territory-plot strong,
.territory-building-card strong,
.territory-dungeon-card strong,
.territory-route-slot strong {
    color: #26323a;
}

.territory-plot p,
.territory-plot small,
.territory-building-card p,
.territory-building-card span,
.territory-dungeon-card span {
    margin: 0;
    color: #69737a;
    font-size: 12px;
}

.territory-plot.locked {
    place-items: center;
    grid-template-rows: none;
    color: #7b8589;
    text-align: center;
    background: rgba(38, 50, 58, 0.06);
}

.territory-plot.ready {
    border-color: rgba(111, 166, 106, 0.75);
    box-shadow: inset 0 0 0 1px rgba(111, 166, 106, 0.24);
}

.territory-progress,
.territory-mini-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(38, 50, 58, 0.12);
}

.territory-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6fa66a, #d5a34d);
}

.territory-mini-bar {
    height: 5px;
}

.territory-mini-bar span {
    display: block;
    height: 100%;
    background: #72b36e;
}

.territory-inline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-self: end;
}

.territory-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.territory-card-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.territory-building-card,
.territory-unit-card,
.territory-dungeon-card,
.territory-route-slot {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.64);
}

.territory-unit-card {
    grid-template-columns: 36px minmax(0, 1fr);
}

.territory-unit-card > i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(49, 91, 98, 0.1);
    color: #315b62;
}

.territory-unit-card strong,
.territory-unit-card span,
.territory-unit-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-unit-card span,
.territory-unit-card small {
    color: #69737a;
    font-size: 12px;
}

.territory-unit-card small {
    grid-column: 1 / -1;
}

.territory-unit-card.selected {
    border-color: rgba(111, 166, 106, 0.7);
    background: rgba(111, 166, 106, 0.12);
}

.territory-cost-row,
.territory-chip-line,
.territory-last-draw {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.territory-info-band {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid rgba(54, 70, 72, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.54);
}

.territory-dungeon-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
    align-items: stretch;
}

.territory-dungeon-canvas {
    display: block;
    width: 100%;
    height: 440px;
    border: 1px solid rgba(34, 42, 45, 0.2);
    border-radius: 8px;
    background: #17222b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.territory-dungeon-side {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
}

.territory-party-strip {
    display: grid;
    gap: 8px;
}

.territory-party-strip article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.66);
}

.territory-party-strip i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #26323a;
    color: #f0ce78;
}

.territory-party-strip strong,
.territory-party-strip span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-party-strip span {
    color: #69737a;
    font-size: 12px;
}

.territory-event-log {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

.territory-event-log h4 {
    margin: 0;
    color: #26323a;
    font-size: 15px;
}

.territory-event-log > div {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    padding-top: 7px;
    border-top: 1px solid rgba(54, 70, 72, 0.1);
}

.territory-event-log > div i {
    color: #315b62;
    margin-top: 2px;
}

.territory-event-log span {
    min-width: 0;
    color: #3d4a51;
    font-size: 13px;
}

.territory-event-log small {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.territory-route-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.territory-explore-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.territory-explore-hero h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 4px;
    color: #26323a;
    font-size: 20px;
}

.territory-explore-hero p {
    margin: 0;
    color: #69737a;
    font-size: 13px;
}

.territory-explore-statline {
    display: grid;
    grid-template-columns: repeat(4, minmax(76px, 1fr));
    gap: 7px;
}

.territory-explore-statline span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    background: rgba(38, 50, 58, 0.06);
}

.territory-explore-statline em {
    color: #69737a;
    font-size: 11px;
    font-style: normal;
}

.territory-explore-statline b {
    color: #26323a;
    font-size: 16px;
}

.territory-explore-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(54, 70, 72, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
}

.territory-explore-map-column {
    min-width: 0;
}

.territory-explore-dice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.territory-explore-dice {
    display: grid;
    grid-template-columns: 24px minmax(52px, auto) auto;
    gap: 6px;
    align-items: center;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid rgba(49, 91, 98, 0.22);
    border-radius: 8px;
    background: #fbfcf4;
    color: #26323a;
    cursor: pointer;
}

.territory-explore-dice i {
    color: #315b62;
}

.territory-explore-dice span,
.territory-explore-dice b {
    white-space: nowrap;
}

.territory-explore-dice:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.territory-directed-control,
.territory-land-select {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #5c6870;
    font-size: 13px;
}

.territory-directed-control select,
.territory-land-select select {
    min-height: 34px;
    border: 1px solid rgba(53, 72, 75, 0.2);
    border-radius: 6px;
    background: #fbfcf4;
    color: #26323a;
}

.territory-explore-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 360px;
    gap: 12px;
    align-items: start;
}

.territory-explore-board {
    display: grid;
    grid-template-columns: repeat(var(--explore-cols, 12), minmax(34px, 1fr));
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(49, 91, 98, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49, 91, 98, 0.06) 1px, transparent 1px),
        rgba(255, 255, 255, 0.6);
    background-size: 8.333% 11.111%;
}

.territory-explore-cell {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1px solid rgba(54, 70, 72, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.56);
    color: #69737a;
    font-size: 12px;
}

.territory-explore-cell i {
    font-size: 15px;
}

.territory-explore-cell small {
    position: absolute;
    top: 3px;
    left: 4px;
    color: inherit;
    font-size: 10px;
    line-height: 1;
}

.territory-explore-cell.route {
    border-color: rgba(49, 91, 98, 0.32);
    background: #eef3ed;
    color: #315b62;
}

.territory-explore-cell.route.active {
    border-color: rgba(213, 163, 77, 0.95);
    background: #fff4d6;
    color: #9a641d;
    box-shadow: 0 0 0 2px rgba(213, 163, 77, 0.2);
}

.territory-explore-cell.building {
    border-color: rgba(103, 86, 67, 0.28);
    background: #f2eee3;
    color: #6d5841;
}

.territory-explore-cell.building b {
    position: absolute;
    right: 4px;
    bottom: 3px;
    color: #26323a;
    font-size: 11px;
}

.territory-explore-cell.land {
    border-color: rgba(111, 166, 106, 0.34);
    background: #edf5e9;
    color: #4f7d4c;
}

.territory-explore-cell.land.empty {
    background: #f2efe8;
    color: #8a7d68;
}

.territory-explore-cell.empty {
    cursor: pointer;
}

.territory-explore-cell.empty:hover {
    border-color: rgba(49, 91, 98, 0.34);
    background: rgba(49, 91, 98, 0.08);
    color: #315b62;
}

.territory-explore-side {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.territory-explore-panel {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(54, 70, 72, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.territory-explore-panel h4 {
    margin: 0;
    color: #26323a;
    font-size: 15px;
}

.territory-explore-last-roll {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    color: #3d4a51;
    font-size: 13px;
}

.territory-explore-last-roll i {
    color: #315b62;
}

.territory-explore-last-roll span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-explore-building-list {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow: auto;
}

.territory-explore-building-list article {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px;
    border-radius: 8px;
    background: rgba(38, 50, 58, 0.04);
}

.territory-explore-building-list i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(49, 91, 98, 0.1);
    color: #315b62;
}

.territory-explore-building-list strong,
.territory-explore-building-list span {
    display: block;
    min-width: 0;
}

.territory-explore-building-list strong {
    color: #26323a;
    font-size: 13px;
}

.territory-explore-building-list span {
    color: #69737a;
    font-size: 12px;
}

.territory-explore-building-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.territory-feature-workspace:has(.territory-explore-board) {
    background:
        linear-gradient(180deg, rgba(35, 30, 23, 0.96), rgba(17, 20, 19, 0.96)),
        #151816;
    border-color: rgba(206, 170, 95, 0.18);
}

.territory-explore-hero,
.territory-explore-controls,
.territory-explore-panel {
    border-color: rgba(206, 170, 95, 0.2);
    background:
        linear-gradient(180deg, rgba(45, 38, 28, 0.96), rgba(23, 27, 26, 0.96)),
        #171b1a;
}

.territory-explore-hero h3,
.territory-explore-panel h4 {
    color: #ffe7a7;
}

.territory-explore-summary-panel {
    gap: 7px;
}

.territory-explore-summary-panel h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.territory-explore-summary-panel p {
    margin: 0;
}

.territory-explore-hero p,
.territory-explore-panel .territory-muted,
.territory-explore-building-list span,
.territory-directed-control,
.territory-land-select {
    color: #b9b09d;
}

.territory-explore-statline span,
.territory-explore-building-list article {
    border: 1px solid rgba(255, 234, 181, 0.1);
    background: rgba(255, 234, 181, 0.06);
}

.territory-explore-statline em {
    color: #b9b09d;
}

.territory-explore-statline b,
.territory-explore-building-list strong {
    color: #fff1c4;
}

.territory-explore-controls {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
}

.territory-explore-dice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.territory-explore-dice {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 42px;
    border-color: rgba(255, 234, 181, 0.16);
    background: rgba(255, 234, 181, 0.07);
    color: #efe4c9;
}

.territory-explore-dice:not(:disabled):hover {
    border-color: rgba(255, 225, 138, 0.46);
    background: rgba(138, 100, 48, 0.34);
}

.territory-explore-dice i,
.territory-explore-last-roll i,
.territory-explore-building-list i {
    color: #d9b663;
}

.territory-explore-dice span,
.territory-explore-dice b {
    overflow: hidden;
    text-overflow: ellipsis;
}

.territory-explore-dice b {
    color: #fff1c4;
}

.territory-directed-control select,
.territory-land-select select {
    border-color: rgba(255, 234, 181, 0.18);
    background: #211f19;
    color: #f4ecd5;
}

.territory-explore-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.territory-explore-action-row button {
    min-height: 36px;
    border: 1px solid rgba(221, 181, 91, 0.34);
    border-radius: 6px;
    background: #8a6430;
    color: #fff4d6;
    cursor: pointer;
}

.territory-explore-action-row button:disabled {
    cursor: not-allowed;
    background: #4a4437;
    color: #948b7a;
}

.territory-explore-layout {
    grid-template-columns: minmax(650px, 1fr) 360px;
    align-items: start;
}

.territory-explore-map-column {
    display: grid;
    min-width: 0;
    overflow-x: auto;
}

.territory-explore-board {
    grid-template-columns: repeat(var(--explore-cols, 13), minmax(34px, 1fr));
    align-content: center;
    gap: 0;
    min-height: 520px;
    padding: clamp(16px, 2vw, 26px);
    overflow: hidden;
    border-color: rgba(206, 170, 95, 0.22);
    background:
        radial-gradient(circle at 18% 34%, rgba(102, 128, 78, 0.16), transparent 27%),
        radial-gradient(circle at 80% 23%, rgba(107, 99, 138, 0.15), transparent 23%),
        radial-gradient(circle at 82% 71%, rgba(126, 82, 88, 0.18), transparent 28%),
        repeating-linear-gradient(32deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 18px),
        linear-gradient(180deg, rgba(20, 23, 22, 0.98), rgba(9, 12, 14, 0.98)),
        #0e1112;
    background-size: auto;
    box-shadow: inset 0 0 0 1px rgba(255, 234, 181, 0.04);
}

.territory-explore-cell {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #736f63;
}

.territory-explore-cell small {
    z-index: 3;
    color: rgba(255, 241, 196, 0.42);
}

.territory-explore-cell.route {
    color: #d8d1bd;
    background: transparent;
}

.territory-explore-cell.route::before,
.territory-explore-cell.route::after,
.territory-explore-cell.route .route-bed {
    content: "";
    position: absolute;
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(250, 245, 224, 0.12), transparent 32%),
        repeating-linear-gradient(45deg, rgba(36, 40, 39, 0.18) 0 4px, transparent 4px 9px),
        #74726a;
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 190, 0.12),
        inset 0 -5px 0 rgba(28, 25, 21, 0.27),
        0 0 0 2px rgba(91, 54, 35, 0.46),
        0 5px 9px rgba(0, 0, 0, 0.26);
}

.territory-explore-cell.route .route-bed {
    inset: 12%;
    border-radius: 4px;
}

.territory-explore-cell.route.link-up::before,
.territory-explore-cell.route.link-down::after {
    left: 12%;
    right: 12%;
    height: 56%;
}

.territory-explore-cell.route.link-up::before {
    top: 0;
}

.territory-explore-cell.route.link-down::after {
    bottom: 0;
}

.territory-explore-cell.route.link-left .route-bed::before,
.territory-explore-cell.route.link-right .route-bed::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 62%;
    background: inherit;
    box-shadow: inherit;
}

.territory-explore-cell.route.link-left .route-bed::before {
    right: 76%;
}

.territory-explore-cell.route.link-right .route-bed::after {
    left: 76%;
}

.territory-explore-cell.route i {
    position: relative;
    z-index: 2;
    color: rgba(255, 241, 196, 0.5);
    font-size: 11px;
}

.territory-explore-cell.route.region-village .route-bed,
.territory-explore-cell.route.region-village::before,
.territory-explore-cell.route.region-village::after {
    background:
        linear-gradient(135deg, rgba(255, 246, 204, 0.14), transparent 34%),
        repeating-linear-gradient(45deg, rgba(43, 41, 33, 0.14) 0 4px, transparent 4px 9px),
        #7f7a62;
}

.territory-explore-cell.route.region-mine .route-bed,
.territory-explore-cell.route.region-mine::before,
.territory-explore-cell.route.region-mine::after {
    background:
        linear-gradient(135deg, rgba(224, 226, 216, 0.12), transparent 34%),
        repeating-linear-gradient(45deg, rgba(36, 40, 39, 0.18) 0 4px, transparent 4px 9px),
        #696d67;
}

.territory-explore-cell.route.region-battlefield .route-bed,
.territory-explore-cell.route.region-battlefield::before,
.territory-explore-cell.route.region-battlefield::after {
    background:
        linear-gradient(135deg, rgba(255, 210, 160, 0.12), transparent 34%),
        repeating-linear-gradient(45deg, rgba(42, 26, 24, 0.16) 0 4px, transparent 4px 9px),
        #79665b;
}

.territory-explore-cell.route.region-vampire .route-bed,
.territory-explore-cell.route.region-vampire::before,
.territory-explore-cell.route.region-vampire::after {
    background:
        linear-gradient(135deg, rgba(244, 196, 214, 0.12), transparent 34%),
        repeating-linear-gradient(45deg, rgba(42, 24, 34, 0.17) 0 4px, transparent 4px 9px),
        #725d67;
}

.territory-explore-cell.route.region-ruins .route-bed,
.territory-explore-cell.route.region-ruins::before,
.territory-explore-cell.route.region-ruins::after {
    background:
        linear-gradient(135deg, rgba(213, 211, 244, 0.12), transparent 34%),
        repeating-linear-gradient(45deg, rgba(28, 28, 43, 0.16) 0 4px, transparent 4px 9px),
        #666879;
}

.territory-explore-cell.route.active {
    background: transparent;
    color: #ffe7a7;
    box-shadow: none;
}

.territory-explore-cell.route.destination .route-bed {
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 190, 0.18),
        0 0 0 2px rgba(217, 182, 99, 0.5),
        0 0 14px rgba(217, 182, 99, 0.22);
}

.territory-explore-cell.route.traversed .route-bed {
    filter: brightness(1.18);
}

.territory-explorer-token {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 244, 203, 0.65);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #fff7d4, #d9b663 52%, #7a4a26);
    color: #1b1711;
    box-shadow: 0 0 14px rgba(217, 182, 99, 0.55);
    animation: territoryExploreStep 0.34s ease-out;
}

.territory-explorer-token i {
    color: #1b1711 !important;
    font-size: 13px !important;
}

@keyframes territoryExploreStep {
    from { transform: scale(0.82) translateY(4px); opacity: 0.55; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.territory-explore-cell.building {
    margin: 0;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    background: rgba(45, 38, 28, 0.86);
    color: #d9b663;
}

.territory-explore-cell.building b {
    color: #fff1c4;
}

.territory-explore-cell.land {
    margin: 0;
    border: 1px solid rgba(111, 166, 106, 0.24);
    border-radius: 8px;
    background: rgba(54, 74, 52, 0.72);
    color: #99c989;
}

.territory-explore-cell.land.empty {
    background: rgba(72, 64, 50, 0.55);
    color: #b5a986;
}

.territory-explore-cell.empty:hover {
    border-color: rgba(217, 182, 99, 0.34);
    background: rgba(217, 182, 99, 0.1);
    color: #d9b663;
}

.territory-explore-last-roll {
    color: #e7dac2;
}

.territory-lottery-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(52px, 1fr));
    gap: 6px;
}

.territory-lottery-grid > div {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 64px;
    padding: 6px;
    border: 1px solid rgba(54, 70, 72, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.56);
    color: #69737a;
    text-align: center;
    font-size: 11px;
}

.territory-lottery-grid > div.claimed {
    background: rgba(201, 155, 71, 0.18);
    color: #3f4a4d;
}

.territory-empty,
.territory-loading-panel {
    padding: 16px;
    border: 1px dashed rgba(54, 70, 72, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
    color: #69737a;
}

@media (max-width: 1100px) {
    .territory-layout,
    .territory-dungeon-board {
        grid-template-columns: 1fr;
    }

    .territory-district-list {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .territory-app {
        padding: 10px;
    }

    .territory-topbar,
    .territory-workspace-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .territory-metric-row {
        justify-content: flex-start;
    }

    .territory-district-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-resource-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-field-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .territory-dungeon-canvas {
        height: 360px;
    }

    .territory-lottery-grid {
        grid-template-columns: repeat(5, minmax(48px, 1fr));
    }
}

@media (max-width: 520px) {
    .territory-district-list,
    .territory-field-board,
    .territory-resource-rail {
        grid-template-columns: 1fr;
    }

    .territory-command-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .territory-command-panel label,
    .territory-command-panel button,
    .territory-command-panel select,
    .territory-command-panel input {
        width: 100%;
    }

    .territory-dungeon-canvas {
        height: 320px;
    }
}

/* --- Territory dark sandtable refresh --- */
#territory-view {
    color: #f5ead1;
}

#territory-view .view-back-btn {
    border-color: rgba(206, 170, 95, 0.32);
    background: #25221b;
    color: #f5ead1;
}

.territory-app {
    gap: 16px;
    border-color: rgba(206, 170, 95, 0.28);
    background:
        linear-gradient(180deg, rgba(44, 39, 30, 0.98), rgba(25, 29, 27, 0.98)),
        #1a1d1b;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.territory-topbar {
    align-items: flex-start;
    padding: 14px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(17, 21, 20, 0.72);
}

.territory-topbar h2,
.territory-workspace-head h3 {
    color: #ffe7a7;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.territory-topbar h2 {
    font-size: 28px;
}

.territory-kicker,
.territory-topbar-meta,
.territory-muted {
    color: #b9b09d;
}

.territory-topbar-meta span,
.territory-pill,
.territory-info-band span {
    border-color: rgba(206, 170, 95, 0.22);
    background: rgba(255, 234, 181, 0.08);
    color: #e9dcc3;
}

.territory-pill b,
.territory-info-band b {
    color: #ffe7a7;
}

.territory-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.territory-header-resources {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.territory-header-resource {
    display: grid;
    grid-template-columns: 18px auto;
    grid-template-rows: auto auto;
    gap: 0 5px;
    min-width: 86px;
    min-height: 36px;
    padding: 5px 7px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.08);
    line-height: 1.12;
}

.territory-header-resource i {
    grid-row: 1 / span 2;
    align-self: center;
    color: #d9b663;
    font-size: 13px;
}

.territory-header-resource b {
    color: #fff1c4;
    font-size: 12px;
}

.territory-header-resource em {
    color: #b9b09d;
    font-size: 10px;
    font-style: normal;
}

.territory-icon-button,
.territory-command-panel button,
.territory-plot button,
.territory-building-card button,
.territory-enter-button {
    border-color: rgba(221, 181, 91, 0.34);
    background: #8a6430;
    color: #fff4d6;
}

.territory-icon-button:hover,
.territory-command-panel button:hover,
.territory-plot button:hover,
.territory-building-card button:hover,
.territory-enter-button:hover {
    background: #a87835;
}

.territory-command-panel button:disabled,
.territory-plot button:disabled,
.territory-building-card button:disabled {
    background: #4a4437;
    color: #948b7a;
}

.territory-map-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
}

.territory-feature-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    background: rgba(18, 21, 20, 0.72);
}

.territory-explore-mode .territory-topbar {
    min-height: 0;
}

.territory-explore-mode .territory-topbar h2 {
    margin: 0;
    font-size: 20px;
}

.territory-explore-mode .territory-topbar-meta {
    margin-top: 3px;
}

.territory-explore-mode .territory-header-resource {
    min-height: 42px;
}

.territory-explore-mode .territory-feature-nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
}

.territory-feature-nav-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 7px;
    align-items: center;
    min-height: 46px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-left: 3px solid #75848a;
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.05);
    color: #e8ddc6;
    text-align: left;
    cursor: pointer;
}

.territory-feature-nav-item i {
    grid-row: 1 / span 2;
    color: #d9b663;
}

.territory-feature-nav-item span,
.territory-feature-nav-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-feature-nav-item span {
    color: #fff1c4;
    font-size: 13px;
    font-weight: 700;
}

.territory-feature-nav-item small {
    color: #b9b09d;
    font-size: 10px;
}

.territory-feature-nav-item.active {
    border-color: rgba(255, 225, 138, 0.54);
    background: rgba(138, 100, 48, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 234, 181, 0.08);
}

.territory-feature-nav-item.territory-tone-green { border-left-color: #6fa66a; }
.territory-feature-nav-item.territory-tone-gold { border-left-color: #c99b47; }
.territory-feature-nav-item.territory-tone-stone { border-left-color: #75848a; }
.territory-feature-nav-item.territory-tone-red { border-left-color: #b95e58; }
.territory-feature-nav-item.territory-tone-violet { border-left-color: #7b74b7; }
.territory-feature-nav-item.territory-tone-teal { border-left-color: #4f9a96; }
.territory-feature-nav-item.territory-tone-blue { border-left-color: #5d8fb8; }

.territory-map-shell {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: visible;
    padding: 6px;
    border: 1px solid rgba(206, 170, 95, 0.24);
    border-radius: 8px;
    background: #131717;
}

.territory-sandtable {
    position: relative;
    min-height: 360px;
    overflow: visible;
    border: 1px solid rgba(122, 150, 96, 0.28);
    border-radius: 8px;
    aspect-ratio: 1.18 / 1;
    background:
        repeating-linear-gradient(32deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 17px),
        linear-gradient(135deg, #303a24 0%, #1e2b27 42%, #21251f 100%);
}

.territory-sandtable::before {
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(232, 196, 112, 0.16);
    border-radius: 50%;
    content: "";
}

.territory-map-roads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.territory-map-roads path {
    fill: none;
    stroke: rgba(198, 166, 100, 0.56);
    stroke-linecap: round;
    stroke-width: 2.7;
}

.territory-map-roads .main-road {
    stroke: rgba(228, 194, 119, 0.72);
    stroke-width: 4;
}

.territory-map-center-ring {
    position: absolute;
    left: 52%;
    top: 50%;
    width: 116px;
    height: 108px;
    border: 1px solid rgba(250, 218, 142, 0.24);
    border-radius: 50%;
    background: rgba(16, 19, 17, 0.22);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.territory-building-node {
    position: absolute;
    left: var(--node-x);
    top: var(--node-y);
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 70px;
    min-height: 68px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.001);
    border-radius: 8px;
    color: #f7ecd5;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: filter 160ms ease, box-shadow 160ms ease;
}

.territory-building-node.small {
    width: 66px;
}

.territory-building-node.large {
    width: 76px;
}

.territory-building-node.watchtower {
    width: 68px;
}

.territory-building-shadow {
    position: absolute;
    top: 38px;
    width: 52px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.36);
    filter: blur(1px);
    pointer-events: none;
}

.territory-building-core {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 38px;
    border: 1px solid rgba(255, 236, 178, 0.32);
    border-bottom-color: rgba(0, 0, 0, 0.36);
    border-radius: 8px 8px 6px 6px;
    background: linear-gradient(180deg, #5c4b31, #2d2a22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 7px 12px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.territory-building-node.large .territory-building-core {
    width: 46px;
    height: 42px;
}

.territory-watchtower-node .territory-building-core {
    width: 38px;
    height: 50px;
    border-radius: 7px;
}

.territory-building-core i {
    color: #ffe5a3;
    font-size: 18px;
}

.territory-building-label {
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 6px;
    background: rgba(18, 21, 20, 0.82);
    color: #fff1c4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}

.territory-building-node small {
    max-width: 100%;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    color: #cfc5ae;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
}

.territory-building-node.selected .territory-building-core,
.territory-building-node.entered .territory-building-core {
    border-color: rgba(255, 225, 138, 0.82);
    box-shadow: 0 0 0 3px rgba(216, 173, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 7px 12px rgba(0, 0, 0, 0.28);
}

.territory-building-node.selected .territory-building-label {
    background: #8a6430;
}

.territory-building-node.selected,
.territory-building-node.entered {
    filter: brightness(1.08);
}

.territory-tone-green .territory-building-core { background: linear-gradient(180deg, #60733e, #283320); }
.territory-tone-gold .territory-building-core { background: linear-gradient(180deg, #92713a, #3c3021); }
.territory-tone-stone .territory-building-core { background: linear-gradient(180deg, #667071, #303536); }
.territory-tone-red .territory-building-core { background: linear-gradient(180deg, #8c4a43, #382423); }
.territory-tone-violet .territory-building-core { background: linear-gradient(180deg, #635686, #2e293f); }
.territory-tone-teal .territory-building-core { background: linear-gradient(180deg, #3f7770, #203b39); }
.territory-tone-blue .territory-building-core { background: linear-gradient(180deg, #476a86, #223543); }

.territory-feature-workspace,
.territory-workspace-head,
.territory-command-panel,
.territory-info-band,
.territory-event-log {
    border-color: rgba(206, 170, 95, 0.22);
    background: rgba(18, 21, 20, 0.74);
}

.territory-enter-button {
    grid-column: 1 / -1;
    min-height: 40px;
    border-radius: 8px;
}

.territory-feature-workspace {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
}

.territory-explore-mode .territory-feature-workspace {
    gap: 10px;
    padding: 8px;
}

.territory-workspace-head {
    min-height: auto;
    border-left-width: 5px;
}

.territory-metric-row span {
    border: 1px solid rgba(255, 234, 181, 0.12);
    background: rgba(255, 234, 181, 0.07);
}

.territory-metric-row em {
    color: #b9b09d;
}

.territory-metric-row b {
    color: #fff1c4;
}

.territory-command-panel {
    color: #e9dcc3;
}

.territory-command-panel label {
    color: #d8cbb4;
}

.territory-command-panel select,
.territory-command-panel input,
.territory-plot select,
.territory-route-slot select {
    border-color: rgba(206, 170, 95, 0.28);
    background: #171b1a;
    color: #f5ead1;
}

.territory-switch {
    background: rgba(255, 234, 181, 0.07);
}

.territory-field-board {
    grid-template-columns: repeat(6, minmax(88px, 1fr));
}

.territory-plot,
.territory-building-card,
.territory-unit-card,
.territory-dungeon-card,
.territory-route-slot,
.territory-party-strip article,
.territory-lottery-grid > div {
    border-color: rgba(206, 170, 95, 0.18);
    background: rgba(31, 35, 31, 0.84);
}

.territory-plot header i,
.territory-building-card header i,
.territory-dungeon-card header i,
.territory-route-slot header i,
.territory-unit-card > i {
    background: rgba(255, 234, 181, 0.08);
    color: #d9b663;
}

.territory-plot strong,
.territory-building-card strong,
.territory-dungeon-card strong,
.territory-route-slot strong {
    color: #fff1c4;
}

.territory-plot p,
.territory-plot small,
.territory-building-card p,
.territory-building-card span,
.territory-dungeon-card span,
.territory-unit-card span,
.territory-unit-card small,
.territory-party-strip span {
    color: #c7bda8;
}

.territory-plot.locked {
    color: #8e8576;
    background: rgba(16, 19, 17, 0.78);
}

.territory-plot.ready {
    border-color: rgba(131, 176, 90, 0.78);
    box-shadow: inset 0 0 0 1px rgba(131, 176, 90, 0.22);
}

.territory-progress,
.territory-mini-bar {
    background: rgba(0, 0, 0, 0.32);
}

.territory-progress span {
    background: linear-gradient(90deg, #7ba65a, #d9b663);
}

.territory-mini-bar span {
    background: #7ba65a;
}

.territory-unit-card.selected {
    border-color: rgba(131, 176, 90, 0.72);
    background: rgba(78, 105, 55, 0.38);
}

.territory-dungeon-board {
    grid-template-columns: 1fr;
}

.territory-dungeon-canvas {
    height: 470px;
    border-color: rgba(206, 170, 95, 0.28);
    background: #0e1215;
    box-shadow: inset 0 0 0 1px rgba(255, 232, 166, 0.06), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.territory-dungeon-canvas-wrap {
    position: relative;
    min-width: 0;
}

.territory-dungeon-canvas-wrap .territory-dungeon-canvas {
    width: 100%;
}

.territory-dungeon-settling-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-content: center;
    gap: 8px;
    border: 1px solid rgba(206, 170, 95, 0.28);
    border-radius: 8px;
    background: rgba(10, 13, 14, 0.78);
    color: #fff1c4;
    text-align: center;
}

.territory-dungeon-settling-overlay i {
    color: #d9b663;
    font-size: 28px;
}

.territory-dungeon-settling-overlay strong {
    font-size: 18px;
}

.territory-dungeon-settling-overlay span {
    color: #cfc5ae;
    font-size: 12px;
}

.territory-dungeon-growth {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
    gap: 10px;
    align-items: stretch;
}

.territory-dungeon-panel,
.territory-dungeon-atlas {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(18, 21, 20, 0.74);
}

.territory-dungeon-panel header,
.territory-dungeon-atlas header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.territory-dungeon-atlas header > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.territory-dungeon-panel header strong,
.territory-dungeon-atlas header strong {
    color: #ffe7a7;
}

.territory-dungeon-panel header span,
.territory-dungeon-atlas header span {
    color: #b9b09d;
    font-size: 12px;
}

.territory-city-hero,
.territory-city-last,
.territory-city-panel {
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(18, 21, 20, 0.74);
}

.territory-city-overview,
.territory-city-map-shell,
.territory-city-stage-strip,
.territory-city-focus-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.territory-city-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
}

.territory-city-hero-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.territory-city-hero h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff1c4;
    font-size: 18px;
}

.territory-city-hero p {
    margin: 4px 0 0;
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-stage-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.territory-city-stage {
    display: grid;
    grid-template-rows: auto auto;
    gap: 3px;
    min-height: 50px;
    padding: 8px 6px;
    border: 1px solid rgba(206, 170, 95, 0.16);
    border-radius: 8px;
    background: rgba(24, 28, 26, 0.82);
    color: #cfc2aa;
    cursor: pointer;
    text-align: center;
}

.territory-city-stage i {
    color: #d9b663;
}

.territory-city-stage.active {
    border-color: rgba(220, 178, 91, 0.64);
    background: rgba(124, 87, 38, 0.68);
    color: #fff1c4;
}

.territory-city-stage.done {
    box-shadow: inset 0 0 0 1px rgba(145, 200, 120, 0.08);
}

.territory-city-stage span {
    font-size: 12px;
    font-weight: 800;
}

.territory-city-stage:not(.active) {
    opacity: 0.94;
}

.territory-city-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.territory-city-hero-stats span,
.territory-city-focus-mini span {
    display: grid;
    gap: 3px;
    min-height: 44px;
    padding: 7px 8px;
    border: 1px solid rgba(206, 170, 95, 0.14);
    border-radius: 8px;
    background: rgba(24, 28, 26, 0.72);
}

.territory-city-hero-stats em,
.territory-city-focus-mini em {
    color: #b9b09d;
    font-size: 10px;
    font-style: normal;
}

.territory-city-hero-stats b,
.territory-city-focus-mini b {
    overflow: hidden;
    color: #fff1c4;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-map-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    position: relative;
}

.territory-city-scene {
    gap: 12px;
}

.territory-city-dock {
    position: absolute;
    inset: auto 12px 12px 12px;
    z-index: 4;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    background: rgba(14, 17, 16, 0.82);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
}

.territory-city-dock-body {
    display: grid;
    gap: 10px;
}

.territory-city-dock .territory-city-resource-board,
.territory-city-dock .territory-city-tabs,
.territory-city-dock .territory-city-last,
.territory-city-dock .territory-city-feedback-rail {
    margin: 0;
}

.territory-city-map-main {
    position: relative;
    min-height: clamp(560px, 72vh, 860px);
    overflow: hidden;
    border: 1px solid rgba(206, 170, 95, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 42%, rgba(168, 115, 52, 0.22), transparent 26%),
        radial-gradient(circle at 23% 28%, rgba(109, 147, 92, 0.2), transparent 22%),
        radial-gradient(circle at 74% 26%, rgba(115, 121, 168, 0.16), transparent 22%),
        linear-gradient(180deg, rgba(19, 23, 22, 0.94), rgba(14, 17, 16, 0.96));
}

.territory-city-map-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 241, 196, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 241, 196, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.45;
    pointer-events: none;
}

.territory-city-map-main::after {
    content: '';
    position: absolute;
    inset: 16% 14% 18%;
    border: 1px solid rgba(255, 241, 196, 0.06);
    border-radius: 20px;
    background: radial-gradient(circle at 50% 46%, rgba(243, 186, 90, 0.12), transparent 34%);
    pointer-events: none;
}

.territory-city-map-hud {
    position: absolute;
    inset: 12px 12px auto 12px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    pointer-events: none;
}

.territory-city-map-hud-copy,
.territory-city-map-hud-meta {
    pointer-events: auto;
}

.territory-city-map-hud-copy {
    display: grid;
    gap: 3px;
    max-width: min(56%, 300px);
    padding: 9px 11px;
    border: 1px solid rgba(206, 170, 95, 0.16);
    border-radius: 8px;
    background: rgba(14, 17, 16, 0.82);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.territory-city-map-hud-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #fff1c4;
    font-size: 16px;
    line-height: 1.08;
}

.territory-city-map-hud-copy small {
    color: #c7bda8;
    font-size: 11px;
    line-height: 1.12;
}

.territory-city-map-hud-meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    max-width: min(42%, 290px);
}

.territory-city-map-hud-meta span,
.territory-city-map-hud-meta button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(206, 170, 95, 0.14);
    border-radius: 7px;
    background: rgba(24, 28, 26, 0.8);
    color: #fff1c4;
    font-size: 12px;
}

.territory-city-map-hud-meta span em {
    color: #b9b09d;
    font-style: normal;
}

.territory-city-map-hud-meta span b {
    color: #ffe7a7;
}

.territory-city-map-hud-meta button {
    border-color: rgba(221, 181, 91, 0.36);
    background: rgba(138, 100, 48, 0.82);
}

.territory-city-map-hud-cap {
    white-space: nowrap;
}

.territory-city-map-road {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(240, 179, 92, 0.06) 20.5%, transparent 21%),
        linear-gradient(180deg, transparent 49%, rgba(233, 208, 137, 0.09) 49.5%, transparent 50.5%);
    opacity: 0.8;
    pointer-events: none;
}

.territory-city-node {
    position: absolute;
    left: var(--node-x);
    top: var(--node-y);
    z-index: 2;
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 7px 7px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(24, 28, 26, 0.9);
    color: #fff1c4;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.territory-city-node i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.08);
    color: #d9b663;
    font-size: 16px;
}

.territory-city-node strong {
    overflow: hidden;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-node small {
    overflow: hidden;
    max-width: 100%;
    color: #b9b09d;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-node.large {
    padding: 10px 10px 8px;
}

.territory-city-node.large i {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

.territory-city-node.small {
    min-width: 62px;
    padding: 6px 5px 5px;
}

.territory-city-node.small i {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.territory-city-node.locked {
    opacity: 0.45;
    filter: grayscale(0.45);
}

.territory-city-node.active {
    border-color: rgba(220, 178, 91, 0.7);
    background: rgba(124, 87, 38, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 240, 194, 0.14), 0 10px 24px rgba(0, 0, 0, 0.25);
}

.territory-city-node .territory-city-node-ring {
    position: absolute;
    inset: -4px;
    border: 1px solid transparent;
    border-radius: 10px;
    pointer-events: none;
}

.territory-city-node.stage-done .territory-city-node-ring {
    border-color: rgba(145, 200, 120, 0.2);
}

.territory-city-focus-panel {
    align-content: start;
    padding: 0;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(18, 21, 20, 0.88);
}

.territory-city-focus-head,
.territory-city-focus-body,
.territory-city-focus-actions {
    padding-left: 10px;
    padding-right: 10px;
}

.territory-city-focus-head {
    padding-top: 10px;
}

.territory-city-focus-actions {
    padding-bottom: 10px;
}

.territory-city-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.territory-city-focus-head h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #fff1c4;
    font-size: 15px;
}

.territory-city-focus-head p {
    margin: 4px 0 0;
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-focus-head button,
.territory-city-focus-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(221, 181, 91, 0.34);
    border-radius: 6px;
    background: #8a6430;
    color: #fff4d6;
    cursor: pointer;
}

.territory-city-focus-body {
    display: grid;
    gap: 8px;
}

.territory-city-focus-stat {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 68px;
    padding: 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
    text-align: center;
}

.territory-city-focus-stat strong {
    color: #fff1c4;
    font-size: 22px;
}

.territory-city-focus-stat span {
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-focus-body p {
    margin: 0;
    color: #c7bda8;
    font-size: 12px;
    line-height: 1.45;
}

.territory-city-focus-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.territory-city-focus-result {
    display: grid;
    gap: 4px;
    padding: 8px 9px;
    border: 1px solid rgba(145, 200, 120, 0.18);
    border-radius: 8px;
    background: rgba(42, 56, 37, 0.68);
}

.territory-city-focus-result strong {
    color: #fff1c4;
    font-size: 12px;
}

.territory-city-focus-result span {
    color: #a9df8b;
    font-size: 11px;
}

.territory-city-focus-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 760px) {
    .territory-city-hero {
        display: grid;
        gap: 8px;
    }

    .territory-city-stage-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .territory-city-map-shell {
        grid-template-columns: 1fr;
    }

    .territory-city-map-main {
        min-height: 250px;
    }

    .territory-city-node {
        padding: 6px 5px 5px;
    }

    .territory-city-node i {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .territory-city-node strong {
        font-size: 10px;
    }

    .territory-city-node small {
        display: none;
    }

    .territory-city-node.large i {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .territory-city-node.small {
        min-width: 54px;
    }

    .territory-city-focus-mini {
        grid-template-columns: 1fr;
    }

    .territory-city-focus-actions {
        grid-template-columns: 1fr;
    }

    .territory-city-resource-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .territory-city-resource-card {
        min-height: 36px;
        padding: 4px 4px 6px;
        border-radius: 6px;
    }

    .territory-city-resource-card strong {
        font-size: 10px;
    }

    .territory-city-resource-card span {
        font-size: 8px;
    }

    .territory-city-resource-card em {
        display: none;
    }

    .territory-city-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }

    .territory-city-tabs button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 46px;
        padding: 5px 2px;
        font-size: 10px;
    }

    .territory-city-gather-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-city-skill-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-city-buildings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-city-starlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .territory-city-stage-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-city-resource-board {
        gap: 3px;
    }

    .territory-city-tabs button {
        min-height: 42px;
    }

    .territory-city-gather-action strong {
        font-size: 11px;
    }

    .territory-city-job {
        padding: 6px;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 4px 6px;
    }

    .territory-city-job > i {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .territory-city-job-desc {
        display: none;
    }
}

.territory-city-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.territory-city-hero-actions span,
.territory-city-last {
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-hero-actions b,
.territory-city-last strong {
    color: #ffe7a7;
}

.territory-city-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.territory-city-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    background: rgba(24, 28, 26, 0.8);
    color: #cfc2aa;
    font-weight: 800;
    cursor: pointer;
}

.territory-city-tabs button.active {
    border-color: rgba(220, 178, 91, 0.58);
    background: rgba(124, 87, 38, 0.62);
    color: #fff1c4;
}

.territory-city-tabs button i {
    color: #d9b663;
}

.territory-city-tab-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.territory-city-resource-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 5px;
}

.territory-city-resource-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 2px;
    min-height: 48px;
    padding: 6px 7px 8px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 6px;
    background: rgba(18, 21, 20, 0.74);
}

.territory-city-resource-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.territory-city-resource-card i {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: var(--city-fill, 0%);
    height: 3px;
    background: linear-gradient(90deg, #7ec06b, #e0ba63);
    transition: width 180ms ease-out;
}

.territory-city-resource-card.pulse {
    border-color: rgba(145, 200, 120, 0.74);
    background: rgba(35, 52, 31, 0.78);
}

.territory-city-resource-card.near-full em {
    color: #e0ba63;
}

.territory-city-resource-card.full {
    border-color: rgba(210, 103, 93, 0.62);
}

.territory-city-resource-card.full em {
    color: #e38f7d;
}

.territory-city-resource-card span,
.territory-city-resource-card em {
    overflow: hidden;
    color: #c7bda8;
    font-size: 10px;
    font-style: normal;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-resource-card strong {
    overflow: hidden;
    color: #ffe7a7;
    font-size: 14px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-resource-card em {
    color: #91c878;
    font-size: 9px;
}

.territory-city-feedback-rail {
    display: grid;
    gap: 6px;
}

.territory-city-feedback-rail article {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(145, 200, 120, 0.22);
    border-radius: 8px;
    background: rgba(42, 56, 37, 0.74);
    color: #dceccf;
    animation: territoryCityFeedbackIn 260ms ease-out both;
}

.territory-city-feedback-rail strong {
    color: #fff1c4;
    font-size: 12px;
}

.territory-city-feedback-rail span {
    color: #91c878;
    font-size: 12px;
}

.territory-city-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.territory-city-column,
.territory-city-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.territory-city-panel {
    padding: 12px;
}

.territory-city-panel h4 {
    margin: 0;
    color: #ffe7a7;
    font-size: 14px;
}

.territory-city-skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.territory-city-skill-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 7px;
}

.territory-city-gather-panel {
    gap: 10px;
}

.territory-city-collector {
    gap: 8px;
}

.territory-city-collector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.territory-city-collector-head > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.territory-city-collector-head span {
    overflow: hidden;
    color: #c7bda8;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-live-badge {
    display: inline-grid;
    grid-template-columns: 22px auto;
    grid-template-rows: auto auto;
    gap: 0 6px;
    align-items: center;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 234, 181, 0.14);
    border-radius: 6px;
    background: rgba(255, 189, 92, 0.08);
}

.territory-city-live-badge i {
    grid-row: 1 / span 2;
    color: #f0b35c;
    font-size: 15px;
    animation: territoryCityCoreBeat 3.4s ease-in-out infinite;
}

.territory-city-live-badge strong {
    color: #fff1c4;
    font-size: 12px;
    line-height: 1.05;
}

.territory-city-live-badge span {
    color: #91c878;
    font-size: 11px;
    line-height: 1.05;
}

.territory-city-clicker-stage {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
}

.territory-city-gather-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.territory-city-gather-action {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 6px;
    min-width: 0;
    min-height: 48px;
    padding: 6px 7px;
    border: 1px solid rgba(221, 181, 91, 0.28);
    border-radius: 6px;
    background: rgba(45, 39, 27, 0.86);
    color: #fff4d6;
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255, 234, 181, 0.04);
}

.territory-city-gather-action:hover {
    border-color: rgba(255, 217, 128, 0.62);
    background: rgba(63, 50, 30, 0.94);
}

.territory-city-gather-action:active {
    transform: scale(0.985);
}

.territory-city-gather-action > i {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 5px;
    background: rgba(255, 234, 181, 0.08);
    color: #f2c978;
    font-size: 14px;
}

.territory-city-gather-action strong,
.territory-city-gather-action span {
    min-width: 0;
}

.territory-city-gather-action strong {
    overflow: hidden;
    color: #fff1c4;
    font-size: 13px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-gather-action span {
    display: flex;
    overflow: hidden;
    gap: 3px;
    color: #c7bda8;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-gather-action .territory-pill {
    min-height: 0;
    padding: 1px 5px;
    font-size: 10px;
}

.territory-city-gather-grid,
.territory-city-gather-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.territory-city-gather-map {
    position: relative;
    min-height: 250px;
    padding: 12px;
    border: 1px solid rgba(206, 170, 95, 0.16);
    border-radius: 8px;
    background:
        radial-gradient(circle at 24% 22%, rgba(140, 105, 44, 0.2), transparent 32%),
        radial-gradient(circle at 78% 72%, rgba(89, 112, 70, 0.18), transparent 34%),
        rgba(14, 17, 16, 0.78);
}

.territory-city-core {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    min-height: 190px;
    border: 1px solid rgba(255, 234, 181, 0.18);
    border-radius: 8px;
    background: radial-gradient(circle, rgba(155, 92, 42, 0.42), rgba(36, 31, 24, 0.86) 68%);
    box-shadow: inset 0 0 24px rgba(255, 192, 92, 0.08);
}

.territory-city-core i {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(255, 189, 92, 0.12);
    color: #f0b35c;
    font-size: 34px;
    animation: territoryCityCoreBeat 3.4s ease-in-out infinite;
}

.territory-city-core strong {
    color: #fff1c4;
    font-size: 19px;
}

.territory-city-core span {
    color: #91c878;
    font-size: 12px;
}

.territory-city-floating-feed {
    position: absolute;
    z-index: 2;
    top: -4px;
    right: 4px;
    display: grid;
    gap: 4px;
    pointer-events: none;
}

.territory-city-floating-feed span {
    justify-self: end;
    padding: 3px 7px;
    border: 1px solid rgba(145, 200, 120, 0.28);
    border-radius: 999px;
    background: rgba(17, 22, 19, 0.82);
    color: #a9df8b;
    font-size: 11px;
    animation: territoryCityFloatUp 1600ms ease-out both;
}

.territory-city-gather-node {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 190px;
    padding: 16px 12px;
    border: 1px solid rgba(221, 181, 91, 0.26);
    border-radius: 8px;
    background: rgba(45, 39, 27, 0.86);
    color: #fff4d6;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 234, 181, 0.04);
}

.territory-city-gather-node:hover {
    border-color: rgba(255, 217, 128, 0.62);
    background: rgba(63, 50, 30, 0.94);
}

.territory-city-gather-node:active {
    transform: scale(0.985);
}

.territory-city-gather-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 234, 181, 0.14);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.08);
    color: #f2c978;
    font-size: 32px;
}

.territory-city-gather-node strong {
    color: #fff1c4;
    font-size: 18px;
    text-align: center;
}

.territory-city-gather-stock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.territory-city-gather-grid button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-items: center;
    min-width: 0;
    min-height: 76px;
    padding: 10px;
    border: 1px solid rgba(221, 181, 91, 0.3);
    border-radius: 8px;
    background: rgba(55, 49, 35, 0.82);
    color: #fff4d6;
    cursor: pointer;
}

.territory-city-gather-grid button > i {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(255, 234, 181, 0.08);
    color: #d9b663;
}

.territory-city-gather-grid strong,
.territory-city-gather-rewards {
    min-width: 0;
}

.territory-city-gather-grid strong {
    overflow: hidden;
    color: #fff1c4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-gather-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.territory-city-skill,
.territory-city-job {
    border: 1px solid rgba(206, 170, 95, 0.18);
    border-radius: 8px;
    background: rgba(31, 35, 31, 0.84);
}

.territory-city-skill {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.territory-city-skill.compact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-items: center;
    padding: 7px;
}

.territory-city-skill.active {
    border-color: rgba(131, 176, 90, 0.72);
    box-shadow: inset 0 0 0 1px rgba(131, 176, 90, 0.18);
}

.territory-city-skill header,
.territory-city-job {
    display: flex;
    align-items: center;
    gap: 9px;
}

.territory-city-skill header i,
.territory-city-job > i {
    grid-area: icon;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 234, 181, 0.08);
    color: #d9b663;
}

.territory-city-skill header strong,
.territory-city-job strong {
    color: #fff1c4;
}

.territory-city-skill header span {
    margin-left: auto;
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-skill.compact header {
    min-width: 0;
}

.territory-city-skill.compact header i {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
}

.territory-city-skill.compact header strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-skill.compact p {
    display: none;
}

.territory-city-skill.compact .territory-cost-row {
    grid-column: 1 / -1;
    gap: 4px;
}

.territory-city-skill.compact button {
    min-height: 30px;
    padding: 5px 9px;
    white-space: nowrap;
}

.territory-city-skill p,
.territory-city-skill small,
.territory-city-job small,
.territory-city-job span {
    margin: 0;
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-job-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-job small {
    color: #91c878;
}

.territory-city-skill button,
.territory-city-job button,
.territory-city-population-card button,
.territory-city-hero-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(221, 181, 91, 0.34);
    border-radius: 6px;
    background: #8a6430;
    color: #fff4d6;
    cursor: pointer;
}

.territory-city-skill button:disabled {
    background: #4a4437;
    color: #948b7a;
    cursor: not-allowed;
}

.territory-city-population-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: end;
}

.territory-city-population-card > div:first-child,
.territory-city-population-card > .territory-cost-row,
.territory-city-population-card > button {
    min-width: 0;
}

.territory-city-population-card > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
    grid-column: 1 / -1;
}

.territory-city-population-card > .territory-cost-row {
    grid-column: auto;
}

.territory-city-population-card > button {
    grid-column: auto;
}

.territory-city-population-card strong {
    color: #fff1c4;
    font-size: 22px;
}

.territory-city-population-card span,
.territory-city-population-card label {
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-population-card label {
    display: grid;
    gap: 5px;
}

.territory-city-population-card input {
    min-height: 34px;
    border: 1px solid rgba(206, 170, 95, 0.28);
    border-radius: 6px;
    background: #171b1a;
    color: #f5ead1;
    text-align: center;
}

.territory-city-population-card button:disabled,
.territory-city-starlight-card button:disabled {
    background: #4a4437;
    color: #948b7a;
    cursor: not-allowed;
}

.territory-city-job-list {
    display: grid;
    gap: 8px;
}

.territory-city-job {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
        "icon info"
        "controls controls";
    gap: 8px 10px;
    min-width: 0;
    padding: 9px;
}

.territory-city-job-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.territory-city-job-info {
    grid-area: info;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.territory-city-job-controls {
    grid-area: controls;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.territory-city-job input {
    width: 100%;
    min-height: 32px;
    border: 1px solid rgba(206, 170, 95, 0.28);
    border-radius: 6px;
    background: #171b1a;
    color: #f5ead1;
    text-align: center;
}

.territory-city-job button {
    width: 100%;
    min-width: 0;
}

.territory-city-bonus-grid,
.territory-city-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.territory-city-bonus-grid span,
.territory-city-cap-grid span {
    display: grid;
    gap: 3px;
    min-height: 48px;
    padding: 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.07);
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-bonus-grid b,
.territory-city-cap-grid b {
    color: #ffe7a7;
    font-size: 14px;
}

.territory-city-last {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.territory-city-buildings {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.territory-city-starlight-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.territory-city-wonder-placeholder {
    place-items: center;
    min-height: 220px;
    text-align: center;
}

.territory-city-wonder-placeholder i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 234, 181, 0.16);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.07);
    color: #d9b663;
    font-size: 24px;
}

.territory-city-wonder-placeholder strong {
    color: #fff1c4;
    font-size: 18px;
}

@keyframes territoryCityFeedbackIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes territoryCityCoreBeat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(240, 179, 92, 0.18);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 10px rgba(240, 179, 92, 0);
    }
}

@keyframes territoryCityFloatUp {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-24px);
    }
}

.territory-dungeon-difficulty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 211, 124, 0.3);
    border-radius: 999px;
    background: rgba(91, 58, 24, 0.62);
    color: #ffe7a7;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 244, 199, 0.06);
}

.territory-dungeon-difficulty i {
    color: #e6b85d;
}

.territory-dungeon-difficulty input {
    width: 64px;
    min-width: 54px;
    height: 24px;
    padding: 1px 6px;
    border: 1px solid rgba(255, 225, 157, 0.28);
    border-radius: 7px;
    background: rgba(28, 24, 17, 0.9);
    color: #fff1c4;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.territory-dungeon-difficulty input:focus {
    outline: 1px solid rgba(255, 215, 126, 0.72);
    outline-offset: 1px;
}

.territory-dungeon-difficulty input::-webkit-inner-spin-button,
.territory-dungeon-difficulty input::-webkit-outer-spin-button {
    opacity: 0.72;
}

.territory-dungeon-difficulty em {
    color: #ffe7a7;
    font-style: normal;
}

.territory-dungeon-panel header button {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 234, 181, 0.18);
    border-radius: 8px;
    background: rgba(138, 100, 48, 0.32);
    color: #fff1c4;
}

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

.territory-dungeon-offline-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(206, 170, 95, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(45, 39, 30, 0.88), rgba(19, 23, 22, 0.88)),
        #171b1a;
}

.territory-dungeon-offline-panel header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.territory-dungeon-offline-panel strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff1c4;
    font-size: 18px;
}

.territory-dungeon-offline-panel strong i,
.territory-dungeon-offline-panel .territory-kicker {
    color: #d9b663;
}

.territory-dungeon-offline-panel em {
    max-width: 48%;
    color: #cfc5ae;
    font-size: 12px;
    font-style: normal;
    text-align: right;
}

.territory-dungeon-offline-panel p {
    margin: 0;
    color: #b9b09d;
    font-size: 12px;
}

.territory-dungeon-offline-controls {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(100px, 0.8fr));
    gap: 8px;
    align-items: stretch;
}

.territory-dungeon-offline-controls label,
.territory-dungeon-offline-controls button {
    min-width: 0;
}

.territory-dungeon-offline-controls label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 36px;
    padding: 0 9px;
    border: 1px solid rgba(255, 234, 181, 0.14);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
    color: #d8cbb4;
    font-size: 12px;
}

.territory-dungeon-offline-controls select {
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff1c4;
}

.territory-dungeon-offline-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(216, 173, 80, 0.32);
    border-radius: 8px;
    background: rgba(138, 100, 48, 0.42);
    color: #fff1c4;
}

.territory-dungeon-offline-controls button:disabled {
    opacity: 0.42;
}

.territory-dungeon-offline-result {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(126, 174, 218, 0.22);
    border-radius: 8px;
    background: rgba(70, 106, 134, 0.16);
}

.territory-dungeon-offline-result span,
.territory-dungeon-offline-result b,
.territory-dungeon-offline-result em {
    color: #dbe6d1;
    font-size: 12px;
    font-style: normal;
}

.territory-dungeon-offline-result span {
    color: #fff1c4;
}

.territory-dungeon-offline-result i {
    color: #8fc47c;
}

.territory-dungeon-offline-result em {
    color: #ffd4a8;
}

.territory-scroll-button,
.territory-upgrade-row,
.territory-dungeon-cell {
    border: 1px solid rgba(255, 234, 181, 0.14);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
    color: #f5ead1;
}

.territory-scroll-button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 7px;
    text-align: left;
}

.territory-scroll-button i,
.territory-upgrade-row i {
    color: #d9b663;
}

.territory-scroll-button span,
.territory-upgrade-row span,
.territory-relic-slot span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-relic-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.territory-relic-slot {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
}

.territory-relic-slot i {
    color: #d9b663;
}

.territory-relic-slot strong {
    display: block;
    overflow: hidden;
    color: #fff1c4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-relic-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.territory-relic-summary span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.24);
    color: #cfc5ae;
    font-size: 12px;
}

.territory-offline-summary {
    display: grid;
    gap: 12px;
    color: #eadfca;
}

#modal-content:has(.territory-offline-summary) {
    max-width: min(760px, calc(100vw - 32px));
    border: 1px solid rgba(206, 170, 95, 0.28);
    border-radius: 8px;
    background:
        radial-gradient(circle at 16% 0%, rgba(198, 145, 71, 0.22), transparent 34%),
        linear-gradient(180deg, #24211a 0%, #151817 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

#modal-content:has(.territory-offline-summary) h3 {
    margin: 0 0 12px;
    color: #ffe7a7;
    letter-spacing: 0;
}

#modal-content:has(.territory-offline-summary) .modal-actions button,
.territory-offline-equip {
    border: 1px solid rgba(216, 173, 80, 0.38);
    border-radius: 6px;
    background: #6f5324;
    color: #fff1c4;
}

.territory-offline-hero {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 234, 181, 0.14);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.07);
}

.territory-offline-hero > i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(216, 173, 80, 0.16);
    color: #ffe7a7;
    font-size: 24px;
}

.territory-offline-hero span,
.territory-offline-stats em {
    color: #b9b09d;
    font-size: 12px;
    font-style: normal;
}

.territory-offline-hero strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #fff1c4;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-offline-hero p,
.territory-offline-note,
.territory-offline-empty,
.territory-offline-more {
    margin: 4px 0 0;
    color: #cfc5ae;
    font-size: 13px;
}

.territory-offline-stats,
.territory-offline-rewards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.territory-offline-stats span,
.territory-offline-rewards span,
.territory-offline-relic,
.territory-offline-clears span {
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
}

.territory-offline-stats span {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
}

.territory-offline-stats b,
.territory-offline-rewards b,
.territory-offline-relic b {
    color: #ffe7a7;
}

.territory-offline-note {
    padding: 9px 10px;
    border-left: 3px solid rgba(216, 173, 80, 0.72);
    background: rgba(216, 173, 80, 0.1);
}

.territory-offline-warning {
    border-left-color: rgba(220, 101, 78, 0.9);
    background: rgba(151, 52, 39, 0.16);
    color: #f1c2b5;
    line-height: 1.55;
}

.territory-offline-warning strong,
.territory-offline-warning b {
    color: #ffd2a6;
}

.territory-offline-clears {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.territory-offline-clears span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    color: #eadfca;
    font-size: 12px;
}

.territory-offline-summary h4 {
    margin: 3px 0 -4px;
    color: #fff1c4;
    font-size: 13px;
}

.territory-offline-rewards span {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 8px;
}

.territory-offline-rewards i,
.territory-offline-clears i,
.territory-offline-relic i {
    color: #d9b663;
}

.territory-offline-rewards em {
    overflow: hidden;
    color: #d9d0bb;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-offline-relics {
    display: grid;
    gap: 7px;
}

.territory-offline-relic {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 52px;
    padding: 8px;
}

.territory-offline-relic.better {
    border-color: rgba(126, 174, 218, 0.38);
    background: rgba(70, 106, 134, 0.18);
}

.territory-offline-relic strong,
.territory-offline-relic span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-offline-relic strong {
    color: #fff1c4;
    font-size: 13px;
}

.territory-offline-relic span {
    color: #b9b09d;
    font-size: 12px;
}

.territory-offline-relic b {
    font-size: 12px;
}

.territory-offline-equip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    cursor: pointer;
}

.territory-offline-equip:disabled {
    cursor: default;
    opacity: 0.72;
}

@media (max-width: 620px) {
    .territory-offline-stats,
    .territory-offline-rewards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-offline-relic {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .territory-offline-relic b {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 420px) {
    .territory-offline-hero {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .territory-offline-hero > i {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .territory-offline-stats,
    .territory-offline-rewards {
        grid-template-columns: 1fr;
    }
}

.territory-upgrade-list {
    display: grid;
    gap: 6px;
    max-height: 228px;
    overflow: auto;
    padding-right: 2px;
}

.territory-upgrade-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    padding: 7px;
    text-align: left;
}

.territory-upgrade-row strong,
.territory-upgrade-row em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-upgrade-row em {
    color: #b9b09d;
    font-size: 11px;
    font-style: normal;
}

.territory-upgrade-row b,
.territory-scroll-button b {
    color: #ffe7a7;
}

.territory-dungeon-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
}

.territory-dungeon-cell {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 62px;
    padding: 6px 4px;
    text-align: center;
}

.territory-dungeon-cell i {
    color: #d9b663;
}

.territory-dungeon-cell strong {
    color: #fff1c4;
    font-size: 12px;
}

.territory-dungeon-cell span {
    color: #b9b09d;
    font-size: 10px;
}

.territory-dungeon-cell.type-milestone {
    border-color: rgba(126, 174, 218, 0.34);
    background: rgba(70, 106, 134, 0.24);
}

.territory-dungeon-cell.type-boss {
    border-color: rgba(218, 112, 84, 0.42);
    background: rgba(111, 42, 34, 0.28);
}

.territory-dungeon-cell.challengeable {
    border-color: rgba(236, 154, 96, 0.78);
    background: rgba(132, 54, 38, 0.46);
    box-shadow: 0 0 0 2px rgba(236, 154, 96, 0.14);
}

.territory-dungeon-cell.challengeable span {
    color: #ffd4a8;
    font-weight: 700;
}

.territory-dungeon-cell.active {
    border-color: rgba(255, 225, 138, 0.72);
    box-shadow: 0 0 0 2px rgba(216, 173, 80, 0.16);
}

.territory-dungeon-cell.locked {
    opacity: 0.42;
}

.territory-party-strip i {
    background: #8a6430;
    color: #fff1c4;
}

.territory-event-log h4 {
    color: #ffe7a7;
}

.territory-event-log > div {
    border-top-color: rgba(206, 170, 95, 0.14);
}

.territory-event-log > div i {
    color: #d9b663;
}

.territory-event-log span {
    color: #e7dac2;
}

.territory-lottery-grid > div.claimed {
    background: rgba(138, 100, 48, 0.34);
    color: #fff1c4;
}

.territory-empty,
.territory-loading-panel {
    border-color: rgba(206, 170, 95, 0.24);
    background: rgba(18, 21, 20, 0.72);
    color: #c7bda8;
}

.territory-inventory-vault {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(206, 170, 95, 0.25);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(45, 38, 28, 0.96), rgba(23, 27, 26, 0.96)),
        #171b1a;
}

.territory-inventory-vault header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.territory-inventory-vault header span,
.territory-inventory-resource span {
    color: #b9b09d;
    font-size: 12px;
}

.territory-inventory-vault header strong {
    display: block;
    color: #ffe7a7;
    font-size: 16px;
}

.territory-inventory-vault header i {
    color: #d9b663;
    font-size: 20px;
}

.territory-inventory-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.territory-inventory-resource {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 8px;
    align-items: center;
    min-height: 54px;
    padding: 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
}

.territory-inventory-resource i {
    grid-row: 1 / span 2;
    color: #d9b663;
}

.territory-inventory-resource strong {
    color: #fff1c4;
    font-size: 15px;
}

@media (max-width: 1100px) {
    .territory-map-layout,
    .territory-dungeon-growth {
        grid-template-columns: 1fr;
    }

    .territory-city-hero,
    .territory-city-last {
        align-items: stretch;
        flex-direction: column;
    }

    .territory-city-hero-actions {
        justify-content: stretch;
    }

    .territory-city-hero-actions button {
        width: 100%;
    }

    .territory-city-gather-grid,
    .territory-city-gather-map,
    .territory-city-population-card {
        grid-template-columns: 1fr;
    }

    .territory-city-population-card > .territory-cost-row,
    .territory-city-population-card > button {
        grid-column: auto;
    }

    .territory-city-job {
        grid-template-columns: 20px minmax(0, 1fr);
        grid-template-areas:
            "icon info"
            "controls controls";
        gap: 4px 6px;
        align-items: start;
        padding: 6px;
        min-width: 0;
        min-height: 0;
    }

    .territory-city-job > i {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .territory-city-job-info {
        gap: 1px;
    }

    .territory-city-job-controls {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 4px;
    }

    .territory-city-job strong {
        font-size: 12px;
        line-height: 1.05;
    }

    .territory-city-job span,
    .territory-city-job small {
        font-size: 9px;
        line-height: 1.08;
    }

    .territory-city-job button {
        min-height: 28px;
        padding: 4px 7px;
        font-size: 11px;
    }

    .territory-city-job-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .territory-enter-button {
        grid-column: auto;
        min-width: 132px;
    }

    .territory-dungeon-offline-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .territory-dungeon-offline-controls label {
        grid-column: 1 / -1;
    }

    .territory-city-map-main {
        min-height: min(76vh, 760px);
    }

    .territory-city-focus-panel {
        width: min(300px, calc(100% - 24px));
    }
}

@media (max-width: 760px) {
    .territory-topbar,
    .territory-workspace-head {
        align-items: stretch;
    }

    .territory-topbar-actions,
    .territory-header-resources {
        justify-content: flex-start;
    }

    .territory-sandtable {
        min-height: 315px;
        aspect-ratio: 1.08 / 1;
    }

    .territory-building-node {
        width: 62px;
        min-height: 64px;
    }

    .territory-building-node.large {
        width: 68px;
    }

    .territory-building-node.small {
        width: 58px;
    }

    .territory-building-node.watchtower {
        width: 62px;
    }

    .territory-building-core {
        width: 36px;
        height: 34px;
    }

    .territory-building-node.large .territory-building-core {
        width: 40px;
        height: 38px;
    }

    .territory-watchtower-node .territory-building-core {
        width: 34px;
        height: 44px;
    }

    .territory-building-label {
        padding: 2px 4px;
        font-size: 10px;
    }

    .territory-building-node small {
        padding: 1px 4px;
        font-size: 8px;
    }

    .territory-field-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .territory-dungeon-canvas {
        height: 380px;
    }

    .territory-dungeon-board {
        grid-template-columns: 1fr;
    }

    .territory-dungeon-offline-panel header {
        display: grid;
    }

    .territory-dungeon-offline-panel em {
        max-width: none;
        text-align: left;
    }

    .territory-dungeon-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .territory-field-board,
    .territory-inventory-resource-grid {
        grid-template-columns: 1fr;
    }

    .territory-header-resources {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .territory-header-resource {
        min-width: 0;
        min-height: 38px;
        padding: 5px 6px;
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .territory-header-resource b,
    .territory-header-resource em {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .territory-map-shell,
    .territory-feature-workspace {
        padding: 8px;
    }

    .territory-sandtable {
        min-height: 292px;
    }

    .territory-command-panel {
        align-items: stretch;
    }

    .territory-dungeon-canvas {
        height: 330px;
    }

    .territory-dungeon-growth {
        gap: 8px;
    }

    .territory-dungeon-panel {
        padding: 8px;
    }

    .territory-scroll-row,
    .territory-relic-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-scroll-button {
        grid-template-columns: 22px minmax(0, 1fr) auto;
        min-height: 36px;
        padding: 6px;
    }

    .territory-relic-slot {
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 40px;
        padding: 6px;
    }

    .territory-scroll-button span,
    .territory-relic-slot strong {
        font-size: 12px;
    }

    .territory-relic-slot span {
        font-size: 10px;
    }

    .territory-dungeon-offline-controls {
        grid-template-columns: 1fr;
    }

    .territory-dungeon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Territory sandtable interaction fixes */
.territory-map-roads,
.territory-map-center-ring,
.territory-building-shadow,
.territory-building-core,
.territory-building-label,
.territory-building-node small {
    pointer-events: none !important;
}

.territory-building-node,
.territory-building-node:hover,
.territory-building-node:active,
.territory-building-node:focus,
.territory-building-node.selected,
.territory-building-node.entered {
    background: rgba(0, 0, 0, 0.01) !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) !important;
}

.territory-building-node.selected,
.territory-building-node.entered {
    outline: 0;
    filter: brightness(1.1);
}

.territory-building-node.selected .territory-building-core,
.territory-building-node.entered .territory-building-core {
    box-shadow:
        0 0 0 3px rgba(216, 173, 80, 0.2),
        0 0 16px rgba(255, 213, 112, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 7px 12px rgba(0, 0, 0, 0.28);
}

.territory-enter-button {
    display: none !important;
}

/* Territory containment and title polish */
.territory-topbar h2,
.territory-topbar h2 i {
    color: #ffe7a7;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 0 12px rgba(217, 182, 99, 0.16);
}

.territory-map-shell {
    overflow: hidden !important;
    box-sizing: border-box;
}

.territory-sandtable {
    width: 100%;
    max-width: 100%;
    height: clamp(292px, 42vw, 360px);
    min-height: 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .territory-sandtable {
        height: clamp(278px, 78vw, 322px);
    }
}

@media (max-width: 520px) {
    .territory-sandtable {
        height: clamp(264px, 76vw, 292px);
    }
}

/* Territory wide theatre mode */
body.territory-wide-view {
    width: 100vw;
    max-width: none;
    margin: 0;
    border-left: 0;
    border-right: 0;
}

body.territory-wide-view #main-content-section {
    padding-right: clamp(12px, 2vw, 24px);
    padding-left: clamp(12px, 2vw, 24px);
}

body.territory-wide-view #territory-view.active {
    width: 100%;
    max-width: min(1280px, calc(100vw - 24px));
    margin: 0 auto;
}

body.territory-wide-view .territory-app {
    width: 100%;
}

body.territory-wide-view .territory-dungeon-board {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: stretch;
}

body.territory-wide-view .territory-dungeon-canvas {
    height: clamp(500px, 58vh, 620px);
}

body.territory-wide-view .territory-dungeon-side {
    max-height: clamp(500px, 58vh, 620px);
    overflow: auto;
}

@media (max-width: 980px) {
    body.territory-wide-view .territory-dungeon-board {
        grid-template-columns: 1fr;
    }

    body.territory-wide-view .territory-dungeon-side {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    body.territory-wide-view #main-content-section {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.territory-wide-view #territory-view.active {
        max-width: 100%;
    }
}

@media (max-width: 1100px) {
    .territory-explore-layout {
        grid-template-columns: 1fr;
    }

    .territory-explore-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-explore-side .territory-event-log {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .territory-explore-mode .territory-topbar {
        gap: 8px;
    }

    .territory-explore-mode .territory-topbar-meta {
        display: none;
    }

    .territory-explore-mode .territory-header-resources {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .territory-explore-mode .territory-header-resource {
        min-height: 34px;
    }

    .territory-explore-mode .territory-feature-nav {
        grid-auto-columns: minmax(126px, 42vw);
        padding: 6px;
    }

    .territory-explore-hero {
        grid-template-columns: 1fr;
    }

    .territory-explore-statline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-explore-board {
        width: max(100%, 640px);
        min-height: 430px;
        padding: 12px;
    }

    .territory-explore-cell {
        border-radius: 0;
    }

    .territory-explore-cell i {
        font-size: 12px;
    }

    .territory-explore-cell small,
    .territory-explore-cell.building b {
        font-size: 8px;
    }

    .territory-explore-side {
        grid-template-columns: 1fr;
    }

    .territory-explore-action-row {
        grid-template-columns: 1fr;
    }

    .territory-explore-dice {
        grid-template-columns: 22px minmax(44px, 1fr) auto;
        min-width: 0;
    }

    .territory-explore-dice span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Territory exploration interaction polish */
.territory-explore-mode .territory-feature-nav {
    position: relative;
    display: block;
    height: clamp(92px, 12vw, 130px);
    overflow: hidden;
    border-color: rgba(206, 170, 95, 0.24);
    background:
        repeating-linear-gradient(32deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 17px),
        linear-gradient(135deg, #26301f 0%, #16231f 48%, #191c18 100%);
}

.territory-feature-nav-roads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.territory-feature-nav-roads path {
    fill: none;
    stroke: rgba(198, 166, 100, 0.44);
    stroke-linecap: round;
    stroke-width: 2.4;
}

.territory-feature-nav-roads .main-road {
    stroke: rgba(228, 194, 119, 0.66);
    stroke-width: 3.6;
}

.territory-explore-mode .territory-feature-nav-item {
    position: absolute;
    left: var(--node-x);
    top: var(--node-y);
    z-index: 2;
    width: 86px;
    min-height: 42px;
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 5px 6px;
    transform: translate(-50%, -50%);
    background: rgba(22, 25, 22, 0.86);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.territory-explore-mode .territory-feature-nav-item span {
    font-size: 12px;
}

.territory-explore-mode .territory-feature-nav-item small {
    font-size: 9px;
}

.territory-explore-map-column {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.territory-explore-dice {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    padding: 6px 7px;
}

.territory-explore-dice span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.12;
    font-size: 12px;
}

.territory-explore-dice b {
    min-width: 18px;
    text-align: right;
}

.territory-threat-button {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0 7px;
    align-items: center;
    min-width: 170px;
    padding: 7px 9px;
    text-align: left;
}

.territory-threat-button i {
    grid-row: 1 / span 2;
}

.territory-threat-button span,
.territory-threat-button small {
    min-width: 0;
}

.territory-threat-button span {
    color: #fff1c4;
    font-weight: 700;
}

.territory-threat-button small {
    color: #cabf9e;
    font-size: 10px;
    line-height: 1.2;
}

.territory-explore-cell.land {
    cursor: pointer;
}

.territory-explore-cell.land.tier-2 {
    border-color: rgba(255, 225, 138, 0.44);
    background: rgba(88, 83, 44, 0.78);
    color: #ffe38f;
    box-shadow: inset 0 0 0 1px rgba(255, 234, 181, 0.08);
}

.territory-explore-cell.land:hover {
    filter: brightness(1.13);
}

.territory-explore-board .territory-explore-cell.route,
.territory-explore-board .territory-explore-cell.building,
.territory-explore-board .territory-explore-cell.land,
.territory-explore-board .territory-explore-cell.empty {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.territory-explore-board .territory-explore-cell.route {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.territory-explore-board .territory-explore-cell.building,
.territory-explore-board .territory-explore-cell.land,
.territory-explore-board .territory-explore-cell.empty {
    position: relative;
    display: grid;
    place-items: center;
}

.territory-explore-board .territory-explore-cell.building b {
    right: 4px;
    bottom: 3px;
}

.territory-land-upgrade-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.territory-land-upgrade-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 7px;
    border: 1px solid rgba(221, 181, 91, 0.28);
    border-radius: 6px;
    background: rgba(138, 100, 48, 0.32);
    color: #fff1c4;
    cursor: pointer;
    font-size: 12px;
}

.territory-land-upgrade-row button:disabled {
    cursor: not-allowed;
    background: rgba(74, 68, 55, 0.62);
    color: #948b7a;
}

.territory-land-stockline .territory-pill.active {
    border-color: rgba(255, 225, 138, 0.44);
    background: rgba(138, 100, 48, 0.38);
    color: #fff1c4;
}

.territory-placement-tips {
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.05);
}

.territory-placement-tips strong {
    color: #ffe7a7;
    font-size: 12px;
}

.territory-placement-tips span {
    color: #cfc5ae;
    font-size: 11px;
    line-height: 1.35;
}

/* Territory exploration v2 */
.territory-map-layout {
    grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
}

.territory-explore-mode .territory-map-layout {
    grid-template-columns: 1fr;
}

.territory-explore-mode .territory-sandtable {
    min-height: 220px;
    aspect-ratio: 1.45 / 1;
}

.territory-explore-map-column {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

.territory-explore-layout {
    grid-template-columns: minmax(640px, 1fr) minmax(330px, 380px);
}

.territory-explore-board {
    grid-template-columns: repeat(var(--explore-cols, 13), 44px);
    grid-auto-rows: 44px;
    justify-content: center;
    gap: 3px;
    width: max-content;
    min-width: 100%;
    min-height: auto;
    padding: 18px;
    overflow: visible;
}

.territory-explore-cell {
    aspect-ratio: 1 / 1;
    inline-size: 44px;
    block-size: 44px;
    box-sizing: border-box;
    font-size: 10px;
}

.territory-explore-cell.route {
    overflow: visible;
}

.territory-explore-board .territory-explore-cell.route {
    overflow: visible !important;
}

.territory-explore-cell.route i {
    font-size: 12px;
}

.territory-explore-cell.route em {
    position: absolute;
    z-index: 4;
    right: 1px;
    bottom: 0;
    left: 1px;
    overflow: hidden;
    color: rgba(255, 241, 196, 0.72);
    font-size: 8px;
    font-style: normal;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.territory-explore-cell.route.previewed .route-bed {
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 190, 0.18),
        0 0 0 2px rgba(120, 164, 206, 0.52),
        0 0 12px rgba(120, 164, 206, 0.22);
}

.route-preview-step {
    position: absolute;
    z-index: 6;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(224, 239, 255, 0.76);
    border-radius: 50%;
    background: #3f6684;
    color: #f5fbff;
    font-size: 9px;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
}

.territory-explore-cell.building.near-preview {
    border-color: rgba(255, 225, 138, 0.68);
    background: rgba(92, 72, 37, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 234, 181, 0.14), 0 0 14px rgba(216, 173, 80, 0.22);
}

.territory-landing-preview-panel h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.territory-landing-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.territory-landing-preview {
    display: grid;
    grid-template-columns: 28px 20px minmax(0, 1fr);
    gap: 0 6px;
    align-items: center;
    min-height: 42px;
    padding: 6px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.055);
}

.territory-landing-preview em {
    grid-row: 1 / span 2;
    color: #9fc2df;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.territory-landing-preview i {
    grid-row: 1 / span 2;
    color: #d9b663;
    font-size: 13px;
}

.territory-landing-preview b,
.territory-landing-preview small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-landing-preview b {
    color: #fff1c4;
    font-size: 12px;
}

.territory-landing-preview small {
    color: #b9b09d;
    font-size: 10px;
}

.territory-explore-summary-panel h4 small {
    color: #b9b09d;
    font-size: 11px;
    font-weight: 600;
}

.territory-explore-dice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.territory-explore-dice {
    min-height: 40px;
    padding: 5px 6px;
}

.territory-explore-dice span {
    font-size: 11px;
    line-height: 1.1;
}

.territory-explore-dice b {
    font-size: 12px;
}

.territory-explore-side {
    align-content: start;
}

.territory-explore-loop-note {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 6px;
    color: #d8ceb9;
    font-size: 11px;
    line-height: 1.25;
}

.territory-explore-cell.route.has-building .route-bed {
    filter: brightness(1.15) saturate(1.08);
}

.territory-explore-cell.route.has-building i {
    color: #ffe7a7;
    text-shadow: 0 0 8px rgba(217, 182, 99, 0.35);
}

.territory-explore-building-list article {
    grid-template-columns: 30px minmax(0, 1fr) 54px;
    align-items: center;
}

.territory-explore-building-list article > button,
.territory-explore-event-list article > button,
.territory-treasury-footer button {
    min-height: 30px;
    border: 1px solid rgba(217, 182, 99, 0.34);
    border-radius: 6px;
    background: rgba(138, 100, 48, 0.7);
    color: #fff4d6;
    font-size: 12px;
    cursor: pointer;
}

.territory-explore-building-list article > button:disabled,
.territory-explore-event-list article > button:disabled,
.territory-treasury-footer button:disabled {
    cursor: not-allowed;
    border-color: rgba(255, 234, 181, 0.1);
    background: rgba(80, 73, 58, 0.45);
    color: #948b7a;
}

.territory-explore-event-list {
    display: grid;
    gap: 7px;
}

.territory-explore-event-list article {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 54px;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(255, 234, 181, 0.1);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
}

.territory-explore-event-list article > i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(217, 182, 99, 0.12);
    color: #d9b663;
}

.territory-explore-event-list strong,
.territory-explore-event-list span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.territory-explore-event-list strong {
    color: #fff1c4;
    font-size: 13px;
}

.territory-explore-event-list span {
    color: #b9b09d;
    font-size: 11px;
}

.territory-treasury-panel {
    gap: 10px;
}

.territory-treasury-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.territory-treasury-cell {
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 6px 4px;
    border: 1px solid rgba(255, 234, 181, 0.14);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.06);
    color: #efe4c9;
    text-align: center;
}

button.territory-treasury-cell {
    cursor: pointer;
}

.territory-treasury-cell i {
    color: #d9b663;
}

.territory-treasury-cell strong,
.territory-treasury-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-treasury-cell strong {
    font-size: 12px;
}

.territory-treasury-cell small {
    color: #b9b09d;
    font-size: 10px;
}

.territory-treasury-cell.center {
    border-color: rgba(217, 182, 99, 0.45);
    background:
        radial-gradient(circle at 45% 24%, rgba(255, 241, 196, 0.18), transparent 42%),
        rgba(100, 72, 32, 0.54);
}

.territory-treasury-cell.filled {
    border-color: rgba(120, 170, 110, 0.35);
    background: rgba(54, 74, 52, 0.72);
}

.territory-treasury-cell.filled.tier-2 {
    border-color: rgba(149, 202, 130, 0.58);
    box-shadow: inset 0 0 0 1px rgba(149, 202, 130, 0.1);
}

.territory-treasury-cell.empty {
    color: #b5a986;
    background: rgba(72, 64, 50, 0.4);
}

.territory-treasury-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    align-items: center;
}

.territory-treasury-footer > div {
    min-width: 0;
}

.territory-treasury-footer strong {
    display: block;
    margin-bottom: 4px;
    color: #fff1c4;
    font-size: 12px;
}

@media (max-width: 760px) {
    .territory-city-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .territory-city-hero h3 {
        font-size: 20px;
        line-height: 1.1;
    }

    .territory-city-hero p {
        font-size: 12px;
    }

    .territory-city-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .territory-city-hero-actions button {
        width: 100%;
        min-height: 38px;
        padding: 7px 10px;
    }

    .territory-city-hero-actions span {
        display: block;
        font-size: 12px;
    }

    .territory-city-map-main {
        min-height: min(70vh, 640px);
        border-radius: 8px;
    }

    .territory-city-dock {
        inset: auto 8px 8px 8px;
        padding: 8px;
    }

    .territory-city-map-hud {
        inset: 8px 8px auto 8px;
        flex-direction: column;
        align-items: stretch;
    }

    .territory-city-map-hud-copy,
    .territory-city-map-hud-meta {
        max-width: none;
        width: 100%;
    }

    .territory-city-map-hud-copy {
        padding: 8px 9px;
    }

    .territory-city-map-hud-copy strong {
        font-size: 14px;
    }

    .territory-city-map-hud-meta {
        justify-content: space-between;
    }

    .territory-city-map-hud-meta span,
    .territory-city-map-hud-meta button {
        min-height: 30px;
        padding: 5px 7px;
        font-size: 11px;
    }

    .territory-city-focus-panel {
        padding: 0;
    }

    .territory-city-focus-head,
    .territory-city-focus-body,
    .territory-city-focus-actions {
        padding-left: 8px;
        padding-right: 8px;
    }

    .territory-city-focus-head {
        padding-top: 8px;
    }

    .territory-city-focus-actions {
        padding-bottom: 8px;
    }

    .territory-city-resource-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .territory-city-resource-card {
        min-height: 36px;
        padding: 4px 4px 6px;
        border-radius: 6px;
    }

    .territory-city-resource-top {
        gap: 3px;
    }

    .territory-city-resource-card span {
        font-size: 10px;
    }

    .territory-city-resource-card em {
        font-size: 8px;
    }

    .territory-city-resource-card strong {
        font-size: 10px;
        line-height: 1.12;
    }

    .territory-city-resource-card i {
        height: 2px;
    }

    .territory-city-tabs {
        gap: 5px;
    }

    .territory-city-tabs button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 48px;
        padding: 5px 2px;
        border-radius: 7px;
        font-size: 11px;
        line-height: 1.05;
    }

    .territory-city-tabs button i {
        font-size: 16px;
    }

    .territory-city-tabs button span {
        overflow: visible;
        line-height: 1.05;
        white-space: nowrap;
    }

    .territory-city-collector-head {
        align-items: stretch;
    }

    .territory-city-live-badge {
        min-height: 34px;
        padding: 4px 6px;
    }

    .territory-city-gather-actions {
        gap: 5px;
    }

    .territory-city-gather-action {
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 44px;
        padding: 5px;
        gap: 1px 5px;
    }

    .territory-city-gather-action > i {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .territory-city-gather-action strong {
        font-size: 12px;
    }

    .territory-city-gather-action span,
    .territory-city-gather-action .territory-pill {
        font-size: 9px;
    }

    .territory-city-skill-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-city-buildings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-city-starlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-city-job-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-city-job {
        padding: 6px;
    }

    .territory-city-population-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .territory-city-population-card > .territory-cost-row,
    .territory-city-population-card > button {
        grid-column: auto;
    }

    .territory-city-buildings .territory-building-card,
    .territory-city-starlight-grid .territory-building-card,
    .territory-city-skill.compact {
        min-width: 0;
    }

    .territory-city-buildings .territory-building-card,
    .territory-city-starlight-grid .territory-building-card {
        padding: 8px;
        gap: 7px;
    }

    .territory-city-buildings .territory-building-card header i,
    .territory-city-starlight-grid .territory-building-card header i {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .territory-city-buildings .territory-building-card p,
    .territory-city-buildings .territory-building-card span,
    .territory-city-starlight-grid .territory-building-card p,
    .territory-city-starlight-grid .territory-building-card span {
        font-size: 10px;
        line-height: 1.15;
    }

    .territory-city-buildings .territory-building-card button,
    .territory-city-starlight-grid .territory-building-card button {
        min-height: 30px;
        padding: 5px 8px;
        font-size: 11px;
    }

    .territory-explore-mode .territory-feature-nav {
        height: 96px;
        padding: 0;
    }

    .territory-explore-mode .territory-feature-nav-item {
        width: 74px;
        min-height: 38px;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 0 5px;
        padding: 4px 5px;
    }

    .territory-explore-mode .territory-feature-nav-item span {
        font-size: 11px;
    }

    .territory-explore-mode .territory-feature-nav-item small {
        font-size: 8px;
    }

    .territory-explore-map-column {
        max-height: min(62vh, 520px);
        border-radius: 8px;
    }

    .territory-explore-dice-row {
        gap: 6px;
    }

    .territory-explore-dice {
        grid-template-columns: 18px minmax(0, 1fr) auto;
        min-height: 38px;
        padding: 5px 6px;
    }

    .territory-explore-dice span {
        font-size: 11px;
    }

    .territory-threat-button {
        min-width: 0;
    }

    .territory-land-upgrade-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .territory-city-resource-board {
        gap: 3px;
    }

    .territory-city-resource-card {
        min-height: 34px;
        padding: 4px 3px 6px;
    }

    .territory-city-resource-card span {
        font-size: 9px;
    }

    .territory-city-resource-card em {
        display: none;
    }

    .territory-city-resource-card strong {
        font-size: 9px;
    }

    .territory-city-tabs button {
        min-height: 44px;
        font-size: 10px;
    }

    .territory-city-gather-action strong {
        font-size: 11px;
    }

    .territory-city-gather-action .territory-pill {
        padding-inline: 3px;
    }

    .territory-city-job-list {
        gap: 5px;
    }

    .territory-city-job {
        padding: 5px;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 3px 5px;
    }

    .territory-city-job > i {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .territory-city-job strong {
        font-size: 11px;
    }

    .territory-city-job-desc {
        display: none;
    }

    .territory-city-job-yield {
        font-size: 8px;
    }

    .territory-city-job-controls {
        grid-template-columns: minmax(0, 1fr) 30px;
        gap: 3px;
    }

    .territory-city-job input,
    .territory-city-job button {
        min-height: 26px;
        font-size: 10px;
    }
}

@media (max-width: 1100px) {
    .territory-map-layout,
    .territory-explore-mode .territory-map-layout,
    .territory-explore-layout {
        grid-template-columns: 1fr;
    }

    .territory-explore-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .territory-explore-side .territory-event-log,
    .territory-explore-side .territory-explore-panel:has(.territory-explore-building-list),
    .territory-explore-side .territory-explore-panel:has(.territory-placement-tips) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .territory-explore-mode .territory-sandtable {
        min-height: 180px;
        aspect-ratio: 1.2 / 1;
    }

    .territory-explore-map-column {
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
    }

    .territory-explore-board {
        grid-template-columns: repeat(var(--explore-cols, 13), 38px);
        grid-auto-rows: 38px;
        width: max-content;
        min-width: max-content;
        min-height: auto;
        padding: 14px;
    }

    .territory-explore-cell {
        inline-size: 38px;
        block-size: 38px;
    }

    .territory-explore-cell.route em {
        font-size: 7px;
    }

    .territory-explorer-token {
        width: 24px;
        height: 24px;
    }

    .territory-explore-side,
    .territory-landing-preview-grid {
        grid-template-columns: 1fr;
    }

    .territory-explore-dice-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .territory-explore-dice {
        grid-template-columns: 16px minmax(0, 1fr) auto;
        min-height: 36px;
        padding: 4px 5px;
    }

    .territory-explore-dice span {
        font-size: 10px;
    }

    .territory-explore-dice b {
        min-width: 14px;
        font-size: 10px;
    }
}

.territory-explore-mode .territory-explore-map-column {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

/* City map-first overrides */
#territory-view .territory-city-back {
    width: auto;
    min-height: 36px;
    margin: 0 0 8px;
    padding: 7px 12px;
    border-radius: 8px;
}

.territory-city-mode {
    gap: 8px;
    padding: 10px;
}

.territory-city-scene {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
    gap: 12px;
    align-items: start;
}

.territory-city-map-shell {
    min-width: 0;
}

.territory-city-map-main {
    min-height: clamp(520px, 66vh, 780px);
    background:
        linear-gradient(90deg, rgba(255, 241, 196, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 241, 196, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(192, 138, 57, 0.22), transparent 26%),
        radial-gradient(circle at 23% 62%, rgba(82, 126, 73, 0.2), transparent 23%),
        radial-gradient(circle at 76% 62%, rgba(126, 94, 72, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(19, 23, 22, 0.96), rgba(12, 16, 15, 0.98));
    background-size: 48px 48px, 48px 48px, auto, auto, auto, auto;
}

.territory-city-sidebar {
    display: grid;
    gap: 10px;
    min-width: 0;
    align-content: start;
    position: sticky;
    top: 12px;
    max-height: calc(100dvh - 138px);
    overflow: auto;
    padding-right: 2px;
}

.territory-city-sidebar > * {
    min-width: 0;
}

.territory-city-sidebar .territory-city-dock-body {
    display: grid;
    gap: 10px;
}

.territory-city-map-main .territory-city-node {
    width: auto !important;
    min-width: 0;
    inline-size: 74px;
    min-height: 74px;
    grid-template-rows: 42px auto;
    gap: 3px;
    padding: 7px 5px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(42, 38, 29, 0.9), rgba(18, 23, 21, 0.82)),
        rgba(24, 28, 26, 0.88);
}

.territory-city-map-main .territory-city-node i {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    font-size: 18px;
}

.territory-city-map-main .territory-city-node strong {
    width: 100%;
    font-size: 11px;
    text-align: center;
}

.territory-city-map-main .territory-city-node small {
    display: none;
}

.territory-city-map-main .territory-city-node.large {
    inline-size: 96px;
    min-height: 92px;
}

.territory-city-map-main .territory-city-node.large i {
    width: 56px;
    height: 48px;
    font-size: 24px;
}

.territory-city-map-main .territory-city-node.small {
    inline-size: 58px;
    min-height: 60px;
}

.territory-city-map-main .territory-city-node.small i {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

@media (max-width: 1024px) {
    .territory-city-scene {
        grid-template-columns: 1fr;
    }

    .territory-city-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .territory-city-map-main {
        min-height: min(64vh, 600px);
    }
}

@media (max-width: 760px) {
    #territory-view .territory-city-back {
        min-height: 34px;
        margin-bottom: 6px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .territory-city-mode {
        padding: 8px;
        border-radius: 8px;
    }

    .territory-city-scene {
        position: relative;
        display: block;
        gap: 0;
    }

    .territory-city-map-main {
        min-height: min(76vh, 640px);
    }

    .territory-city-map-main .territory-city-node {
        inline-size: 58px;
        min-height: 60px;
        padding: 5px 4px;
    }

    .territory-city-map-main .territory-city-node i {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .territory-city-map-main .territory-city-node strong {
        font-size: 9px;
    }

    .territory-city-map-main .territory-city-node.large {
        inline-size: 74px;
        min-height: 72px;
    }

    .territory-city-map-main .territory-city-node.large i {
        width: 42px;
        height: 36px;
        font-size: 18px;
    }

    .territory-city-sidebar {
        position: absolute;
        top: auto;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 6;
        max-height: min(28vh, 238px);
        overflow: auto;
        padding: 6px;
        border: 1px solid rgba(206, 170, 95, 0.2);
        border-radius: 10px;
        background: rgba(14, 17, 16, 0.84);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(10px);
    }

    .territory-city-sidebar .territory-city-focus-panel {
        box-shadow: none;
    }

    .territory-city-sidebar .territory-city-focus-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 7px 8px 5px;
    }

    .territory-city-sidebar .territory-city-focus-head h4 {
        font-size: 14px;
    }

    .territory-city-sidebar .territory-city-focus-head p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 11px;
        line-height: 1.25;
    }

    .territory-city-sidebar .territory-city-focus-head button {
        min-height: 32px;
        padding: 5px 10px;
    }

    .territory-city-sidebar .territory-city-focus-body {
        padding: 0 8px 6px;
    }

    .territory-city-sidebar .territory-city-focus-stat {
        min-height: 48px;
        padding: 6px;
    }

    .territory-city-sidebar .territory-city-focus-stat strong {
        font-size: 17px;
    }

    .territory-city-sidebar .territory-city-focus-stat span,
    .territory-city-sidebar .territory-city-focus-mini,
    .territory-city-sidebar .territory-city-focus-actions,
    .territory-city-sidebar .territory-city-last {
        display: none;
    }

    .territory-city-sidebar .territory-city-dock-body {
        gap: 8px;
    }
}

/* City map-first mobile composition pass */
@media (max-width: 760px) {
    .territory-city-map-hud {
        inset: 8px 8px auto 8px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: start;
    }

    .territory-city-map-hud-copy {
        width: auto !important;
        max-width: 205px !important;
        padding: 7px 8px;
    }

    .territory-city-map-hud-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .territory-city-map-hud-meta {
        width: auto !important;
        max-width: 120px !important;
        display: grid;
        justify-items: end;
        gap: 5px;
    }

    .territory-city-map-hud-meta span,
    .territory-city-map-hud-meta button {
        width: auto !important;
        min-height: 28px;
        padding: 4px 7px;
        font-size: 10px;
        white-space: nowrap;
    }

    .territory-city-map-hud-cap {
        display: none !important;
    }

    .territory-city-sidebar {
        max-height: 190px;
        overflow: auto;
        background: rgba(12, 16, 15, 0.76);
    }

    .territory-city-sidebar .territory-city-focus-panel {
        border-color: rgba(206, 170, 95, 0.18);
        background: rgba(12, 16, 15, 0.68);
    }

    .territory-city-sidebar .territory-city-focus-head {
        padding: 6px 7px;
    }

    .territory-city-sidebar .territory-city-focus-head p {
        -webkit-line-clamp: 1;
    }

    .territory-city-sidebar .territory-city-focus-body {
        display: none;
    }

    .territory-city-sidebar .territory-city-resource-board {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
    }

    .territory-city-sidebar .territory-city-resource-card {
        min-height: 30px;
        padding: 3px 3px 5px;
    }

    .territory-city-sidebar .territory-city-resource-card span {
        font-size: 8px;
    }

    .territory-city-sidebar .territory-city-resource-card strong {
        font-size: 8px;
        line-height: 1.05;
    }

    .territory-city-sidebar .territory-city-tabs button {
        min-height: 34px;
        padding: 3px 2px;
        font-size: 10px;
    }
}

/* Territory city repair: sandtable stays, city becomes a compact grid subview. */
#territory-view .territory-feature-workspace:has(.territory-city-scene) {
    padding: 0;
    border: 0;
    background: transparent;
}

#territory-view .territory-feature-workspace:has(.territory-city-scene)::before {
    content: none;
}

.territory-city-scene {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr);
    gap: 12px;
    align-items: start;
}

.territory-city-map-shell {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 44%, rgba(194, 145, 64, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(18, 21, 20, 0.88), rgba(12, 16, 15, 0.92));
}

.territory-city-map-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.territory-city-map-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff1c4;
    font-size: 18px;
    line-height: 1.15;
}

.territory-city-map-head p {
    margin: 4px 0 0;
    color: #c7bda8;
    font-size: 12px;
    line-height: 1.35;
}

.territory-city-map-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.territory-city-map-tools span,
.territory-city-map-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid rgba(206, 170, 95, 0.18);
    border-radius: 7px;
    background: rgba(24, 28, 26, 0.76);
    color: #fff1c4;
    font-size: 12px;
}

.territory-city-map-tools em {
    color: #b9b09d;
    font-style: normal;
}

.territory-city-map-tools button {
    border-color: rgba(221, 181, 91, 0.34);
    background: rgba(138, 100, 48, 0.82);
}

.territory-city-grid-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(54px, 1fr));
    grid-template-rows: repeat(7, minmax(54px, 1fr));
    gap: 7px;
    min-height: 480px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(206, 170, 95, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 241, 196, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 241, 196, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(207, 153, 61, 0.16), transparent 31%),
        linear-gradient(180deg, rgba(9, 15, 13, 0.96), rgba(11, 16, 14, 0.98));
    background-size: 42px 42px, 42px 42px, auto, auto;
}

.territory-city-grid-map::before,
.territory-city-grid-map::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.territory-city-grid-map::before {
    inset: 15px;
    border: 1px solid rgba(255, 233, 169, 0.09);
    border-radius: 14px;
}

.territory-city-grid-map::after {
    left: 50%;
    top: 50%;
    width: 42%;
    height: 42%;
    border: 1px solid rgba(219, 175, 81, 0.12);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(219, 175, 81, 0.12), transparent 62%);
    transform: translate(-50%, -50%);
}

.territory-city-grid-roads {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
    align-self: stretch;
    justify-self: stretch;
    background:
        linear-gradient(90deg, transparent 47%, rgba(212, 172, 92, 0.12) 48%, rgba(212, 172, 92, 0.12) 52%, transparent 53%),
        linear-gradient(180deg, transparent 47%, rgba(212, 172, 92, 0.12) 48%, rgba(212, 172, 92, 0.12) 52%, transparent 53%);
    pointer-events: none;
}

.territory-city-plot {
    grid-column: var(--city-col);
    grid-row: var(--city-row);
    z-index: 2;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(206, 170, 95, 0.06);
    border-radius: 7px;
    background: rgba(255, 241, 196, 0.025);
}

.territory-city-plot.road {
    border-color: rgba(206, 170, 95, 0.08);
    background: rgba(206, 170, 95, 0.045);
}

.territory-city-plot.edge {
    background: rgba(86, 118, 79, 0.035);
}

.territory-city-node {
    position: relative;
    left: auto;
    top: auto;
    grid-column: var(--city-col);
    grid-row: var(--city-row);
    z-index: 3;
    display: grid;
    grid-template-rows: 36px auto auto;
    justify-items: center;
    align-self: stretch;
    justify-self: stretch;
    gap: 3px;
    min-width: 0;
    min-height: 0;
    padding: 6px 5px;
    border: 1px solid rgba(206, 170, 95, 0.24);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(45, 42, 33, 0.94), rgba(20, 24, 22, 0.9)),
        rgba(24, 28, 26, 0.9);
    color: #fff1c4;
    cursor: pointer;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 9px 18px rgba(0, 0, 0, 0.22);
}

.territory-city-node i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.09);
    color: #d9b663;
    font-size: 16px;
}

.territory-city-node strong,
.territory-city-node small {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-node strong {
    width: 100%;
    font-size: 12px;
    line-height: 1.1;
}

.territory-city-node small {
    color: #b9b09d;
    font-size: 10px;
    line-height: 1.1;
}

.territory-city-node.large {
    grid-template-rows: 48px auto auto;
    padding: 8px 6px;
    border-color: rgba(225, 190, 103, 0.38);
    background:
        radial-gradient(circle at 50% 36%, rgba(228, 177, 75, 0.22), transparent 58%),
        linear-gradient(180deg, rgba(72, 57, 34, 0.96), rgba(27, 28, 24, 0.94));
}

.territory-city-node.large i {
    width: 48px;
    height: 42px;
    font-size: 22px;
}

.territory-city-node.small {
    grid-template-rows: 30px auto;
    padding: 5px;
}

.territory-city-node.small i {
    width: 30px;
    height: 27px;
    font-size: 13px;
}

.territory-city-node.small small {
    display: none;
}

.territory-city-node.locked {
    opacity: 0.48;
    filter: grayscale(0.4);
}

.territory-city-node.active {
    border-color: rgba(255, 224, 137, 0.82);
    background:
        radial-gradient(circle at 50% 36%, rgba(246, 197, 95, 0.26), transparent 58%),
        linear-gradient(180deg, rgba(124, 87, 38, 0.96), rgba(41, 34, 24, 0.94));
    box-shadow: 0 0 0 2px rgba(216, 173, 80, 0.16), 0 10px 22px rgba(0, 0, 0, 0.26);
}

.territory-city-node .territory-city-node-ring {
    position: absolute;
    inset: -3px;
    border: 1px solid transparent;
    border-radius: 11px;
    pointer-events: none;
}

.territory-city-node.stage-done .territory-city-node-ring {
    border-color: rgba(145, 200, 120, 0.22);
}

.territory-city-panel-stack {
    display: grid;
    gap: 10px;
    min-width: 0;
    align-content: start;
}

.territory-city-panel-stack > * {
    min-width: 0;
}

.territory-city-panel-stack .territory-city-dock-body {
    display: grid;
    gap: 10px;
}

.territory-city-panel {
    min-width: 0;
}

.territory-city-tab-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.territory-city-gather-panel {
    grid-template-columns: 1fr;
}

.territory-city-buildings,
.territory-city-starlight-grid,
.territory-city-skill-grid.compact,
.territory-city-job-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.territory-city-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.territory-city-column {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.territory-city-population-card {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1180px) {
    .territory-city-scene {
        grid-template-columns: 1fr;
    }

    .territory-city-panel-stack {
        grid-template-columns: 1fr;
    }

    .territory-city-grid-map {
        min-height: 430px;
    }
}

@media (max-width: 760px) {
    #territory-view .territory-app {
        padding: 8px;
        gap: 9px;
    }

    #territory-view .territory-city-selected {
        gap: 7px;
    }

    #territory-view .territory-city-selected .territory-topbar {
        padding: 9px;
    }

    #territory-view .territory-city-selected .territory-topbar h2 {
        font-size: 30px;
        line-height: 1;
    }

    #territory-view .territory-city-selected .territory-topbar-meta {
        gap: 5px;
        margin-top: 4px;
    }

    #territory-view .territory-city-selected .territory-topbar-meta span {
        min-height: 24px;
        padding: 3px 7px;
        font-size: 11px;
    }

    #territory-view .territory-city-selected .territory-header-resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    #territory-view .territory-city-selected .territory-header-resource {
        min-height: 36px;
        padding: 5px 6px;
    }

    #territory-view .territory-city-selected .territory-header-resource b,
    #territory-view .territory-city-selected .territory-header-resource em {
        font-size: 10px;
    }

    #territory-view .territory-map-layout {
        gap: 8px;
    }

    #territory-view .territory-sandtable {
        min-height: 170px;
        aspect-ratio: 1.28 / 1;
    }

    #territory-view .territory-city-selected .territory-map-shell {
        padding: 4px;
    }

    #territory-view .territory-city-selected .territory-sandtable {
        min-height: 128px;
        aspect-ratio: 1.9 / 1;
    }

    #territory-view .territory-city-selected .territory-map-roads,
    #territory-view .territory-city-selected .territory-map-center-ring,
    #territory-view .territory-city-selected .territory-building-node small {
        display: none;
    }

    #territory-view .territory-city-selected .territory-building-node {
        width: 48px;
        min-height: 44px;
    }

    #territory-view .territory-city-selected .territory-building-core {
        width: 30px;
        height: 28px;
    }

    #territory-view .territory-city-selected .territory-building-core i {
        font-size: 12px;
    }

    #territory-view .territory-city-selected .territory-building-label {
        padding: 1px 4px;
        font-size: 9px;
    }

    .territory-city-scene {
        gap: 8px;
    }

    .territory-city-map-shell {
        padding: 8px;
        gap: 8px;
    }

    .territory-city-map-head {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .territory-city-map-head h3 {
        font-size: 16px;
    }

    .territory-city-map-head p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 11px;
    }

    .territory-city-map-tools {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .territory-city-map-tools span,
    .territory-city-map-tools button {
        min-height: 30px;
        padding: 4px 4px;
        font-size: 10px;
    }

    .territory-city-map-tools em {
        display: none;
    }

    .territory-city-grid-map {
        grid-template-columns: repeat(7, minmax(36px, 1fr));
        grid-template-rows: repeat(7, 46px);
        gap: 4px;
        min-height: 352px;
        padding: 9px;
        background-size: 34px 34px, 34px 34px, auto, auto;
    }

    .territory-city-node {
        grid-template-rows: 27px auto;
        gap: 2px;
        min-height: 0;
        padding: 4px 3px;
        border-radius: 7px;
    }

    .territory-city-node i {
        width: 27px;
        height: 24px;
        border-radius: 6px;
        font-size: 12px;
    }

    .territory-city-node strong {
        font-size: 9px;
        line-height: 1.05;
    }

    .territory-city-node small {
        display: none;
    }

    .territory-city-node.large {
        grid-template-rows: 34px auto;
        padding: 5px 3px;
    }

    .territory-city-node.large i {
        width: 35px;
        height: 30px;
        font-size: 16px;
    }

    .territory-city-panel-stack {
        gap: 8px;
    }

    .territory-city-focus-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        padding: 8px;
    }

    .territory-city-focus-head h4 {
        font-size: 14px;
    }

    .territory-city-focus-head p,
    .territory-city-focus-body,
    .territory-city-focus-actions,
    .territory-city-last {
        display: none;
    }

    .territory-city-resource-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .territory-city-resource-card {
        min-height: 34px;
        padding: 4px 3px 6px;
        border-radius: 6px;
    }

    .territory-city-resource-card span {
        font-size: 9px;
    }

    .territory-city-resource-card em {
        display: none;
    }

    .territory-city-resource-card strong {
        font-size: 9px;
        line-height: 1.05;
    }

    .territory-city-tabs {
        gap: 5px;
    }

    .territory-city-tabs button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 38px;
        padding: 4px 2px;
        border-radius: 7px;
        font-size: 10px;
        line-height: 1.05;
    }

    .territory-city-tabs button i {
        font-size: 14px;
    }

    .territory-city-buildings,
    .territory-city-starlight-grid,
    .territory-city-skill-grid.compact,
    .territory-city-job-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-city-buildings .territory-building-card,
    .territory-city-starlight-grid .territory-building-card,
    .territory-city-skill.compact,
    .territory-city-job {
        padding: 7px;
        gap: 6px;
    }

    .territory-city-buildings .territory-building-card p,
    .territory-city-buildings .territory-building-card span,
    .territory-city-starlight-grid .territory-building-card p,
    .territory-city-starlight-grid .territory-building-card span,
    .territory-city-skill.compact p,
    .territory-city-job-desc {
        display: none;
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        grid-template-columns: repeat(7, minmax(32px, 1fr));
        grid-template-rows: repeat(7, 42px);
        min-height: 322px;
        gap: 3px;
        padding: 7px;
    }

    .territory-city-node strong {
        font-size: 8px;
    }
}

@media (max-width: 760px) {
    #territory-view .territory-map-shell.territory-sandtable-mini {
        padding: 4px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini {
        min-height: 118px !important;
        height: 118px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-map-roads,
    #territory-view .territory-sandtable.territory-sandtable-mini .territory-map-center-ring,
    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node small {
        display: none !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node {
        width: 48px !important;
        min-height: 44px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-core {
        width: 30px !important;
        height: 28px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-core i {
        font-size: 12px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-label {
        padding: 1px 4px !important;
        font-size: 9px !important;
    }
}

/* City isometric pass: 45-degree overlook, CSS buildings instead of icon cards. */
.territory-city-grid-map {
    --iso-cell: 70px;
    --iso-x-step: 42px;
    --iso-y-step: 25px;
    display: block;
    min-height: 520px;
    padding: 0;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(221, 175, 83, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(9, 15, 13, 0.96), rgba(11, 16, 14, 0.99));
}

.territory-city-grid-map::before {
    inset: 34px;
    border-radius: 18px;
    transform: skewY(-8deg);
}

.territory-city-grid-map::after {
    left: 50%;
    top: 52%;
    width: 520px;
    height: 260px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-45deg) skewX(18deg);
}

.territory-city-grid-roads {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 460px;
    height: 300px;
    z-index: 2;
    background:
        linear-gradient(90deg, transparent 45%, rgba(209, 169, 87, 0.2) 46%, rgba(209, 169, 87, 0.2) 54%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(209, 169, 87, 0.16) 46%, rgba(209, 169, 87, 0.16) 54%, transparent 55%);
    transform: translate(-50%, -50%) rotate(-45deg) skewX(18deg);
}

.territory-city-plot,
.territory-city-node {
    position: absolute;
    left: calc(50% + (var(--city-col) - 4) * var(--iso-x-step) - (var(--city-row) - 4) * var(--iso-x-step));
    top: calc(49% + (var(--city-col) - 4) * var(--iso-y-step) + (var(--city-row) - 4) * var(--iso-y-step));
    grid-column: auto;
    grid-row: auto;
}

.territory-city-plot {
    z-index: calc(20 + var(--city-row) + var(--city-col));
    width: var(--iso-cell);
    height: var(--iso-cell);
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(213, 181, 103, 0.12);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(89, 113, 70, 0.18), rgba(32, 55, 45, 0.32)),
        rgba(34, 49, 39, 0.58);
    transform: translate(-50%, -50%) rotate(45deg) skew(-10deg, -10deg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.territory-city-plot.road {
    border-color: rgba(209, 169, 87, 0.2);
    background: linear-gradient(135deg, rgba(111, 91, 52, 0.32), rgba(54, 49, 35, 0.4));
}

.territory-city-plot.edge {
    opacity: 0.78;
}

.territory-city-node {
    z-index: calc(90 + var(--city-row) * 4 + var(--city-col));
    display: block;
    width: var(--iso-cell);
    height: var(--iso-cell);
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff1c4;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: none;
}

.territory-city-node::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 68%;
    width: 82px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.32);
    filter: blur(3px);
    transform: translate(-50%, -50%);
}

.territory-city-node .territory-city-node-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: calc(var(--iso-cell) + 12px);
    height: calc(var(--iso-cell) + 12px);
    border: 1px solid rgba(255, 224, 137, 0);
    border-radius: 10px;
    transform: translate(-50%, -50%) rotate(45deg) skew(-10deg, -10deg);
}

.territory-city-node.active .territory-city-node-ring {
    border-color: rgba(255, 224, 137, 0.72);
    box-shadow: 0 0 18px rgba(223, 177, 76, 0.28);
}

.territory-city-node.stage-done .territory-city-node-ring {
    border-color: rgba(145, 200, 120, 0.28);
}

.territory-city-iso-tile {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 1;
    width: var(--iso-cell);
    height: var(--iso-cell);
    border: 1px solid rgba(220, 189, 111, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(80, 104, 66, 0.45), rgba(28, 48, 39, 0.88)),
        rgba(29, 49, 39, 0.82);
    transform: translate(-50%, -50%) rotate(45deg) skew(-10deg, -10deg);
    box-shadow: inset 0 0 0 1px rgba(255, 243, 199, 0.04), 0 6px 14px rgba(0, 0, 0, 0.22);
}

.territory-city-node.territory-tone-gold .territory-city-iso-tile { background: linear-gradient(135deg, rgba(118, 94, 54, 0.58), rgba(49, 44, 34, 0.88)); }
.territory-city-node.territory-tone-stone .territory-city-iso-tile { background: linear-gradient(135deg, rgba(82, 92, 91, 0.58), rgba(37, 46, 45, 0.9)); }
.territory-city-node.territory-tone-red .territory-city-iso-tile { background: linear-gradient(135deg, rgba(111, 67, 55, 0.56), rgba(48, 37, 35, 0.9)); }
.territory-city-node.territory-tone-violet .territory-city-iso-tile { background: linear-gradient(135deg, rgba(84, 74, 120, 0.58), rgba(39, 35, 57, 0.9)); }
.territory-city-node.territory-tone-teal .territory-city-iso-tile { background: linear-gradient(135deg, rgba(62, 113, 104, 0.58), rgba(31, 56, 53, 0.9)); }

.territory-city-building-model {
    --roof: #d4a75a;
    --wall: #8b6535;
    --front: #684827;
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 3;
    width: 46px;
    height: 48px;
    transform: translate(-50%, -58%);
}

.territory-city-building-model .roof,
.territory-city-building-model .wall,
.territory-city-building-model .front,
.territory-city-building-model .mark {
    position: absolute;
    display: block;
}

.territory-city-building-model .roof {
    left: 4px;
    top: 0;
    width: 38px;
    height: 20px;
    border: 1px solid rgba(255, 236, 178, 0.22);
    border-radius: 3px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--roof) 86%, white), var(--roof));
    transform: rotate(45deg) skew(-14deg, -14deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

.territory-city-building-model .wall {
    left: 9px;
    top: 15px;
    width: 28px;
    height: 24px;
    border-radius: 2px 2px 4px 4px;
    background: linear-gradient(90deg, var(--wall), color-mix(in srgb, var(--wall) 76%, black));
    transform: skewY(-18deg);
}

.territory-city-building-model .front {
    left: 19px;
    top: 17px;
    width: 20px;
    height: 23px;
    border-radius: 2px 2px 4px 4px;
    background: linear-gradient(90deg, var(--front), color-mix(in srgb, var(--front) 72%, black));
    transform: skewY(18deg);
}

.territory-city-building-model .mark {
    left: 19px;
    top: 25px;
    width: 8px;
    height: 12px;
    border-radius: 2px 2px 0 0;
    background: rgba(255, 239, 186, 0.62);
    box-shadow: 11px 0 0 rgba(255, 239, 186, 0.32);
}

.city-building-cityHall {
    --roof: #e5bd62;
    --wall: #9f773a;
    --front: #795227;
    width: 58px;
    height: 64px;
}

.city-building-cityHall .roof {
    left: 8px;
    width: 44px;
    height: 24px;
}

.city-building-cityHall .wall {
    left: 10px;
    top: 18px;
    width: 34px;
    height: 34px;
}

.city-building-cityHall .front {
    left: 24px;
    top: 21px;
    width: 24px;
    height: 32px;
}

.city-building-cityHall .mark {
    left: 19px;
    top: 32px;
    width: 6px;
    height: 16px;
    box-shadow: 10px 0 0 rgba(255, 239, 186, 0.62), 20px 0 0 rgba(255, 239, 186, 0.62);
}

.city-building-housing {
    --roof: #c8a15c;
    --wall: #7a6241;
    --front: #57452e;
}

.city-building-housing .roof {
    border-radius: 50% 50% 4px 4px;
    transform: rotate(45deg) skew(-20deg, -8deg);
}

.city-building-cityWarehouse {
    --roof: #b5a06c;
    --wall: #737166;
    --front: #50514d;
}

.city-building-apothecaryHall {
    --roof: #65a69a;
    --wall: #4b796f;
    --front: #31554f;
}

.city-building-lumberyard {
    --roof: #6f9856;
    --wall: #526f3b;
    --front: #334b2a;
}

.city-building-lumberyard .roof,
.city-building-farmstead .roof {
    border-radius: 50% 50% 8px 8px;
}

.city-building-lumberyard .mark,
.city-building-farmstead .mark {
    left: 13px;
    top: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 45% 45%;
    background: #9fc36f;
    box-shadow: none;
}

.city-building-mine {
    --roof: #99615a;
    --wall: #71423d;
    --front: #4d302e;
}

.city-building-mine .roof {
    border-radius: 4px 4px 14px 4px;
    transform: rotate(45deg) skew(-8deg, -18deg);
}

.city-building-farmstead {
    --roof: #b8a356;
    --wall: #6b7d3f;
    --front: #495832;
}

.city-building-forge {
    --roof: #b05d49;
    --wall: #79423a;
    --front: #56322f;
}

.city-building-forge .mark {
    background: #ffcf75;
    box-shadow: 0 -7px 0 rgba(255, 118, 62, 0.58);
}

.city-building-observatory {
    --roof: #8b82c1;
    --wall: #60598f;
    --front: #403b66;
}

.city-building-observatory .roof {
    border-radius: 50%;
}

.city-building-wonders {
    --roof: #9a86bf;
    --wall: #6e5a8d;
    --front: #4b3b68;
}

.territory-city-node.locked .territory-city-building-model {
    opacity: 0.46;
    filter: grayscale(0.48);
}

.territory-city-node strong {
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    z-index: 5;
    width: max-content;
    max-width: 82px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff1c4;
    font-size: 11px;
    line-height: 1.2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
    transform: translateX(-50%);
}

.territory-city-node small {
    display: none;
}

.territory-city-node.large strong {
    font-size: 12px;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-cell: 50px;
        --iso-x-step: 30px;
        --iso-y-step: 18px;
        min-height: 316px;
    }

    .territory-city-grid-roads {
        width: 330px;
        height: 216px;
    }

    .territory-city-building-model {
        width: 36px;
        height: 40px;
        transform: translate(-50%, -58%) scale(0.78);
        transform-origin: center bottom;
    }

    .city-building-cityHall {
        transform: translate(-50%, -58%) scale(0.82);
    }

    .territory-city-node strong {
        max-width: 62px;
        padding: 1px 5px;
        font-size: 9px;
    }

    .territory-city-node.large strong {
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        --iso-cell: 46px;
        --iso-x-step: 27px;
        --iso-y-step: 16px;
        min-height: 292px;
    }
}

@media (max-width: 760px) {
    #territory-view .territory-city-selected .territory-topbar {
        grid-template-columns: 1fr;
        padding: 8px !important;
    }

    #territory-view .territory-city-selected .territory-topbar h2 {
        font-size: 24px !important;
    }

    #territory-view .territory-city-selected .territory-header-resources {
        display: none !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 52px !important;
        height: 52px !important;
        background:
            linear-gradient(90deg, rgba(255, 225, 138, 0.08), rgba(97, 118, 82, 0.08)),
            rgba(16, 21, 18, 0.92) !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini::before {
        content: '领地沙盘 / 主城已选中';
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        padding: 6px 10px;
        border: 1px solid rgba(255, 225, 138, 0.24);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.24);
        color: #fff1c4;
        font-size: 12px;
        transform: none;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node,
    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-shadow {
        display: none !important;
    }

    .territory-city-map-shell {
        padding: 7px;
    }

    .territory-city-map-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .territory-city-map-head p {
        -webkit-line-clamp: 1;
    }

    .territory-city-map-tools {
        grid-template-columns: 1fr;
        width: 92px;
    }

    .territory-city-map-tools span:first-child {
        display: none;
    }
}

/* Territory city isometric rebuild v2: map-first 45-degree city scene. */
.territory-city-scene {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
    align-items: start;
    gap: 12px;
}

.territory-city-map-shell {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid rgba(207, 170, 92, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(27, 31, 27, 0.9), rgba(12, 16, 14, 0.96)),
        rgba(16, 19, 17, 0.94);
}

.territory-city-map-head {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 10px;
}

.territory-city-map-head h3 {
    color: #fff0bc;
    letter-spacing: 0;
}

.territory-city-map-head p {
    max-width: 46em;
}

.territory-city-map-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.territory-city-grid-map {
    --iso-cell: 86px;
    --iso-x-step: 52px;
    --iso-y-step: 30px;
    position: relative;
    isolation: isolate;
    display: block !important;
    height: clamp(540px, 54vw, 660px);
    min-height: 540px !important;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid rgba(220, 185, 106, 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 42%, rgba(226, 177, 84, 0.2), transparent 30%),
        radial-gradient(circle at 25% 31%, rgba(76, 124, 73, 0.2), transparent 24%),
        radial-gradient(circle at 76% 30%, rgba(93, 111, 145, 0.18), transparent 25%),
        linear-gradient(180deg, #101714 0%, #08100e 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 240, 191, 0.04);
}

.territory-city-grid-map::before,
.territory-city-grid-map::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 53%;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58);
}

.territory-city-grid-map::before {
    z-index: 0;
    width: 650px;
    height: 650px;
    border: 5px solid rgba(91, 72, 45, 0.95);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(255, 238, 174, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 238, 174, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, rgba(50, 88, 58, 0.86), rgba(25, 56, 43, 0.94));
    background-size: 86px 86px, 86px 86px, auto;
    box-shadow:
        0 24px 44px rgba(0, 0, 0, 0.34),
        inset 0 0 0 10px rgba(10, 18, 14, 0.36),
        inset 0 0 42px rgba(0, 0, 0, 0.34);
}

.territory-city-grid-map::after {
    z-index: 1;
    width: 575px;
    height: 575px;
    border: 1px solid rgba(255, 230, 155, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(198, 151, 76, 0.38) 46%, rgba(198, 151, 76, 0.38) 54%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(198, 151, 76, 0.3) 46%, rgba(198, 151, 76, 0.3) 54%, transparent 55%);
    box-shadow: inset 0 0 0 7px rgba(255, 229, 150, 0.035);
}

.territory-city-grid-roads {
    position: absolute;
    left: 50%;
    top: 53%;
    z-index: 2;
    width: 515px;
    height: 515px;
    pointer-events: none;
    background:
        linear-gradient(45deg, transparent 48%, rgba(242, 194, 103, 0.28) 48.5%, rgba(242, 194, 103, 0.28) 51.5%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(242, 194, 103, 0.2) 48.5%, rgba(242, 194, 103, 0.2) 51.5%, transparent 52%);
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58);
}

.territory-city-grid-roads::before,
.territory-city-grid-roads::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.territory-city-grid-roads::before {
    inset: 18px;
    border: 12px solid rgba(76, 58, 39, 0.72);
    border-radius: 14px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 226, 150, 0.09),
        0 0 0 1px rgba(0, 0, 0, 0.24);
}

.territory-city-grid-roads::after {
    left: 50%;
    bottom: 5px;
    width: 62px;
    height: 34px;
    border-radius: 6px 6px 12px 12px;
    background:
        linear-gradient(90deg, rgba(98, 70, 43, 0.95), rgba(151, 112, 61, 0.86), rgba(77, 55, 38, 0.95));
    box-shadow:
        -158px -158px 0 -6px rgba(82, 60, 41, 0.72),
        158px -158px 0 -6px rgba(82, 60, 41, 0.72),
        -158px 158px 0 -6px rgba(82, 60, 41, 0.72),
        158px 158px 0 -6px rgba(82, 60, 41, 0.72);
    transform: translateX(-50%);
}

.territory-city-plot,
.territory-city-node {
    position: absolute !important;
    left: calc(50% + (var(--city-col) - 4) * var(--iso-x-step) - (var(--city-row) - 4) * var(--iso-x-step)) !important;
    top: calc(53% + (var(--city-col) - 4) * var(--iso-y-step) + (var(--city-row) - 4) * var(--iso-y-step)) !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.territory-city-plot {
    z-index: calc(var(--city-depth) + 20);
    width: var(--iso-cell);
    height: var(--iso-cell);
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(231, 205, 132, 0.13);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(91, 122, 70, 0.36), rgba(32, 69, 50, 0.74)),
        #22382d;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.18),
        0 7px 0 rgba(12, 18, 15, 0.26);
    opacity: 0.72;
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58);
}

.territory-city-plot.road {
    border-color: rgba(224, 177, 91, 0.24);
    background:
        linear-gradient(135deg, rgba(126, 96, 53, 0.62), rgba(66, 55, 37, 0.74)),
        #463820;
}

.territory-city-plot.edge {
    opacity: 0.55;
}

.territory-city-node {
    z-index: calc(var(--city-depth) + 120);
    display: block !important;
    width: var(--iso-cell) !important;
    height: var(--iso-cell) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    appearance: none;
    background: transparent !important;
    color: #fff1c4;
    cursor: pointer;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.28));
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
}

.territory-city-node:hover .territory-city-building-model {
    transform: translate(-50%, -84%) scale(1.04);
}

.territory-city-node:active .territory-city-building-model {
    transform: translate(-50%, -80%) scale(0.99);
}

.territory-city-node-ring {
    position: absolute !important;
    left: 50% !important;
    top: 62% !important;
    z-index: 5 !important;
    width: calc(var(--iso-cell) + 14px) !important;
    height: calc(var(--iso-cell) + 14px) !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58) !important;
}

.territory-city-node.active .territory-city-node-ring {
    border-color: rgba(255, 226, 137, 0.86) !important;
    box-shadow: 0 0 22px rgba(226, 177, 72, 0.38) !important;
}

.territory-city-node.stage-done .territory-city-node-ring {
    border-color: rgba(153, 211, 127, 0.34) !important;
}

.territory-city-iso-shadow {
    position: absolute;
    left: 50%;
    top: 81%;
    z-index: 3;
    width: 92px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.34);
    filter: blur(5px);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.territory-city-iso-tile {
    position: absolute;
    left: 50%;
    top: 62%;
    z-index: 4;
    width: var(--iso-cell);
    height: var(--iso-cell);
    border: 1px solid rgba(232, 202, 128, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(92, 126, 73, 0.52), rgba(32, 70, 51, 0.92)),
        #233a2e;
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 201, 0.05),
        0 8px 0 rgba(16, 23, 18, 0.42),
        0 11px 18px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58);
}

.territory-city-iso-tile .tile-grain {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 236, 169, 0.06);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(255, 236, 169, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(255, 236, 169, 0.035) 1px, transparent 1px);
    background-size: 18px 18px;
}

.territory-city-node.territory-tone-gold .territory-city-iso-tile {
    background: linear-gradient(135deg, rgba(126, 98, 50, 0.6), rgba(53, 45, 29, 0.92));
}

.territory-city-node.territory-tone-stone .territory-city-iso-tile {
    background: linear-gradient(135deg, rgba(79, 91, 86, 0.62), rgba(34, 45, 41, 0.94));
}

.territory-city-node.territory-tone-red .territory-city-iso-tile {
    background: linear-gradient(135deg, rgba(116, 67, 54, 0.6), rgba(48, 35, 31, 0.94));
}

.territory-city-node.territory-tone-violet .territory-city-iso-tile {
    background: linear-gradient(135deg, rgba(89, 79, 127, 0.62), rgba(40, 37, 60, 0.94));
}

.territory-city-node.territory-tone-teal .territory-city-iso-tile {
    background: linear-gradient(135deg, rgba(58, 111, 100, 0.62), rgba(27, 58, 54, 0.94));
}

.territory-city-building-model {
    --roof-color: #c7974b;
    --roof-dark: #8f6534;
    --wall-left: #936b3e;
    --wall-right: #614429;
    --front-color: #745433;
    position: absolute;
    left: 50%;
    top: 55%;
    z-index: 8;
    display: block;
    width: 62px;
    height: 64px;
    pointer-events: none;
    transition: transform 160ms ease, filter 160ms ease;
    transform: translate(-50%, -82%);
    transform-origin: center bottom;
}

.territory-city-building-model > span,
.territory-city-building-model > span::before,
.territory-city-building-model > span::after {
    position: absolute;
    display: block;
    content: '';
}

.territory-city-building-model .building-base {
    left: 7px;
    top: 47px;
    z-index: 0;
    width: 48px;
    height: 24px;
    border-radius: 4px;
    background: rgba(38, 29, 20, 0.64);
    transform: rotate(45deg) scaleY(0.58);
}

.territory-city-building-model .roof {
    left: 6px;
    top: 4px;
    z-index: 5;
    width: 50px;
    height: 28px;
    border: 1px solid rgba(255, 236, 179, 0.22);
    border-radius: 4px 5px 4px 5px;
    background:
        linear-gradient(135deg, rgba(255, 233, 160, 0.22), transparent 34%),
        linear-gradient(135deg, var(--roof-color), var(--roof-dark));
    clip-path: polygon(50% 0, 100% 42%, 70% 100%, 0 62%);
    box-shadow: 0 4px 0 rgba(69, 45, 25, 0.42);
}

.territory-city-building-model .roof-cap {
    left: 21px;
    top: 0;
    z-index: 6;
    width: 22px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(135deg, #f0c971, var(--roof-color));
    clip-path: polygon(50% 0, 100% 48%, 65% 100%, 0 62%);
    opacity: 0.9;
}

.territory-city-building-model .wall {
    top: 26px;
    z-index: 3;
    height: 29px;
    border: 1px solid rgba(255, 230, 162, 0.08);
}

.territory-city-building-model .wall-left {
    left: 10px;
    width: 24px;
    border-radius: 2px 0 0 4px;
    background: linear-gradient(90deg, var(--wall-left), #5c432c);
    transform: skewY(-18deg);
}

.territory-city-building-model .wall-right {
    left: 32px;
    width: 22px;
    border-radius: 0 2px 4px 0;
    background: linear-gradient(90deg, var(--front-color), var(--wall-right));
    transform: skewY(18deg);
}

.territory-city-building-model .front {
    left: 22px;
    top: 29px;
    z-index: 4;
    width: 23px;
    height: 28px;
    border-radius: 2px 2px 4px 4px;
    background: linear-gradient(90deg, var(--front-color), var(--wall-right));
}

.territory-city-building-model .door {
    left: 28px;
    top: 41px;
    z-index: 7;
    width: 9px;
    height: 16px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #ffe0a0, #7a5431 34%, #3c2a1d);
}

.territory-city-building-model .window {
    z-index: 7;
    width: 7px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 228, 154, 0.76);
    box-shadow: 0 0 8px rgba(255, 204, 103, 0.28);
}

.territory-city-building-model .window-a {
    left: 15px;
    top: 36px;
    transform: skewY(-18deg);
}

.territory-city-building-model .window-b {
    left: 43px;
    top: 37px;
    transform: skewY(18deg);
}

.territory-city-building-model .ornament,
.territory-city-building-model .chimney {
    z-index: 8;
    opacity: 0;
}

.city-building-cityHall {
    --roof-color: #d9ac55;
    --roof-dark: #9b6c32;
    --wall-left: #a57a45;
    --wall-right: #6f4b2c;
    --front-color: #866037;
    width: 86px;
    height: 86px;
    transform: translate(-50%, -87%);
}

.city-building-cityHall .building-base {
    left: 9px;
    top: 62px;
    width: 68px;
    height: 30px;
}

.city-building-cityHall .roof {
    left: 9px;
    top: 8px;
    width: 68px;
    height: 34px;
}

.city-building-cityHall .roof-cap {
    left: 31px;
    top: 0;
    width: 28px;
    height: 16px;
}

.city-building-cityHall .wall {
    top: 38px;
    height: 38px;
}

.city-building-cityHall .wall-left {
    left: 15px;
    width: 32px;
}

.city-building-cityHall .wall-right {
    left: 45px;
    width: 28px;
}

.city-building-cityHall .front {
    left: 31px;
    top: 42px;
    width: 30px;
    height: 35px;
}

.city-building-cityHall .door {
    left: 41px;
    top: 56px;
    width: 12px;
    height: 21px;
}

.city-building-cityHall .window-a {
    left: 22px;
    top: 51px;
}

.city-building-cityHall .window-b {
    left: 64px;
    top: 52px;
}

.city-building-cityHall .ornament {
    left: 39px;
    top: 14px;
    width: 9px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 238, 166, 0.7);
    opacity: 1;
    box-shadow:
        -16px 25px 0 -2px rgba(255, 238, 166, 0.5),
        16px 25px 0 -2px rgba(255, 238, 166, 0.5);
}

.city-building-housing {
    --roof-color: #d1b16a;
    --roof-dark: #917345;
    --wall-left: #8f7652;
    --wall-right: #5f4b35;
    --front-color: #705a3f;
}

.city-building-housing .roof {
    left: 9px;
    top: 8px;
    width: 46px;
    height: 38px;
    border-radius: 20px 20px 7px 7px;
    clip-path: polygon(50% 0, 100% 72%, 76% 100%, 0 77%);
}

.city-building-housing .roof-cap,
.city-building-housing .window-b,
.city-building-housing .chimney {
    display: none;
}

.city-building-housing .front {
    top: 38px;
    height: 18px;
}

.city-building-cityWarehouse {
    --roof-color: #b9aa80;
    --roof-dark: #746f5a;
    --wall-left: #827d6b;
    --wall-right: #55564e;
    --front-color: #69695f;
    width: 78px;
}

.city-building-cityWarehouse .roof {
    left: 5px;
    width: 66px;
    height: 26px;
}

.city-building-cityWarehouse .wall-left {
    left: 9px;
    width: 32px;
}

.city-building-cityWarehouse .wall-right {
    left: 40px;
    width: 30px;
}

.city-building-cityWarehouse .front {
    left: 29px;
    width: 30px;
}

.city-building-apothecaryHall {
    --roof-color: #62b6a9;
    --roof-dark: #35736a;
    --wall-left: #4f887d;
    --wall-right: #305c57;
    --front-color: #3b6e67;
}

.city-building-apothecaryHall .ornament {
    left: 27px;
    top: 18px;
    width: 10px;
    height: 22px;
    border-radius: 5px 5px 2px 2px;
    background: rgba(219, 255, 227, 0.78);
    opacity: 1;
    box-shadow:
        0 -7px 0 -2px rgba(219, 255, 227, 0.62),
        0 11px 8px rgba(112, 225, 190, 0.24);
}

.city-building-lumberyard {
    --roof-color: #75a35c;
    --roof-dark: #406235;
    --wall-left: #627a45;
    --wall-right: #394d2e;
    --front-color: #4d6339;
}

.city-building-lumberyard .roof-cap,
.city-building-lumberyard .window-a,
.city-building-lumberyard .window-b {
    display: none;
}

.city-building-lumberyard .ornament {
    left: 6px;
    top: 31px;
    width: 43px;
    height: 8px;
    border-radius: 999px;
    background: #9a6f40;
    opacity: 1;
    box-shadow:
        8px 8px 0 #6d4d31,
        18px 16px 0 #9a6f40,
        27px 24px 0 #6d4d31;
    transform: rotate(-8deg);
}

.city-building-mine {
    --roof-color: #9b6660;
    --roof-dark: #5b3835;
    --wall-left: #744844;
    --wall-right: #442c2a;
    --front-color: #5c3835;
}

.city-building-mine .roof {
    left: 3px;
    top: 7px;
    width: 58px;
    height: 36px;
    border-radius: 12px 12px 18px 8px;
    clip-path: polygon(50% 0, 100% 70%, 76% 100%, 5% 82%);
}

.city-building-mine .front {
    left: 20px;
    top: 34px;
    width: 26px;
    height: 24px;
    border-radius: 14px 14px 5px 5px;
    background: radial-gradient(circle at 50% 95%, #111 0 47%, #513430 48%);
}

.city-building-mine .door,
.city-building-mine .window,
.city-building-mine .roof-cap {
    display: none;
}

.city-building-farmstead {
    --roof-color: #bfa657;
    --roof-dark: #6e7338;
    --wall-left: #708448;
    --wall-right: #465a34;
    --front-color: #58703d;
}

.city-building-farmstead .building-base {
    background:
        repeating-linear-gradient(90deg, rgba(232, 200, 98, 0.28) 0 5px, transparent 5px 11px),
        rgba(72, 92, 44, 0.68);
}

.city-building-farmstead .ornament {
    left: 8px;
    top: 43px;
    width: 50px;
    height: 16px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(246, 213, 115, 0.78) 0 4px, rgba(96, 119, 54, 0.82) 4px 9px);
    opacity: 1;
    transform: skewY(-16deg);
}

.city-building-forge {
    --roof-color: #bc604b;
    --roof-dark: #723731;
    --wall-left: #85483e;
    --wall-right: #56302d;
    --front-color: #6c3a35;
}

.city-building-forge .chimney {
    left: 46px;
    top: 5px;
    width: 10px;
    height: 28px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #725045, #362923);
    opacity: 1;
}

.city-building-forge .chimney::before {
    left: -5px;
    top: -12px;
    width: 20px;
    height: 18px;
    border-radius: 50% 50% 45% 45%;
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 214, 110, 0.85), rgba(255, 107, 62, 0.28) 45%, transparent 70%);
}

.city-building-forge .ornament {
    left: 24px;
    top: 40px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd377, #c16b38 52%, #38211d 54%);
    opacity: 1;
}

.city-building-observatory {
    --roof-color: #9a90d1;
    --roof-dark: #60578f;
    --wall-left: #716aa2;
    --wall-right: #453f68;
    --front-color: #5b5485;
    width: 70px;
    height: 82px;
}

.city-building-observatory .roof {
    left: 19px;
    top: 1px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    clip-path: none;
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.35), transparent 25%),
        linear-gradient(135deg, var(--roof-color), var(--roof-dark));
}

.city-building-observatory .roof-cap {
    left: 29px;
    top: -9px;
    width: 13px;
    height: 28px;
    border-radius: 999px;
    background: rgba(233, 222, 255, 0.72);
}

.city-building-observatory .wall {
    top: 30px;
    height: 38px;
}

.city-building-observatory .wall-left {
    left: 19px;
    width: 20px;
}

.city-building-observatory .wall-right {
    left: 38px;
    width: 18px;
}

.city-building-observatory .front {
    left: 27px;
    top: 35px;
    width: 20px;
    height: 34px;
}

.city-building-observatory .ornament {
    left: 43px;
    top: 7px;
    width: 31px;
    height: 6px;
    border-radius: 999px;
    background: #ddd2ff;
    opacity: 1;
    transform: rotate(-27deg);
    box-shadow: 0 0 10px rgba(190, 176, 255, 0.42);
}

.city-building-wonders {
    --roof-color: #b29ad4;
    --roof-dark: #695285;
    --wall-left: #7d6599;
    --wall-right: #463653;
    --front-color: #5c4770;
}

.city-building-wonders .roof {
    left: 19px;
    top: 0;
    width: 24px;
    height: 48px;
    border-radius: 12px 12px 4px 4px;
    clip-path: polygon(50% 0, 78% 28%, 100% 100%, 0 100%, 22% 28%);
}

.city-building-wonders .wall,
.city-building-wonders .front,
.city-building-wonders .door,
.city-building-wonders .window,
.city-building-wonders .roof-cap {
    display: none;
}

.territory-city-node.locked {
    opacity: 1 !important;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22)) grayscale(0.34);
}

.territory-city-node.locked .territory-city-building-model {
    opacity: 0.48;
}

.territory-city-node.locked .territory-city-iso-tile {
    opacity: 0.5;
}

.territory-city-node.locked:not(.active) .territory-city-node-label {
    opacity: 0.58;
}

.territory-city-node-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    z-index: 12;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: max-content;
    max-width: 100px;
    pointer-events: none;
    transform: translateX(-50%);
}

.territory-city-node-label strong {
    position: static !important;
    width: auto !important;
    max-width: 100px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 226, 139, 0.24);
    border-radius: 999px !important;
    background: rgba(12, 12, 10, 0.74) !important;
    color: #fff1c4 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    transform: none !important;
}

.territory-city-node-label small {
    display: block !important;
    max-width: 118px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
    color: #d8cfb8;
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
}

#territory-view .territory-map-shell.territory-sandtable-mini {
    padding: 8px !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini {
    display: block !important;
    height: clamp(156px, 18vw, 220px) !important;
    min-height: 156px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at 60% 42%, rgba(217, 182, 99, 0.16), transparent 35%),
        linear-gradient(90deg, rgba(255, 225, 138, 0.04), rgba(97, 118, 82, 0.06)) !important;
    color: transparent !important;
    transform: none !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini .territory-map-roads,
#territory-view .territory-sandtable.territory-sandtable-mini .territory-map-center-ring,
#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node,
#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-shadow {
    display: block !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node {
    width: 54px !important;
    min-height: 52px !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-core {
    width: 32px !important;
    height: 30px !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-core i {
    font-size: 12px !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-label {
    padding: 1px 5px !important;
    font-size: 9px !important;
}

#territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node small {
    display: none !important;
}

#territory-view .territory-city-selected .territory-map-layout-context {
    order: 2;
}

#territory-view .territory-city-selected .territory-feature-workspace {
    order: 1;
}

@media (max-width: 1180px) {
    .territory-city-scene {
        grid-template-columns: 1fr;
    }

    .territory-city-grid-map {
        height: clamp(500px, 70vw, 600px);
        min-height: 500px !important;
    }
}

@media (max-width: 760px) {
    #territory-view .territory-city-selected .territory-topbar {
        padding: 8px !important;
    }

    #territory-view .territory-city-selected .territory-header-resources {
        display: none !important;
    }

    #territory-view .territory-map-shell.territory-sandtable-mini {
        padding: 6px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini {
        height: 116px !important;
        min-height: 116px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-node {
        width: 46px !important;
        min-height: 44px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini .territory-building-core {
        width: 28px !important;
        height: 27px !important;
    }

    .territory-city-map-shell {
        padding: 8px !important;
    }

    .territory-city-map-head {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 7px;
    }

    .territory-city-map-head h3 {
        font-size: 16px;
    }

    .territory-city-map-head p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 11px;
    }

    .territory-city-map-tools {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .territory-city-map-tools span,
    .territory-city-map-tools button {
        min-height: 30px;
        padding: 4px;
        font-size: 10px;
    }

    .territory-city-map-tools em {
        display: none;
    }

    .territory-city-grid-map {
        --iso-cell: 50px;
        --iso-x-step: 27px;
        --iso-y-step: 16px;
        height: 316px !important;
        min-height: 316px !important;
    }

    .territory-city-grid-map::before {
        width: 332px;
        height: 332px;
        border-width: 4px;
    }

    .territory-city-grid-map::after {
        width: 288px;
        height: 288px;
    }

    .territory-city-grid-roads {
        width: 266px;
        height: 266px;
    }

    .territory-city-building-model {
        transform: translate(-50%, -82%) scale(0.68);
    }

    .territory-city-node:hover .territory-city-building-model {
        transform: translate(-50%, -84%) scale(0.72);
    }

    .city-building-cityHall {
        transform: translate(-50%, -88%) scale(0.7);
    }

    .territory-city-node-label {
        top: calc(100% - 1px);
        max-width: 70px;
    }

    .territory-city-node-label strong {
        max-width: 70px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }

    .territory-city-node.locked:not(.active) .territory-city-node-label {
        opacity: 0;
    }

    .territory-city-node-label small {
        display: none !important;
    }

    .territory-city-iso-shadow {
        width: 64px;
        height: 20px;
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        --iso-cell: 48px;
        --iso-x-step: 25px;
        --iso-y-step: 15px;
        height: 302px !important;
        min-height: 302px !important;
    }

    .territory-city-grid-map::before {
        width: 306px;
        height: 306px;
    }

    .territory-city-grid-map::after {
        width: 266px;
        height: 266px;
    }

    .territory-city-grid-roads {
        width: 246px;
        height: 246px;
    }
}

/* Aoshitiandi-like city camera: shallow 45-degree stone courtyard. */
.territory-city-grid-map {
    --iso-cell: 92px;
    --iso-x-step: 62px;
    --iso-y-step: 31px;
    height: clamp(500px, 48vw, 620px) !important;
    min-height: 500px !important;
    border-color: rgba(87, 78, 61, 0.62);
    background:
        linear-gradient(30deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        repeating-linear-gradient(30deg, rgba(42, 43, 39, 0.28) 0 2px, transparent 2px 46px),
        repeating-linear-gradient(150deg, rgba(42, 43, 39, 0.22) 0 2px, transparent 2px 46px),
        linear-gradient(145deg, #8a877b 0%, #696b62 48%, #535850 100%);
    background-size: 46px 26px, 46px 26px, 92px 52px, 92px 52px, auto;
}

.territory-city-grid-map::before {
    left: 54%;
    top: 53%;
    z-index: 0;
    width: 760px;
    height: 470px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(30deg, rgba(34, 34, 30, 0.2) 1px, transparent 1px),
        linear-gradient(150deg, rgba(34, 34, 30, 0.18) 1px, transparent 1px),
        repeating-linear-gradient(30deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
        linear-gradient(135deg, rgba(164, 161, 146, 0.96), rgba(111, 114, 105, 0.98));
    background-size: 46px 26px, 46px 26px, 92px 52px, 92px 52px, auto;
    box-shadow:
        inset 0 0 0 3px rgba(61, 55, 43, 0.3),
        inset 0 -38px 80px rgba(55, 59, 54, 0.22),
        0 20px 40px rgba(0, 0, 0, 0.26);
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62);
}

.territory-city-grid-map::after {
    left: 52%;
    top: 58%;
    z-index: 1;
    width: 760px;
    height: 470px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(30deg, transparent 48%, rgba(105, 104, 93, 0.62) 48.5%, rgba(105, 104, 93, 0.62) 52%, transparent 52.5%),
        linear-gradient(150deg, transparent 48%, rgba(113, 111, 100, 0.44) 48.5%, rgba(113, 111, 100, 0.44) 52%, transparent 52.5%),
        radial-gradient(ellipse at 38% 55%, rgba(226, 197, 126, 0.18), transparent 20%);
    box-shadow: none;
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62);
}

.territory-city-grid-roads {
    left: 52%;
    top: 58%;
    z-index: 2;
    width: 740px;
    height: 450px;
    background:
        linear-gradient(30deg, transparent 46%, rgba(189, 185, 160, 0.42) 46.5%, rgba(189, 185, 160, 0.42) 54%, transparent 54.5%),
        linear-gradient(150deg, transparent 46%, rgba(180, 176, 151, 0.32) 46.5%, rgba(180, 176, 151, 0.32) 54%, transparent 54.5%);
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62);
}

.territory-city-grid-roads::before {
    inset: 6px;
    border: 10px solid rgba(72, 64, 49, 0.72);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px rgba(225, 217, 187, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.26);
}

.territory-city-grid-roads::after {
    right: 18px;
    left: auto;
    top: 28px;
    bottom: auto;
    width: 96px;
    height: 54px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, #5e4430, #947044 42%, #4d392c 43% 57%, #947044 58%, #5e4430);
    box-shadow:
        0 38px 0 -12px rgba(74, 58, 43, 0.78),
        -612px 336px 0 -10px rgba(74, 58, 43, 0.72);
    transform: none;
}

.territory-city-plot,
.territory-city-node {
    left: calc(45% + (var(--city-col) - 4) * var(--iso-x-step) - (var(--city-row) - 4) * var(--iso-x-step)) !important;
    top: calc(48% + (var(--city-col) - 4) * var(--iso-y-step) + (var(--city-row) - 4) * var(--iso-y-step)) !important;
}

.territory-city-plot {
    width: var(--iso-cell);
    height: 58px;
    border: 2px solid rgba(91, 88, 76, 0.38);
    border-radius: 0;
    background:
        linear-gradient(30deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(171, 168, 151, 0.72), rgba(111, 114, 105, 0.9));
    background-size: 18px 10px;
    box-shadow:
        inset 0 0 0 1px rgba(46, 44, 37, 0.18),
        0 6px 0 rgba(76, 70, 57, 0.32);
    opacity: 0.88;
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62);
}

.territory-city-plot.road {
    background:
        linear-gradient(30deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(135deg, rgba(190, 185, 160, 0.82), rgba(136, 132, 111, 0.9));
    background-size: 18px 10px;
}

.territory-city-iso-tile {
    top: 66%;
    width: var(--iso-cell);
    height: 62px;
    border: 2px solid rgba(66, 61, 51, 0.46);
    border-radius: 0;
    background:
        linear-gradient(30deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(178, 172, 148, 0.92), rgba(111, 111, 98, 0.98));
    background-size: 18px 10px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 221, 0.1),
        0 8px 0 rgba(70, 62, 47, 0.42),
        0 12px 18px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62);
}

.territory-city-node.territory-tone-gold .territory-city-iso-tile,
.territory-city-node.territory-tone-stone .territory-city-iso-tile,
.territory-city-node.territory-tone-red .territory-city-iso-tile,
.territory-city-node.territory-tone-violet .territory-city-iso-tile,
.territory-city-node.territory-tone-teal .territory-city-iso-tile {
    background:
        linear-gradient(30deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(180, 173, 148, 0.94), rgba(112, 112, 99, 0.98));
    background-size: 18px 10px;
}

.territory-city-building-model {
    top: 60%;
    filter: saturate(0.95) contrast(0.98);
}

.territory-city-node-label {
    top: calc(100% - 4px);
}

.territory-city-node-label strong {
    border-color: rgba(0, 0, 0, 0.28) !important;
    background: rgba(42, 41, 36, 0.78) !important;
    color: #f1ede2 !important;
    font-size: 11px !important;
}

.territory-city-node-label small {
    background: rgba(50, 48, 42, 0.62);
    color: #e9e3d1;
}

.territory-city-node.active .territory-city-node-ring {
    border-color: rgba(255, 220, 95, 0.88) !important;
    box-shadow: 0 0 18px rgba(255, 202, 76, 0.34) !important;
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62) !important;
}

.territory-city-node-ring {
    top: 66% !important;
    height: 64px !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%) skewY(-26deg) scaleY(0.62) !important;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-cell: 68px;
        --iso-x-step: 39px;
        --iso-y-step: 20px;
        height: 330px !important;
        min-height: 330px !important;
    }

    .territory-city-grid-map::before {
        width: 480px;
        height: 310px;
    }

    .territory-city-grid-map::after,
    .territory-city-grid-roads {
        width: 462px;
        height: 292px;
    }

    .territory-city-grid-roads::after {
        right: 12px;
        top: 22px;
        width: 58px;
        height: 34px;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(43% + (var(--city-col) - 4) * var(--iso-x-step) - (var(--city-row) - 4) * var(--iso-x-step)) !important;
        top: calc(45% + (var(--city-col) - 4) * var(--iso-y-step) + (var(--city-row) - 4) * var(--iso-y-step)) !important;
    }

    .territory-city-plot,
    .territory-city-iso-tile {
        height: 46px;
    }

    .territory-city-building-model {
        transform: translate(-50%, -82%) scale(0.62);
    }

    .territory-city-node:hover .territory-city-building-model {
        transform: translate(-50%, -84%) scale(0.66);
    }

    .city-building-cityHall {
        transform: translate(-50%, -88%) scale(0.64);
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        --iso-cell: 62px;
        --iso-x-step: 36px;
        --iso-y-step: 18px;
        height: 308px !important;
        min-height: 308px !important;
    }

    .territory-city-grid-map::before {
        width: 440px;
        height: 284px;
    }

    .territory-city-grid-map::after,
    .territory-city-grid-roads {
        width: 424px;
        height: 266px;
    }
}

/* Aoshitiandi-like city camera v2: true 2:1 isometric stone grid, not skewed strips. */
.territory-city-grid-map {
    --iso-tile-w: 96px;
    --iso-tile-h: 54px;
    --iso-x-step: 54px;
    --iso-y-step: 28px;
    height: clamp(500px, 46vw, 620px) !important;
    min-height: 500px !important;
    border-color: rgba(79, 74, 63, 0.64);
    background:
        radial-gradient(circle at 38% 42%, rgba(234, 207, 142, 0.18), transparent 24%),
        repeating-linear-gradient(26.565deg, rgba(38, 40, 38, 0.24) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(153.435deg, rgba(38, 40, 38, 0.2) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px),
        linear-gradient(145deg, #8f8b7d 0%, #74766c 45%, #5b625b 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 220, 0.08),
        inset 0 -42px 82px rgba(33, 36, 33, 0.3);
}

.territory-city-grid-map::before {
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 118%;
    height: 118%;
    border: 0;
    border-radius: 0;
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 88px),
        linear-gradient(135deg, rgba(184, 178, 156, 0.44), rgba(108, 112, 104, 0.3));
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.territory-city-grid-map::after {
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 118%;
    height: 118%;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(26.565deg, transparent 46%, rgba(199, 193, 165, 0.36) 46.5%, rgba(199, 193, 165, 0.36) 53.5%, transparent 54%),
        linear-gradient(153.435deg, transparent 47%, rgba(193, 188, 161, 0.26) 47.5%, rgba(193, 188, 161, 0.26) 52.5%, transparent 53%),
        radial-gradient(ellipse at 54% 42%, rgba(255, 219, 121, 0.16), transparent 18%);
    box-shadow: none;
    opacity: 0.88;
    transform: translate(-50%, -50%);
}

.territory-city-grid-roads {
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 108%;
    height: 108%;
    background:
        linear-gradient(26.565deg, transparent 48%, rgba(103, 96, 79, 0.42) 48.5%, rgba(103, 96, 79, 0.42) 51.5%, transparent 52%),
        linear-gradient(153.435deg, transparent 48%, rgba(104, 99, 83, 0.32) 48.5%, rgba(104, 99, 83, 0.32) 51.5%, transparent 52%);
    transform: translate(-50%, -50%);
}

.territory-city-grid-roads::before {
    left: 5%;
    top: 7%;
    right: 5%;
    bottom: 6%;
    border: 10px solid rgba(74, 65, 49, 0.72);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px rgba(235, 222, 184, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.18);
}

.territory-city-grid-roads::after {
    right: 8%;
    top: 8%;
    left: auto;
    bottom: auto;
    width: 96px;
    height: 54px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, #4c3727 0 18%, #957147 18% 38%, #59422d 38% 62%, #957147 62% 82%, #4c3727 82%);
    box-shadow:
        0 38px 0 -12px rgba(76, 59, 43, 0.74),
        -76vw 42vw 0 -10px rgba(76, 59, 43, 0.64);
    transform: none;
}

.territory-city-plot,
.territory-city-node {
    left: calc(54% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
    top: calc(43% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
}

.territory-city-plot {
    width: var(--iso-tile-w);
    height: var(--iso-tile-h);
    border: 1px solid rgba(67, 65, 55, 0.42);
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, rgba(174, 169, 148, 0.78), rgba(112, 115, 106, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 220, 0.05),
        0 6px 0 rgba(69, 62, 49, 0.28);
    opacity: 0.9;
    transform: translate(-50%, -50%);
}

.territory-city-plot.road {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, rgba(196, 190, 162, 0.82), rgba(135, 130, 109, 0.96));
}

.territory-city-node {
    width: var(--iso-tile-w) !important;
    height: calc(var(--iso-tile-h) + 50px) !important;
}

.territory-city-node-ring {
    top: 52% !important;
    width: calc(var(--iso-tile-w) + 8px) !important;
    height: calc(var(--iso-tile-h) + 8px) !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: translate(-50%, -50%) !important;
}

.territory-city-node.active .territory-city-node-ring {
    transform: translate(-50%, -50%) !important;
}

.territory-city-iso-shadow {
    top: 67%;
    width: calc(var(--iso-tile-w) * 0.8);
    height: 22px;
    opacity: 0.75;
}

.territory-city-iso-tile {
    top: 52%;
    width: var(--iso-tile-w);
    height: var(--iso-tile-h);
    border: 1px solid rgba(64, 60, 50, 0.5);
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, rgba(185, 178, 151, 0.94), rgba(111, 111, 98, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 218, 0.08),
        0 7px 0 rgba(75, 66, 50, 0.42),
        0 12px 16px rgba(0, 0, 0, 0.16);
    transform: translate(-50%, -50%);
}

.territory-city-node.territory-tone-gold .territory-city-iso-tile,
.territory-city-node.territory-tone-stone .territory-city-iso-tile,
.territory-city-node.territory-tone-red .territory-city-iso-tile,
.territory-city-node.territory-tone-violet .territory-city-iso-tile,
.territory-city-node.territory-tone-teal .territory-city-iso-tile {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, rgba(185, 178, 151, 0.94), rgba(111, 111, 98, 0.98));
}

.territory-city-building-model {
    top: 47%;
    filter: saturate(0.98) contrast(0.98) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.22));
    transform: translate(-50%, -82%);
}

.territory-city-node:hover .territory-city-building-model {
    transform: translate(-50%, -85%) scale(1.04);
}

.territory-city-node.locked .territory-city-building-model {
    opacity: 0.66;
}

.territory-city-node.locked .territory-city-iso-tile {
    opacity: 0.82;
}

.territory-city-node-label {
    top: calc(100% - 28px);
}

.territory-city-node-label strong {
    background: rgba(37, 36, 31, 0.82) !important;
    color: #f0ece0 !important;
    font-size: 11px !important;
}

.territory-city-node-label small {
    display: none !important;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-tile-w: 70px;
        --iso-tile-h: 40px;
        --iso-x-step: 38px;
        --iso-y-step: 20px;
        height: 324px !important;
        min-height: 324px !important;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(58% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(39% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
    }

    .territory-city-node {
        width: var(--iso-tile-w) !important;
        height: calc(var(--iso-tile-h) + 42px) !important;
    }

    .territory-city-building-model {
        transform: translate(-50%, -82%) scale(0.62);
    }

    .territory-city-node:hover .territory-city-building-model {
        transform: translate(-50%, -85%) scale(0.66);
    }

    .city-building-cityHall {
        transform: translate(-50%, -88%) scale(0.66);
    }

    .territory-city-node-label {
        top: calc(100% - 24px);
    }

    .territory-city-node.locked:not(.active) .territory-city-node-label {
        opacity: 0.55;
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        --iso-tile-w: 66px;
        --iso-tile-h: 38px;
        --iso-x-step: 36px;
        --iso-y-step: 19px;
        height: 310px !important;
        min-height: 310px !important;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(59% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(39% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
    }
}

/* Aoshitiandi-like city camera v3: cleaner stone yard, smaller walls, solid buildings. */
.territory-city-grid-map {
    --iso-tile-w: 98px;
    --iso-tile-h: 56px;
    --iso-x-step: 52px;
    --iso-y-step: 27px;
    background:
        repeating-linear-gradient(26.565deg, rgba(43, 44, 40, 0.24) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(153.435deg, rgba(43, 44, 40, 0.2) 0 1px, transparent 1px 48px),
        linear-gradient(145deg, #969184 0%, #7e8075 48%, #636a62 100%);
}

.territory-city-grid-map::before {
    width: 124%;
    height: 124%;
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px),
        linear-gradient(135deg, rgba(190, 184, 160, 0.34), rgba(120, 124, 115, 0.16));
    opacity: 1;
}

.territory-city-grid-map::after {
    width: 124%;
    height: 124%;
    background:
        linear-gradient(26.565deg, transparent 47.4%, rgba(119, 111, 91, 0.28) 47.8%, rgba(119, 111, 91, 0.28) 52.2%, transparent 52.6%),
        linear-gradient(153.435deg, transparent 47.4%, rgba(119, 111, 91, 0.22) 47.8%, rgba(119, 111, 91, 0.22) 52.2%, transparent 52.6%);
    opacity: 0.42;
}

.territory-city-grid-roads {
    width: 112%;
    height: 112%;
    background:
        linear-gradient(26.565deg, transparent 48%, rgba(218, 207, 169, 0.24) 48.6%, rgba(218, 207, 169, 0.24) 51.4%, transparent 52%),
        linear-gradient(153.435deg, transparent 48%, rgba(207, 198, 164, 0.18) 48.6%, rgba(207, 198, 164, 0.18) 51.4%, transparent 52%);
}

.territory-city-grid-roads::before {
    left: 4%;
    top: 5%;
    right: 4%;
    bottom: 5%;
    border-width: 6px 10px 10px 6px;
    border-color: rgba(76, 68, 51, 0.5);
    box-shadow:
        inset 0 0 0 1px rgba(235, 222, 184, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.12);
}

.territory-city-grid-roads::after {
    right: 5%;
    top: 6%;
    width: 58px;
    height: 34px;
    border-radius: 2px 2px 4px 4px;
    background:
        linear-gradient(90deg, #4a3627 0 18%, #8d6a42 18% 38%, #58402c 38% 62%, #8d6a42 62% 82%, #4a3627 82%);
    box-shadow:
        0 22px 0 -12px rgba(76, 59, 43, 0.52),
        -72vw 42vw 0 -18px rgba(76, 59, 43, 0.42);
}

.territory-city-plot,
.territory-city-node {
    left: calc(54% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
    top: calc(42% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
}

.territory-city-plot {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 15px),
        linear-gradient(135deg, rgba(178, 173, 152, 0.72), rgba(124, 128, 118, 0.86));
    opacity: 0.72;
}

.territory-city-plot.edge {
    opacity: 0.42;
}

.territory-city-plot.road {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 15px),
        linear-gradient(135deg, rgba(196, 190, 162, 0.76), rgba(143, 139, 118, 0.9));
}

.territory-city-iso-tile {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 15px),
        linear-gradient(135deg, rgba(196, 189, 160, 0.96), rgba(128, 128, 113, 0.98));
}

.territory-city-node.territory-tone-gold .territory-city-iso-tile,
.territory-city-node.territory-tone-stone .territory-city-iso-tile,
.territory-city-node.territory-tone-red .territory-city-iso-tile,
.territory-city-node.territory-tone-violet .territory-city-iso-tile,
.territory-city-node.territory-tone-teal .territory-city-iso-tile {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(153.435deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 15px),
        linear-gradient(135deg, rgba(196, 189, 160, 0.96), rgba(128, 128, 113, 0.98));
}

.territory-city-building-model {
    opacity: 1;
    filter: saturate(1.04) contrast(1.04) drop-shadow(0 9px 5px rgba(0, 0, 0, 0.24));
}

.territory-city-node.locked .territory-city-building-model {
    opacity: 0.82;
}

.territory-city-node.locked .territory-city-iso-tile {
    opacity: 0.96;
}

.territory-city-node-label {
    top: calc(100% - 18px);
}

.territory-city-node-label strong {
    opacity: 0.9;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-tile-w: 62px;
        --iso-tile-h: 36px;
        --iso-x-step: 32px;
        --iso-y-step: 17px;
        height: 308px !important;
        min-height: 308px !important;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(54% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(43% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
    }

    .territory-city-node {
        width: var(--iso-tile-w) !important;
        height: calc(var(--iso-tile-h) + 38px) !important;
    }

    .territory-city-building-model {
        transform: translate(-50%, -82%) scale(0.58);
    }

    .territory-city-node:hover .territory-city-building-model {
        transform: translate(-50%, -85%) scale(0.62);
    }

    .city-building-cityHall {
        transform: translate(-50%, -88%) scale(0.62);
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        --iso-tile-w: 60px;
        --iso-tile-h: 34px;
        --iso-x-step: 31px;
        --iso-y-step: 16px;
        height: 298px !important;
        min-height: 298px !important;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(54% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(43% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
    }
}

/* City footprint layout: hall 4x4, normal buildings 2x2, tent 1x1. */
.territory-city-grid-map {
    --iso-tile-w: 82px;
    --iso-tile-h: 46px;
    --iso-x-step: 44px;
    --iso-y-step: 23px;
    height: clamp(560px, 50vw, 680px) !important;
    min-height: 560px !important;
}

.territory-city-plot,
.territory-city-node {
    left: calc(52% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
    top: calc(36% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
}

.territory-city-node {
    --footprint-w: calc(var(--iso-tile-w) * 2);
    --footprint-h: calc(var(--iso-tile-h) * 2);
    width: var(--footprint-w) !important;
    height: calc(var(--footprint-h) + 56px) !important;
}

.territory-city-node.city-footprint-4x4 {
    --footprint-w: calc(var(--iso-tile-w) * 4);
    --footprint-h: calc(var(--iso-tile-h) * 4);
}

.territory-city-node.city-footprint-2x2 {
    --footprint-w: calc(var(--iso-tile-w) * 2);
    --footprint-h: calc(var(--iso-tile-h) * 2);
}

.territory-city-node.city-footprint-1x1 {
    --footprint-w: var(--iso-tile-w);
    --footprint-h: var(--iso-tile-h);
}

.territory-city-node-ring,
.territory-city-iso-tile {
    width: var(--footprint-w) !important;
    height: var(--footprint-h) !important;
}

.territory-city-node-ring {
    top: 58% !important;
}

.territory-city-iso-tile {
    top: 58% !important;
}

.territory-city-iso-shadow {
    top: 76%;
    width: calc(var(--footprint-w) * 0.72);
    height: calc(var(--footprint-h) * 0.28);
}

.territory-city-building-model {
    top: 54%;
}

.territory-city-node.city-footprint-4x4 .territory-city-building-model {
    transform: translate(-50%, -86%) scale(1.12);
}

.territory-city-node.city-footprint-4x4:hover .territory-city-building-model {
    transform: translate(-50%, -89%) scale(1.16);
}

.territory-city-node.city-footprint-2x2 .territory-city-building-model {
    transform: translate(-50%, -84%) scale(0.84);
}

.territory-city-node.city-footprint-2x2:hover .territory-city-building-model {
    transform: translate(-50%, -87%) scale(0.88);
}

.territory-city-node.city-footprint-1x1 .territory-city-building-model {
    transform: translate(-50%, -82%) scale(0.52);
}

.territory-city-node.city-footprint-1x1:hover .territory-city-building-model {
    transform: translate(-50%, -86%) scale(0.56);
}

.territory-city-node.city-footprint-1x1 .territory-city-node-label {
    top: calc(100% - 34px);
}

.territory-city-node-label {
    top: calc(100% - 28px);
}

#territory-view .territory-city-selected .territory-map-layout-context {
    display: block;
    margin-top: 8px;
}

#territory-view .territory-city-selected .territory-map-layout-context::before {
    content: '领地沙盘';
    display: inline-flex;
    align-items: center;
    margin: 0 0 6px 2px;
    padding: 3px 8px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 999px;
    background: rgba(18, 21, 20, 0.82);
    color: #fff1c4;
    font-size: 12px;
    font-weight: 800;
}

#territory-view .territory-city-selected .territory-map-layout-context .territory-map-shell {
    opacity: 1;
}

.territory-city-context-sandtable {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    background: rgba(18, 21, 20, 0.78);
}

.territory-city-context-sandtable header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.territory-city-context-sandtable header strong {
    color: #fff1c4;
    font-size: 12px;
}

.territory-city-context-sandtable .territory-map-shell {
    padding: 4px !important;
}

.territory-city-context-sandtable .territory-sandtable.territory-sandtable-mini {
    height: 160px !important;
    min-height: 160px !important;
}

.territory-city-context-sandtable {
    grid-column: 1;
}

.territory-city-panel-stack {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.territory-city-map-shell {
    grid-column: 1;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-tile-w: 48px;
        --iso-tile-h: 28px;
        --iso-x-step: 27px;
        --iso-y-step: 15px;
        height: 348px !important;
        min-height: 348px !important;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(52% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(35% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
    }

    .territory-city-node {
        height: calc(var(--footprint-h) + 40px) !important;
    }

    .territory-city-node.city-footprint-4x4 .territory-city-building-model {
        transform: translate(-50%, -86%) scale(0.72);
    }

    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model {
        transform: translate(-50%, -89%) scale(0.76);
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model {
        transform: translate(-50%, -84%) scale(0.52);
    }

    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model {
        transform: translate(-50%, -87%) scale(0.56);
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model {
        transform: translate(-50%, -82%) scale(0.38);
    }

    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model {
        transform: translate(-50%, -86%) scale(0.42);
    }

    .territory-city-node-label strong {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    #territory-view .territory-sandtable.territory-sandtable-mini {
        height: 150px !important;
        min-height: 150px !important;
    }

    .territory-city-context-sandtable {
        padding: 7px;
    }

    .territory-city-context-sandtable .territory-sandtable.territory-sandtable-mini {
        height: 140px !important;
        min-height: 140px !important;
    }

    .territory-city-map-shell,
    .territory-city-context-sandtable,
    .territory-city-panel-stack {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 390px) {
    .territory-city-grid-map {
        --iso-tile-w: 45px;
        --iso-tile-h: 26px;
        --iso-x-step: 25px;
        --iso-y-step: 14px;
        height: 332px !important;
        min-height: 332px !important;
    }
}

/* City grounding pass: buildings sit on the city grid instead of raised slabs. */
.territory-city-iso-tile {
    border: 1px solid rgba(245, 232, 178, 0.08) !important;
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 247, 204, 0.018) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(153.435deg, rgba(255, 247, 204, 0.016) 0 1px, transparent 1px 15px),
        rgba(241, 226, 167, 0.022) !important;
    box-shadow: none !important;
    opacity: 0.72;
}

.territory-city-node.territory-tone-gold .territory-city-iso-tile,
.territory-city-node.territory-tone-stone .territory-city-iso-tile,
.territory-city-node.territory-tone-red .territory-city-iso-tile,
.territory-city-node.territory-tone-violet .territory-city-iso-tile,
.territory-city-node.territory-tone-teal .territory-city-iso-tile {
    background:
        repeating-linear-gradient(26.565deg, rgba(255, 247, 204, 0.018) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(153.435deg, rgba(255, 247, 204, 0.016) 0 1px, transparent 1px 15px),
        rgba(241, 226, 167, 0.022) !important;
}

.territory-city-iso-tile .tile-grain {
    display: none !important;
}

.territory-city-iso-shadow {
    top: 69%;
    width: calc(var(--footprint-w) * 0.42);
    height: 12px;
    background: rgba(0, 0, 0, 0.2);
    filter: blur(5px);
    opacity: 0.5;
}

.territory-city-node.city-footprint-4x4 .territory-city-iso-shadow {
    width: calc(var(--footprint-w) * 0.34);
    height: 16px;
}

.territory-city-node.city-footprint-1x1 .territory-city-iso-shadow {
    width: calc(var(--footprint-w) * 0.6);
    height: 8px;
}

.territory-city-building-model {
    top: 62%;
}

.territory-city-node.city-footprint-4x4 .territory-city-building-model {
    transform: translate(-50%, -76%) scale(1.1);
}

.territory-city-node.city-footprint-4x4:hover .territory-city-building-model {
    transform: translate(-50%, -78%) scale(1.14);
}

.territory-city-node.city-footprint-2x2 .territory-city-building-model {
    transform: translate(-50%, -76%) scale(0.82);
}

.territory-city-node.city-footprint-2x2:hover .territory-city-building-model {
    transform: translate(-50%, -78%) scale(0.86);
}

.territory-city-node.city-footprint-1x1 .territory-city-building-model {
    transform: translate(-50%, -75%) scale(0.5);
}

.territory-city-node.city-footprint-1x1:hover .territory-city-building-model {
    transform: translate(-50%, -78%) scale(0.54);
}

.territory-city-node-label {
    top: calc(100% - 22px);
}

.territory-city-node.city-footprint-1x1 .territory-city-node-label {
    top: calc(100% - 28px);
}

@media (max-width: 760px) {
    .territory-city-building-model {
        top: 62%;
    }

    .territory-city-node.city-footprint-4x4 .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.7);
    }

    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model {
        transform: translate(-50%, -78%) scale(0.74);
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.5);
    }

    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model {
        transform: translate(-50%, -78%) scale(0.54);
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model {
        transform: translate(-50%, -75%) scale(0.36);
    }

    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model {
        transform: translate(-50%, -78%) scale(0.4);
    }
}

/* City interaction pass: fixed sandtable first, draggable city stage, reliable hit areas. */
#territory-view .territory-city-selected .territory-map-layout {
    order: 0;
}

#territory-view .territory-city-selected .territory-feature-workspace {
    order: 1;
}

#territory-view .territory-city-selected .territory-map-shell.territory-sandtable-mini {
    margin: 0;
}

.territory-city-context-sandtable {
    display: none !important;
}

.territory-city-map-shell {
    overflow: hidden;
}

.territory-city-map-viewport {
    position: relative;
    min-width: 0;
    overflow: auto;
    border: 1px solid rgba(220, 185, 106, 0.22);
    border-radius: 8px;
    background: rgba(11, 14, 13, 0.28);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-color: rgba(214, 178, 99, 0.7) rgba(23, 26, 23, 0.82);
    scrollbar-width: thin;
}

.territory-city-map-viewport:focus-visible {
    outline: 2px solid rgba(255, 226, 137, 0.7);
    outline-offset: 2px;
}

.territory-city-map-viewport::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.territory-city-map-viewport::-webkit-scrollbar-track {
    background: rgba(23, 26, 23, 0.82);
}

.territory-city-map-viewport::-webkit-scrollbar-thumb {
    border: 2px solid rgba(23, 26, 23, 0.82);
    border-radius: 999px;
    background: rgba(214, 178, 99, 0.72);
}

.territory-city-grid-map {
    border: 0 !important;
    border-radius: 0 !important;
}

.territory-city-node {
    pointer-events: none !important;
    touch-action: manipulation;
}

.territory-city-node::before {
    content: none !important;
}

.territory-city-footprint-hit {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 32;
    width: var(--footprint-w);
    height: var(--footprint-h);
    padding: 0;
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    appearance: none;
    background: rgba(255, 224, 132, 0);
    color: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
    touch-action: manipulation;
    pointer-events: auto;
}

.territory-city-footprint-hit:hover,
.territory-city-footprint-hit:focus-visible {
    background: transparent !important;
    outline: 0;
}

.territory-city-footprint-hit:disabled {
    cursor: not-allowed;
}

.territory-city-node-ring,
.territory-city-iso-shadow,
.territory-city-iso-tile,
.territory-city-iso-tile *,
.territory-city-building-model,
.territory-city-building-model *,
.territory-city-node-label {
    pointer-events: none !important;
}

.territory-city-node-label {
    z-index: 35;
}

.territory-city-tabs {
    display: none !important;
}

.territory-city-building-title .territory-city-focus-head {
    align-items: center;
}

.territory-city-building-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(206, 170, 95, 0.24);
    border-radius: 999px;
    background: rgba(255, 234, 181, 0.08);
    color: #fff1c4;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.territory-city-node.active::before {
    content: none !important;
}

@media (min-width: 761px) {
    .territory-city-map-viewport {
        max-height: clamp(560px, 50vw, 680px);
    }

    .territory-city-grid-map {
        min-width: 760px !important;
    }
}

@media (max-width: 760px) {
    .territory-city-map-shell {
        padding: 8px;
    }

    .territory-city-map-viewport {
        max-height: 372px;
    }

    .territory-city-grid-map {
        --iso-tile-w: 56px;
        --iso-tile-h: 32px;
        --iso-x-step: 30px;
        --iso-y-step: 16px;
        width: 620px !important;
        min-width: 620px !important;
        height: 360px !important;
        min-height: 360px !important;
    }

    .territory-city-plot,
    .territory-city-node {
        left: calc(50% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(39% + (var(--city-col) + var(--city-row) - 8) * var(--iso-y-step)) !important;
    }

    .territory-city-footprint-hit {
        top: 58%;
    }

    .territory-city-node.city-footprint-4x4 .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.68);
    }

    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model {
        transform: translate(-50%, -78%) scale(0.72);
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.5);
    }

    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model {
        transform: translate(-50%, -78%) scale(0.54);
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model {
        transform: translate(-50%, -75%) scale(0.36);
    }

    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model {
        transform: translate(-50%, -78%) scale(0.4);
    }

    #territory-view .territory-city-selected .territory-map-layout {
        margin-bottom: 0;
    }
}

/* Final main-city interaction layer: buildings sit on their occupied cells,
   and the occupied cell itself is the click target. */
.territory-city-node {
    z-index: calc(var(--city-depth) + 120) !important;
    pointer-events: none !important;
}

.territory-city-footprint-hit {
    left: 50% !important;
    top: 58% !important;
    z-index: 80 !important;
    width: var(--footprint-w) !important;
    height: var(--footprint-h) !important;
    transform: translate(-50%, -50%) !important;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

.territory-city-footprint-hit:hover,
.territory-city-footprint-hit:focus-visible {
    background: rgba(255, 226, 137, 0.06) !important;
    outline: 1px solid rgba(255, 226, 137, 0.42);
    outline-offset: -2px;
}

.territory-city-node.city-footprint-4x4 .territory-city-building-model,
.territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
.territory-city-node.city-footprint-4x4:active .territory-city-building-model {
    transform: translate(-50%, -76%) scale(1.1) !important;
}

.territory-city-node.city-footprint-2x2 .territory-city-building-model,
.territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
.territory-city-node.city-footprint-2x2:active .territory-city-building-model {
    transform: translate(-50%, -76%) scale(0.82) !important;
}

.territory-city-node.city-footprint-1x1 .territory-city-building-model,
.territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
.territory-city-node.city-footprint-1x1:active .territory-city-building-model {
    transform: translate(-50%, -75%) scale(0.5) !important;
}

.territory-city-node-ring,
.territory-city-iso-tile {
    top: 58% !important;
}

.territory-city-iso-shadow {
    top: 76% !important;
}

.territory-city-grid-map,
.territory-city-grid-map::before,
.territory-city-grid-map::after,
.territory-city-grid-roads {
    animation: none !important;
}

@media (max-width: 760px) {
    .territory-city-node.city-footprint-4x4 .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:active .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.7) !important;
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:active .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.5) !important;
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:active .territory-city-building-model {
        transform: translate(-50%, -75%) scale(0.36) !important;
    }
}

/* Main-city district zoning: grouped function blocks with cell-accurate taps. */
.territory-city-grid-map {
    --iso-tile-w: 68px;
    --iso-tile-h: 38px;
    --iso-x-step: 36px;
    --iso-y-step: 19px;
    width: 980px !important;
    min-width: 980px !important;
    height: 540px !important;
    min-height: 540px !important;
}

.territory-city-plot,
.territory-city-district-plate,
.territory-city-node,
.territory-city-cell-hit,
.territory-city-district-label {
    left: calc(50% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
    top: calc(18% + (var(--city-col) + var(--city-row) - 2) * var(--iso-y-step)) !important;
}

.territory-city-district-plate {
    position: absolute;
    z-index: calc(var(--city-depth) + 18);
    width: var(--iso-tile-w);
    height: var(--iso-tile-h);
    border: 1px solid rgba(232, 205, 128, 0.1);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    pointer-events: none;
    transform: translate(-50%, -50%) !important;
}

.territory-city-district-plate.district-gather {
    background: rgba(75, 118, 67, 0.16);
}

.territory-city-district-plate.district-population {
    background: rgba(168, 127, 61, 0.16);
}

.territory-city-district-plate.district-core {
    background: rgba(104, 104, 91, 0.15);
}

.territory-city-district-plate.district-expansion {
    background: rgba(94, 83, 139, 0.16);
}

.territory-city-district-plate.reserved {
    border-style: dashed;
    background:
        repeating-linear-gradient(90deg, rgba(232, 205, 128, 0.07) 0 4px, transparent 4px 9px),
        rgba(168, 127, 61, 0.1);
}

.territory-city-plot {
    z-index: calc(var(--city-depth) + 26) !important;
    width: var(--iso-tile-w) !important;
    height: var(--iso-tile-h) !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: translate(-50%, -50%) !important;
}

.territory-city-plot.district-gather {
    background: rgba(53, 92, 54, 0.36) !important;
}

.territory-city-plot.district-population {
    background: rgba(115, 85, 46, 0.32) !important;
}

.territory-city-plot.district-core {
    background: rgba(72, 78, 72, 0.33) !important;
}

.territory-city-plot.district-expansion {
    background: rgba(65, 58, 93, 0.33) !important;
}

.territory-city-plot.reserved::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255, 226, 137, 0.18);
    clip-path: inherit;
}

.territory-city-node {
    z-index: calc(var(--city-depth) + 150) !important;
}

.territory-city-cell-hit {
    z-index: calc(var(--city-depth) + 600) !important;
    width: calc(var(--iso-tile-w) + 8px) !important;
    height: calc(var(--iso-tile-h) + 8px) !important;
}

.territory-city-cell-hit:hover,
.territory-city-cell-hit:focus-visible {
    background: rgba(255, 226, 137, 0.14) !important;
    outline: 1px solid rgba(255, 226, 137, 0.62);
    outline-offset: -2px;
}

.territory-city-district-label {
    z-index: calc(var(--city-depth) + 210) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}

.territory-city-node.city-footprint-4x4 .territory-city-building-model,
.territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
.territory-city-node.city-footprint-4x4:active .territory-city-building-model,
.territory-city-node.city-footprint-4x4:focus-within .territory-city-building-model {
    transform: translate(-50%, -77%) scale(1.02) !important;
}

.territory-city-node.city-footprint-2x2 .territory-city-building-model,
.territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
.territory-city-node.city-footprint-2x2:active .territory-city-building-model,
.territory-city-node.city-footprint-2x2:focus-within .territory-city-building-model {
    transform: translate(-50%, -76%) scale(0.72) !important;
}

.territory-city-node.city-footprint-1x1 .territory-city-building-model,
.territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
.territory-city-node.city-footprint-1x1:active .territory-city-building-model,
.territory-city-node.city-footprint-1x1:focus-within .territory-city-building-model {
    transform: translate(-50%, -75%) scale(0.42) !important;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-tile-w: 56px;
        --iso-tile-h: 32px;
        --iso-x-step: 30px;
        --iso-y-step: 16px;
        width: 820px !important;
        min-width: 820px !important;
        height: 450px !important;
        min-height: 450px !important;
    }

    .territory-city-plot,
    .territory-city-district-plate,
    .territory-city-node,
    .territory-city-cell-hit,
    .territory-city-district-label {
        top: calc(17% + (var(--city-col) + var(--city-row) - 2) * var(--iso-y-step)) !important;
    }

    .territory-city-cell-hit {
        width: calc(var(--iso-tile-w) + 10px) !important;
        height: calc(var(--iso-tile-h) + 10px) !important;
    }

    .territory-city-node.city-footprint-4x4 .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:active .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:focus-within .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.66) !important;
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:active .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:focus-within .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.48) !important;
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:active .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:focus-within .territory-city-building-model {
        transform: translate(-50%, -75%) scale(0.32) !important;
    }
}

/* Territory latest layout final override: 450px frame, compact dungeon, 4x4 residence grid. */
html:has(#territory-view.active),
body.territory-wide-view {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #app,
body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active,
body.territory-wide-view .territory-app,
body.territory-wide-view .territory-feature-workspace,
.territory-dungeon-board,
.territory-dungeon-growth,
.territory-dungeon-panel,
.territory-dungeon-atlas,
.territory-city-scene,
.territory-city-map-shell,
.territory-city-panel-stack,
.territory-city-dock-body {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active {
    max-width: 450px !important;
}

.territory-dungeon-board,
.territory-dungeon-growth,
.territory-city-scene {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.territory-dungeon-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.territory-dungeon-canvas-wrap .territory-dungeon-canvas,
.territory-dungeon-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 300px !important;
}

.territory-city-map-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
    overscroll-behavior-x: contain;
}

.territory-relic-slots {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
}

.territory-relic-slot {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    min-width: 0 !important;
    padding: 7px !important;
}

.territory-relic-slot strong,
.territory-relic-slot span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

.territory-relic-inventory {
    display: none !important;
}

.territory-dungeon-upgrade-next {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.territory-city-residence-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.territory-city-residence-cell {
    display: grid !important;
    grid-template-rows: auto auto auto;
    place-items: center;
    gap: 2px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
    padding: 5px 3px;
    border: 1px solid rgba(210, 175, 100, 0.22);
    border-radius: 7px;
    background: rgba(18, 22, 20, 0.72);
    color: #f6e7bd;
}

.territory-city-residence-cell.empty {
    border-style: dashed;
    color: #bfb39c;
    background: rgba(21, 22, 19, 0.48);
}

.territory-city-residence-cell.active {
    border-color: rgba(255, 222, 139, 0.78);
    box-shadow: 0 0 0 1px rgba(255, 222, 139, 0.2), 0 8px 16px rgba(0, 0, 0, 0.18);
}

.territory-city-residence-cell i {
    font-size: 14px;
    line-height: 1;
}

.territory-city-residence-cell strong,
.territory-city-residence-cell span,
.territory-city-residence-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-residence-cell strong {
    font-size: 12px;
    color: #fff0bd;
}

.territory-city-residence-detail {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(18, 22, 20, 0.72);
}

.territory-city-residence-detail.empty {
    border-style: dashed;
    background: rgba(24, 24, 20, 0.5);
}

.territory-city-residence-detail header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.territory-city-residence-detail header i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.1);
    color: #ffe7a7;
}

.territory-city-residence-detail strong {
    display: block;
    color: #fff1c4;
    font-size: 14px;
    line-height: 1.2;
}

.territory-city-residence-detail header span,
.territory-city-residence-detail p,
.territory-city-residence-hint {
    display: block;
    color: #c7bda8;
    font-size: 12px;
    line-height: 1.35;
}

.territory-city-residence-detail .territory-cost-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.territory-city-residence-detail button {
    width: 100%;
    min-height: 34px;
}

/* Territory mobile-frame containment: final override for dungeon and main-city panels. */
html:has(#territory-view.active),
body.territory-wide-view {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #app,
body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active,
body.territory-wide-view .territory-app,
body.territory-wide-view .territory-feature-workspace,
.territory-dungeon-board,
.territory-dungeon-growth,
.territory-dungeon-panel,
.territory-dungeon-atlas,
.territory-city-scene,
.territory-city-map-shell,
.territory-city-panel-stack,
.territory-city-dock-body {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active {
    max-width: 450px !important;
}

.territory-dungeon-board,
.territory-dungeon-growth,
.territory-city-scene {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

.territory-dungeon-canvas-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.territory-dungeon-canvas-wrap .territory-dungeon-canvas,
.territory-dungeon-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 300px !important;
}

.territory-relic-slots {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
}

.territory-relic-slot {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    min-width: 0 !important;
    padding: 7px !important;
}

.territory-relic-slot strong,
.territory-relic-slot span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
}

.territory-relic-inventory {
    display: none !important;
}

.territory-dungeon-upgrades .territory-card-grid.compact {
    grid-template-columns: minmax(0, 1fr) !important;
}

.territory-dungeon-upgrade-next {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.territory-city-map-viewport {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
    overscroll-behavior-x: contain;
}

.territory-city-grid-map {
    flex: 0 0 auto !important;
}

.territory-city-residence-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.territory-city-residence-cell {
    position: relative;
    display: grid !important;
    grid-template-rows: auto auto auto;
    place-items: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 5px 3px;
    border: 1px solid rgba(210, 175, 100, 0.22);
    border-radius: 7px;
    background: rgba(18, 22, 20, 0.72);
    color: #f6e7bd;
    cursor: pointer;
}

.territory-city-residence-cell.empty {
    border-style: dashed;
    color: #bfb39c;
    background: rgba(21, 22, 19, 0.48);
}

.territory-city-residence-cell.active {
    border-color: rgba(255, 222, 139, 0.78);
    box-shadow: 0 0 0 1px rgba(255, 222, 139, 0.2), 0 8px 16px rgba(0, 0, 0, 0.18);
}

.territory-city-residence-cell i {
    font-size: 14px;
    line-height: 1;
}

.territory-city-residence-cell strong,
.territory-city-residence-cell span,
.territory-city-residence-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-residence-cell strong {
    font-size: 12px;
    color: #fff0bd;
}

.territory-city-residence-detail {
    display: grid;
    gap: 8px;
    box-sizing: border-box;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 8px;
    background: rgba(18, 22, 20, 0.72);
}

.territory-city-residence-detail.empty {
    border-style: dashed;
    background: rgba(24, 24, 20, 0.5);
}

.territory-city-residence-detail header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.territory-city-residence-detail header i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.1);
    color: #ffe7a7;
}

.territory-city-residence-detail strong,
.territory-city-residence-detail span,
.territory-city-residence-detail p {
    min-width: 0;
}

.territory-city-residence-detail strong {
    display: block;
    color: #fff1c4;
    font-size: 14px;
    line-height: 1.2;
}

.territory-city-residence-detail header span,
.territory-city-residence-detail p,
.territory-city-residence-hint {
    display: block;
    color: #c7bda8;
    font-size: 12px;
    line-height: 1.35;
}

.territory-city-residence-detail .territory-cost-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.territory-city-residence-detail button {
    width: 100%;
    min-height: 34px;
}

/* Territory final phone-frame restore: desktop uses the same 450px mobile layout. */
body.territory-wide-view {
    width: 100vw !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    border-right: 1px solid var(--color-border) !important;
    border-left: 1px solid var(--color-border) !important;
}

body.territory-wide-view #main-content-section {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

body.territory-wide-view #territory-view.active {
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto !important;
}

body.territory-wide-view .territory-app {
    width: 100% !important;
    max-width: 100% !important;
}

body.territory-wide-view .territory-dungeon-board,
.territory-dungeon-board,
.territory-dungeon-growth,
.territory-explore-layout,
.territory-map-layout,
.territory-explore-mode .territory-map-layout {
    grid-template-columns: 1fr !important;
}

body.territory-wide-view .territory-dungeon-canvas,
.territory-dungeon-canvas {
    height: 320px !important;
}

body.territory-wide-view .territory-dungeon-side {
    max-height: none !important;
    overflow: visible !important;
}

.territory-relic-inventory {
    display: grid;
    gap: 6px;
}

.territory-relic-inventory article {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 234, 181, 0.12);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.055);
}

.territory-relic-inventory article.better {
    border-color: rgba(145, 200, 120, 0.38);
    background: rgba(94, 126, 70, 0.16);
}

.territory-relic-inventory i {
    color: #d9b663;
}

.territory-relic-inventory strong,
.territory-relic-inventory span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-relic-inventory strong {
    color: #fff1c4;
    font-size: 12px;
}

.territory-relic-inventory span {
    color: #d5c8ad;
    font-size: 10px;
}

.territory-relic-inventory b {
    color: #91c878;
    font-size: 11px;
}

.territory-relic-slot span {
    white-space: normal !important;
}

.territory-explore-mode .territory-sandtable {
    min-height: 180px !important;
    aspect-ratio: 1.2 / 1 !important;
}

.territory-explore-map-column {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.territory-explore-board {
    grid-template-columns: repeat(var(--explore-cols, 13), 38px) !important;
    grid-auto-rows: 38px !important;
    justify-content: start !important;
    width: max-content !important;
    min-width: max-content !important;
    padding: 12px !important;
}

.territory-explore-cell {
    inline-size: 38px !important;
    block-size: 38px !important;
    font-size: 10px !important;
}

.territory-explore-cell.empty.locked {
    opacity: 0.35;
    pointer-events: none;
}

.territory-explore-side,
.territory-landing-preview-grid {
    grid-template-columns: 1fr !important;
}

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

/* Final override: material cost pills must stay visible in compact city cards. */
.territory-city-buildings .territory-building-card .territory-city-cost-label,
.territory-city-buildings .territory-building-card .territory-cost-row,
.territory-city-starlight-grid .territory-building-card .territory-city-cost-label,
.territory-city-starlight-grid .territory-building-card .territory-cost-row,
.territory-city-residence-slot .territory-city-cost-label,
.territory-city-residence-slot .territory-cost-row {
    display: flex !important;
}

.territory-city-buildings .territory-building-card .territory-cost-row,
.territory-city-starlight-grid .territory-building-card .territory-cost-row,
.territory-city-residence-slot .territory-cost-row {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
}

.territory-city-buildings .territory-building-card .territory-cost-row .territory-pill,
.territory-city-buildings .territory-building-card .territory-cost-row .territory-pill span,
.territory-city-starlight-grid .territory-building-card .territory-cost-row .territory-pill,
.territory-city-starlight-grid .territory-building-card .territory-cost-row .territory-pill span,
.territory-city-residence-slot .territory-cost-row .territory-pill,
.territory-city-residence-slot .territory-cost-row .territory-pill span {
    display: inline-flex !important;
}

.territory-city-buildings .territory-building-card .territory-pill,
.territory-city-starlight-grid .territory-building-card .territory-pill,
.territory-city-residence-slot .territory-pill {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
}

.territory-city-pending-claim {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(145, 200, 120, 0.28);
    border-radius: 8px;
    background: rgba(33, 50, 31, 0.62);
}

.territory-city-pending-claim.empty {
    border-color: rgba(206, 170, 95, 0.16);
    background: rgba(24, 28, 26, 0.64);
}

.territory-city-pending-claim > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.territory-city-pending-claim strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff1c4;
    font-size: 13px;
    line-height: 1.15;
}

.territory-city-pending-claim span {
    color: #c7bda8;
    font-size: 11px;
    line-height: 1.2;
}

.territory-city-pending-claim b {
    color: #91c878;
}

.territory-city-pending-claim .territory-cost-row {
    min-width: 0;
}

.territory-city-pending-claim button {
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
}

/* Main-city loop polish: keep after final zoning so older passes do not win. */
.territory-city-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
}

.territory-city-resource-board {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.territory-city-resource-card {
    min-height: 42px !important;
    padding: 5px 5px 7px !important;
}

.territory-city-resource-card.pulse {
    animation: territoryCityResourcePulse 720ms ease-out both;
}

.territory-city-gather-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.territory-city-gather-action {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 84px auto !important;
    align-content: start !important;
    gap: 6px !important;
    min-height: 132px !important;
    padding: 8px !important;
}

.territory-city-gather-action:active .territory-city-gather-scene {
    transform: translateY(1px) scale(0.985);
}

.territory-city-gather-copy small .territory-pill {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 10px;
}

.territory-city-floating-feed {
    top: 2px !important;
    right: 6px !important;
}

.territory-city-floating-feed span {
    animation: territoryCityFloatUp 1600ms ease-out both;
}

.territory-city-buildings,
.territory-city-starlight-grid,
.territory-city-skill-grid.compact,
.territory-city-job-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.territory-city-population-card.locked {
    border-color: rgba(240, 198, 110, 0.28);
    background: rgba(40, 34, 24, 0.68);
}

.territory-city-population-card .territory-city-lock-hint {
    grid-column: 1 / -1;
}

.territory-city-job.locked input,
.territory-city-job.locked button {
    cursor: not-allowed;
}

@keyframes territoryCityResourcePulse {
    0% {
        transform: translateY(0);
        box-shadow: inset 0 0 0 1px rgba(145, 200, 120, 0.1);
    }
    35% {
        transform: translateY(-1px);
        box-shadow: inset 0 0 0 1px rgba(145, 200, 120, 0.52), 0 0 16px rgba(145, 200, 120, 0.22);
    }
    100% {
        transform: translateY(0);
        box-shadow: inset 0 0 0 1px rgba(145, 200, 120, 0.08);
    }
}

@media (max-width: 760px) {
    .territory-city-action-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .territory-city-gather-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .territory-city-gather-action {
        grid-template-rows: 58px auto !important;
        min-height: 104px !important;
        padding: 5px !important;
    }

    .territory-city-gather-scene {
        min-height: 58px !important;
        border-radius: 6px !important;
    }

    .territory-city-gather-copy strong {
        font-size: 12px !important;
    }

    .territory-city-gather-copy small {
        display: none !important;
    }

    .territory-city-resource-card {
        min-height: 34px !important;
        padding: 4px 3px 6px !important;
    }

    .territory-city-resource-card strong {
        font-size: 9px !important;
    }

    .territory-city-buildings,
    .territory-city-starlight-grid,
    .territory-city-skill-grid.compact,
    .territory-city-job-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .territory-city-pending-claim {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px !important;
        padding: 7px !important;
    }

    .territory-city-pending-claim .territory-cost-row {
        grid-column: 1 / -1;
        order: 3;
    }

    .territory-city-job.locked .territory-city-job-desc {
        display: block !important;
        color: #f0c66e !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }
}

/* Main-city residence district: 16 independent housing plots under City Hall. */
.territory-city-residence-panel {
    gap: 10px !important;
}

.territory-city-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.territory-city-panel-head span {
    color: #c7bda8;
    font-size: 12px;
}

.territory-city-residence-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.territory-city-residence-slot {
    display: grid;
    gap: 7px;
    min-width: 0;
    min-height: 162px;
    padding: 8px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    background: rgba(18, 22, 20, 0.68);
}

.territory-city-residence-slot.empty {
    border-style: dashed;
    background: rgba(24, 24, 20, 0.48);
}

.territory-city-residence-slot header {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.territory-city-residence-slot header i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 234, 181, 0.1);
    color: #ffe7a7;
}

.territory-city-residence-slot strong,
.territory-city-residence-slot span,
.territory-city-residence-slot p {
    min-width: 0;
}

.territory-city-residence-slot strong {
    display: block;
    overflow: hidden;
    color: #fff1c4;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.territory-city-residence-slot header span,
.territory-city-residence-slot p {
    display: block;
    overflow: hidden;
    color: #c7bda8;
    font-size: 11px;
    line-height: 1.25;
}

.territory-city-residence-slot p {
    display: -webkit-box;
    min-height: 28px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.territory-city-residence-slot .territory-cost-row {
    gap: 4px;
}

.territory-city-residence-slot .territory-pill {
    min-height: 20px;
    padding: 2px 5px;
    font-size: 10px;
}

.territory-city-residence-slot button {
    min-height: 30px;
    padding: 5px 8px;
}

.territory-city-cost-label {
    color: #d8c9a9;
    font-size: 11px;
    line-height: 1;
}

@media (max-width: 760px) {
    .territory-city-residence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .territory-city-residence-slot {
        min-height: 154px;
        padding: 7px;
    }

    .territory-city-residence-slot p {
        display: none;
    }
}

/* Main-city play loop panels: visual clicker scenes, locks, and live tick affordance. */
.territory-city-action-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(220, 185, 106, 0.18);
    border-radius: 8px;
    background: rgba(13, 17, 15, 0.48);
}

.territory-city-action-summary span,
.territory-city-lock-hint {
    min-width: 0;
    color: #d8c9a9;
    font-size: 12px;
    line-height: 1.35;
}

.territory-city-lock-hint {
    display: block;
    color: #f0c66e;
}

.territory-city-gather-actions {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}

.territory-city-gather-action {
    grid-template-columns: 1fr !important;
    grid-template-rows: 82px auto !important;
    min-height: 132px !important;
    padding: 8px !important;
    overflow: hidden;
}

.territory-city-gather-scene {
    position: relative;
    display: block;
    min-height: 82px;
    border: 1px solid rgba(255, 235, 178, 0.12);
    border-radius: 8px;
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 229, 142, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(16, 25, 20, 0.86), rgba(20, 24, 19, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255, 245, 210, 0.04);
}

.territory-city-gather-scene span {
    position: absolute;
    display: block;
}

.territory-city-gather-scene .scene-ground {
    left: 12%;
    right: 12%;
    bottom: 12px;
    height: 34px;
    border-radius: 50%;
    transform: rotate(-8deg) skewX(-20deg);
}

.territory-city-gather-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.territory-city-gather-copy strong {
    color: #fff1c4;
    font-size: 13px;
    line-height: 1.15;
}

.territory-city-gather-copy small {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    color: #c7bda8;
    font-size: 10px;
    line-height: 1.2;
}

.territory-city-gather-action.scene-grain .scene-ground {
    background:
        repeating-linear-gradient(90deg, rgba(238, 205, 92, 0.38) 0 4px, rgba(70, 111, 53, 0.52) 4px 11px),
        rgba(57, 92, 47, 0.8);
}

.territory-city-gather-action.scene-grain .scene-a,
.territory-city-gather-action.scene-grain .scene-b,
.territory-city-gather-action.scene-grain .scene-c {
    bottom: 30px;
    width: 6px;
    height: 28px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #f0d579, #8ba44c);
    box-shadow: 0 -7px 0 -2px #f6df88;
}

.territory-city-gather-action.scene-grain .scene-a { left: 28%; transform: rotate(-12deg); }
.territory-city-gather-action.scene-grain .scene-b { left: 48%; height: 34px; transform: rotate(6deg); }
.territory-city-gather-action.scene-grain .scene-c { left: 66%; transform: rotate(14deg); }

.territory-city-gather-action.scene-wood .scene-ground {
    background:
        repeating-linear-gradient(90deg, rgba(111, 75, 43, 0.5) 0 10px, rgba(74, 103, 54, 0.35) 10px 18px),
        rgba(47, 78, 43, 0.82);
}

.territory-city-gather-action.scene-wood .scene-a,
.territory-city-gather-action.scene-wood .scene-b,
.territory-city-gather-action.scene-wood .scene-c {
    bottom: 23px;
    width: 40px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7b5331, #bd8550 48%, #5a3925 52%);
    box-shadow: inset 4px 0 0 rgba(255, 223, 165, 0.18);
}

.territory-city-gather-action.scene-wood .scene-a { left: 20%; transform: rotate(-13deg); }
.territory-city-gather-action.scene-wood .scene-b { left: 38%; bottom: 35px; transform: rotate(10deg); }
.territory-city-gather-action.scene-wood .scene-c { left: 54%; transform: rotate(-3deg); }

.territory-city-gather-action.scene-mineral .scene-ground {
    background:
        radial-gradient(circle at 35% 58%, rgba(172, 107, 87, 0.46), transparent 18%),
        radial-gradient(circle at 67% 42%, rgba(179, 151, 111, 0.38), transparent 18%),
        rgba(73, 66, 58, 0.82);
}

.territory-city-gather-action.scene-mineral .scene-a,
.territory-city-gather-action.scene-mineral .scene-b,
.territory-city-gather-action.scene-mineral .scene-c {
    bottom: 24px;
    width: 30px;
    height: 24px;
    clip-path: polygon(18% 78%, 34% 22%, 74% 8%, 96% 62%, 62% 100%);
    background: linear-gradient(135deg, #6f6d69, #b48a6a 54%, #3c3431);
}

.territory-city-gather-action.scene-mineral .scene-a { left: 24%; transform: rotate(-10deg); }
.territory-city-gather-action.scene-mineral .scene-b { left: 46%; bottom: 34px; transform: scale(0.82) rotate(14deg); }
.territory-city-gather-action.scene-mineral .scene-c { left: 62%; transform: scale(0.68) rotate(-4deg); }

.territory-city-gather-action:active .territory-city-gather-scene {
    transform: translateY(1px) scale(0.99);
}

.territory-city-skill.locked,
.territory-city-job.locked {
    opacity: 0.62;
    filter: grayscale(0.28);
}

.territory-city-skill-xp {
    color: #91c878;
    font-size: 11px;
}

.territory-city-skill.live-tick {
    box-shadow: inset 0 0 0 1px rgba(145, 200, 120, 0.22);
}

@media (max-width: 760px) {
    .territory-city-gather-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .territory-city-gather-action {
        min-height: 116px !important;
        grid-template-rows: 68px auto !important;
    }

    .territory-city-gather-scene {
        min-height: 68px;
    }
}

/* Main-city district layout: separate function zones and per-cell hit targets. */
.territory-city-grid-map {
    --iso-tile-w: 72px;
    --iso-tile-h: 40px;
    --iso-x-step: 38px;
    --iso-y-step: 20px;
    width: 920px !important;
    min-width: 920px !important;
    height: 520px !important;
    min-height: 520px !important;
}

.territory-city-plot,
.territory-city-node,
.territory-city-cell-hit,
.territory-city-district-label {
    left: calc(50% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
    top: calc(20% + (var(--city-col) + var(--city-row) - 2) * var(--iso-y-step)) !important;
}

.territory-city-district-label {
    position: absolute;
    z-index: calc(var(--city-depth) + 35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(225, 195, 112, 0.22);
    border-radius: 999px;
    background: rgba(17, 20, 19, 0.72);
    color: #fff0ba;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%) !important;
}

.territory-city-cell-hit {
    position: absolute !important;
    z-index: calc(var(--city-depth) + 500) !important;
    width: var(--iso-tile-w) !important;
    height: var(--iso-tile-h) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
    appearance: none;
    background: transparent !important;
    color: transparent;
    cursor: pointer;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) !important;
}

.territory-city-cell-hit:hover,
.territory-city-cell-hit:focus-visible {
    background: rgba(255, 226, 137, 0.1) !important;
    outline: 1px solid rgba(255, 226, 137, 0.52);
    outline-offset: -1px;
}

.territory-city-node .territory-city-footprint-hit:not(.territory-city-cell-hit) {
    display: none !important;
}

.territory-city-node {
    z-index: calc(var(--city-depth) + 160) !important;
}

.territory-city-plot {
    z-index: calc(var(--city-depth) + 30) !important;
}

.territory-city-node-ring,
.territory-city-iso-tile {
    width: var(--footprint-w) !important;
    height: var(--footprint-h) !important;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-tile-w: 56px;
        --iso-tile-h: 32px;
        --iso-x-step: 30px;
        --iso-y-step: 16px;
        width: 760px !important;
        min-width: 760px !important;
        height: 430px !important;
        min-height: 430px !important;
    }

    .territory-city-plot,
    .territory-city-node,
    .territory-city-cell-hit,
    .territory-city-district-label {
        left: calc(50% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(18% + (var(--city-col) + var(--city-row) - 2) * var(--iso-y-step)) !important;
    }

    .territory-city-district-label {
        min-width: 70px;
        min-height: 20px;
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* Main-city final polish: no tile/building motion on hover, only the footprint lights up. */
.territory-city-node,
.territory-city-node:hover,
.territory-city-node:active,
.territory-city-node:focus-within {
    transform: translate(-50%, -50%) !important;
}

.territory-city-plot,
.territory-city-plot:hover,
.territory-city-plot:active {
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58) !important;
}

.territory-city-node-ring,
.territory-city-node:hover .territory-city-node-ring,
.territory-city-node:active .territory-city-node-ring,
.territory-city-node:focus-within .territory-city-node-ring,
.territory-city-iso-tile,
.territory-city-node:hover .territory-city-iso-tile,
.territory-city-node:active .territory-city-iso-tile,
.territory-city-node:focus-within .territory-city-iso-tile {
    transform: translate(-50%, -50%) rotate(45deg) scaleY(0.58) !important;
}

.territory-city-node.city-footprint-4x4 .territory-city-building-model,
.territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
.territory-city-node.city-footprint-4x4:active .territory-city-building-model,
.territory-city-node.city-footprint-4x4:focus-within .territory-city-building-model {
    transform: translate(-50%, -76%) scale(1.1) !important;
}

.territory-city-node.city-footprint-2x2 .territory-city-building-model,
.territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
.territory-city-node.city-footprint-2x2:active .territory-city-building-model,
.territory-city-node.city-footprint-2x2:focus-within .territory-city-building-model {
    transform: translate(-50%, -76%) scale(0.82) !important;
}

.territory-city-node.city-footprint-1x1 .territory-city-building-model,
.territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
.territory-city-node.city-footprint-1x1:active .territory-city-building-model,
.territory-city-node.city-footprint-1x1:focus-within .territory-city-building-model {
    transform: translate(-50%, -75%) scale(0.5) !important;
}

.territory-city-building-model,
.territory-city-iso-tile,
.territory-city-node-ring,
.territory-city-plot {
    transition: none !important;
    animation: none !important;
}

.territory-city-function-panel {
    display: grid;
    gap: 12px;
}

@media (max-width: 760px) {
    .territory-city-node.city-footprint-4x4 .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:active .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:focus-within .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.7) !important;
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:active .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:focus-within .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.5) !important;
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:active .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:focus-within .territory-city-building-model {
        transform: translate(-50%, -75%) scale(0.36) !important;
    }
}

/* Main-city final district zoning: keep this at the end so old city passes cannot override it. */
.territory-city-grid-map {
    --iso-tile-w: 68px;
    --iso-tile-h: 38px;
    --iso-x-step: 36px;
    --iso-y-step: 19px;
    width: 980px !important;
    min-width: 980px !important;
    height: 540px !important;
    min-height: 540px !important;
}

.territory-city-plot,
.territory-city-district-plate,
.territory-city-node,
.territory-city-cell-hit,
.territory-city-district-label {
    left: calc(48% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
    top: calc(18% + (var(--city-col) + var(--city-row) - 2) * var(--iso-y-step)) !important;
}

.territory-city-district-plate {
    position: absolute;
    z-index: calc(var(--city-depth) + 18);
    width: var(--iso-tile-w);
    height: var(--iso-tile-h);
    border: 1px solid rgba(232, 205, 128, 0.1);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    pointer-events: none;
    transform: translate(-50%, -50%) !important;
}

.territory-city-district-plate.district-gather {
    background: rgba(75, 118, 67, 0.16);
}

.territory-city-district-plate.district-population {
    background: rgba(168, 127, 61, 0.16);
}

.territory-city-district-plate.district-core {
    background: rgba(104, 104, 91, 0.15);
}

.territory-city-district-plate.district-expansion {
    background: rgba(94, 83, 139, 0.16);
}

.territory-city-district-plate.reserved {
    border-style: dashed;
    background:
        repeating-linear-gradient(90deg, rgba(232, 205, 128, 0.07) 0 4px, transparent 4px 9px),
        rgba(168, 127, 61, 0.1);
}

.territory-city-plot {
    z-index: calc(var(--city-depth) + 26) !important;
    width: var(--iso-tile-w) !important;
    height: var(--iso-tile-h) !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: translate(-50%, -50%) !important;
}

.territory-city-plot.district-gather {
    background: rgba(53, 92, 54, 0.36) !important;
}

.territory-city-plot.district-population {
    background: rgba(115, 85, 46, 0.32) !important;
}

.territory-city-plot.district-core {
    background: rgba(72, 78, 72, 0.33) !important;
}

.territory-city-plot.district-expansion {
    background: rgba(65, 58, 93, 0.33) !important;
}

.territory-city-plot.reserved::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255, 226, 137, 0.18);
    clip-path: inherit;
}

.territory-city-node {
    z-index: calc(var(--city-depth) + 150) !important;
}

.territory-city-cell-hit {
    z-index: calc(var(--city-depth) + 600) !important;
    width: calc(var(--iso-tile-w) + 8px) !important;
    height: calc(var(--iso-tile-h) + 8px) !important;
}

.territory-city-cell-hit:hover,
.territory-city-cell-hit:focus-visible {
    background: rgba(255, 226, 137, 0.14) !important;
    outline: 1px solid rgba(255, 226, 137, 0.62);
    outline-offset: -2px;
}

.territory-city-district-label {
    z-index: calc(var(--city-depth) + 210) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}

.territory-city-node.city-footprint-4x4 .territory-city-building-model,
.territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
.territory-city-node.city-footprint-4x4:active .territory-city-building-model,
.territory-city-node.city-footprint-4x4:focus-within .territory-city-building-model {
    transform: translate(-50%, -77%) scale(1.02) !important;
}

.territory-city-node.city-footprint-2x2 .territory-city-building-model,
.territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
.territory-city-node.city-footprint-2x2:active .territory-city-building-model,
.territory-city-node.city-footprint-2x2:focus-within .territory-city-building-model {
    transform: translate(-50%, -76%) scale(0.72) !important;
}

.territory-city-node.city-footprint-1x1 .territory-city-building-model,
.territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
.territory-city-node.city-footprint-1x1:active .territory-city-building-model,
.territory-city-node.city-footprint-1x1:focus-within .territory-city-building-model {
    transform: translate(-50%, -75%) scale(0.42) !important;
}

@media (max-width: 760px) {
    .territory-city-grid-map {
        --iso-tile-w: 56px;
        --iso-tile-h: 32px;
        --iso-x-step: 30px;
        --iso-y-step: 16px;
        width: 820px !important;
        min-width: 820px !important;
        height: 450px !important;
        min-height: 450px !important;
    }

    .territory-city-plot,
    .territory-city-district-plate,
    .territory-city-node,
    .territory-city-cell-hit,
    .territory-city-district-label {
        left: calc(34% + (var(--city-col) - var(--city-row)) * var(--iso-x-step)) !important;
        top: calc(17% + (var(--city-col) + var(--city-row) - 2) * var(--iso-y-step)) !important;
    }

    .territory-city-cell-hit {
        width: calc(var(--iso-tile-w) + 10px) !important;
        height: calc(var(--iso-tile-h) + 10px) !important;
    }

    .territory-city-node.city-footprint-4x4 .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:hover .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:active .territory-city-building-model,
    .territory-city-node.city-footprint-4x4:focus-within .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.66) !important;
    }

    .territory-city-node.city-footprint-2x2 .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:hover .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:active .territory-city-building-model,
    .territory-city-node.city-footprint-2x2:focus-within .territory-city-building-model {
        transform: translate(-50%, -76%) scale(0.48) !important;
    }

    .territory-city-node.city-footprint-1x1 .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:hover .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:active .territory-city-building-model,
    .territory-city-node.city-footprint-1x1:focus-within .territory-city-building-model {
        transform: translate(-50%, -75%) scale(0.32) !important;
    }
}

/* Territory latest absolute final override: keep mobile frame and residence grid stable. */
html:has(#territory-view.active),
body.territory-wide-view {
    max-width: 450px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body.territory-wide-view #main-content-section,
body.territory-wide-view #territory-view.active {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body.territory-wide-view .territory-app,
body.territory-wide-view .territory-feature-workspace,
.territory-dungeon-board,
.territory-dungeon-growth,
.territory-dungeon-panel,
.territory-city-scene,
.territory-city-map-shell,
.territory-city-panel-stack {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.territory-dungeon-board,
.territory-dungeon-growth,
.territory-city-scene {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.territory-dungeon-canvas-wrap,
.territory-dungeon-canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.territory-relic-inventory {
    display: none !important;
}

.territory-relic-slots {
    grid-template-columns: minmax(0, 1fr) !important;
}

.territory-relic-slot {
    grid-template-columns: 28px minmax(0, 1fr) !important;
}

.territory-relic-slot span,
.territory-relic-slot strong {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.territory-city-map-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: auto !important;
}

.territory-city-residence-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.territory-city-residence-cell {
    display: grid !important;
    place-items: center !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 5px 3px !important;
}

.territory-city-residence-detail {
    display: grid !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.territory-wide-view .territory-dungeon-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.territory-wide-view .territory-dungeon-canvas-wrap,
body.territory-wide-view .territory-dungeon-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.territory-wide-view .territory-dungeon-canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 300px !important;
}

body.territory-wide-view .territory-dungeon-side {
    max-height: none !important;
    overflow: visible !important;
}

/* Territory true final clamp: appended at EOF to override duplicated history. */
#territory-view.active,
body.territory-wide-view #territory-view.active,
body.territory-wide-view #main-content-section {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#territory-view.active .territory-feature-workspace,
#territory-view.active .territory-feature-workspace:has(.territory-city-scene),
#territory-view.active .territory-feature-workspace:has(.territory-dungeon-board),
#territory-view.active .territory-city-scene,
#territory-view.active .territory-city-map-shell,
#territory-view.active .territory-city-panel-stack,
#territory-view.active .territory-city-context-sandtable {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#territory-view.active .territory-city-map-viewport {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 318px !important;
    max-height: 430px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: default;
}

#territory-view.active .territory-city-grid-map {
    width: 1100px !important;
    min-width: 1100px !important;
    max-width: none !important;
    height: 760px !important;
    min-height: 760px !important;
    transform: none !important;
}

#territory-view.active .territory-city-map-viewport.dragging {
    cursor: grabbing;
    user-select: none;
}

#territory-view.active .territory-dungeon-board,
#territory-view.active .territory-dungeon-growth,
#territory-view.active .territory-dungeon-panel,
#territory-view.active .territory-dungeon-side,
#territory-view.active .territory-dungeon-canvas-wrap,
#territory-view.active .territory-dungeon-canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#territory-view.active .territory-dungeon-board,
#territory-view.active .territory-dungeon-growth {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

#territory-view.active .territory-dungeon-offline-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

#territory-view.active .territory-dungeon-offline-controls label,
#territory-view.active .territory-dungeon-offline-controls select,
#territory-view.active .territory-dungeon-offline-controls button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#territory-view.active .territory-relic-inventory {
    display: none !important;
}

#territory-view.active .territory-relic-slots {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#territory-view.active .territory-relic-slot {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-areas:
        "icon title"
        "icon meta" !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#territory-view.active .territory-relic-slot i {
    grid-area: icon !important;
}

#territory-view.active .territory-relic-slot strong {
    grid-area: title !important;
}

#territory-view.active .territory-relic-slot span {
    grid-area: meta !important;
}

#territory-view.active .territory-relic-slot strong,
#territory-view.active .territory-relic-slot span {
    min-width: 0 !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#territory-view.active .territory-dev-placeholder,
#territory-view.active .territory-demo-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 460px) {
    #territory-view.active .territory-city-grid-map {
        width: 820px !important;
        min-width: 820px !important;
        height: 520px !important;
        min-height: 520px !important;
    }
}

/* Territory final two-column density fix: header resources and relic gear stay compact. */
#territory-view.active .territory-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(172px, 0.92fr) !important;
    align-items: start !important;
    gap: 8px !important;
}

#territory-view.active .territory-topbar > div:first-child {
    min-width: 0 !important;
}

#territory-view.active .territory-header-resources {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-content: start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#territory-view.active .territory-header-resource {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 0 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 4px 5px !important;
    line-height: 1.1 !important;
}

#territory-view.active .territory-header-resource b,
#territory-view.active .territory-header-resource em {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
}

#territory-view.active .territory-header-resource i {
    font-size: 12px !important;
}

#territory-view.active .territory-header-resource b {
    font-size: 11px !important;
}

#territory-view.active .territory-header-resource em {
    font-size: 9px !important;
}

#territory-view.active .territory-relic-slots {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#territory-view.active .territory-relic-slot {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-template-areas:
        "icon title"
        "meta meta" !important;
    align-items: center !important;
    gap: 3px 6px !important;
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 7px !important;
}

#territory-view.active .territory-relic-slot i {
    grid-area: icon !important;
}

#territory-view.active .territory-relic-slot strong {
    grid-area: title !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

#territory-view.active .territory-relic-slot span {
    grid-area: meta !important;
    min-width: 0 !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

#territory-view.active .territory-city-building-title .territory-city-focus-head,
#territory-view.active .territory-city-focus-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
}

#territory-view.active .territory-city-focus-head > div {
    min-width: 0 !important;
}

#territory-view.active .territory-city-focus-head h4,
#territory-view.active .territory-city-focus-head h4 span,
#territory-view.active .territory-city-focus-head h4 i {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all !important;
}

#territory-view.active .territory-city-focus-head p,
#territory-view.active .territory-city-action-summary span {
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

@media (max-width: 380px) {
    #territory-view.active .territory-topbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Exploration compact override */
.territory-explore-mode .territory-feature-nav {
    height: 88px !important;
}

.territory-explore-mode .territory-feature-nav .main-road {
    display: none !important;
}

.territory-explore-mode .territory-feature-nav-item {
    width: 78px !important;
    min-height: 36px !important;
}

.territory-explore-mode .territory-feature-nav-item span {
    font-size: 11px !important;
}

.territory-explore-mode .territory-feature-nav-item small {
    font-size: 8px !important;
}

.territory-explore-board {
    grid-template-columns: repeat(var(--explore-cols, 13), 40px) !important;
    grid-auto-rows: 40px !important;
}

.territory-explore-cell {
    inline-size: 40px !important;
    block-size: 40px !important;
    font-size: 9px !important;
}

.territory-explore-cell.route i {
    font-size: 11px !important;
}

.territory-explore-cell.route em {
    font-size: 7px !important;
}

.territory-explore-building-list article {
    grid-template-columns: 28px minmax(0, 1fr) !important;
}

.territory-explore-building-list strong {
    font-size: 12px !important;
}

.territory-explore-building-list span {
    font-size: 11px !important;
}

.territory-explore-auto-note {
    display: block !important;
    margin-top: 4px !important;
    color: #8c7f67 !important;
    font-size: 10px !important;
}

/* Final main-city header override: keep the top summary readable in the fixed 450px shell. */
#territory-view.active .territory-city-map-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: start !important;
    margin-bottom: 8px !important;
}

#territory-view.active .territory-city-map-head > div:first-child {
    min-width: 0 !important;
}

#territory-view.active .territory-city-map-head h3 {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #fff1c4 !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all !important;
}

#territory-view.active .territory-city-map-head h3 i {
    flex: 0 0 auto !important;
}

#territory-view.active .territory-city-map-head p {
    margin: 3px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

#territory-view.active .territory-city-map-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#territory-view.active .territory-city-map-tools span,
#territory-view.active .territory-city-map-tools button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#territory-view.active .territory-city-map-tools span:first-child {
    grid-column: 1 / 2 !important;
}

#territory-view.active .territory-city-map-tools span:last-of-type {
    grid-column: 2 / 3 !important;
}

#territory-view.active .territory-city-map-tools button {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    border-radius: 7px !important;
}

#territory-view.active .territory-city-map-tools em {
    display: none !important;
}

/* Main-city focus card: stretch horizontally so the current building title can read normally. */
#territory-view.active .territory-city-building-title {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
}

#territory-view.active .territory-city-building-title .territory-city-focus-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
}

#territory-view.active .territory-city-building-title .territory-city-focus-head > div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
}

#territory-view.active .territory-city-building-title .territory-city-focus-head h4 {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all !important;
}

#territory-view.active .territory-city-building-title .territory-city-focus-head p {
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

#territory-view.active .territory-city-building-title .territory-city-building-status {
    justify-self: start !important;
    margin-top: 2px !important;
    width: fit-content !important;
}

/* Territory herb field: compact sandtable with one shared detail panel. */
#territory-view.active .territory-farm-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(206, 170, 95, 0.24);
    border-radius: 9px;
    background:
        radial-gradient(circle at 12% 18%, rgba(91, 126, 70, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(31, 36, 29, 0.98), rgba(18, 22, 20, 0.98));
    box-shadow: inset 0 1px rgba(255, 241, 196, 0.04);
}

#territory-view.active .territory-farm-title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

#territory-view.active .territory-farm-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0 0;
    color: #fff1c4;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
}

#territory-view.active .territory-farm-head h3 i {
    color: #91c878;
}

#territory-view.active .territory-farm-title-row p {
    min-width: 0;
    margin: 0;
    color: #b9ad94;
    font-size: 11px;
    line-height: 1.45;
    white-space: normal;
}

#territory-view.active .territory-farm-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
}

#territory-view.active .territory-farm-metrics span {
    min-width: 0;
    min-height: 50px;
    padding: 7px 9px;
    border: 1px solid rgba(206, 170, 95, 0.16);
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.055);
}

#territory-view.active .territory-farm-metrics em,
#territory-view.active .territory-farm-metrics b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

#territory-view.active .territory-farm-metrics em {
    color: #a99d85;
    font-size: 10px;
}

#territory-view.active .territory-farm-metrics b {
    margin-top: 3px;
    color: #f4d58c;
    font-size: 15px;
}

#territory-view.active .territory-farm-stock {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

#territory-view.active .territory-farm-stock-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    min-width: 0;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(145, 200, 120, 0.3);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(31, 47, 31, 0.94), rgba(18, 22, 20, 0.86));
    box-shadow: inset 0 0 18px rgba(89, 147, 73, 0.08);
}

#territory-view.active .territory-farm-stock-card i {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(91, 126, 70, 0.2);
    color: #91c878;
}

#territory-view.active .territory-farm-stock-card select,
#territory-view.active .territory-farm-stock-card > span,
#territory-view.active .territory-farm-stock-card b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#territory-view.active .territory-farm-stock-card select {
    width: 100%;
    padding: 0 18px 1px 0;
    border: 0;
    background: transparent;
    color: #b9cfae;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    outline: none;
}

#territory-view.active .territory-farm-stock-card > span {
    color: #b9cfae;
    font-size: 11px;
}

#territory-view.active .territory-farm-fertilizer-stock-card {
    border-color: rgba(206, 170, 95, 0.28);
    background: linear-gradient(135deg, rgba(49, 42, 28, 0.94), rgba(23, 25, 20, 0.88));
}

#territory-view.active .territory-farm-fertilizer-stock-card i {
    color: #e2be69;
    background: rgba(206, 170, 95, 0.14);
}

#territory-view.active .territory-farm-stock-card select option {
    background: #171d18;
    color: #e8eedf;
}

#territory-view.active .territory-farm-stock-card b {
    color: #f4df9b;
    font-size: 16px;
    line-height: 1.15;
}

#territory-view.active .territory-farm-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px;
    border-color: rgba(206, 170, 95, 0.2);
    background: rgba(15, 19, 17, 0.82);
}

#territory-view.active .territory-farm-setting-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(206, 170, 95, 0.14);
    border-radius: 8px;
    background: rgba(255, 234, 181, 0.035);
}

#territory-view.active .territory-farm-setting-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

#territory-view.active .territory-farm-setting-head > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d8c9a9;
    font-size: 11px;
    white-space: nowrap;
}

#territory-view.active .territory-farm-setting-head > span i {
    color: #91c878;
}

#territory-view.active .territory-farm-setting-head select {
    width: 100%;
    min-width: 0;
}

#territory-view.active .territory-farm-setting-card p {
    min-height: 45px;
    margin: 0;
    color: #a99d85;
    font-size: 10px;
    line-height: 1.45;
}

#territory-view.active .territory-farm-automation-row,
#territory-view.active .territory-farm-batch-row {
    grid-column: 1 / -1;
    display: grid;
    gap: 7px;
}

#territory-view.active .territory-farm-automation-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#territory-view.active .territory-farm-batch-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#territory-view.active .territory-fertilize-minimum-option {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(145, 200, 120, 0.24);
    border-radius: 9px;
    background: rgba(31, 48, 28, 0.38);
    color: #d8c9a9;
    cursor: pointer;
}

#territory-view.active .territory-fertilize-minimum-option input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
}

#territory-view.active .territory-fertilize-minimum-option span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#territory-view.active .territory-fertilize-minimum-option strong {
    color: #dceecf;
    font-size: 11px;
}

#territory-view.active .territory-fertilize-minimum-option small {
    color: #a99d85;
    font-size: 10px;
    line-height: 1.45;
}

#territory-view.active .territory-farm-automation-row label,
#territory-view.active .territory-farm-batch-row button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

#territory-view.active .territory-farm-automation-row label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #d8c9a9;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

#territory-view.active .territory-farm-automation-row input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
}
#territory-view.active .territory-farm-workspace {
    display: grid;
    gap: 9px;
}

#territory-view.active .territory-herb-field-shell,
#territory-view.active .territory-farm-detail {
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 10px;
    background:
        linear-gradient(rgba(255, 234, 181, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 234, 181, 0.025) 1px, transparent 1px),
        rgba(15, 19, 17, 0.9);
    background-size: 20px 20px, 20px 20px, auto;
    box-shadow: inset 0 1px rgba(255, 241, 196, 0.04);
}

#territory-view.active .territory-herb-field-shell {
    padding: 9px;
}

#territory-view.active .territory-herb-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #d9c69b;
    font-size: 11px;
}

#territory-view.active .territory-herb-field-head div,
#territory-view.active .territory-herb-field-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#territory-view.active .territory-herb-field-head strong {
    color: #fff1c4;
    font-size: 12px;
}

#territory-view.active .territory-herb-field-head span {
    color: #8f856f;
    font-size: 10px;
}

#territory-view.active .territory-herb-field {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

#territory-view.active .territory-herb-plot {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 70px;
    padding: 7px 3px 6px;
    overflow: hidden;
    border: 1px solid rgba(143, 104, 58, 0.68);
    border-radius: 7px;
    color: #d8c9a9;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(25, 13, 7, 0.4) 16% 20%, transparent 20% 46%, rgba(25, 13, 7, 0.4) 46% 50%, transparent 50% 76%, rgba(25, 13, 7, 0.4) 76% 80%, transparent 80%),
        linear-gradient(180deg, #5a3d24, #2c1e15);
    box-shadow: inset 0 1px rgba(241, 194, 118, 0.13), inset 0 -8px rgba(14, 9, 7, 0.16);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#territory-view.active .territory-herb-plot:hover {
    z-index: 2;
    transform: translateY(-1px);
    border-color: rgba(224, 188, 111, 0.8);
    filter: brightness(1.08);
}

#territory-view.active .territory-herb-plot.selected {
    z-index: 3;
    border-color: #f0c96f;
    box-shadow: 0 0 0 2px rgba(240, 201, 111, 0.2), inset 0 1px rgba(255, 240, 184, 0.22);
}

#territory-view.active .territory-herb-plot.ready {
    border-color: #d9b663;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(25, 13, 7, 0.34) 16% 20%, transparent 20% 46%, rgba(25, 13, 7, 0.34) 46% 50%, transparent 50% 76%, rgba(25, 13, 7, 0.34) 76% 80%, transparent 80%),
        linear-gradient(180deg, #66502b, #352719);
    animation: territory-farm-ready-pulse 1.8s ease-in-out infinite;
}

@keyframes territory-farm-ready-pulse {
    50% { box-shadow: 0 0 0 2px rgba(217, 182, 99, 0.14), inset 0 1px rgba(255, 240, 184, 0.2); }
}

#territory-view.active .territory-herb-plot.locked {
    opacity: 0.48;
    border-style: dashed;
    color: #756c5c;
    background: rgba(27, 25, 21, 0.82);
}

#territory-view.active .territory-herb-plot-number {
    position: absolute;
    top: 3px;
    left: 4px;
    color: rgba(255, 234, 181, 0.42);
    font-size: 8px;
    line-height: 1;
}

#territory-view.active .territory-herb-soil {
    position: absolute;
    inset: auto 5px 17px;
    display: flex;
    justify-content: space-around;
    height: 13px;
    opacity: 0.48;
    pointer-events: none;
}

#territory-view.active .territory-herb-soil i {
    width: 2px;
    border-radius: 50%;
    background: rgba(20, 12, 7, 0.75);
    transform: skewX(-12deg);
}

#territory-view.active .territory-herb-crop {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: #91c878;
    background: rgba(22, 34, 22, 0.62);
    font-size: 16px;
    text-shadow: 0 1px 6px rgba(92, 154, 72, 0.42);
}

#territory-view.active .territory-herb-plot.empty .territory-herb-crop {
    color: #82745e;
    background: rgba(26, 22, 18, 0.55);
    opacity: 0.62;
}

#territory-view.active .territory-herb-plot.ready .territory-herb-crop {
    color: #f0d174;
    text-shadow: 0 0 8px rgba(240, 209, 116, 0.5);
}

#territory-view.active .territory-herb-plot strong,
#territory-view.active .territory-herb-plot small {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#territory-view.active .territory-herb-plot strong {
    color: #f0dfb6;
    font-size: 9px;
    line-height: 1.1;
}

#territory-view.active .territory-herb-plot small {
    color: #a99d85;
    font-size: 8px;
    line-height: 1.1;
}

#territory-view.active .territory-herb-plot.ready small {
    color: #f0d174;
}

#territory-view.active .territory-herb-growth {
    position: absolute;
    right: 4px;
    bottom: 3px;
    left: 4px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(8, 10, 8, 0.55);
}

#territory-view.active .territory-herb-growth i {
    display: block;
    width: var(--plot-growth);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5d914b, #b9d77f);
}

#territory-view.active .territory-farm-detail {
    display: grid;
    gap: 9px;
    padding: 11px;
}

#territory-view.active .territory-farm-detail.ready {
    border-color: rgba(217, 182, 99, 0.5);
}

#territory-view.active .territory-farm-detail-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

#territory-view.active .territory-farm-detail-head > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(145, 200, 120, 0.26);
    border-radius: 9px;
    color: #91c878;
    background: rgba(91, 126, 70, 0.18);
    font-size: 18px;
}

#territory-view.active .territory-farm-detail-head em,
#territory-view.active .territory-farm-detail-head h4,
#territory-view.active .territory-farm-detail-head p {
    display: block;
    min-width: 0;
    margin: 0;
    font-style: normal;
}

#territory-view.active .territory-farm-detail-head em {
    color: #978c76;
    font-size: 9px;
    letter-spacing: 0.08em;
}

#territory-view.active .territory-farm-detail-head h4 {
    margin-top: 2px;
    color: #fff1c4;
    font-size: 15px;
}

#territory-view.active .territory-farm-detail-head p {
    margin-top: 3px;
    color: #b9ad94;
    font-size: 10px;
    line-height: 1.25;
}

#territory-view.active .territory-farm-detail-head > b {
    align-self: start;
    padding: 4px 7px;
    border: 1px solid rgba(206, 170, 95, 0.22);
    border-radius: 999px;
    color: #e7c977;
    background: rgba(206, 170, 95, 0.09);
    font-size: 10px;
    white-space: nowrap;
}

#territory-view.active .territory-farm-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

#territory-view.active .territory-farm-detail-stats > span {
    min-width: 0;
    min-height: 43px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 234, 181, 0.1);
    border-radius: 7px;
    background: rgba(255, 234, 181, 0.035);
}

#territory-view.active .territory-farm-detail-stats em,
#territory-view.active .territory-farm-detail-stats strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

#territory-view.active .territory-farm-detail-stats em {
    color: #918670;
    font-size: 9px;
}

#territory-view.active .territory-farm-detail-stats strong {
    margin-top: 3px;
    color: #e8d7ae;
    font-size: 10px;
}

#territory-view.active .territory-farm-detail-stats .territory-pill {
    min-height: 18px;
    padding: 1px 4px;
    font-size: 9px;
}

#territory-view.active .territory-farm-detail-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(5, 8, 6, 0.72);
}

#territory-view.active .territory-farm-detail-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f7f43, #a9cf70);
}

#territory-view.active .territory-farm-detail-cost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #9c9079;
    font-size: 10px;
}

#territory-view.active .territory-farm-detail-cost .territory-cost-row {
    justify-content: flex-end;
}

#territory-view.active .territory-farm-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.75fr));
    gap: 6px;
}

#territory-view.active .territory-farm-detail-actions select,
#territory-view.active .territory-farm-detail-actions button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

#territory-view.active .territory-farm-detail.empty {
    place-items: center;
    min-height: 90px;
    color: #918670;
}

#territory-view.active .territory-farm-unlock-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

#territory-view.active .territory-farm-unlock-card > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(197, 159, 83, 0.28);
    border-radius: 10px;
    background: rgba(20, 16, 10, 0.7);
}

#territory-view.active .territory-farm-unlock-card span,
#territory-view.active .territory-farm-unlock-card strong,
#territory-view.active .territory-farm-unlock-card small {
    display: block;
}

#territory-view.active .territory-farm-unlock-card span,
#territory-view.active .territory-farm-unlock-card small,
#territory-view.active .territory-farm-unlock-rule {
    color: var(--territory-muted);
}

#territory-view.active .territory-farm-unlock-card strong {
    margin: 4px 0;
    color: #f0d998;
}

#territory-view.active .territory-farm-unlock-card small,
#territory-view.active .territory-farm-unlock-rule {
    font-size: 12px;
    line-height: 1.55;
}

#territory-view.active .territory-farm-unlock-rule {
    margin: 10px 0 0;
}

#territory-view.active .territory-farm-unlock-go {
    width: 100%;
    margin-top: 12px;
}

@media (max-width: 520px) {
    #territory-view.active .territory-farm-unlock-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    #territory-view.active .territory-farm-stock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #territory-view.active .territory-farm-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    #territory-view.active .territory-farm-title-row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
    }

    #territory-view.active .territory-farm-title-row p {
        font-size: 10px;
    }

    #territory-view.active .territory-farm-stock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    #territory-view.active .territory-farm-stock-card {
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 4px;
        padding: 6px 4px;
    }

    #territory-view.active .territory-farm-stock-card i {
        width: 24px;
        height: 24px;
    }

    #territory-view.active .territory-farm-stock-card select {
        font-size: 9px;
    }

    #territory-view.active .territory-farm-stock-card > span {
        font-size: 9px;
    }

    #territory-view.active .territory-farm-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    #territory-view.active .territory-farm-setting-card,
    #territory-view.active .territory-farm-automation-row,
    #territory-view.active .territory-farm-batch-row {
        grid-column: 1 / -1;
    }

    #territory-view.active .territory-farm-batch-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #territory-view.active .territory-herb-field {
        gap: 4px;
    }

    #territory-view.active .territory-herb-plot {
        min-height: 64px;
        padding-inline: 2px;
    }

    #territory-view.active .territory-herb-plot strong {
        font-size: 8px;
    }

    #territory-view.active .territory-farm-detail-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #territory-view.active .territory-farm-detail-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #territory-view.active .territory-farm-detail-actions select {
        grid-column: 1 / -1;
    }
}
/* Attribute source accounting dropdown. */
#top-bar-attribute-source-dropdown {
    right: 72px;
    width: min(420px, calc(100vw - 16px));
    max-height: min(620px, calc(100vh - var(--top-bar-height) - 18px));
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

.attribute-source-dropdown-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #f0d58d;
    font-size: 16px;
    font-weight: 700;
}

.attribute-source-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(206, 170, 95, 0.2);
    border-radius: 8px;
    color: #c9bda3;
    background: rgba(206, 170, 95, 0.06);
    font-size: 13px;
    line-height: 1.45;
}

.attribute-source-note i { margin-top: 3px; color: #d9b663; }
.attribute-source-accordion { display: grid; gap: 9px; }
.attribute-source-section { overflow: hidden; border: 1px solid rgba(206,170,95,.22); border-radius: 9px; background: rgba(17,21,19,.86); }
.attribute-source-section summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; list-style: none; color: #e8d7ae; font-size: 14px; font-weight: 700; background: rgba(255,234,181,.055); }
.attribute-source-section summary::-webkit-details-marker { display: none; }
.attribute-source-section summary i { color: #bda466; transition: transform .2s; }
.attribute-source-section[open] summary i { transform: rotate(90deg); }
.attribute-source-section summary strong { color: #f1cd76; font: 700 13px Consolas,'Courier New',monospace; white-space: nowrap; }
.attribute-source-section[open] summary { border-bottom: 1px solid rgba(206,170,95,.14); }
.attribute-source-list { display: grid; }
.attribute-source-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 9px; align-items: center; min-height: 46px; padding: 7px 10px; border-bottom: 1px solid rgba(255,234,181,.075); }
.attribute-source-row:last-child { border-bottom: 0; }
.attribute-source-row > span { min-width: 0; color: #d2c6ae; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.attribute-source-value { display: grid; justify-items: end; min-width: 0; }
.attribute-source-value strong, .attribute-source-value small { font-family: Consolas,'Courier New',monospace; white-space: nowrap; }
.attribute-source-value strong { color: #fff1c4; font-size: 13px; }
.attribute-source-section.multiplier .attribute-source-value strong { color: #91c878; }
.attribute-source-value small { margin-top: 2px; color: #948a76; font-size: 10px; }
.attribute-source-go { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 62px; padding: 6px 8px; border: 1px solid rgba(206,170,95,.35); border-radius: 6px; color: #ecd18a; background: rgba(206,170,95,.1); font-size: 12px; cursor: pointer; white-space: nowrap; }
.attribute-source-go:hover { border-color: rgba(232,197,111,.65); background: rgba(206,170,95,.2); }
.attribute-source-empty { padding: 14px 10px; color: #8f856f; font-size: 13px; text-align: center; }

@media (max-width: 560px) {
    #top-bar-attribute-source-dropdown { right: 0; width: min(410px, calc(100vw - 12px)); padding: 9px; }
    .attribute-source-row { grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; padding-inline: 8px; }
    .attribute-source-row > span, .attribute-source-value strong { font-size: 12px; }
    .attribute-source-go { min-width: 54px; padding-inline: 6px; font-size: 11px; }
}

/* Synthesis overflow guard: large counts must never widen the 430px workbench. */
#synthesis-view,
#synthesis-view #synthesis-content,
#synthesis-view .tab-content,
#synthesis-view .synthesis-new-shell,
#synthesis-view .synthesis-new-system-group,
#synthesis-view .synthesis-new-system-detail,
#synthesis-view .synthesis-new-detail-card,
#synthesis-view .synthesis-new-detail-body,
#synthesis-view .compose-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#synthesis-view .synthesis-new-detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

#synthesis-view .synthesis-new-detail-head > div,
#synthesis-view .synthesis-new-detail-head h4,
#synthesis-view .synthesis-new-detail-head p,
#synthesis-view .compose-recipe-row span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#synthesis-view .synthesis-new-badge {
    min-width: 0;
    max-width: 180px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

#synthesis-view .synthesis-new-shortcut em {
    max-width: calc(100% - 6px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#synthesis-view .compose-recipe-row {
    min-width: 0;
}

@media (max-width: 460px) {
    #synthesis-view .synthesis-new-detail-head {
        grid-template-columns: minmax(0, 1fr);
    }

    #synthesis-view .synthesis-new-badge {
        justify-self: start;
        max-width: 100%;
    }
}

/* Void abyss direct stage picker. */
.dungeon-void-stage-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: min(100%, 330px);
    margin: 8px auto 0;
    color: var(--color-text-muted, #b7aa92);
    font-size: 12px;
}

.dungeon-void-stage-picker span {
    white-space: nowrap;
}

.dungeon-void-stage-picker select {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid rgba(206, 170, 95, 0.35);
    border-radius: 7px;
    color: #f1dfb3;
    background: rgba(24, 19, 15, 0.92);
    font-size: 12px;
}

@media (max-width: 420px) {
    .dungeon-void-stage-picker {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* Alchemy furnace. */
#synthesis-view .alchemy-shell { display: grid; gap: 14px; max-width: 560px; margin: 0 auto; padding: 16px; overflow: hidden; }
#synthesis-view .alchemy-head { display: grid; gap: 5px; padding: 14px; border-radius: 12px; background: radial-gradient(circle at 85% 10%, rgba(104,160,91,.22), transparent 36%), linear-gradient(145deg, rgba(42,48,34,.98), rgba(24,27,22,.98)); }
#synthesis-view .alchemy-head > span { color: #91c878; font-size: 12px; }
#synthesis-view .alchemy-head h3 { margin: 0; color: #fff1c4; }
#synthesis-view .alchemy-head h3 i { color: #91c878; }
#synthesis-view .alchemy-head p { margin: 0; color: #c4baa4; font-size: 13px; line-height: 1.55; }
#synthesis-view .alchemy-resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#synthesis-view .alchemy-resource-grid > div { min-width: 0; padding: 11px; border: 1px solid rgba(145,200,120,.2); border-radius: 9px; background: rgba(19,24,18,.82); }
#synthesis-view .alchemy-resource-grid span, #synthesis-view .alchemy-resource-grid strong, #synthesis-view .alchemy-resource-grid small { display: block; overflow-wrap: anywhere; }
#synthesis-view .alchemy-resource-grid span { color: #aaa08c; font-size: 11px; }
#synthesis-view .alchemy-resource-grid strong { margin: 3px 0; color: #f2d883; font-size: 17px; }
#synthesis-view .alchemy-resource-grid small { color: #918875; font-size: 10px; }
#synthesis-view .alchemy-recipe-card { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(206,170,95,.24); border-radius: 12px; background: rgba(35,27,21,.94); }
#synthesis-view .alchemy-recipe-card h4 { margin: 0 0 4px; color: #f1d58b; }
#synthesis-view .alchemy-recipe-card p { margin: 0; color: #bcb09a; font-size: 12px; line-height: 1.5; }
#synthesis-view .alchemy-formula { display: flex; align-items: center; justify-content: center; gap: 12px; color: #ead49d; }
#synthesis-view .alchemy-formula i { color: #91c878; }
#synthesis-view .alchemy-actions { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(110px,auto); gap: 7px; }
#synthesis-view .alchemy-actions input, #synthesis-view .alchemy-actions button { min-width: 0; margin: 0; }
@media (max-width: 460px) { #synthesis-view .alchemy-resource-grid { grid-template-columns: 1fr; } #synthesis-view .alchemy-actions { grid-template-columns: minmax(0,1fr) auto; } #synthesis-view .alchemy-actions button:last-child { grid-column: 1 / -1; } }
.territory-shop{padding:14px;border:1px solid rgba(154,121,74,.35);border-radius:14px;background:linear-gradient(145deg,rgba(42,35,25,.94),rgba(25,30,24,.96));color:#eadbbd}
.territory-shop>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.territory-shop>header div{display:flex;align-items:center;gap:8px;font-size:16px}.territory-shop>header span{color:#c7b58f;font-size:13px}
.territory-shop-grid{display:grid;gap:9px}.territory-shop-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px;border:1px solid rgba(217,188,126,.18);border-radius:10px;background:rgba(255,255,255,.035)}
.territory-shop-item>i{color:#d8b66c;font-size:20px;text-align:center}.territory-shop-item strong{display:block;font-size:15px;color:#f2dfb5}.territory-shop-item p{margin:3px 0;color:#bfb49f;font-size:12px;line-height:1.4}.territory-shop-item span{color:#dfc17c;font-size:13px}
.territory-shop-item label{display:flex;align-items:center;gap:5px;color:#cfc2a8;font-size:12px}.territory-shop-item input[data-territory-shop-count]{width:92px;min-width:76px;height:34px;padding:5px 8px;border:1px solid rgba(217,188,126,.28);border-radius:7px;background:rgba(18,21,18,.86);color:#f3dfb3;font:inherit;font-size:13px;font-weight:800}.territory-shop-item input[data-territory-shop-count]:focus{outline:1px solid rgba(231,185,91,.72);outline-offset:1px}.territory-shop-item button{white-space:nowrap}.territory-shop-compact{grid-column:1/-1}
@media(max-width:760px){.territory-shop-item{grid-template-columns:28px minmax(0,1fr)}.territory-shop-item label,.territory-shop-item button{grid-column:2}}
.territory-city-map-viewport .territory-city-grid-map {
    width: 1100px !important;
    min-width: 1100px !important;
    height: 760px !important;
    min-height: 760px !important;
}

.cultivation-realm-breakdown { margin-top: 14px; border: 1px solid rgba(111,211,196,.22); border-radius: 14px; background: rgba(8,17,24,.42); overflow: hidden; }
.cultivation-realm-breakdown summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; cursor:pointer; color:#dffbf4; font-weight:700; }
.cultivation-realm-breakdown summary small { color:#76dfcb; font-weight:500; }
.cultivation-realm-breakdown-list { display:grid; gap:7px; padding:0 13px 13px; }
.cultivation-realm-breakdown-list article { display:grid; grid-template-columns:minmax(90px,1fr) auto auto; gap:10px; align-items:center; padding:9px 10px; border-radius:9px; background:rgba(255,255,255,.035); color:#c7d4d4; }
.cultivation-realm-breakdown-list article.current { box-shadow:inset 3px 0 #69dac6; background:rgba(72,180,159,.09); }
.cultivation-realm-breakdown-list strong { color:#fff2c7; }
.cultivation-pill-panel { margin-top:7px; padding:0; border:1px solid rgba(223,190,112,.25); border-radius:13px; background:rgba(47,35,22,.38); overflow:hidden; }
.cultivation-pill-panel summary { display:flex; justify-content:space-between; gap:12px; padding:11px 13px; cursor:pointer; color:#f6dfa5; }
.cultivation-pill-content { padding:0 13px 13px; }
.cultivation-pill-panel p { margin:0 0 10px; color:#c9c2ae; line-height:1.55; }
.cultivation-pill-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:stretch; }
.cultivation-pill-actions input { width:100%; min-width:0; grid-column:1 / -1; box-sizing:border-box; padding:10px 12px; }
.cultivation-pill-actions button { min-width:0; white-space:normal; overflow-wrap:anywhere; padding-left:8px; padding-right:8px; }
@media(max-width:560px){.cultivation-realm-breakdown-list article{grid-template-columns:1fr auto}.cultivation-realm-breakdown-list article span:last-child{grid-column:1/-1}.cultivation-pill-actions{grid-template-columns:1fr 1fr}.cultivation-pill-actions input{grid-column:1/-1}}

#attribute-rank.panel:has(.cultivation-shell), .system-quick-content.panel:has(.cultivation-shell), .cultivation-shell, .cultivation-stage, .cultivation-realm-panel, .cultivation-realm-breakdown, .cultivation-realm-breakdown-list { min-width:0 !important; max-width:100% !important; overflow-x:hidden !important; }
.cultivation-realm-breakdown-list article { min-width:0 !important; grid-template-columns:minmax(0,1fr) auto minmax(0,auto) !important; }
.cultivation-realm-breakdown-list article span, .cultivation-realm-breakdown-list article strong { min-width:0 !important; overflow-wrap:anywhere !important; }
.territory-shop-compact > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }
.territory-shop-compact > summary::-webkit-details-marker { display:none; }
.territory-shop-compact > summary::after { content:"展开"; flex:0 0 auto; color:#dfc17c; font-size:12px; }
.territory-shop-compact[open] > summary::after { content:"收起"; }
.territory-shop-compact > summary > div { display:flex; align-items:center; gap:8px; font-size:16px; }
.territory-shop-compact > summary > span { min-width:0; color:#c7b58f; font-size:12px; text-align:right; }
.territory-shop-compact[open] > summary { margin-bottom:10px; }

/* Territory rebuilt map clamp */
#territory-view.active .territory-city-map-viewport { overflow:auto !important; touch-action:pan-x pan-y; overscroll-behavior:contain; }
#territory-view.active .territory-city-grid-map,
.territory-city-map-viewport .territory-city-grid-map { width:1100px !important; min-width:1100px !important; max-width:none !important; height:760px !important; min-height:760px !important; transform:none !important; }

/* 魔法暴龙欧米茄 · 每日单人Boss */
.omega-boss-panel{display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(300px,.95fr);gap:18px;padding:18px;border:1px solid rgba(120,91,255,.35);border-radius:18px;background:linear-gradient(145deg,rgba(15,11,34,.98),rgba(25,16,48,.96));box-shadow:0 18px 48px rgba(9,5,24,.35);overflow:hidden}.omega-boss-stage{position:relative;min-height:360px;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(100,60,255,.35),transparent 36%),linear-gradient(180deg,#080816,#15102c 65%,#080812);isolation:isolate}.omega-boss-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(126,99,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(126,99,255,.08) 1px,transparent 1px);background-size:28px 28px;transform:perspective(420px) rotateX(62deg) scale(1.7);transform-origin:bottom;opacity:.65}.omega-energy-ring{position:absolute;left:50%;top:46%;width:230px;height:230px;border:2px solid rgba(114,81,255,.55);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 24px #774dff,inset 0 0 20px #4c2ed1;animation:omega-ring 6s linear infinite}.omega-energy-ring.ring-b{width:290px;height:290px;border-style:dashed;animation-direction:reverse;animation-duration:9s;opacity:.55}.omega-dinosaur{position:absolute;left:50%;top:49%;width:190px;height:190px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 18px rgba(126,78,255,.9));z-index:2;transition:filter .25s,opacity .25s,transform .4s}.omega-body{position:absolute;left:52px;top:60px;width:100px;height:92px;border-radius:52% 48% 44% 56%;background:linear-gradient(135deg,#9d73ff,#4723a7 58%,#21105f);border:3px solid #c9b3ff;box-shadow:inset -12px -10px 0 rgba(18,7,65,.45)}.omega-head{position:absolute;left:18px;top:24px;width:82px;height:64px;border-radius:58% 42% 48% 52%;background:linear-gradient(145deg,#b08bff,#5931bf);border:3px solid #d8c9ff;transform:rotate(-8deg);z-index:3}.omega-head:before{content:"";position:absolute;right:-18px;top:8px;border-left:30px solid #6b42d2;border-top:13px solid transparent;border-bottom:13px solid transparent}.omega-head:after{content:"";position:absolute;left:22px;top:18px;width:10px;height:10px;border-radius:50%;background:#f9f1ff;box-shadow:0 0 10px #fff}.omega-head i,.omega-body:after{position:absolute;content:"";display:block}.omega-head i{left:8px;top:-22px;width:18px;height:30px;background:#7449df;clip-path:polygon(50% 0,100% 100%,0 100%)}.omega-body:after{right:14px;top:18px;width:30px;height:38px;border:3px solid rgba(235,226,255,.8);border-radius:50%;box-shadow:0 0 12px #b38cff}.omega-tail{position:absolute;right:-28px;top:87px;width:92px;height:34px;background:linear-gradient(90deg,#5530bd,#8a5cf0);clip-path:polygon(0 14%,100% 50%,0 86%);transform:rotate(10deg);z-index:-1}.omega-arm,.omega-leg{position:absolute;background:linear-gradient(#8154e3,#3b1b91);border:2px solid #bca1ff;transform-origin:top}.omega-arm{width:20px;height:58px;border-radius:12px;top:86px;z-index:4}.omega-arm.arm-a{left:64px;transform:rotate(34deg)}.omega-arm.arm-b{left:132px;transform:rotate(-32deg)}.omega-leg{width:30px;height:70px;border-radius:16px;top:128px}.omega-leg.leg-a{left:65px;transform:rotate(10deg)}.omega-leg.leg-b{left:120px;transform:rotate(-10deg)}.omega-damage-float{position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:6;font-size:clamp(22px,4vw,40px);font-weight:900;color:#fff;text-shadow:0 0 8px #ff4fd8,0 0 20px #802cff;opacity:.9}.omega-tier-counter{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;padding:8px 18px;border:1px solid rgba(205,187,255,.5);border-radius:999px;background:rgba(8,5,24,.72);font-size:16px;color:#d8ccff}.omega-tier-counter strong{font-size:22px;color:#fff}.omega-shatter{position:absolute;left:50%;top:48%;z-index:5}.omega-shatter i{position:absolute;width:26px;height:34px;background:linear-gradient(135deg,#d8c8ff,#6639db);clip-path:polygon(50% 0,100% 38%,72% 100%,0 72%);opacity:0}.omega-boss-copy{display:flex;flex-direction:column;justify-content:center;gap:12px}.omega-boss-copy h3{margin:0;font-size:30px;color:#eee8ff}.omega-boss-copy p{margin:0;color:#bdb4d8;line-height:1.75}.omega-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.omega-stat-grid div{padding:12px;border:1px solid rgba(133,103,224,.25);border-radius:12px;background:rgba(255,255,255,.035)}.omega-stat-grid span{display:block;font-size:12px;color:#9b91bd}.omega-stat-grid strong{display:block;margin-top:4px;color:#fff}.omega-attack-button{min-height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,#8f5cff,#d43bd5);color:#fff;font-size:18px;font-weight:800;box-shadow:0 10px 24px rgba(119,54,229,.35);cursor:pointer}.omega-attack-button:disabled{filter:grayscale(.75);opacity:.55;cursor:not-allowed}.omega-pill-cap-summary,.omega-milestone-list{grid-column:1/-1;padding:14px;border:1px solid rgba(126,94,218,.22);border-radius:14px;background:rgba(255,255,255,.025)}.omega-pill-cap-summary h4,.omega-milestone-list h4{margin:0 0 10px;color:#e8e0ff}.omega-pill-cap-summary>div{display:flex;flex-wrap:wrap;gap:8px}.omega-pill-cap-summary span{padding:7px 10px;border-radius:999px;background:rgba(112,74,208,.16);color:#cfc3ec}.omega-pill-cap-summary strong{color:#fff}.omega-milestone{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}.omega-milestone:first-of-type{border-top:0}.omega-milestone p{margin:3px 0 0;color:#9e95b7}.omega-milestone button{white-space:nowrap}.omega-milestone.reached strong{color:#c9b4ff}.omega-milestone.claimed{opacity:.65}.omega-resolving .omega-damage-float{animation:omega-damage-pop 3s ease-out both}.omega-resolving .omega-dinosaur{animation:omega-dino-break 3s ease-in forwards}.omega-resolving .omega-shatter i{animation:omega-piece 1.25s cubic-bezier(.2,.8,.2,1) 1.25s forwards;animation-delay:calc(1.15s + var(--piece)*25ms)}.omega-resolving .omega-energy-ring{animation-duration:.45s}.alchemy-recipe-list{display:grid;gap:14px}.alchemy-recipe-title{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}.alchemy-recipe-title>div{min-width:0}.alchemy-cap-badge{justify-self:start;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding:6px 10px;border-radius:12px;background:rgba(130,86,210,.12)}.alchemy-recipe-card.locked{opacity:.82}.alchemy-lock-note{color:#a99bbd}.cultivation-pill-actions{flex-wrap:wrap}.cultivation-pill-actions input{min-width:130px;flex:1 1 160px}
@keyframes omega-ring{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes omega-damage-pop{0%{opacity:0;transform:translate(-50%,30px) scale(.4)}18%{opacity:1;transform:translate(-50%,0) scale(1.18)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-55px) scale(.9)}}@keyframes omega-dino-break{0%,38%{opacity:1;transform:translate(-50%,-50%) scale(1)}48%{filter:brightness(4) drop-shadow(0 0 35px #fff);transform:translate(-50%,-50%) scale(1.08)}58%,100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}}@keyframes omega-piece{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.9)}}
@media(max-width:760px){.omega-boss-panel{grid-template-columns:1fr}.omega-boss-stage{min-height:300px}.omega-stat-grid{grid-template-columns:1fr 1fr}.omega-milestone{align-items:flex-start;flex-direction:column}.omega-milestone button{width:100%}.alchemy-recipe-title{flex-direction:column}.alchemy-cap-badge{white-space:normal}}
@media(prefers-reduced-motion:reduce){.omega-energy-ring,.omega-resolving .omega-damage-float,.omega-resolving .omega-dinosaur,.omega-resolving .omega-shatter i{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* 单人 Boss · 突破历史最高阶 */
.omega-tier-counter {
    display: grid;
    justify-items: center;
    min-width: 126px;
    transition: border-color .28s ease, background .28s ease, box-shadow .28s ease, color .28s ease;
}

.omega-tier-main {
    white-space: nowrap;
}

.omega-record-badge {
    display: block;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    color: #fff1a6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    opacity: 0;
    transform: translateY(5px) scale(.8);
}

.omega-tier-counter.omega-record-breakthrough {
    border-color: rgba(255, 221, 99, .95);
    background: linear-gradient(135deg, rgba(95, 56, 5, .94), rgba(31, 18, 2, .94));
    color: #ffe88a;
    box-shadow: 0 0 12px rgba(255, 191, 45, .75), 0 0 32px rgba(255, 139, 20, .42), inset 0 0 16px rgba(255, 224, 115, .12);
    animation: omega-record-counter-pulse .72s ease-out both;
}

.omega-tier-counter.omega-record-breakthrough strong {
    color: #fff0a3;
    text-shadow: 0 0 5px #fff8cb, 0 0 14px #ffc329, 0 0 30px rgba(255, 132, 0, .9);
}

.omega-tier-counter.omega-record-breakthrough .omega-record-badge {
    max-height: 18px;
    margin-bottom: 2px;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: omega-record-badge-in .32s cubic-bezier(.18, .9, .25, 1.25) both;
}

.omega-record-particles {
    position: absolute;
    left: 50%;
    bottom: 41px;
    z-index: 7;
    width: 0;
    height: 0;
    pointer-events: none;
}

.omega-record-particles i {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 12px;
    border-radius: 60% 10% 60% 10%;
    background: linear-gradient(180deg, #fffbd0, #ffd236 52%, #ff8a00);
    box-shadow: 0 0 8px #ffd83d;
    opacity: 0;
}

.omega-new-record .omega-record-particles i {
    animation: omega-record-spark 1.05s cubic-bezier(.12, .7, .2, 1) both;
    animation-delay: calc(var(--spark) * 18ms);
}

.omega-new-record .omega-boss-stage {
    animation: omega-record-stage-flash .8s ease-out both;
}

@keyframes omega-record-counter-pulse {
    0% { transform: translateX(-50%) scale(.86); filter: brightness(2.2); }
    58% { transform: translateX(-50%) scale(1.12); }
    100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
}

@keyframes omega-record-badge-in {
    0% { opacity: 0; transform: translateY(7px) scale(.65); }
    70% { opacity: 1; transform: translateY(-1px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes omega-record-spark {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.3); }
    16% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-r)) scale(.8); }
}

@keyframes omega-record-stage-flash {
    0% { box-shadow: inset 0 0 0 rgba(255, 211, 57, 0); }
    24% { box-shadow: inset 0 0 70px rgba(255, 208, 56, .42); }
    100% { box-shadow: inset 0 0 0 rgba(255, 211, 57, 0); }
}

@media (max-width: 560px) {
    .omega-tier-counter {
        min-width: 112px;
        padding: 7px 13px;
    }

    .omega-tier-counter strong {
        font-size: 20px;
    }

    .omega-record-particles {
        bottom: 38px;
        transform: scale(.82);
    }
}

@media (prefers-reduced-motion: reduce) {
    .omega-tier-counter.omega-record-breakthrough,
    .omega-tier-counter.omega-record-breakthrough .omega-record-badge,
    .omega-new-record .omega-record-particles i,
    .omega-new-record .omega-boss-stage {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
    }
}

/* 单人 Boss 独立页面与窄内容栏自适应 */
#solo-boss-view,
#solo-boss-content,
.solo-boss-page,
.solo-boss-page [data-solo-boss-detail],
.omega-boss-panel,
.omega-boss-stage,
.omega-boss-copy {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.solo-boss-page {
    display: grid;
    gap: 16px;
    width: 100%;
}

.solo-boss-page-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(120, 91, 255, .25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 15, 38, .96), rgba(31, 20, 54, .92));
}

.solo-boss-page-header > div {
    min-width: 0;
}

.solo-boss-page-header h2 {
    margin: 3px 0 6px;
    color: #f1ebff;
}

.solo-boss-page-header p {
    margin: 0;
    color: #bdb4d8;
    line-height: 1.65;
}

.omega-boss-panel {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    width: 100%;
}

.omega-boss-panel > * {
    min-width: 0;
}

.omega-damage-float {
    width: 90%;
    max-width: 90%;
    text-align: center;
    overflow-wrap: anywhere;
    font-size: clamp(20px, 5vw, 36px);
}

.omega-boss-copy h3,
.omega-boss-copy p,
.omega-stat-grid strong,
.omega-pill-cap-summary span,
.omega-milestone div {
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .solo-boss-page-header {
        flex-direction: column;
        padding: 14px;
    }

    .omega-boss-panel {
        padding: 12px;
    }
}


/* Dragon soul system tabs */
.dragon-system-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 5px;
    border: 1px solid rgba(232, 189, 104, 0.28);
    border-radius: 10px;
    background: rgba(13, 11, 16, 0.82);
}

.dragon-system-tabs button {
    flex: 1;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: rgba(244, 234, 219, 0.72);
    background: transparent;
    font-weight: 700;
}

.dragon-system-tabs button.active {
    color: #fff1c2;
    border-color: rgba(232, 189, 104, 0.58);
    background: linear-gradient(135deg, rgba(133, 48, 35, 0.9), rgba(42, 24, 28, 0.95));
    box-shadow: 0 0 18px rgba(232, 189, 104, 0.14);
}

.fentian-shell {
    --fentian-gold: #ffd36e;
    --fentian-red: #a93238;
    gap: 14px;
}

.fentian-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 138px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 211, 110, 0.46);
    border-radius: 12px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 211, 110, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(67, 21, 27, 0.98), rgba(21, 15, 24, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 241, 194, 0.12), 0 12px 30px rgba(0, 0, 0, 0.2);
}

.fentian-kicker {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--fentian-gold);
    font-size: 12px;
    letter-spacing: 0.12em;
}

.fentian-hero h4 {
    margin: 0 0 7px;
    color: #fff1c2;
    font-size: 26px;
}

.fentian-hero p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 241, 194, 0.76);
}

.fentian-mark-orb {
    display: grid;
    place-items: center;
    flex: 0 0 126px;
    width: 126px;
    height: 126px;
    border: 1px solid rgba(255, 211, 110, 0.7);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff6c8, #e5a735 34%, #7a2630 72%, #25141b);
    color: #291516;
    box-shadow: 0 0 30px rgba(255, 184, 68, 0.28), inset 0 0 20px rgba(255, 255, 255, 0.18);
}

.fentian-mark-orb span {
    font-size: 12px;
    font-weight: 700;
}

.fentian-mark-orb strong {
    max-width: 110px;
    overflow: hidden;
    color: #fff5cc;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fentian-mark-orb small {
    max-width: 108px;
    overflow: hidden;
    color: rgba(255, 245, 204, 0.8);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fentian-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fentian-card-heading strong {
    color: var(--fentian-gold);
    white-space: nowrap;
}

.fentian-rebirth-panel {
    border-color: rgba(255, 211, 110, 0.4);
    background: linear-gradient(180deg, rgba(61, 28, 29, 0.9), rgba(21, 18, 23, 0.96));
}

.fentian-highlight {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 211, 110, 0.08);
    color: #fff1c2 !important;
}

.fentian-expansion-card {
    min-width: 0;
    border-color: rgba(169, 50, 56, 0.42);
    background: linear-gradient(180deg, rgba(42, 23, 28, 0.95), rgba(20, 18, 23, 0.98));
}

.fentian-expansion-card p {
    min-height: 36px;
}

.fentian-effect-line {
    color: #ffe7a5 !important;
    font-size: 13px;
}

.fentian-expansion-progress {
    height: 12px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 211, 110, 0.28);
    border-radius: 999px;
    background: rgba(4, 4, 8, 0.72);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.55);
}

.fentian-expansion-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8c2f31, #dc7046 58%, #ffd36e);
    box-shadow: 0 0 12px rgba(255, 167, 74, 0.5);
    transition: width 0.35s ease;
}

.fentian-expansion-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    color: #d8c9b0;
    font-size: 13px;
}

.fentian-expansion-progress-copy strong {
    flex: 0 0 auto;
    color: var(--fentian-gold);
}

.fentian-expansion-progress-copy span {
    min-width: 0;
    text-align: right;
}

.fentian-treasure-panel {
    border-color: rgba(89, 198, 184, 0.38);
    background: linear-gradient(180deg, rgba(20, 42, 45, 0.88), rgba(18, 18, 22, 0.98));
}

.fentian-treasure-list {
    display: grid;
    gap: 6px;
    margin: 12px 0;
}

.fentian-treasure-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(244, 234, 219, 0.1);
    border-radius: 7px;
    color: rgba(244, 234, 219, 0.78);
}

.fentian-treasure-row > div {
    min-width: 0;
}

.fentian-treasure-row small {
    display: block;
    margin-top: 3px;
    color: #a9c9c1;
    font-size: 11px;
}

.fentian-treasure-row strong {
    white-space: nowrap;
}

.fentian-treasure-row em {
    padding: 2px 6px;
    border-radius: 999px;
    color: #151518;
    background: #ffd36e;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.fentian-treasure-row.next {
    border-color: rgba(255, 211, 110, 0.65);
    background: rgba(255, 211, 110, 0.08);
}

.fentian-treasure-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.fentian-treasure-actions .dragon-primary-action {
    min-width: 0;
}

.fentian-round-action {
    border-color: rgba(89, 198, 184, 0.72);
    background: linear-gradient(180deg, rgba(28, 126, 113, 0.96), rgba(17, 85, 78, 0.98));
    display: flex;
    min-height: 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: normal;
    line-height: 1.25;
}

.fentian-armor-panel {
    margin-top: 1rem;
}

.fentian-armor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
}

.fentian-armor-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    min-height: 88px;
    padding: .75rem .85rem;
    border: 1px solid rgba(111, 174, 255, .22);
    background: linear-gradient(145deg, rgba(22, 52, 94, .72), rgba(11, 24, 49, .72));
    border-radius: 8px;
}

.fentian-armor-card.claimed {
    border-color: rgba(255, 211, 110, .42);
    background: linear-gradient(145deg, rgba(90, 63, 20, .64), rgba(24, 29, 51, .82));
}

.fentian-armor-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: #ffe59a;
    border: 1px solid rgba(255, 218, 122, .72);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #fff8c9 0 8%, #e5a832 30%, #6f3518 72%, #251624 100%);
    box-shadow: 0 0 16px rgba(255, 195, 72, .36), inset 0 0 10px rgba(255, 245, 186, .26);
    font-size: 24px;
}

.fentian-armor-icon .item-pixel-icon-wrap {
    width: 48px;
    height: 48px;
}

.fentian-armor-icon .item-pixel-icon {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 4px rgba(67, 12, 8, .72));
}

.fentian-armor-main {
    min-width: 0;
}

.fentian-armor-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.fentian-armor-title span {
    color: #fff2bb;
    font-weight: 800;
}

.fentian-armor-title strong {
    color: var(--fentian-gold);
    white-space: nowrap;
}

.fentian-armor-card small {
    display: block;
    margin-top: .2rem;
    color: rgba(219, 234, 255, .74);
}

.fentian-armor-upgrade-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin: .7rem 0;
    padding: .65rem .75rem;
    border: 1px solid rgba(255, 211, 110, .3);
    border-radius: 8px;
    background: rgba(17, 23, 48, .72);
}

.fentian-armor-upgrade-bar span {
    display: grid;
    gap: .12rem;
}

.fentian-armor-upgrade-bar small,
.fentian-armor-upgrade-bar em {
    color: rgba(219, 234, 255, .72);
    font-size: 11px;
    font-style: normal;
}

.fentian-armor-upgrade-bar b {
    color: #fff2bb;
}

@media (max-width: 800px) {
    .fentian-armor-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .fentian-armor-icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }
    .fentian-armor-icon .item-pixel-icon-wrap {
        width: 40px;
        height: 40px;
    }
    .fentian-armor-icon .item-pixel-icon {
        width: 36px;
        height: 36px;
    }
    .fentian-armor-card > .dragon-primary-action {
        grid-column: 2;
        justify-self: start;
    }
    .fentian-armor-upgrade-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.fentian-round-action small {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.82;
}

.balance-shop-summary {
    margin-bottom: 14px;
    border-color: rgba(240, 192, 64, 0.4);
    background: linear-gradient(135deg, rgba(61, 45, 18, 0.9), rgba(23, 30, 44, 0.96));
}

.balance-shop-summary strong {
    color: #f0c040;
    font-size: 1.2em;
}

#shop-balance .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#shop-balance .shop-item-card {
    min-width: 0;
}

#shop-balance .batch-use-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(44px, auto);
    width: 100%;
    gap: 6px;
}

#shop-balance .batch-use-controls .batch-use-input,
#shop-balance .batch-use-controls button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: 0;
}

.dragon-claim-breakdown {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border-left: 2px solid rgba(89, 198, 184, 0.55);
    border-radius: 6px;
    background: rgba(89, 198, 184, 0.08);
    color: #b8d7cf;
    font-size: 12px;
    line-height: 1.55;
}

.dragon-difficulty-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 10px;
    border: 1px solid rgba(232, 189, 104, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
}

.dragon-difficulty-controls label,
.dragon-difficulty-controls span {
    color: rgba(244, 234, 219, 0.72);
    font-size: 12px;
}

.dragon-difficulty-controls input {
    width: 92px;
    min-height: 36px;
    color: #fff1c2;
    border-color: rgba(232, 189, 104, 0.38);
}

.dragon-difficulty-badge {
    color: var(--dragon-teal);
    font-size: 12px;
}

@media (max-width: 640px) {
    .fentian-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .fentian-mark-orb {
        align-self: center;
    }

    .fentian-treasure-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fentian-treasure-row em {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .fentian-treasure-actions {
        grid-template-columns: 1fr;
    }

    .dragon-difficulty-controls input {
        flex: 1 1 110px;
        width: auto;
    }
}


.fentian-rebirth-summary {
    margin: 8px 0 12px;
    color: #ffe7a5;
    line-height: 1.6;
}

.fentian-rebirth-details {
    margin: 8px 0 12px;
    border: 1px solid rgba(255, 211, 110, 0.16);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}

.fentian-rebirth-details > summary {
    padding: 9px 11px;
    cursor: pointer;
    color: #f6d98a;
    font-weight: 700;
    list-style-position: inside;
}

.fentian-rebirth-details[open] > summary {
    border-bottom: 1px solid rgba(255, 211, 110, 0.12);
}

.fentian-rebirth-data {
    padding: 4px 11px 8px;
}

.fentian-rebirth-data p {
    margin: 8px 0;
    line-height: 1.55;
}


/* Ancestral Dragon Phantom - solo boss */
.solo-boss-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}.solo-boss-tab{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:13px 16px;border:1px solid rgba(137,105,224,.28);border-radius:14px;background:linear-gradient(145deg,rgba(34,24,61,.9),rgba(17,12,32,.94));color:#d8cff2;text-align:left;cursor:pointer;transition:.2s ease}.solo-boss-tab i{grid-row:1/3;font-size:22px;color:#a889ff}.solo-boss-tab span{font-weight:800;font-size:15px}.solo-boss-tab em{font-size:12px;color:#9489b0;font-style:normal}.solo-boss-tab:hover,.solo-boss-tab.active{transform:translateY(-1px);border-color:#9a76ff;box-shadow:0 8px 24px rgba(94,55,184,.22)}.solo-boss-tab.active{background:linear-gradient(145deg,rgba(79,49,151,.68),rgba(31,20,65,.96))}.solo-boss-tab.ancestral-tab i{color:#ffc560}.solo-boss-tab.ancestral-tab.active{border-color:rgba(255,181,57,.72);background:linear-gradient(145deg,rgba(100,48,12,.72),rgba(30,14,9,.98));box-shadow:0 8px 28px rgba(191,74,12,.24)}
.ancestral-boss-panel{border-color:rgba(232,139,35,.46);background:linear-gradient(145deg,rgba(28,12,8,.99),rgba(58,23,9,.96));box-shadow:0 18px 52px rgba(35,8,3,.48)}.ancestral-boss-stage{background:radial-gradient(circle at 50% 43%,rgba(229,87,20,.38),transparent 34%),radial-gradient(circle at 50% 80%,rgba(255,184,63,.12),transparent 42%),linear-gradient(180deg,#090706,#241008 68%,#080403)}.ancestral-boss-stage:before{background:linear-gradient(rgba(255,172,60,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,172,60,.09) 1px,transparent 1px);background-size:30px 30px}.ancestral-soul-ring{position:absolute;left:50%;top:47%;width:245px;height:245px;border:2px solid rgba(255,171,49,.7);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 30px rgba(255,105,13,.75),inset 0 0 24px rgba(255,178,46,.4);animation:omega-ring 7s linear infinite}.ancestral-soul-ring.ring-b{width:310px;height:310px;border-style:dashed;border-color:rgba(186,44,12,.7);animation-direction:reverse;animation-duration:11s}.ancestral-tower-shadow{position:absolute;left:50%;bottom:-4px;width:260px;height:175px;transform:translateX(-50%);opacity:.28;filter:drop-shadow(0 0 12px #c44a11)}.ancestral-tower-shadow:before{content:"";position:absolute;left:102px;bottom:0;width:58px;height:150px;background:linear-gradient(#5a1b0b,#130604);clip-path:polygon(50% 0,66% 18%,66% 28%,100% 38%,84% 100%,16% 100%,0 38%,34% 28%,34% 18%)}.ancestral-tower-shadow i{position:absolute;bottom:0;width:38px;height:100px;background:#210906;clip-path:polygon(50% 0,68% 20%,68% 34%,100% 45%,82% 100%,18% 100%,0 45%,32% 34%,32% 20%)}.ancestral-tower-shadow i:nth-child(1){left:28px}.ancestral-tower-shadow i:nth-child(2){right:28px}.ancestral-tower-shadow i:nth-child(3){left:111px;height:175px;opacity:.55}
.ancestral-dragon{position:absolute;left:50%;top:47%;width:260px;height:210px;transform:translate(-50%,-50%);z-index:3;filter:drop-shadow(0 0 18px rgba(255,109,20,.9));transition:.35s}.ancestral-dragon-body{position:absolute;left:82px;top:76px;width:118px;height:72px;border:3px solid #ffd16a;border-radius:56% 44% 52% 48%;background:linear-gradient(145deg,#ffbd4b,#a52c0c 58%,#420b05);box-shadow:inset -16px -10px 0 rgba(57,5,3,.45)}.ancestral-dragon-body:after{content:"";position:absolute;inset:13px 25px;border:3px solid rgba(255,232,156,.65);border-radius:50%;transform:skewX(-20deg)}.ancestral-dragon-neck{position:absolute;left:58px;top:44px;width:72px;height:85px;border:18px solid #c74212;border-right:0;border-bottom-color:#f69b2f;border-radius:70% 0 0 30%;transform:rotate(-20deg)}.ancestral-dragon-head{position:absolute;left:26px;top:26px;width:76px;height:54px;border:3px solid #ffd77c;border-radius:60% 35% 52% 38%;background:linear-gradient(145deg,#ffcf64,#be380f 65%,#641006);transform:rotate(-10deg)}.ancestral-dragon-head:before,.ancestral-dragon-head:after{content:"";position:absolute;top:-24px;width:18px;height:34px;background:linear-gradient(#ffe7a5,#c34513);clip-path:polygon(50% 0,100% 100%,0 75%)}.ancestral-dragon-head:before{left:12px;transform:rotate(-20deg)}.ancestral-dragon-head:after{left:38px;transform:rotate(16deg)}.ancestral-dragon-head i{position:absolute;left:19px;top:17px;width:9px;height:9px;border-radius:50%;background:#fff9cf;box-shadow:0 0 12px #fff,0 0 20px #ff8a00}.ancestral-dragon-tail{position:absolute;right:-8px;top:90px;width:115px;height:46px;background:linear-gradient(90deg,#8d240b,#f28a22);clip-path:polygon(0 20%,100% 0,76% 48%,100% 78%,0 82%);transform:rotate(10deg)}.ancestral-dragon-wing{position:absolute;top:37px;width:96px;height:78px;background:linear-gradient(145deg,rgba(255,190,65,.95),rgba(139,30,8,.9));clip-path:polygon(0 100%,22% 0,48% 45%,76% 8%,100% 100%);z-index:-1}.ancestral-dragon-wing.wing-a{left:90px;transform:rotate(-11deg)}.ancestral-dragon-wing.wing-b{left:132px;transform:scaleX(-1) rotate(-7deg);opacity:.72}.ancestral-dragon-claw{position:absolute;top:133px;width:21px;height:58px;border:3px solid #ffc657;border-top-width:12px;border-radius:9px;background:#8f210a}.ancestral-dragon-claw:after{content:"";position:absolute;left:-5px;bottom:-9px;width:30px;height:15px;border-bottom:4px solid #ffe49b;border-radius:50%}.ancestral-dragon-claw.claw-a{left:104px;transform:rotate(18deg)}.ancestral-dragon-claw.claw-b{left:169px;transform:rotate(-14deg)}.ancestral-boss-copy h3{color:#ffd879;text-shadow:0 0 18px rgba(255,121,20,.5)}.ancestral-boss-copy p{color:#d5b59c}.ancestral-stat-grid div{border-color:rgba(235,139,40,.27);background:rgba(255,150,44,.045)}.ancestral-stat-grid span{color:#b99578}.ancestral-attack-button{background:linear-gradient(135deg,#8f2109,#f28b20 56%,#ffd164);box-shadow:0 10px 28px rgba(196,67,9,.38)}.ancestral-tier-counter{border-color:rgba(255,203,100,.62);color:#ffdca0;background:rgba(27,8,3,.8)}.ancestral-shatter i{background:linear-gradient(135deg,#ffe49d,#c84310 62%,#5e0d05)}.ancestral-effect-summary{grid-column:1/-1;padding:15px;border:1px solid rgba(239,144,38,.28);border-radius:14px;background:linear-gradient(135deg,rgba(255,154,47,.06),rgba(97,24,6,.12))}.ancestral-effect-summary h4{margin:0 0 10px;color:#ffd477}.ancestral-effect-summary>div{display:flex;flex-wrap:wrap;gap:9px}.ancestral-effect-summary span{padding:8px 11px;border-radius:999px;background:rgba(211,75,13,.15);color:#d9b18e}.ancestral-effect-summary strong{color:#ffe3a4}.ancestral-effect-summary p{margin:11px 0 0;color:#a98973;line-height:1.65}.omega-resolving .ancestral-dragon{animation:ancestral-dragon-break 3s ease-in forwards}.omega-resolving .ancestral-soul-ring{animation-duration:.4s}.omega-resolving .ancestral-shatter i{animation:omega-piece 1.25s cubic-bezier(.2,.8,.2,1) 1.2s forwards;animation-delay:calc(1.1s + var(--piece)*22ms)}
@keyframes ancestral-dragon-break{0%,46%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 18px rgba(255,109,20,.9))}62%{transform:translate(-50%,-50%) scale(1.12);filter:brightness(2.2) drop-shadow(0 0 42px #ffcf57)}100%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-12deg);filter:brightness(3)}}
@media(max-width:720px){.solo-boss-tabs{grid-template-columns:1fr}.ancestral-dragon{transform:translate(-50%,-50%) scale(.86)}.omega-resolving .ancestral-dragon{animation-name:ancestral-dragon-break-mobile}}
@keyframes ancestral-dragon-break-mobile{0%,46%{opacity:1;transform:translate(-50%,-50%) scale(.86)}62%{transform:translate(-50%,-50%) scale(.98);filter:brightness(2.2) drop-shadow(0 0 36px #ffcf57)}100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}}

.ancestral-dragon-tower-banner{border-color:rgba(239,142,37,.38)!important;background:linear-gradient(135deg,rgba(126,42,10,.3),rgba(255,171,45,.08))!important}.ancestral-dragon-tower-banner span,.ancestral-dragon-tower-banner strong{color:#ffd37b!important}

.ancestral-milestone-list{border-color:rgba(239,144,38,.28);background:rgba(90,26,7,.13)}.ancestral-milestone-list h4,.ancestral-milestone.reached strong{color:#ffd477}.ancestral-milestone-note{margin:0 0 8px;color:#ad8a70}.ancestral-milestone{border-color:rgba(255,194,99,.12)}.ancestral-milestone button:not(:disabled){background:linear-gradient(135deg,#9a2d0b,#e9851d);color:#fff;border-color:#f2a43c}

.ancestral-lost-lands-banner{border-color:rgba(239,142,37,.38)!important;background:linear-gradient(135deg,rgba(126,42,10,.28),rgba(255,171,45,.07))!important}.ancestral-lost-lands-banner span,.ancestral-lost-lands-banner strong{color:#ffd37b!important}

.solo-boss-tabs {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.solo-boss-tab { min-width: 0; }
.solo-boss-tab span,
.solo-boss-tab em { min-width: 0; overflow-wrap: break-word; word-break: normal; }

.solo-boss-tab.dream-wraith-tab i {
    color: #87f0dc;
}

.solo-boss-tab.dream-wraith-tab.active {
    border-color: rgba(101, 238, 213, 0.72);
    background: linear-gradient(145deg, rgba(16, 93, 90, 0.72), rgba(10, 24, 38, 0.98));
    box-shadow: 0 8px 28px rgba(23, 184, 166, 0.22);
}

.dream-wraith-boss-panel {
    border-color: rgba(84, 222, 202, 0.42);
    background: linear-gradient(145deg, rgba(6, 18, 27, 0.99), rgba(10, 50, 53, 0.96));
    box-shadow: 0 18px 52px rgba(1, 16, 23, 0.52);
}

.dream-wraith-boss-stage {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(68, 229, 205, 0.3), transparent 30%),
        radial-gradient(circle at 50% 84%, rgba(84, 119, 255, 0.14), transparent 44%),
        linear-gradient(180deg, #030a12, #09252b 68%, #02070d);
}

.dream-wraith-boss-stage::before {
    background:
        linear-gradient(rgba(91, 232, 209, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 232, 209, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
}

.dream-wraith-rift {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 250px;
    height: 250px;
    border: 2px solid rgba(93, 247, 218, 0.62);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 32px rgba(64, 229, 207, 0.52), inset 0 0 28px rgba(68, 166, 189, 0.28);
    animation: omega-ring 8s linear infinite;
}

.dream-wraith-rift.rift-b {
    width: 318px;
    height: 318px;
    border-style: dashed;
    border-color: rgba(91, 120, 255, 0.52);
    animation-direction: reverse;
    animation-duration: 13s;
}

.dream-wraith-mist {
    position: absolute;
    left: 50%;
    bottom: 35px;
    width: 300px;
    height: 70px;
    border-radius: 50%;
    background: rgba(79, 231, 207, 0.14);
    filter: blur(16px);
    transform: translateX(-50%);
    animation: dream-wraith-mist 4.8s ease-in-out infinite alternate;
}

.dream-wraith-mist.mist-b {
    bottom: 75px;
    width: 210px;
    opacity: 0.56;
    animation-delay: -2.4s;
}

.dream-wraith {
    position: absolute;
    left: 50%;
    top: 49%;
    width: 210px;
    height: 250px;
    z-index: 3;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 20px rgba(83, 242, 215, 0.72));
    animation: dream-wraith-float 3.6s ease-in-out infinite;
}

.dream-wraith-hood {
    position: absolute;
    left: 57px;
    top: 20px;
    width: 96px;
    height: 92px;
    border: 3px solid #82ead8;
    border-radius: 52% 52% 40% 40%;
    background: radial-gradient(circle at 50% 60%, #07141c 0 33%, #164b50 35% 62%, #07131f 100%);
    box-shadow: inset 0 -12px 22px rgba(58, 230, 204, 0.2);
}

.dream-wraith-hood i,
.dream-wraith-hood b {
    position: absolute;
    top: 48px;
    width: 12px;
    height: 6px;
    border-radius: 50%;
    background: #d8fff7;
    box-shadow: 0 0 9px #58f4d8, 0 0 18px #48abff;
}

.dream-wraith-hood i { left: 25px; }
.dream-wraith-hood b { right: 25px; }

.dream-wraith-body {
    position: absolute;
    left: 39px;
    top: 94px;
    width: 132px;
    height: 146px;
    border: 2px solid rgba(127, 239, 220, 0.66);
    background: linear-gradient(160deg, rgba(44, 127, 132, 0.94), rgba(8, 27, 39, 0.98) 62%, rgba(41, 72, 130, 0.72));
    clip-path: polygon(16% 0, 84% 0, 100% 100%, 70% 86%, 50% 100%, 27% 85%, 0 100%);
}

.dream-wraith-crown {
    position: absolute;
    left: 73px;
    top: -2px;
    width: 64px;
    height: 34px;
    z-index: 4;
    background: linear-gradient(180deg, #d9fff8, #40cbb8);
    clip-path: polygon(0 100%, 6% 38%, 28% 70%, 50% 0, 72% 70%, 94% 38%, 100% 100%);
    filter: drop-shadow(0 0 8px rgba(88, 245, 218, 0.8));
}

.dream-wraith-arm {
    position: absolute;
    top: 108px;
    width: 30px;
    height: 112px;
    border: 2px solid rgba(114, 235, 216, 0.62);
    border-radius: 45% 45% 70% 70%;
    background: linear-gradient(#1d6d70, #071a27);
}

.dream-wraith-arm.arm-a { left: 20px; transform: rotate(14deg); }
.dream-wraith-arm.arm-b { right: 20px; transform: rotate(-14deg); }

.dream-wraith-sigil {
    position: absolute;
    left: 82px;
    top: 134px;
    width: 46px;
    height: 46px;
    border: 2px solid #8af5e2;
    transform: rotate(45deg);
    box-shadow: 0 0 18px rgba(82, 238, 212, 0.74);
}

.dream-wraith-sigil::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid #6b8fff;
    border-radius: 50%;
}

.dream-wraith-boss-copy h3 {
    color: #a6fff0;
    text-shadow: 0 0 18px rgba(72, 232, 207, 0.42);
}

.dream-wraith-boss-copy p { color: #a9c9c6; }
.dream-wraith-stat-grid div { border-color: rgba(90, 226, 205, 0.24); background: rgba(68, 225, 202, 0.045); }
.dream-wraith-stat-grid span { color: #86aaa8; }
.dream-wraith-attack-button { background: linear-gradient(135deg, #0c6c68, #31c8b5 58%, #9ffff0); box-shadow: 0 10px 28px rgba(28, 188, 169, 0.3); color: #041314; }
.dream-wraith-tier-counter { border-color: rgba(124, 242, 222, 0.58); color: #c2fff4; background: rgba(3, 22, 29, 0.84); }
.dream-wraith-shatter i { background: linear-gradient(135deg, #d1fff7, #37bcae 58%, #304c91); }
.dream-wraith-effect-summary { border-color: rgba(82, 224, 203, 0.28); background: linear-gradient(135deg, rgba(49, 211, 190, 0.06), rgba(34, 71, 121, 0.13)); }
.dream-wraith-effect-summary h4 { color: #a6fff0; }
.dream-wraith-effect-summary span { background: rgba(45, 191, 176, 0.13); color: #a9d0cb; }
.dream-wraith-effect-summary strong { color: #c9fff5; }
.dream-wraith-effect-summary p { color: #789b99; }
.dream-wraith-boss-panel .omega-milestone > div { flex: 1 1 auto; min-width: 0; }
.dream-wraith-boss-panel .omega-milestone p { line-height: 1.45; }
.dream-wraith-boss-panel .omega-milestone button { flex: 0 0 112px; width: 112px; margin: 0; }
.omega-resolving .dream-wraith { animation: dream-wraith-break 3s ease-in forwards; }
.omega-resolving .dream-wraith-rift { animation-duration: .35s; }
.omega-resolving .dream-wraith-shatter i { animation: omega-piece 1.25s cubic-bezier(.2,.8,.2,1) 1.2s forwards; animation-delay: calc(1.1s + var(--piece) * 20ms); }

@keyframes dream-wraith-float {
    50% { transform: translate(-50%, -53%); filter: drop-shadow(0 0 28px rgba(83, 242, 215, 0.88)); }
}

@keyframes dream-wraith-mist {
    to { transform: translateX(-50%) scaleX(1.18); opacity: 0.68; }
}

@keyframes dream-wraith-break {
    0%, 46% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    62% { transform: translate(-50%, -50%) scale(1.12); filter: brightness(2.1) drop-shadow(0 0 42px #69efd8); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); filter: brightness(3); }
}

@media (max-width: 760px) {
    .dream-wraith-boss-panel .omega-milestone button { width: 100%; flex-basis: auto; }
}

@media (max-width: 900px) {
    .solo-boss-tabs { grid-template-columns: 1fr; }
}

/* Artisan Soul third ring */
.artisan-third-ring-zone{position:relative;min-height:390px}.third-ring-map-wheel{position:relative;width:min(340px,calc(100% - 24px));aspect-ratio:1;margin:12px auto;border:2px solid rgba(255,183,77,.38);border-radius:50%;background:radial-gradient(circle,rgba(255,183,77,.15),rgba(65,24,90,.2) 48%,rgba(10,12,30,.75) 72%);box-shadow:0 0 35px rgba(255,140,45,.18) inset}.third-ring-map-node{--angle:calc(var(--node-index)*45deg);position:absolute;left:50%;top:50%;width:66px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-132px) rotate(calc(-1*var(--angle)));border:1px solid rgba(255,205,120,.42);border-radius:16px;background:linear-gradient(145deg,rgba(76,32,102,.94),rgba(25,20,50,.96));color:#f8dcaa}.third-ring-map-node.next{border-color:#ffd76b;box-shadow:0 0 18px rgba(255,202,70,.75);animation:third-ring-pulse 1.5s ease-in-out infinite}.third-ring-map-node strong{font-size:22px}.third-ring-map-node span{font-size:12px;color:#d8c8e8}.third-ring-map-core{position:absolute;inset:34%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,#74451e,#28162f 72%);border:1px solid rgba(255,213,116,.6);color:#ffe1a1}.third-ring-map-core strong{font-size:18px}.third-ring-map-core span{font-size:12px;margin-top:4px}.third-ring-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.third-ring-action-grid select,.third-ring-action-grid input{min-width:0;width:100%;box-sizing:border-box}.third-ring-upgrade-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.third-ring-panel.locked{opacity:.92}@keyframes third-ring-pulse{50%{box-shadow:0 0 28px rgba(255,202,70,.95);filter:brightness(1.15)}}@media(max-width:760px){.third-ring-action-grid{grid-template-columns:1fr}.third-ring-map-wheel{width:min(288px,calc(100% - 16px));margin:18px auto}.third-ring-map-node{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-110px) rotate(calc(-1*var(--angle)));width:58px;min-height:50px}.third-ring-map-node.next{animation:none}.third-ring-upgrade-buttons{grid-template-columns:1fr}}

/* Solo Boss sovereign redraw */
.omega-boss-stage {
    min-height: 430px;
    border: 1px solid rgba(142, 105, 255, 0.3);
    background:
        radial-gradient(circle at 50% 43%, rgba(111, 49, 255, 0.28), transparent 32%),
        radial-gradient(ellipse at 50% 102%, rgba(111, 62, 210, 0.32), transparent 42%),
        linear-gradient(180deg, #04040b 0%, #0b0a1d 52%, #12091d 78%, #030307 100%);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.88), inset 0 -36px 60px rgba(77, 27, 133, 0.2);
}
.omega-boss-stage::before {
    opacity: 0.34;
    background:
        linear-gradient(rgba(154, 118, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 118, 255, 0.1) 1px, transparent 1px);
    background-size: 34px 34px;
}
.omega-boss-stage::after {
    content: "Ω";
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    color: rgba(185, 155, 255, 0.055);
    font: 900 280px/1 Georgia, serif;
    text-shadow: 0 0 45px rgba(116, 65, 255, 0.12);
    z-index: 0;
}
.omega-stage-eclipse {
    position: absolute;
    left: 50%;
    top: 43%;
    width: 270px;
    height: 270px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #030206 0 52%, #3d176f 53% 55%, #9d69ff 56%, transparent 59%);
    box-shadow: 0 0 28px rgba(159, 104, 255, 0.7), 0 0 90px rgba(104, 45, 213, 0.38);
    opacity: 0.72;
    z-index: 0;
}
.omega-energy-ring {
    top: 45%;
    width: 305px;
    height: 305px;
    border-color: rgba(177, 142, 255, 0.46);
    box-shadow: 0 0 28px rgba(126, 74, 255, 0.58), inset 0 0 28px rgba(77, 38, 181, 0.42);
}
.omega-energy-ring.ring-b { width: 370px; height: 370px; opacity: 0.38; }
.omega-dinosaur {
    left: 50%;
    top: 54%;
    width: 350px;
    height: 270px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 13px 8px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 22px rgba(124, 70, 255, 0.76));
    animation: omega-sovereign-idle 3.4s ease-in-out infinite;
}
.omega-dinosaur::after {
    content: "";
    position: absolute;
    left: 68px;
    bottom: 4px;
    width: 240px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(95, 54, 183, 0.5), rgba(0, 0, 0, 0) 70%);
    transform: skewX(-14deg);
    z-index: -4;
}
.omega-body {
    left: 112px;
    top: 79px;
    width: 166px;
    height: 119px;
    border: 2px solid rgba(213, 196, 255, 0.82);
    border-radius: 0;
    clip-path: polygon(10% 15%, 35% 0, 77% 7%, 100% 34%, 91% 76%, 66% 100%, 24% 94%, 0 64%);
    background:
        linear-gradient(118deg, transparent 0 39%, rgba(238, 230, 255, 0.34) 40% 42%, transparent 43% 100%),
        linear-gradient(145deg, #5f42a4 0 18%, #1b1734 19% 55%, #080813 56% 100%);
    box-shadow: inset -22px -20px 30px rgba(0, 0, 0, 0.72), inset 12px 10px 22px rgba(170, 122, 255, 0.18), 0 0 20px rgba(108, 63, 216, 0.42);
    z-index: 1;
}
.omega-body::before {
    content: "";
    position: absolute;
    inset: 17px 25px 25px 38px;
    clip-path: polygon(50% 0, 100% 24%, 88% 83%, 50% 100%, 10% 82%, 0 25%);
    border: 2px solid rgba(184, 154, 255, 0.64);
    background: linear-gradient(145deg, rgba(116, 76, 195, 0.42), rgba(15, 13, 30, 0.82));
}
.omega-body::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 13px;
    top: 47px;
    height: 3px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, #d7c7ff, #7e4de6, transparent);
    box-shadow: 0 24px 0 rgba(179, 146, 255, 0.4);
}
.omega-core {
    position: absolute;
    left: 76px;
    top: 42px;
    width: 27px;
    height: 27px;
    border: 2px solid #efe9ff;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 12%, #cdb6ff 18%, #753cff 48%, #160b38 70%);
    box-shadow: 0 0 10px #fff, 0 0 25px #995dff, 0 0 48px rgba(117, 56, 255, 0.6);
    z-index: 3;
}
.omega-neck {
    position: absolute;
    left: 78px;
    top: 68px;
    width: 82px;
    height: 91px;
    clip-path: polygon(10% 0, 100% 25%, 82% 100%, 0 74%);
    background: linear-gradient(120deg, #161226, #57408f 48%, #0b0914 72%);
    border-left: 3px solid #bba1f4;
    transform: rotate(-13deg);
    z-index: 2;
}
.omega-head {
    left: 18px;
    top: 37px;
    width: 129px;
    height: 88px;
    border: 2px solid #d9caff;
    border-radius: 0;
    clip-path: polygon(9% 19%, 34% 0, 76% 7%, 100% 34%, 91% 66%, 60% 78%, 42% 100%, 11% 79%, 0 48%);
    background: linear-gradient(145deg, #62499f 0 17%, #19152b 18% 62%, #080812 63% 100%);
    box-shadow: inset -18px -12px 20px rgba(0, 0, 0, 0.68), inset 9px 8px 15px rgba(181, 143, 255, 0.2);
    transform: rotate(-7deg);
    z-index: 6;
}
.omega-head::before {
    content: "";
    position: absolute;
    right: -1px;
    top: 30px;
    width: 55px;
    height: 27px;
    border: 0;
    clip-path: polygon(0 0, 100% 22%, 82% 100%, 5% 77%);
    background: linear-gradient(180deg, #29203f, #080711);
}
.omega-head::after { display: none; }
.omega-eye {
    position: absolute;
    left: 43px;
    top: 25px;
    width: 13px;
    height: 7px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 20%, 100% 0, 72% 100%, 8% 78%);
    background: #fff;
    box-shadow: 0 0 7px #fff, 0 0 16px #ae7aff, 0 0 28px #7a35ff;
}
.omega-face-plate {
    position: absolute;
    left: 12px;
    top: 13px;
    width: 68px;
    height: 54px;
    border: 2px solid rgba(202, 181, 255, 0.72);
    clip-path: polygon(18% 0, 100% 18%, 78% 100%, 0 78%);
    background: linear-gradient(145deg, rgba(143, 105, 215, 0.25), rgba(5, 5, 12, 0.65));
}
.omega-jaw {
    position: absolute;
    left: 41px;
    top: 99px;
    width: 99px;
    height: 42px;
    clip-path: polygon(0 0, 100% 14%, 79% 72%, 34% 100%, 4% 65%);
    border-top: 2px solid #bca8ec;
    background:
        repeating-linear-gradient(110deg, transparent 0 13px, rgba(238, 230, 255, 0.8) 14px 17px, transparent 18px 26px),
        linear-gradient(180deg, #171225, #05050a);
    transform: rotate(5deg);
    z-index: 5;
}
.omega-horn {
    position: absolute;
    top: 20px;
    width: 22px;
    height: 51px;
    clip-path: polygon(48% 0, 100% 100%, 0 83%);
    background: linear-gradient(90deg, #f0e9ff, #7659a8 55%, #191324);
    z-index: 4;
}
.omega-horn.horn-a { left: 39px; transform: rotate(-29deg); }
.omega-horn.horn-b { left: 81px; top: 13px; transform: rotate(8deg) scale(0.86); }
.omega-dorsal {
    position: absolute;
    left: 121px;
    top: 37px;
    width: 150px;
    height: 67px;
    clip-path: polygon(0 100%, 7% 48%, 17% 100%, 26% 20%, 38% 100%, 51% 0, 61% 100%, 75% 28%, 83% 100%, 94% 52%, 100% 100%);
    background: linear-gradient(180deg, #d4c2ff, #6c40c5 58%, #161020);
    filter: drop-shadow(0 0 7px rgba(156, 99, 255, 0.7));
    z-index: 0;
}
.omega-tail {
    right: -3px;
    top: 102px;
    width: 155px;
    height: 68px;
    border: 0;
    clip-path: polygon(0 7%, 55% 31%, 100% 8%, 74% 52%, 100% 82%, 50% 67%, 0 94%);
    background: linear-gradient(100deg, #0b0913, #493277 42%, #9c70e8 70%, #181022);
    transform: rotate(7deg);
    z-index: -2;
}
.omega-shoulder {
    position: absolute;
    top: 91px;
    width: 66px;
    height: 58px;
    clip-path: polygon(12% 0, 100% 22%, 83% 100%, 0 76%);
    border: 2px solid rgba(209, 191, 255, 0.64);
    background: linear-gradient(145deg, #574080, #100d1b 70%);
    z-index: 4;
}
.omega-shoulder.shoulder-a { left: 94px; transform: rotate(15deg); }
.omega-shoulder.shoulder-b { left: 216px; transform: rotate(-9deg) scale(0.9); opacity: 0.76; z-index: 0; }
.omega-arm, .omega-leg {
    border: 2px solid rgba(207, 187, 255, 0.7);
    border-radius: 0;
    background: linear-gradient(145deg, #48346f, #0b0913 70%);
}
.omega-arm {
    top: 127px;
    width: 31px;
    height: 75px;
    clip-path: polygon(16% 0, 100% 12%, 72% 81%, 45% 100%, 0 71%);
    z-index: 5;
}
.omega-arm.arm-a { left: 111px; transform: rotate(27deg); }
.omega-arm.arm-b { left: 241px; transform: rotate(-20deg) scale(0.9); z-index: 0; }
.omega-arm i, .omega-leg i {
    position: absolute;
    left: -5px;
    bottom: -11px;
    width: 42px;
    height: 24px;
    clip-path: polygon(0 28%, 32% 0, 42% 67%, 62% 4%, 72% 68%, 100% 15%, 83% 100%, 15% 100%);
    background: linear-gradient(180deg, #eee7ff, #6c4a9c);
}
.omega-leg {
    top: 172px;
    width: 55px;
    height: 94px;
    clip-path: polygon(14% 0, 100% 4%, 83% 61%, 70% 100%, 9% 100%, 0 51%);
    z-index: 3;
}
.omega-leg.leg-a { left: 123px; transform: rotate(6deg); }
.omega-leg.leg-b { left: 225px; transform: rotate(-5deg); }
.omega-leg i { left: -10px; width: 74px; bottom: -8px; }

.ancestral-boss-stage {
    min-height: 430px;
    border-color: rgba(210, 161, 72, 0.35);
    background:
        radial-gradient(circle at 52% 45%, rgba(213, 132, 35, 0.2), transparent 31%),
        linear-gradient(180deg, #080807 0%, #15100c 58%, #251006 82%, #050403 100%);
    box-shadow: inset 0 0 75px #000, inset 0 -38px 65px rgba(131, 54, 9, 0.22);
}
.ancestral-boss-stage::after {
    content: "祖";
    position: absolute;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%);
    color: rgba(255, 213, 128, 0.045);
    font: 900 250px/1 serif;
    text-shadow: 0 0 50px rgba(255, 164, 62, 0.12);
    z-index: 0;
}
.ancestral-soul-ring {
    width: 335px;
    height: 335px;
    border-color: rgba(255, 208, 109, 0.38);
    box-shadow: 0 0 30px rgba(229, 126, 28, 0.42), inset 0 0 32px rgba(255, 190, 65, 0.16);
}
.ancestral-soul-ring.ring-b { width: 405px; height: 405px; opacity: 0.32; }
.ancestral-cloud {
    position: absolute;
    width: 190px;
    height: 58px;
    border-radius: 50%;
    border-top: 2px solid rgba(239, 184, 84, 0.28);
    background: radial-gradient(ellipse, rgba(94, 41, 16, 0.35), transparent 72%);
    filter: blur(1px);
    z-index: 1;
}
.ancestral-cloud::before, .ancestral-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border-top: 2px solid rgba(239, 184, 84, 0.22);
}
.ancestral-cloud::before { inset: -18px 36px 12px -12px; }
.ancestral-cloud::after { inset: 14px -20px -16px 55px; }
.ancestral-cloud.cloud-a { left: -20px; top: 105px; }
.ancestral-cloud.cloud-b { right: -15px; top: 235px; transform: scaleX(-1); }
.ancestral-dragon {
    left: 50%;
    top: 53%;
    width: 410px;
    height: 285px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 15px 9px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 20px rgba(221, 139, 42, 0.7));
    animation: ancestral-sovereign-idle 4.2s ease-in-out infinite;
}
.ancestral-dragon-aura {
    position: absolute;
    left: 65px;
    top: 23px;
    width: 285px;
    height: 220px;
    border: 1px solid rgba(255, 208, 119, 0.25);
    border-radius: 50%;
    box-shadow: inset 0 0 45px rgba(213, 110, 24, 0.14), 0 0 35px rgba(255, 163, 58, 0.13);
}
.ancestral-dragon-body {
    left: 116px;
    top: 91px;
    width: 210px;
    height: 91px;
    border: 3px solid #d7a957;
    border-radius: 58% 42% 55% 45%;
    background:
        repeating-linear-gradient(120deg, transparent 0 20px, rgba(255, 218, 141, 0.15) 21px 23px, transparent 24px 40px),
        linear-gradient(150deg, #7f3b15 0 17%, #20130d 18% 58%, #090706 59% 100%);
    box-shadow: inset -24px -17px 28px rgba(0, 0, 0, 0.74), inset 13px 9px 21px rgba(255, 186, 79, 0.16);
    transform: rotate(4deg);
    z-index: 2;
}
.ancestral-dragon-body::after {
    content: "";
    position: absolute;
    inset: 17px 28px;
    border: 2px solid rgba(242, 194, 107, 0.4);
    border-radius: 50%;
    transform: skewX(-18deg);
}
.ancestral-dragon-scales {
    position: absolute;
    inset: 8px 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 100%, transparent 0 52%, rgba(244, 194, 105, 0.28) 54% 57%, transparent 59%) 0 0/26px 20px;
    opacity: 0.58;
}
.ancestral-dragon-tail {
    right: -6px;
    top: 108px;
    width: 205px;
    height: 116px;
    border: 0;
    border-bottom: 35px solid #6f3213;
    border-right: 18px solid transparent;
    border-radius: 0 0 92% 64%;
    background: none;
    clip-path: none;
    transform: rotate(-4deg);
    box-shadow: 0 8px 0 -5px rgba(231, 176, 82, 0.62);
    z-index: 0;
}
.ancestral-dragon-coil {
    position: absolute;
    border-radius: 50%;
    border: 28px solid transparent;
    border-top-color: #27150c;
    border-left-color: #8c471b;
    box-shadow: -3px -3px 0 rgba(221, 170, 78, 0.7);
    z-index: 1;
}
.ancestral-dragon-coil.coil-a { left: 210px; top: 143px; width: 118px; height: 76px; transform: rotate(12deg); }
.ancestral-dragon-coil.coil-b { left: 288px; top: 83px; width: 75px; height: 68px; transform: rotate(-24deg) scale(0.82); opacity: 0.82; }
.ancestral-dragon-neck {
    left: 69px;
    top: 59px;
    width: 102px;
    height: 128px;
    border: 25px solid transparent;
    border-left-color: #7b3916;
    border-top-color: #22120c;
    border-radius: 72% 0 0 38%;
    transform: rotate(-18deg);
    filter: drop-shadow(-2px -2px 0 #d3a052);
    z-index: 3;
}
.ancestral-dragon-mane {
    position: absolute;
    left: 39px;
    top: 28px;
    width: 130px;
    height: 112px;
    clip-path: polygon(48% 0, 58% 22%, 78% 5%, 76% 30%, 100% 23%, 82% 48%, 98% 60%, 72% 65%, 79% 91%, 55% 77%, 43% 100%, 31% 77%, 5% 89%, 18% 62%, 0 49%, 25% 38%, 13% 13%, 40% 24%);
    background: linear-gradient(145deg, #5f1f0e, #160b08 65%, #b36b26);
    filter: drop-shadow(0 0 8px rgba(227, 135, 37, 0.55));
    z-index: 4;
}
.ancestral-dragon-head {
    left: 15px;
    top: 55px;
    width: 133px;
    height: 78px;
    border: 2px solid #e3b666;
    border-radius: 0;
    clip-path: polygon(7% 27%, 33% 5%, 63% 0, 82% 23%, 100% 35%, 89% 64%, 61% 68%, 45% 100%, 15% 84%, 0 54%);
    background: linear-gradient(145deg, #8d461b 0 17%, #25150e 18% 64%, #080605 65% 100%);
    box-shadow: inset -18px -10px 20px rgba(0, 0, 0, 0.7), inset 9px 7px 16px rgba(255, 194, 94, 0.17);
    transform: rotate(-7deg);
    z-index: 7;
}
.ancestral-dragon-head::before {
    content: "";
    position: absolute;
    right: -1px;
    top: 31px;
    width: 62px;
    height: 27px;
    clip-path: polygon(0 0, 100% 30%, 83% 100%, 8% 76%);
    background: #100a07;
}
.ancestral-dragon-head::after { display: none; }
.ancestral-eye {
    position: absolute;
    left: 45px;
    top: 25px;
    width: 13px;
    height: 7px;
    border-radius: 0;
    background: #fff4bf;
    clip-path: polygon(0 10%, 100% 0, 75% 100%, 10% 76%);
    box-shadow: 0 0 7px #fff, 0 0 18px #ffbb3f, 0 0 30px #e26018;
}
.ancestral-jaw {
    position: absolute;
    left: 47px;
    top: 54px;
    width: 81px;
    height: 28px;
    clip-path: polygon(0 0, 100% 17%, 76% 100%, 13% 72%);
    background: repeating-linear-gradient(105deg, #120a07 0 11px, #e8d4a2 12px 14px, #120a07 15px 23px);
    border-top: 2px solid rgba(225, 180, 100, 0.72);
}
.ancestral-dragon-horn {
    position: absolute;
    top: 13px;
    width: 18px;
    height: 72px;
    border-left: 6px solid #d8c18d;
    border-top: 6px solid #d8c18d;
    border-radius: 70% 0 0 0;
    z-index: 5;
}
.ancestral-dragon-horn::before, .ancestral-dragon-horn::after {
    content: "";
    position: absolute;
    width: 29px;
    border-top: 5px solid #d8c18d;
    transform-origin: left;
}
.ancestral-dragon-horn::before { left: -2px; top: 19px; transform: rotate(-38deg); }
.ancestral-dragon-horn::after { left: -3px; top: 39px; transform: rotate(31deg); }
.ancestral-dragon-horn.horn-a { left: 44px; transform: rotate(-24deg); }
.ancestral-dragon-horn.horn-b { left: 91px; top: 9px; transform: scaleX(-1) rotate(-18deg); }
.ancestral-whisker {
    position: absolute;
    left: 74px;
    top: 104px;
    width: 126px;
    height: 55px;
    border-bottom: 2px solid rgba(255, 216, 129, 0.78);
    border-radius: 0 0 75% 45%;
    z-index: 8;
}
.ancestral-whisker.whisker-a { transform: rotate(7deg); }
.ancestral-whisker.whisker-b { top: 93px; transform: rotate(-19deg) scaleY(-1); opacity: 0.74; }
.ancestral-dragon-wing {
    top: 67px;
    width: 94px;
    height: 85px;
    border: 0;
    clip-path: polygon(0 100%, 19% 18%, 38% 57%, 57% 0, 70% 61%, 100% 32%, 81% 100%);
    background: linear-gradient(145deg, rgba(217, 151, 56, 0.58), rgba(58, 22, 10, 0.42));
    opacity: 0.48;
    z-index: 0;
}
.ancestral-dragon-wing.wing-a { left: 137px; transform: rotate(-12deg); }
.ancestral-dragon-wing.wing-b { left: 218px; transform: scaleX(-1) rotate(-8deg); opacity: 0.34; }
.ancestral-dragon-claw {
    top: 156px;
    width: 31px;
    height: 73px;
    border: 2px solid #d5a85a;
    border-top-width: 9px;
    border-radius: 0;
    clip-path: polygon(9% 0, 100% 8%, 78% 78%, 52% 100%, 0 74%);
    background: linear-gradient(145deg, #673016, #120b08 72%);
    z-index: 5;
}
.ancestral-dragon-claw.claw-a { left: 137px; transform: rotate(18deg); }
.ancestral-dragon-claw.claw-b { left: 250px; transform: rotate(-13deg) scale(0.9); }
.ancestral-dragon-claw i {
    position: absolute;
    left: -7px;
    bottom: -8px;
    width: 46px;
    height: 24px;
    clip-path: polygon(0 26%, 31% 0, 42% 68%, 62% 3%, 73% 68%, 100% 12%, 84% 100%, 12% 100%);
    background: linear-gradient(180deg, #f2ddab, #7a5b2e);
}

@keyframes omega-sovereign-idle {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
    50% { transform: translate(-50%, -50%) translateY(-5px) scale(1.012); }
}
@keyframes ancestral-sovereign-idle {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg); }
    50% { transform: translate(-50%, -50%) translateY(-7px) rotate(1deg); }
}
@media (max-width: 720px) {
    .omega-boss-stage, .ancestral-boss-stage { min-height: 390px; }
    .omega-dinosaur { transform: translate(-50%, -50%) scale(0.82); animation-name: omega-sovereign-idle-mobile; }
    .ancestral-dragon { transform: translate(-50%, -50%) scale(0.78); animation-name: ancestral-sovereign-idle-mobile; }
    .omega-stage-eclipse { transform: translate(-50%, -50%) scale(0.84); }
    .omega-energy-ring { width: 260px; height: 260px; }
    .omega-energy-ring.ring-b { width: 320px; height: 320px; }
    .ancestral-soul-ring { width: 285px; height: 285px; }
    .ancestral-soul-ring.ring-b { width: 345px; height: 345px; }
    .omega-resolving .omega-dinosaur { animation-name: omega-dino-break; }
    .omega-resolving .ancestral-dragon { animation-name: ancestral-dragon-break-mobile; }
}
@keyframes omega-sovereign-idle-mobile {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(0.82); }
    50% { transform: translate(-50%, -50%) translateY(-4px) scale(0.83); }
}
@keyframes ancestral-sovereign-idle-mobile {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg) scale(0.78); }
    50% { transform: translate(-50%, -50%) translateY(-5px) rotate(1deg) scale(0.79); }
}@media (prefers-reduced-motion: reduce) {
    .omega-dinosaur, .ancestral-dragon { animation: none; }
}
.first-ring-level-formula {
    display: block;
    width: 100%;
    margin-top: 8px;
    color: rgba(247, 236, 209, 0.72);
    font-size: 12px;
    line-height: 1.5;
}
/* 本命神通 · 三重旋转星穹 */
#skill-view { --innate-gold:#f6c65b; --innate-violet:#9b6cff; --innate-ink:#070a18; }
.innate-hero,.innate-tree-panel,.innate-seal-panel{position:relative;overflow:hidden;border:1px solid rgba(151,118,255,.28);background:linear-gradient(145deg,rgba(18,25,54,.96),rgba(6,9,25,.98));box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04)}
.innate-hero:before,.innate-tree-panel:before,.innate-seal-panel:before{content:"";position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(133,84,255,.13),transparent 42%);animation:innate-nebula 16s linear infinite}
@keyframes innate-nebula{to{transform:rotate(360deg)}}
.innate-hero-copy,.innate-stats,.innate-next-node,.innate-section-head,.innate-canvas-wrap,.innate-node-detail,.innate-seal-summary,.innate-major-grid,.innate-shard-grid,.innate-save-btn{position:relative;z-index:1}
.innate-hero{padding:22px;margin-bottom:16px}.innate-eyebrow{display:block;color:#b8a6ff;font-size:13px;letter-spacing:.16em;text-transform:uppercase}.innate-hero h2,.innate-section-head h3{margin:4px 0 8px;color:#fff4c9;text-shadow:0 0 22px rgba(246,198,91,.28)}.innate-hero-copy p{max-width:760px;color:#bfc7df}
.innate-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.innate-stats>div{padding:14px;border:1px solid rgba(144,118,224,.25);border-radius:12px;background:rgba(5,9,24,.62)}.innate-stats span{display:block;color:#8994b5;font-size:12px}.innate-stats strong{display:block;margin-top:5px;color:#fff;font-size:18px;overflow-wrap:anywhere}
.innate-migration-note{position:relative;z-index:1;margin:8px 0;padding:10px 12px;border-left:3px solid var(--innate-gold);background:rgba(246,198,91,.08);color:#ffe5a0}
.innate-next-node{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border-radius:14px;background:linear-gradient(90deg,rgba(111,71,221,.17),rgba(246,198,91,.08))}.innate-next-node span,.innate-next-node strong{display:block}.innate-next-node span{color:#cfbdff}.innate-next-node strong{margin-top:4px;color:#edf0ff;font-weight:500}.innate-upgrade-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.innate-upgrade-actions input{width:126px;min-width:110px}.innate-max-btn,.innate-save-btn{border-color:#d8a83c!important;background:linear-gradient(135deg,#845b18,#d59b2c)!important;color:#fff8dc!important;font-weight:700}
.innate-tree-panel,.innate-seal-panel{padding:18px;margin-bottom:16px}.innate-section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.innate-tree-tools{display:flex;gap:8px}.innate-canvas-wrap{position:relative;isolation:isolate;border:1px solid rgba(155,108,255,.38);border-radius:16px;overflow:hidden;background:radial-gradient(circle at 48% 42%,#111c43 0,#080d25 42%,#02030c 100%);box-shadow:inset 0 0 60px rgba(43,26,102,.38),0 0 34px rgba(91,58,185,.1)}.innate-canvas-wrap:before,.innate-canvas-wrap:after{content:"";position:absolute;pointer-events:none}.innate-canvas-wrap:before{z-index:0;inset:-28%;opacity:.78;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.45px),radial-gradient(circle,rgba(151,181,255,.72) 0 1.2px,transparent 1.7px),radial-gradient(circle,rgba(192,133,255,.58) 0 1px,transparent 1.55px),radial-gradient(circle,rgba(255,211,117,.46) 0 .8px,transparent 1.35px);background-size:71px 71px,113px 113px,167px 167px,229px 229px;background-position:7px 13px,43px 61px,91px 17px,131px 103px;animation:innate-starfield-drift 38s linear infinite;will-change:transform,background-position}.innate-canvas-wrap:after{z-index:0;inset:-24%;opacity:.55;filter:blur(12px);background:radial-gradient(ellipse at 24% 34%,rgba(60,96,255,.2),transparent 30%),radial-gradient(ellipse at 72% 66%,rgba(151,68,255,.18),transparent 34%),radial-gradient(ellipse at 54% 18%,rgba(38,209,255,.1),transparent 24%),radial-gradient(ellipse at 44% 84%,rgba(255,108,198,.08),transparent 28%);animation:innate-nebula-drift 22s ease-in-out infinite alternate;will-change:transform}.innate-canvas-wrap canvas{position:relative;z-index:1;display:block;width:100%;touch-action:none;cursor:grab}.innate-canvas-wrap canvas:active{cursor:grabbing}.innate-canvas-tip{z-index:2;position:absolute;right:12px;bottom:10px;padding:6px 9px;border-radius:999px;background:rgba(2,4,12,.74);color:#8791b3;font-size:12px;pointer-events:none;backdrop-filter:blur(5px)}@keyframes innate-starfield-drift{0%{background-position:7px 13px,43px 61px,91px 17px,131px 103px;transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(1.5%,-1%,0) scale(1.015)}100%{background-position:149px 91px,-83px 187px,225px -109px,-91px 247px;transform:translate3d(3%,-2%,0) scale(1)}}@keyframes innate-nebula-drift{0%{transform:translate3d(-2%,-1%,0) rotate(-2deg) scale(1)}100%{transform:translate3d(3%,2%,0) rotate(3deg) scale(1.08)}}
.innate-node-detail{display:grid;grid-template-columns:minmax(150px,180px) minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:12px;padding:13px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(8,13,31,.94),rgba(22,15,49,.9));border:1px solid rgba(134,107,220,.3);box-shadow:inset 0 1px rgba(255,255,255,.035)}.innate-node-detail span{color:#9aa4c5;font-size:12px}.innate-node-detail h4{margin:3px 0;color:#fff}.innate-node-detail p{margin:0;color:#c2c9df}.innate-node-detail .lit{color:#ffd86c}.innate-node-detail .locked{color:#7f8aa8}.innate-node-planet-preview{position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;border-radius:12px;border:1px solid rgba(156,113,255,.3);background:#03050d}.innate-node-planet-preview canvas{display:block;width:100%;aspect-ratio:1/1;min-height:138px}.innate-node-planet-preview>span{position:absolute;left:8px;right:8px;bottom:7px;padding:4px 7px;border-radius:999px;background:rgba(2,4,12,.74);color:#d9ceff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.innate-node-copy{min-width:0}.innate-planet-traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.innate-planet-traits>span{display:grid;gap:2px;min-width:0;padding:7px 8px;border-radius:8px;background:rgba(106,73,190,.14);border:1px solid rgba(143,107,224,.17);color:#e7e0ff;overflow-wrap:anywhere}.innate-planet-traits small{color:#887fa5;font-size:10px}
.innate-preset-select{display:flex;align-items:center;gap:8px;color:#aab4d4}.innate-seal-summary{margin:10px 0 14px;padding:11px 13px;border-radius:10px;background:rgba(100,72,184,.13);color:#e5dcff}.innate-major-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.innate-seal-card{position:relative;padding:15px;border-radius:16px;border:1px solid rgba(154,115,255,.27);background:linear-gradient(160deg,rgba(42,31,86,.54),rgba(8,12,31,.88))}.innate-seal-number{position:absolute;right:12px;top:10px;color:rgba(255,255,255,.28);font-weight:800}.innate-seal-card label,.innate-shard-grid label{display:grid;gap:6px;color:#cbbcff;font-size:13px}.innate-seal-card select,.innate-shard-grid select,.innate-preset-select select{width:100%;min-width:0}.innate-seal-card p{min-height:44px;margin:8px 0 14px;color:#9ea8c6;font-size:13px;line-height:1.55}.innate-shard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.innate-shard-grid label{padding:12px;border-radius:12px;background:rgba(8,13,31,.7);border:1px solid rgba(115,131,190,.2)}.innate-save-btn{display:block;width:100%;padding:12px}
@media(max-width:820px){.innate-node-planet-preview{max-width:220px;width:100%;justify-self:center}.innate-planet-traits{grid-template-columns:repeat(2,minmax(0,1fr))}.innate-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.innate-next-node,.innate-section-head{align-items:stretch;flex-direction:column}.innate-upgrade-actions{justify-content:flex-start}.innate-major-grid,.innate-shard-grid{grid-template-columns:1fr}.innate-node-detail{grid-template-columns:1fr}.innate-tree-tools{flex-wrap:wrap}.innate-preset-select{width:100%}}

/* 本命神通 · 法印构筑与节点详情优化 */
.innate-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.innate-next-copy{min-width:0}.innate-next-copy small{display:block;margin-top:7px;color:#9ea9c9}.innate-next-node>.innate-max-btn{flex:0 0 auto;min-width:138px;padding:11px 20px}.innate-next-node>.innate-max-btn:disabled{filter:grayscale(.75);opacity:.48;cursor:not-allowed}
.innate-node-detail{grid-template-columns:minmax(156px,180px) minmax(0,1fr);align-items:stretch}.innate-node-copy{display:flex;min-width:0;flex-direction:column;justify-content:center}.innate-node-copy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.innate-node-copy-head>div{min-width:0}.innate-node-state{flex:0 0 auto;max-width:48%;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.055);font-size:12px;line-height:1.35;text-align:center;overflow-wrap:normal;word-break:normal}.innate-planet-traits{grid-template-columns:repeat(3,minmax(112px,1fr))}.innate-planet-traits>span{overflow-wrap:normal;word-break:break-word}
.innate-section-subtitle{max-width:680px;margin:0;color:#8f9abb;font-size:13px}.innate-rune-stage{position:relative;z-index:1;padding:18px;border:1px solid rgba(154,117,255,.24);border-radius:22px;background:radial-gradient(circle at 50% 12%,rgba(131,82,255,.2),transparent 34%),linear-gradient(180deg,rgba(7,11,31,.92),rgba(4,7,20,.97));box-shadow:inset 0 0 50px rgba(88,52,181,.13)}
.innate-rune-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.innate-rune-path{position:relative;min-width:0;padding:17px 15px 15px;border:1px solid rgba(145,116,220,.26);border-radius:20px;background:linear-gradient(180deg,rgba(34,28,76,.72),rgba(7,11,29,.91));box-shadow:inset 0 1px rgba(255,255,255,.035),0 12px 24px rgba(0,0,0,.16);overflow:hidden}.innate-rune-path:before{content:"";position:absolute;inset:-45% 10% auto;height:70%;background:radial-gradient(circle,hsla(var(--rune-hue,260),90%,65%,.13),transparent 65%);pointer-events:none}.innate-rune-path-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#827a9e;font-size:11px;letter-spacing:.08em}.innate-rune-path-head b{min-width:0;color:#eadfff;font-size:14px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.innate-major-socket{position:relative;z-index:1;display:grid;place-items:center;margin:13px auto 10px}.innate-rune-select{position:relative;z-index:1;display:grid;gap:5px;color:#9b92b7;font-size:11px}.innate-rune-select select,.innate-shard-slot select,.innate-preset-select select{width:100%;min-width:0;border-color:rgba(165,130,255,.34);background-color:rgba(5,8,24,.9)}.innate-major-description,.innate-minor-description{position:relative;z-index:1;margin:9px 0 0;color:#aab2cc;font-size:12px;line-height:1.55}.innate-major-description{min-height:56px}.innate-minor-description{min-height:38px;color:#858faa}.innate-rune-connector{position:relative;z-index:1;height:34px}.innate-rune-connector:before{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:1px;background:linear-gradient(transparent,rgba(174,132,255,.8),transparent);box-shadow:0 0 8px rgba(145,93,255,.65)}.innate-rune-connector i{position:absolute;left:calc(50% - 3px);top:14px;width:7px;height:7px;border:1px solid #b597ff;background:#271a55;transform:rotate(45deg);box-shadow:0 0 9px #885cff}.innate-minor-row{position:relative;z-index:1;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px}
.innate-rune-icon{--rune-hue:260;position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 36% 30%,hsla(var(--rune-hue),100%,83%,.42),transparent 20%),radial-gradient(circle,hsla(var(--rune-hue),78%,53%,.2) 0 45%,rgba(3,5,18,.96) 47% 63%,hsla(var(--rune-hue),88%,65%,.75) 64% 66%,transparent 68%);filter:drop-shadow(0 0 13px hsla(var(--rune-hue),85%,61%,.38))}.innate-rune-icon:before,.innate-rune-icon:after,.innate-rune-icon i:before,.innate-rune-icon i:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.innate-rune-icon:before{width:45%;height:45%;border:2px solid hsla(var(--rune-hue),95%,78%,.92);transform:translate(-50%,-50%) rotate(45deg);box-shadow:inset 0 0 10px hsla(var(--rune-hue),90%,58%,.55),0 0 9px hsla(var(--rune-hue),90%,58%,.55)}.innate-rune-icon:after{width:18%;height:18%;border-radius:50%;background:#f6edff;box-shadow:0 0 5px #fff,0 0 17px hsla(var(--rune-hue),100%,72%,.9)}.innate-rune-icon i{position:absolute;inset:0;border-radius:inherit;animation:innate-rune-float 5.5s ease-in-out infinite}.innate-rune-icon i:before{width:70%;height:22%;border-top:1px solid hsla(var(--rune-hue),90%,78%,.75);border-bottom:1px solid hsla(var(--rune-hue),90%,78%,.28);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}.innate-rune-icon i:after{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:28px 5px 0 hsla(var(--rune-hue),100%,78%,.8),-24px -9px 0 hsla(var(--rune-hue),100%,78%,.7),7px -31px 0 hsla(var(--rune-hue),100%,78%,.6)}
.innate-rune-icon--minor{width:50px;height:50px}.innate-rune-icon--minor:before{border-width:1px}.innate-rune-icon--minor i:after{box-shadow:15px 3px 0 hsla(var(--rune-hue),100%,78%,.8),-13px -5px 0 hsla(var(--rune-hue),100%,78%,.7)}.innate-rune-icon--shard{width:58px;height:58px;border-radius:16px;transform:rotate(45deg)}.innate-rune-icon--shard>*{transform:rotate(-45deg)}.innate-rune-icon--shard:before{width:40%;height:40%;border-radius:50%;transform:translate(-50%,-50%)}.innate-rune-icon--v1:before{border-radius:50%}.innate-rune-icon--v2:before{height:25%;transform:translate(-50%,-50%) rotate(30deg)}.innate-rune-icon--v3:before{border-radius:50% 0 50% 0}.innate-rune-icon--v4:before{width:24%;height:52%;transform:translate(-50%,-50%) rotate(45deg)}.innate-rune-icon--v5:before{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.innate-rune-icon--v6:before{width:52%;height:30%;border-radius:50%}.innate-rune-icon--v7:before{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}@keyframes innate-rune-float{50%{transform:rotate(8deg) scale(1.04)}}
.innate-shard-section{margin-top:16px;padding:15px;border-top:1px solid rgba(149,117,224,.2);border-radius:16px;background:rgba(9,12,31,.66)}.innate-shard-title{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.innate-shard-title span{color:#e7dcff;font-weight:700}.innate-shard-title small{color:#737d9d}.innate-shard-grid{margin:0}.innate-shard-slot{display:grid!important;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"icon label" "icon name" "select select" "desc desc";align-items:center;gap:2px 10px!important;padding:13px!important}.innate-shard-slot>.innate-rune-icon{grid-area:icon;justify-self:center}.innate-shard-slot>span{grid-area:label;color:#7d86a5;font-size:10px}.innate-shard-slot>b{grid-area:name;color:#f0eaff}.innate-shard-slot>select{grid-area:select;margin-top:8px}.innate-shard-slot>small{grid-area:desc;margin-top:5px;color:#858faa;line-height:1.45}.innate-save-btn{margin-top:14px}
@media(max-width:1120px){.innate-rune-paths{grid-template-columns:1fr}.innate-rune-path{display:grid;grid-template-columns:110px minmax(0,1fr) 52px minmax(0,1fr);grid-template-areas:"head head head head" "major select connector minor" "major major-desc connector minor-desc";column-gap:12px;align-items:center}.innate-rune-path-head{grid-area:head}.innate-major-socket{grid-area:major}.innate-rune-path>.innate-rune-select{grid-area:select}.innate-major-description{grid-area:major-desc;min-height:0}.innate-rune-connector{grid-area:connector;height:80px;transform:rotate(-90deg)}.innate-minor-row{grid-area:minor}.innate-minor-description{grid-area:minor-desc;min-height:0}.innate-node-detail{grid-template-columns:minmax(140px,170px) minmax(0,1fr)}.innate-planet-traits{grid-template-columns:repeat(2,minmax(112px,1fr))}}

/* 本命神通 · 移动端摘要与升级卡修复 */
.innate-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:720px}.innate-stats>div{min-width:0;padding:11px 13px}.innate-stats strong{font-size:15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}.innate-stats span{font-size:12px}
.innate-next-node{width:100%;box-sizing:border-box}.innate-next-copy{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%}.innate-next-copy span,.innate-next-copy strong,.innate-next-copy small{width:100%;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:break-word;writing-mode:horizontal-tb}.innate-next-copy strong{font-size:14px;line-height:1.65}.innate-next-copy small{line-height:1.6}.innate-next-node>.innate-max-btn{align-self:center}
@media(max-width:760px){.innate-hero{padding:16px}.innate-hero h2{font-size:24px}.innate-hero-copy p{font-size:14px;line-height:1.65}.innate-stats{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:14px 0}.innate-stats>div{padding:10px 11px}.innate-stats strong{font-size:14px}.innate-next-node{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:13px!important}.innate-next-copy{flex:none!important;width:100%!important;min-width:0!important}.innate-next-node>.innate-max-btn{position:static!important;width:100%!important;min-width:0!important;margin:0!important}.innate-node-detail{grid-template-columns:1fr}.innate-node-copy-head{align-items:stretch;flex-direction:column}.innate-node-state{max-width:100%;align-self:flex-start}.innate-rune-path{display:block}.innate-rune-connector{height:34px;transform:none}.innate-minor-row{grid-template-columns:52px minmax(0,1fr)}.innate-major-description,.innate-minor-description{min-height:0}.innate-shard-grid{grid-template-columns:1fr}.innate-planet-traits{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* 本命神通 · 按内容栏宽度响应 */
#skill-view{container-type:inline-size;container-name:skill-layout}
@container skill-layout (max-width:760px){
.innate-next-node{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;height:auto!important;min-height:0!important}.innate-next-copy{display:block!important;flex:none!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important}.innate-next-copy span,.innate-next-copy strong,.innate-next-copy small{display:block!important;width:100%!important;max-width:none!important;height:auto!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;writing-mode:horizontal-tb!important}.innate-next-node>.innate-max-btn{position:static!important;display:block!important;align-self:stretch!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
.innate-rune-builder .innate-section-head{flex-direction:column!important;align-items:stretch!important}.innate-rune-stage{padding:12px}.innate-rune-paths{grid-template-columns:minmax(0,1fr)!important}.innate-rune-path{display:block!important;width:auto!important;min-width:0!important}.innate-major-description,.innate-minor-description{min-height:0}.innate-rune-connector{height:34px!important;transform:none!important}.innate-minor-row{grid-template-columns:52px minmax(0,1fr)!important}.innate-shard-grid{grid-template-columns:minmax(0,1fr)!important}.innate-node-detail{grid-template-columns:minmax(0,1fr)!important}.innate-node-planet-preview{width:100%;max-width:220px;justify-self:center}.innate-planet-traits{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* 本命神通 · 稀有星穹与随机天象 */
.innate-page-actions{position:relative;z-index:4;margin-bottom:10px}.innate-page-actions button{width:100%;padding:10px 14px;text-align:left;border-color:rgba(210,170,94,.34);background:linear-gradient(135deg,rgba(65,43,29,.92),rgba(32,24,27,.96));color:#f4ddb0}
.innate-canvas-wrap:not(.is-interactive){touch-action:pan-y}.innate-canvas-wrap:not(.is-interactive) canvas{touch-action:pan-y;cursor:default}.innate-tree-visibility-toggle{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 10px;border:1px solid rgba(145,119,220,.34);border-radius:9px;background:rgba(20,16,42,.72);color:#d8d1ef;font-size:12px;cursor:pointer;user-select:none}.innate-tree-visibility-toggle input{width:16px;height:16px;margin:0;accent-color:#9e75ff;cursor:pointer}.innate-tree-visibility-toggle span{white-space:nowrap}.innate-meteor-layer{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}.innate-meteor-layer i{position:absolute;left:-130px;top:var(--meteor-top);width:105px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(138,176,255,.15),rgba(226,238,255,.95));filter:drop-shadow(0 0 5px rgba(145,187,255,.9));opacity:0;transform:rotate(18deg) scale(var(--meteor-scale));transform-origin:right center;animation:innate-meteor-cross var(--meteor-duration) linear var(--meteor-delay) infinite}.innate-meteor-layer i:after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff,0 0 14px #8db8ff}.innate-canvas-tip{z-index:3}@keyframes innate-meteor-cross{0%,68%{opacity:0;transform:translate3d(0,0,0) rotate(18deg) scale(var(--meteor-scale))}70%{opacity:0}72%{opacity:1}84%{opacity:.95}88%,100%{opacity:0;transform:translate3d(var(--meteor-x),var(--meteor-y),0) rotate(18deg) scale(var(--meteor-scale))}}
.innate-node-detail.is-rare{border-color:rgba(255,204,82,.78);background:radial-gradient(circle at 22% 24%,rgba(255,188,45,.15),transparent 34%),linear-gradient(135deg,rgba(23,18,28,.97),rgba(45,29,17,.94));box-shadow:inset 0 1px rgba(255,247,204,.16),0 0 18px rgba(255,181,42,.25)}.innate-node-detail.is-rare .innate-node-planet-preview{border-color:rgba(255,206,87,.74);box-shadow:0 0 20px rgba(255,184,43,.25),inset 0 0 22px rgba(255,194,57,.09)}.innate-rare-badge{display:inline-flex;margin-top:6px;padding:4px 9px;border:1px solid rgba(255,214,105,.62);border-radius:999px;background:linear-gradient(135deg,rgba(117,72,12,.72),rgba(47,29,8,.82));color:#ffe49a;font-size:11px;font-style:normal;font-weight:700;box-shadow:0 0 12px rgba(255,184,45,.2)}.innate-planet-traits>span.is-rare{border-color:rgba(255,207,83,.76);background:radial-gradient(circle at 20% 15%,rgba(255,220,115,.18),transparent 42%),linear-gradient(135deg,rgba(111,70,14,.36),rgba(39,25,13,.7));color:#ffe7a2;box-shadow:0 0 13px rgba(255,185,46,.22),inset 0 1px rgba(255,244,199,.11)}.innate-planet-traits>span.is-rare small{color:#e7b94e}.innate-node-detail[data-rare-count="6"]{animation:innate-rare-apex 2.2s ease-in-out infinite alternate}@keyframes innate-rare-apex{to{box-shadow:inset 0 1px rgba(255,255,225,.25),0 0 34px rgba(255,196,54,.55)}}

.innate-rune-layout{margin-top:14px;padding:clamp(14px,3cqw,26px);border:1px solid rgba(122,95,205,.34);border-radius:24px;background:radial-gradient(circle at 50% 12%,rgba(79,53,158,.18),transparent 34%),linear-gradient(180deg,rgba(12,17,43,.97),rgba(5,9,25,.99));box-shadow:inset 0 1px rgba(255,255,255,.045),0 16px 38px rgba(3,5,16,.24)}.innate-rune-pair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2.4cqw,24px);width:min(100%,760px);margin:0 auto}.innate-rune-pair{position:relative;display:grid;justify-items:center;align-content:start;min-width:0;padding:14px 5px 8px;border-radius:20px;background:linear-gradient(180deg,rgba(50,34,105,.23),rgba(10,15,38,.08));border:1px solid rgba(131,101,207,.14)}.innate-rune-layout-node{position:relative;display:grid;justify-items:center;gap:3px;min-width:0;padding:0;border:0!important;background:transparent!important;color:#ded8f2;box-shadow:none!important}.innate-rune-layout-node .innate-rune-icon{transition:transform .2s ease,filter .2s ease}.innate-rune-layout-node>span{margin-top:4px;color:#7e87a7;font-size:9px;line-height:1.2}.innate-rune-layout-node>b{display:block;max-width:120px;color:#ded8f2;font-size:11px;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.innate-rune-layout-node:hover .innate-rune-icon,.innate-rune-layout-node.is-active .innate-rune-icon{transform:scale(1.07);filter:drop-shadow(0 0 15px rgba(255,205,91,.68))}.innate-rune-layout-node.is-active>b{color:#ffe39a}.innate-rune-layout-node.is-active:after{content:"";position:absolute;left:50%;border:1px solid rgba(255,211,95,.72);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 18px rgba(255,187,48,.4);pointer-events:none}.innate-rune-layout-node--major .innate-rune-icon{width:86px;height:86px}.innate-rune-layout-node--major.is-active:after{top:-5px;width:94px;height:94px}.innate-rune-layout-node--minor .innate-rune-icon{width:54px;height:54px}.innate-rune-layout-node--minor.is-active:after{top:-4px;width:62px;height:62px}.innate-rune-layout-node--shard .innate-rune-icon{width:46px;height:46px}.innate-rune-layout-node--shard.is-active:after{top:-4px;width:54px;height:54px}.innate-rune-pair-link{position:relative;width:24px;height:42px;margin:4px 0}.innate-rune-pair-link:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(169,126,255,.18),rgba(182,143,255,.8),rgba(169,126,255,.18))}.innate-rune-pair-link i{position:absolute;left:50%;top:50%;width:9px;height:9px;border:1px solid rgba(202,170,255,.86);background:#4c2b8b;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 10px rgba(159,103,255,.62)}.innate-rune-focus-panel{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,760px);min-height:210px;margin:20px auto;padding:clamp(16px,3cqw,24px);border:1px solid rgba(151,119,226,.42);border-radius:20px;background:radial-gradient(circle at 15% 0,rgba(105,70,197,.2),transparent 38%),rgba(7,12,31,.94);box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 30px rgba(3,5,18,.28)}.innate-rune-focus-type{color:#a48bd5;font-size:10px;letter-spacing:.08em}.innate-rune-focus-title{display:flex;align-items:center;gap:12px;margin:9px 0}.innate-rune-focus-title .innate-rune-icon{width:58px;height:58px;flex:0 0 auto}.innate-rune-focus-title h4{margin:0;color:#fff4ce;font-size:19px}.innate-rune-focus-title small{display:block;margin-top:3px;color:#7883a2;font-size:10px}.innate-rune-focus-panel>p{min-height:42px;margin:2px 0 14px;color:#c8cce0;font-size:13px;line-height:1.6}.innate-rune-focus-select{display:grid;gap:6px}.innate-rune-focus-select>span{color:#929bb7;font-size:10px}.innate-rune-focus-select select{width:100%;min-width:0}.innate-rune-shard-dock{width:min(100%,520px);margin:0 auto;padding:13px 16px 15px;border:1px solid rgba(130,103,199,.28);border-radius:16px;background:linear-gradient(180deg,rgba(28,24,62,.76),rgba(9,14,34,.9))}.innate-rune-shard-head{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:10px}.innate-rune-shard-head>span{color:#ece4ff;font-size:13px;font-weight:700}.innate-rune-shard-head>small{color:#707b9b;font-size:10px}.innate-rune-shard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.innate-rune-shard-grid .innate-rune-layout-node{padding:7px 4px;border-radius:12px!important;background:rgba(89,61,155,.1)!important}.innate-rune-builder .innate-save-btn{display:block;width:min(100%,440px);margin:14px auto 0}
@container skill-layout (max-width:600px){.innate-rune-layout{padding:12px 8px;border-radius:18px}.innate-rune-pair-grid{gap:5px}.innate-rune-pair{padding:11px 2px 7px;border-radius:14px}.innate-rune-layout-node--major .innate-rune-icon{width:64px;height:64px}.innate-rune-layout-node--major.is-active:after{top:-4px;width:72px;height:72px}.innate-rune-layout-node--minor .innate-rune-icon{width:46px;height:46px}.innate-rune-layout-node--minor.is-active:after{width:54px;height:54px}.innate-rune-layout-node>b{max-width:88px;font-size:9px}.innate-rune-pair-link{height:34px;margin:2px 0}.innate-rune-focus-panel{min-height:200px;margin:14px auto;padding:14px;border-radius:16px}.innate-rune-focus-title .innate-rune-icon{width:48px;height:48px}.innate-rune-focus-title h4{font-size:16px}.innate-rune-focus-panel>p{font-size:11px}.innate-rune-shard-dock{padding:11px 8px 13px}.innate-rune-shard-head{display:grid;justify-items:center;gap:2px}.innate-rune-shard-grid{gap:5px}.innate-rune-layout-node--shard .innate-rune-icon{width:40px;height:40px}.innate-rune-layout-node--shard.is-active:after{width:48px;height:48px}}

.innate-preset-controls{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px;min-width:min(100%,390px)}.innate-preset-controls>small{grid-column:1/-1;color:#75809f;font-size:10px;line-height:1.4}.innate-rune-damage-axis{width:min(100%,820px);margin:18px auto 0;padding:15px;border:1px solid rgba(112,95,180,.28);border-radius:18px;background:linear-gradient(180deg,rgba(10,16,39,.92),rgba(5,9,24,.96))}.innate-rune-axis-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}.innate-rune-axis-head span{color:#9f88d4;font-size:10px;letter-spacing:.08em}.innate-rune-axis-head h4{margin:3px 0 0;color:#eee8ff;font-size:16px}.innate-rune-axis-head>small{max-width:360px;color:#747e9b;font-size:10px;line-height:1.45;text-align:right}.innate-rune-damage-chart{overflow:hidden;border-radius:12px;background:radial-gradient(circle at 50% 20%,rgba(55,43,113,.2),transparent 45%),rgba(3,7,20,.82)}.innate-rune-damage-chart svg{display:block;width:100%;height:auto;min-height:260px}.innate-rune-chart-grid line{stroke:rgba(126,139,182,.16);stroke-width:1}.innate-rune-chart-grid text,.innate-rune-chart-xlabels text,.innate-rune-chart-axis-title{fill:#77819f;font-size:10px}.innate-rune-chart-axis{stroke:rgba(157,143,205,.5);stroke-width:1.2}.innate-rune-chart-lines polyline{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.68}.innate-rune-chart-lines polyline.is-active{stroke-width:3.4;opacity:1;filter:drop-shadow(0 0 4px currentColor)}.innate-rune-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 13px;padding:9px 8px}.innate-rune-chart-legend span{display:inline-flex;align-items:center;gap:5px;color:#8791ad;font-size:10px}.innate-rune-chart-legend span.is-active{color:#f3edff;font-weight:700}.innate-rune-chart-legend i{width:15px;height:3px;border-radius:999px;background:var(--line-color);box-shadow:0 0 6px var(--line-color)}.innate-rune-chart-note{margin:0;padding:0 8px 9px;color:#68738f;font-size:9px;line-height:1.45;text-align:center}
@container skill-layout (max-width:600px){.innate-preset-controls{grid-template-columns:minmax(0,1fr);min-width:0}.innate-rune-axis-head{display:grid;gap:5px}.innate-rune-axis-head>small{text-align:left}.innate-rune-damage-axis{padding:10px 6px}.innate-rune-damage-chart svg{min-height:230px}.innate-rune-chart-legend{gap:6px 9px}.innate-rune-chart-note{text-align:left}}


/* 法印快速构筑：选择方案后由玩家统一保存生效 */
.innate-preset-controls{grid-template-columns:minmax(0,1fr);align-content:start;min-width:min(100%,420px)}
.innate-preset-controls .innate-preset-select,.innate-preset-controls>small,.innate-save-btn--top{grid-column:1/-1}
.innate-save-btn--top{display:block;width:100%!important;margin:2px 0 0!important;min-height:38px}
.innate-rune-bound-effect{display:grid;gap:5px;margin:-4px 0 13px;padding:10px 12px;border:1px solid rgba(219,177,92,.3);border-radius:11px;background:linear-gradient(135deg,rgba(93,58,18,.22),rgba(34,25,55,.45));line-height:1.45}
.innate-rune-bound-effect span{color:#d9b968;font-size:10px;letter-spacing:.04em}
.innate-rune-bound-effect strong{color:#fff0c7;font-size:12px;font-weight:600}
@container skill-layout (max-width:600px){.innate-preset-controls{width:100%;min-width:0}.innate-save-btn--top{min-height:42px}.innate-rune-bound-effect{padding:9px 10px}.innate-rune-bound-effect strong{font-size:11px}}

.innate-zoom-control{display:grid;grid-template-columns:auto minmax(120px,1fr) auto 52px;align-items:center;gap:9px;margin-top:10px;padding:9px 12px;border:1px solid rgba(145,119,220,.28);border-radius:11px;background:rgba(12,10,30,.72);color:#aeb4d6;font-size:12px}.innate-zoom-control input{width:100%;min-width:0;margin:0;accent-color:#a676ff;touch-action:pan-x}.innate-zoom-control strong{color:#eadfff;text-align:right;font-variant-numeric:tabular-nums}@media(max-width:520px){.innate-zoom-control{grid-template-columns:auto minmax(90px,1fr) auto 46px;padding:8px 9px;gap:7px}.innate-zoom-control strong{font-size:11px}}

#territory-view.active .territory-farm-land-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}#territory-view.active .territory-farm-land-count{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid rgba(116,85,44,.18);background:rgba(255,255,255,.62)}#territory-view.active .territory-farm-land-count em{font-style:normal;font-size:12px;color:#74644d}#territory-view.active .territory-farm-land-count b{font-size:13px;color:#3b3429}#territory-view.active .territory-farm-land-count.land-red{background:linear-gradient(135deg,rgba(150,42,32,.14),rgba(226,119,66,.12));border-color:rgba(151,48,36,.28)}#territory-view.active .territory-farm-land-count.land-black{background:linear-gradient(135deg,rgba(28,25,35,.9),rgba(72,55,91,.82));border-color:rgba(128,103,158,.5)}#territory-view.active .territory-farm-land-count.land-black em,#territory-view.active .territory-farm-land-count.land-black b{color:#f2eafa}#territory-view.active .territory-farm-land-count.land-gold{background:linear-gradient(135deg,rgba(255,220,105,.34),rgba(191,126,22,.18));border-color:rgba(207,150,38,.46)}#territory-view.active .territory-herb-land-badge{position:absolute;right:7px;top:7px;z-index:4;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.74);font-size:9px;font-weight:800;color:#66543b;box-shadow:0 2px 7px rgba(56,39,17,.12)}#territory-view.active .territory-herb-plot.land-red{background:linear-gradient(155deg,rgba(255,248,228,.96),rgba(166,58,41,.18))}#territory-view.active .territory-herb-plot.land-red .territory-herb-soil{filter:hue-rotate(320deg) saturate(1.35)}#territory-view.active .territory-herb-plot.land-black{background:linear-gradient(155deg,rgba(46,40,55,.96),rgba(22,18,29,.96));border-color:rgba(126,101,154,.5)}#territory-view.active .territory-herb-plot.land-black strong,#territory-view.active .territory-herb-plot.land-black small{color:#f0e8f7}#territory-view.active .territory-herb-plot.land-black .territory-herb-land-badge{background:rgba(20,15,27,.78);color:#eadbfa}#territory-view.active .territory-herb-plot.land-gold{background:linear-gradient(145deg,rgba(255,247,197,.96),rgba(221,155,38,.3));border-color:rgba(208,151,39,.58);box-shadow:inset 0 0 18px rgba(255,221,99,.25),0 8px 18px rgba(145,94,14,.12)}#territory-view.active .territory-herb-plot.land-gold .territory-herb-land-badge{background:rgba(255,239,166,.9);color:#85580c}.omega-claimed-milestones{margin-top:10px;border-top:1px solid rgba(255,255,255,.08)}.omega-claimed-milestones summary{padding:12px 0 4px;cursor:pointer;color:#b7a8d2;font-weight:700}.omega-claimed-milestones[open] summary{color:#e8ddff}.omega-milestone-empty{margin:4px 0;color:#8f85a4}


/* 药田土地品质视觉区分 */
#territory-view.active .territory-herb-plot.land-normal {
    border-color: rgba(142, 96, 49, 0.78);
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(45, 24, 10, 0.42) 16% 20%, transparent 20% 46%, rgba(45, 24, 10, 0.42) 46% 50%, transparent 50% 76%, rgba(45, 24, 10, 0.42) 76% 80%, transparent 80%),
        linear-gradient(155deg, #7a512d, #3b2617 68%, #25170f);
}

#territory-view.active .territory-farm-land-count.land-purpleGold,
#territory-view.active .territory-herb-plot.land-purpleGold {
    --land-top: #653b70;
    --land-mid: #3f284f;
    --land-bottom: #211729;
    --land-furrow: rgba(35, 13, 39, 0.52);
    --land-edge: rgba(229, 174, 237, 0.72);
    --land-glow: rgba(207, 112, 222, 0.3);
    --land-text: #fff2dc;
    --land-muted: #dec7e4;
    --land-sprout: #f4cf78;
}

#territory-view.active .territory-farm-land-count.land-blueGold,
#territory-view.active .territory-herb-plot.land-blueGold {
    --land-top: #27677d;
    --land-mid: #18445f;
    --land-bottom: #102636;
    --land-furrow: rgba(5, 31, 45, 0.58);
    --land-edge: rgba(112, 215, 239, 0.76);
    --land-glow: rgba(57, 184, 223, 0.3);
    --land-text: #eefcff;
    --land-muted: #b9e3ee;
    --land-sprout: #ffe08b;
}

#territory-view.active .territory-farm-land-count.land-chromatic,
#territory-view.active .territory-herb-plot.land-chromatic {
    --land-top: #29695c;
    --land-mid: #4f5342;
    --land-bottom: #34253f;
    --land-furrow: rgba(19, 53, 46, 0.5);
    --land-edge: rgba(255, 218, 132, 0.8);
    --land-glow: rgba(105, 218, 176, 0.28);
    --land-text: #fff8df;
    --land-muted: #d9ebcf;
    --land-sprout: #fff09a;
}

#territory-view.active .territory-farm-land-count[class*="land-radiant"],
#territory-view.active .territory-herb-plot[class*="land-radiant"] {
    --land-top: #9b572e;
    --land-mid: #315f59;
    --land-bottom: #26304f;
    --land-furrow: rgba(19, 35, 48, 0.5);
    --land-edge: rgba(255, 235, 165, 0.92);
    --land-glow: rgba(255, 199, 92, 0.38);
    --land-text: #fffbea;
    --land-muted: #f2e3bd;
    --land-sprout: #fff3a6;
}

#territory-view.active .territory-farm-land-count:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) {
    border-color: var(--land-edge);
    background: linear-gradient(135deg, var(--land-top), var(--land-mid) 62%, var(--land-bottom));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 3px 10px var(--land-glow);
}

#territory-view.active .territory-farm-land-count:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) em,
#territory-view.active .territory-farm-land-count:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) b {
    color: var(--land-text);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) {
    isolation: isolate;
    border-color: var(--land-edge);
    color: var(--land-text);
    background:
        linear-gradient(90deg, transparent 0 16%, var(--land-furrow) 16% 20%, transparent 20% 46%, var(--land-furrow) 46% 50%, transparent 50% 76%, var(--land-furrow) 76% 80%, transparent 80%),
        linear-gradient(150deg, var(--land-top), var(--land-mid) 62%, var(--land-bottom));
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.22),
        inset 0 -12px rgba(8, 10, 18, 0.2),
        0 5px 14px var(--land-glow);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"])::before,
#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"])::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"])::before {
    inset: 0;
    opacity: 0.42;
    background: repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 9px);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"])::after {
    inset: -55% -45%;
    opacity: 0.7;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 249, 212, 0.34) 49%, transparent 56%);
    transform: translateX(-48%);
    animation: territory-gemland-shimmer 5.6s ease-in-out infinite;
}

#territory-view.active .territory-herb-plot.land-blueGold::after { animation-delay: -1.2s; }
#territory-view.active .territory-herb-plot.land-chromatic::after { animation-delay: -2.4s; }
#territory-view.active .territory-herb-plot[class*="land-radiant"]::after { animation-delay: -3.6s; }

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) > * {
    z-index: 1;
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) strong {
    color: var(--land-text);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) small {
    color: var(--land-muted);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) .territory-herb-crop {
    border: 1px solid var(--land-edge);
    color: var(--land-sprout);
    background: rgba(8, 16, 20, 0.54);
    box-shadow: 0 0 11px var(--land-glow), inset 0 1px rgba(255, 255, 255, 0.12);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]) .territory-herb-land-badge {
    border: 1px solid var(--land-edge);
    color: var(--land-text);
    background: rgba(10, 17, 22, 0.72);
    box-shadow: 0 2px 8px var(--land-glow);
}

#territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]).ready {
    animation: territory-gemland-ready-pulse 1.8s ease-in-out infinite;
}

@keyframes territory-gemland-shimmer {
    0%, 28% { transform: translateX(-48%); }
    68%, 100% { transform: translateX(48%); }
}

@keyframes territory-gemland-ready-pulse {
    50% { filter: brightness(1.14) saturate(1.08); }
}
#territory-view.active .territory-herb-plot.land-red {
    border-color: rgba(238, 111, 76, 0.82);
    color: #ffe1c8;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(76, 17, 13, 0.38) 16% 20%, transparent 20% 46%, rgba(76, 17, 13, 0.38) 46% 50%, transparent 50% 76%, rgba(76, 17, 13, 0.38) 76% 80%, transparent 80%),
        linear-gradient(150deg, #b84c36, #762a24 64%, #431a18);
    box-shadow: inset 0 1px rgba(255, 202, 166, 0.24), inset 0 -10px rgba(63, 10, 9, 0.2);
}
#territory-view.active .territory-herb-plot.land-black {
    border-color: rgba(147, 125, 181, 0.78);
    color: #f1eaff;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(0, 0, 0, 0.5) 16% 20%, transparent 20% 46%, rgba(0, 0, 0, 0.5) 46% 50%, transparent 50% 76%, rgba(0, 0, 0, 0.5) 76% 80%, transparent 80%),
        linear-gradient(150deg, #393241, #201b28 64%, #0d0b11);
    box-shadow: inset 0 1px rgba(211, 190, 239, 0.18), inset 0 -10px rgba(0, 0, 0, 0.35);
}
#territory-view.active .territory-herb-plot.land-gold {
    border-color: rgba(218, 170, 62, 0.82);
    color: #3e2907;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(91, 53, 3, 0.3) 16% 20%, transparent 20% 46%, rgba(91, 53, 3, 0.3) 46% 50%, transparent 50% 76%, rgba(91, 53, 3, 0.3) 76% 80%, transparent 80%),
        linear-gradient(145deg, #d8b558, #ad7c20 62%, #67400b);
    box-shadow: inset 0 1px rgba(255, 240, 170, 0.34), inset 0 -10px rgba(89, 49, 2, 0.22), 0 0 8px rgba(185, 132, 30, 0.12);
}
#territory-view.active .territory-herb-plot.land-red strong,
#territory-view.active .territory-herb-plot.land-red small,
#territory-view.active .territory-herb-plot.land-black strong,
#territory-view.active .territory-herb-plot.land-black small {
    color: #fff1df;
}
#territory-view.active .territory-herb-plot.land-gold strong {
    color: #4b3106;
}
#territory-view.active .territory-herb-plot.land-gold small {
    color: #68460c;
}
#territory-view.active .territory-herb-plot.land-red .territory-herb-soil i { background: rgba(91, 18, 13, 0.72); }
#territory-view.active .territory-herb-plot.land-black .territory-herb-soil i { background: rgba(0, 0, 0, 0.82); }
#territory-view.active .territory-herb-plot.land-gold .territory-herb-soil i { background: rgba(112, 65, 3, 0.58); }
#territory-view.active .territory-herb-plot.land-purpleGold .territory-herb-soil i { background: rgba(91, 42, 104, 0.62); }
#territory-view.active .territory-herb-plot.land-blueGold .territory-herb-soil i { background: rgba(25, 88, 122, 0.58); }
#territory-view.active .territory-herb-plot.land-chromatic .territory-herb-soil i { background: rgba(34, 104, 83, 0.52); }
#territory-view.active .territory-herb-plot[class*="land-radiant"] .territory-herb-soil i { background: rgba(84, 48, 44, 0.5); }
#territory-view.active .territory-herb-plot.land-normal.selected,
#territory-view.active .territory-herb-plot.land-red.selected,
#territory-view.active .territory-herb-plot.land-black.selected,
#territory-view.active .territory-herb-plot.land-gold.selected,
#territory-view.active .territory-herb-plot.land-purpleGold.selected,
#territory-view.active .territory-herb-plot.land-blueGold.selected,
#territory-view.active .territory-herb-plot.land-chromatic.selected,
#territory-view.active .territory-herb-plot[class*="land-radiant"].selected {
    outline: 2px solid #fff0a8;
    outline-offset: 1px;
    filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
    #territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"])::after,
    #territory-view.active .territory-herb-plot:is(.land-purpleGold, .land-blueGold, .land-chromatic, [class*="land-radiant"]).ready {
        animation: none;
    }
}

/* ===== 导航焦点页 ===== */
.focus-hub-loading { margin: 24px 0; text-align: center; color: var(--color-text-muted); }
.focus-hub-shell { display: grid; gap: 16px; padding-bottom: 24px; color: var(--color-text-dark); }
.focus-hub-hero { position: relative; min-height: 250px; overflow: hidden; border: 1px solid var(--color-border-soft); border-radius: 18px; background: linear-gradient(145deg, rgba(47,36,29,.96), rgba(22,17,14,.98)); box-shadow: 0 16px 36px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.04); }
.focus-hub-sky { position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 78% 24%, rgba(183,150,104,.25), transparent 17%), linear-gradient(160deg, transparent 40%, rgba(140,157,172,.08)); }
.focus-hub-sky::before,.focus-hub-sky::after { content:""; position:absolute; left:-8%; right:-8%; bottom:-32%; height:66%; border-radius:50% 50% 0 0; background:linear-gradient(160deg,#392c23,#1c1511); transform:rotate(-4deg); }
.focus-hub-sky::after { bottom:-43%; left:28%; background:linear-gradient(160deg,#49382d,#211813); transform:rotate(8deg); }
.focus-hub-sky i { position:absolute; width:4px; height:4px; border-radius:50%; background:#e8d3ad; box-shadow:0 0 12px #b79668; animation:focusSpark 4.5s ease-in-out infinite; }
.focus-hub-sky i:nth-child(1){left:68%;top:18%}.focus-hub-sky i:nth-child(2){left:84%;top:38%;animation-delay:1.4s}.focus-hub-sky i:nth-child(3){left:57%;top:47%;animation-delay:2.6s}
.focus-hub-hero-copy { position:relative; z-index:2; max-width:620px; padding:32px; }
.focus-hub-hero-copy>small,.focus-hub-assistant small { color:#c9a977; letter-spacing:.16em; }
.focus-hub-hero-copy h2 { margin:10px 0 8px; color:var(--color-text-light); font-size:clamp(24px,5vw,38px); line-height:1.2; }
.focus-hub-hero-copy p { max-width:520px; margin:0; color:var(--color-text-muted); line-height:1.7; }
.focus-hub-hero-actions { display:flex; gap:10px; margin-top:22px; }
.focus-hub-hero-actions button,.focus-hub-assistant button { border:1px solid #8b6c49; border-radius:10px; padding:11px 16px; color:#19110c; background:linear-gradient(180deg,#d2b27f,#a98455); font-weight:700; }
.focus-hub-hero-actions .secondary { color:var(--color-text-light); background:rgba(38,29,24,.84); border-color:var(--color-border-soft); }
.focus-hub-default-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-parchment); }
.focus-hub-default-row span { display:grid; gap:3px; }.focus-hub-default-row small { color:var(--color-text-muted); }
.focus-hub-switch { width:52px; height:29px; flex:none; padding:3px; border:1px solid var(--color-border-soft); border-radius:20px; background:#17110e; }
.focus-hub-switch i { display:block; width:21px; height:21px; border-radius:50%; background:#8b7965; transition:transform .2s,background .2s; }
.focus-hub-switch.is-on { background:#5b4935; }.focus-hub-switch.is-on i { transform:translateX(21px); background:#e2c38e; }
.focus-hub-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:4px; }
.focus-hub-section-head h3 { margin:0; color:var(--color-text-light); }.focus-hub-section-head span { color:var(--color-text-muted); font-size:12px; }
.focus-hub-progress-list { display:flex; gap:12px; overflow-x:auto; padding:2px 1px 8px; scroll-snap-type:x proximity; }
.focus-hub-progress-card { display:flex; min-width:245px; gap:12px; padding:16px; text-align:left; color:var(--color-text-dark); border:1px solid var(--color-border); border-radius:15px; background:linear-gradient(145deg,var(--color-surface),var(--color-parchment)); scroll-snap-align:start; }
.focus-hub-progress-card:hover,.focus-hub-task-card:hover,.focus-hub-territory-grid button:hover { border-color:#8e704f; transform:translateY(-1px); }
.focus-hub-progress-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; color:#d7b57f; background:rgba(183,150,104,.12); }
.focus-hub-progress-copy { display:grid; min-width:0; gap:4px; flex:1; }.focus-hub-progress-copy>span { display:flex; justify-content:space-between; gap:8px; }
.focus-hub-progress-copy em { color:#bfa477; font-size:11px; font-style:normal; }.focus-hub-progress-copy strong { color:var(--color-text-light); font-size:21px; }.focus-hub-progress-copy small { color:var(--color-text-muted); }
.focus-hub-task-grid,.focus-hub-territory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.focus-hub-task-card,.focus-hub-territory-grid button { display:flex; align-items:center; gap:12px; min-height:74px; padding:13px 14px; text-align:left; color:var(--color-text-dark); border:1px solid var(--color-border); border-radius:13px; background:var(--color-parchment); }
.focus-hub-task-card>i,.focus-hub-territory-grid button>i { display:grid; place-items:center; width:34px; color:#a4937e; }.focus-hub-task-card.is-ready>i { color:#e2ba77; }
.focus-hub-task-card span,.focus-hub-territory-grid span { display:grid; gap:3px; flex:1; }.focus-hub-task-card small,.focus-hub-territory-grid small { color:var(--color-text-muted); }.focus-hub-task-card>strong { color:#e2c38e; font-size:20px; }
.focus-hub-territory-grid button strong { color:var(--color-text-light); font-size:17px; }
.focus-hub-assistant { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; border:1px solid #6d563d; border-radius:16px; background:linear-gradient(135deg,rgba(73,56,45,.95),rgba(38,29,24,.98)); }
.focus-hub-assistant h3 { margin:6px 0; color:var(--color-text-light); }.focus-hub-assistant p { margin:0; color:var(--color-text-muted); }
/* 原主页中间属性卡仅做质感增强，不改变内容和结构 */
.home-stats-panel { border-color:var(--color-border-soft); border-radius:16px; background:linear-gradient(145deg,rgba(47,36,29,.98),rgba(38,29,24,.98)); box-shadow:0 12px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035); }
.home-stats-header { border-bottom-color:rgba(183,150,104,.18); }
.home-stat-item { background:rgba(22,17,14,.34); border:1px solid rgba(101,80,63,.5); border-radius:10px; }
@keyframes focusSpark { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.4)} }
@media (max-width:680px){.focus-hub-hero{min-height:275px}.focus-hub-hero-copy{padding:24px 20px}.focus-hub-task-grid,.focus-hub-territory-grid{grid-template-columns:1fr}.focus-hub-assistant{align-items:flex-start;flex-direction:column}.focus-hub-assistant button{width:100%}.focus-hub-default-row{align-items:flex-start}.focus-hub-section-head span{display:none}}
@media (prefers-reduced-motion:reduce){.focus-hub-sky i{animation:none}.focus-hub-progress-card:hover,.focus-hub-task-card:hover,.focus-hub-territory-grid button:hover{transform:none}}
/* ===== 导航焦点页：按批准原型校准手机信息密度 ===== */
#equipment-display-view { padding: 0 !important; overflow: hidden; background: #15100d; }
#equipment-display-view .focus-hub-shell { display:block; max-width:none; padding:0 0 24px; color:#f3e9db; background:#15100d; }
#equipment-display-view .focus-hub-topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:7px; min-height:54px; padding:8px 10px; border-bottom:1px solid rgba(183,150,104,.22); background:rgba(18,13,11,.94); backdrop-filter:blur(14px); }
#equipment-display-view .focus-hub-avatar { display:grid; place-items:center; width:38px; height:38px; flex:none; color:#28190d; border:1px solid rgba(255,225,158,.5); border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe7aa,#c9984f 58%,#4c2c16); font:900 17px "STKaiti","KaiTi",serif; box-shadow:0 0 16px rgba(230,174,84,.2); }
#equipment-display-view .focus-hub-identity { min-width:0; margin-right:auto; }
#equipment-display-view .focus-hub-identity b,#equipment-display-view .focus-hub-identity small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#equipment-display-view .focus-hub-identity b { color:#f3e9db; font-size:12px; }
#equipment-display-view .focus-hub-identity small { margin-top:2px; color:#a4937e; font-size:9px; }
#equipment-display-view .focus-hub-resource { display:flex; align-items:center; gap:3px; padding:5px 7px; color:#ddd0be; border:1px solid rgba(183,150,104,.18); border-radius:99px; background:rgba(255,255,255,.035); font-size:9px; white-space:nowrap; }
#equipment-display-view .focus-hub-resource i { color:#d7b57f; font-style:normal; }
#equipment-display-view .focus-hub-icon-button { display:grid; place-items:center; width:32px; height:32px; min-width:32px; padding:0; color:#eee6d8; border:1px solid rgba(183,150,104,.25); border-radius:10px; background:rgba(255,255,255,.04); box-shadow:none; }
#equipment-display-view .focus-hub-hero { position:relative; min-height:276px; overflow:hidden; margin:0; border:0; border-bottom:1px solid rgba(183,150,104,.2); border-radius:0; background:radial-gradient(circle at 74% 14%,#f8d57e 0 4%,rgba(255,195,105,.24) 5%,transparent 19%),linear-gradient(180deg,transparent 46%,rgba(17,12,9,.72)),linear-gradient(160deg,#49382d,#2f241d 48%,#1a1310); box-shadow:none; }
#equipment-display-view .focus-hub-sky { position:absolute; inset:0; background:none; }
#equipment-display-view .focus-hub-sky::before,#equipment-display-view .focus-hub-sky::after { content:""; position:absolute; width:210px; height:32px; border-radius:50%; background:rgba(238,221,198,.07); }
#equipment-display-view .focus-hub-sky::before { left:-60px; top:62px; }
#equipment-display-view .focus-hub-sky::after { right:-55px; top:104px; width:180px; height:25px; }
#equipment-display-view .focus-hub-sky span { position:absolute; right:41px; bottom:48px; display:block; width:76px; height:108px; background:linear-gradient(90deg,#2b1c13,#b18a55 48%,#392417); clip-path:polygon(38% 0,62% 0,66% 15%,88% 24%,69% 27%,72% 47%,98% 59%,72% 61%,75% 82%,100% 92%,65% 94%,58% 100%,42% 100%,35% 94%,0 92%,25% 82%,28% 61%,2% 59%,28% 47%,31% 27%,12% 24%,34% 15%); filter:drop-shadow(0 0 12px rgba(230,172,84,.2)); }
#equipment-display-view .focus-hub-sky i { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffe4a2; box-shadow:0 0 8px #cda96b; }
#equipment-display-view .focus-hub-sky i:nth-child(1){left:28%;top:34%}#equipment-display-view .focus-hub-sky i:nth-child(2){left:61%;top:43%}#equipment-display-view .focus-hub-sky i:nth-child(3){left:82%;top:19%}
#equipment-display-view .focus-hub-hero-copy { position:relative; z-index:2; max-width:270px; padding:108px 14px 18px; }
#equipment-display-view .focus-hub-hero-copy>small { color:#c9a977; font-size:10px; letter-spacing:.12em; }
#equipment-display-view .focus-hub-hero-copy h2 { margin:6px 0 5px; color:#fff0d9; font:700 24px/1.12 "STKaiti","KaiTi",serif; letter-spacing:.02em; }
#equipment-display-view .focus-hub-hero-copy p { margin:0; color:#c8b9a7; font-size:9px; line-height:1.55; }
#equipment-display-view .focus-hub-hero-actions { display:flex; gap:7px; margin-top:10px; }
#equipment-display-view .focus-hub-hero-actions button { min-height:30px; padding:7px 11px; color:#24160c; border:1px solid rgba(255,220,150,.34); border-radius:99px; background:linear-gradient(180deg,#e0bd7e,#b88a4d); box-shadow:none; font-size:9px; font-weight:700; }
#equipment-display-view .focus-hub-hero-actions .secondary { color:#f2e7d8; border-color:rgba(183,150,104,.35); background:rgba(47,36,29,.82); }
#equipment-display-view .focus-hub-default-row { display:flex; align-items:center; gap:9px; margin:10px 12px 0; padding:9px 11px; border:1px solid rgba(183,150,104,.22); border-radius:12px; background:rgba(47,36,29,.72); }
#equipment-display-view .focus-hub-default-row>span { display:block; min-width:0; margin-right:auto; }
#equipment-display-view .focus-hub-default-row b,#equipment-display-view .focus-hub-default-row small { display:block; }
#equipment-display-view .focus-hub-default-row b { color:#f3e9db; font-size:10px; }
#equipment-display-view .focus-hub-default-row small { margin-top:2px; color:#a4937e; font-size:8px; }
#equipment-display-view .focus-hub-switch { position:relative; width:40px; height:22px; min-width:40px; padding:0; border:0; border-radius:99px; background:#43362c; box-shadow:none; }
#equipment-display-view .focus-hub-switch i { position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#d9d0c3; }
#equipment-display-view .focus-hub-switch.is-on { background:#b88639; }
#equipment-display-view .focus-hub-switch.is-on i { transform:translateX(18px); background:#fff0c4; }
#equipment-display-view .focus-hub-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 12px 8px; }
#equipment-display-view .focus-hub-section-head h3 { margin:0; color:#f3e9db; font-size:13px; }
#equipment-display-view .focus-hub-section-head span { display:block; color:#bfa477; font-size:9px; }
#equipment-display-view .focus-hub-progress-list { display:flex; gap:8px; overflow-x:auto; padding:0 12px 3px; scrollbar-width:none; scroll-snap-type:x proximity; }
#equipment-display-view .focus-hub-progress-list::-webkit-scrollbar { display:none; }
#equipment-display-view .focus-hub-progress-card { display:block; min-width:132px; width:132px; padding:10px; text-align:left; color:#ddd0be; border:1px solid rgba(183,150,104,.22); border-radius:13px; background:linear-gradient(145deg,rgba(73,56,45,.72),rgba(38,29,24,.9)); box-shadow:none; scroll-snap-align:start; }
#equipment-display-view .focus-hub-progress-copy { display:block; }
#equipment-display-view .focus-hub-progress-copy>span { display:flex; align-items:center; justify-content:space-between; gap:5px; }
#equipment-display-view .focus-hub-progress-copy b { color:#f3e9db; font-size:10px; white-space:nowrap; }
#equipment-display-view .focus-hub-progress-copy em { color:#c9a977; font-size:8px; font-style:normal; white-space:nowrap; }
#equipment-display-view .focus-hub-progress-copy strong { display:block; margin-top:8px; color:#ffe4a2; font-size:16px; white-space:nowrap; }
#equipment-display-view .focus-hub-progress-copy small { display:block; margin-top:3px; overflow:hidden; color:#a4937e; font-size:8px; white-space:nowrap; text-overflow:ellipsis; }
#equipment-display-view .focus-hub-task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0 12px; }
#equipment-display-view .focus-hub-task-card { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:53px; padding:9px; text-align:left; color:#ddd0be; border:1px solid rgba(183,150,104,.22); border-radius:12px; background:rgba(47,36,29,.72); box-shadow:none; }
#equipment-display-view .focus-hub-task-card>i { display:grid; place-items:center; width:32px; height:32px; color:#8c9dac; border-radius:9px; background:rgba(183,150,104,.08); font-size:14px; }
#equipment-display-view .focus-hub-task-card.is-ready>i { color:#d7b57f; }
#equipment-display-view .focus-hub-task-card span { display:block; min-width:0; }
#equipment-display-view .focus-hub-task-card b,#equipment-display-view .focus-hub-task-card small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#equipment-display-view .focus-hub-task-card b { color:#f3e9db; font-size:9px; }
#equipment-display-view .focus-hub-task-card small { margin-top:2px; color:#a4937e; font-size:8px; }
#equipment-display-view .focus-hub-task-card>strong { min-width:20px; padding:3px 6px; text-align:center; color:#28170b; border-radius:99px; background:#d7b57f; font-size:9px; }
#equipment-display-view .focus-hub-territory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 12px; }
#equipment-display-view .focus-hub-territory-grid button { position:relative; display:flex; align-items:flex-start; min-height:116px; gap:8px; overflow:hidden; padding:11px; text-align:left; color:#ddd0be; border:1px solid rgba(183,150,104,.22); border-radius:15px; background:radial-gradient(circle at 85% 20%,rgba(140,157,172,.16),transparent 32%),linear-gradient(145deg,#392c23,#211914); box-shadow:none; }
#equipment-display-view .focus-hub-territory-grid button:last-child { background:radial-gradient(circle at 84% 20%,rgba(168,179,116,.18),transparent 31%),linear-gradient(145deg,#343126,#211914); }
#equipment-display-view .focus-hub-territory-grid button>i { width:24px; color:#c9a977; font-size:16px; }
#equipment-display-view .focus-hub-territory-grid span { display:block; min-width:0; }
#equipment-display-view .focus-hub-territory-grid b,#equipment-display-view .focus-hub-territory-grid strong,#equipment-display-view .focus-hub-territory-grid small { display:block; }
#equipment-display-view .focus-hub-territory-grid b { color:#f3e9db; font-size:10px; }
#equipment-display-view .focus-hub-territory-grid strong { margin-top:9px; color:#fff0bd; font-size:13px; }
#equipment-display-view .focus-hub-territory-grid small { margin-top:4px; color:#a4937e; font-size:8px; line-height:1.45; }
#equipment-display-view .focus-hub-assistant { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px; padding:12px; border:1px solid rgba(183,150,104,.25); border-radius:14px; background:linear-gradient(135deg,rgba(73,56,45,.78),rgba(38,29,24,.95)); }
#equipment-display-view .focus-hub-assistant small { color:#c9a977; font-size:8px; letter-spacing:.12em; }
#equipment-display-view .focus-hub-assistant h3 { margin:3px 0; color:#f3e9db; font-size:12px; }
#equipment-display-view .focus-hub-assistant p { margin:0; color:#a4937e; font-size:8px; line-height:1.45; }
#equipment-display-view .focus-hub-assistant button { min-width:72px; padding:8px 10px; color:#28170b; border:1px solid rgba(255,220,150,.32); border-radius:10px; background:linear-gradient(180deg,#d8b477,#aa7f49); box-shadow:none; font-size:9px; font-weight:700; }
#equipment-display-view .focus-hub-progress-card:hover,#equipment-display-view .focus-hub-task-card:hover,#equipment-display-view .focus-hub-territory-grid button:hover { transform:none; border-color:rgba(232,199,127,.42); }
@media (max-width:430px){#equipment-display-view .focus-hub-resource-secondary{display:none}#equipment-display-view .focus-hub-hero-copy{max-width:255px}#equipment-display-view .focus-hub-task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 导航焦点默认入口设置：收纳到全局菜单 */
#top-bar-dropdown .top-bar-home-preference { display:flex; align-items:center; gap:10px; }
#top-bar-dropdown .top-bar-home-preference span { flex:1; white-space:nowrap; }
#top-bar-dropdown .top-bar-home-preference-switch { position:relative; width:34px; height:19px; flex:none; margin-left:8px; border:1px solid rgba(183,150,104,.28); border-radius:99px; background:#43362c; }
#top-bar-dropdown .top-bar-home-preference-switch::after { content:""; position:absolute; left:2px; top:2px; width:13px; height:13px; border-radius:50%; background:#d9d0c3; transition:transform .18s,background .18s; }
#top-bar-dropdown .top-bar-home-preference.is-on .top-bar-home-preference-switch { background:#a97939; }
#top-bar-dropdown .top-bar-home-preference.is-on .top-bar-home-preference-switch::after { transform:translateX(15px); background:#fff0c4; }

/* ===== ????? A ????? ===== */

#equipment-display-view { --focus-gold:#d9b978; --focus-gold-deep:#9d6f36; --focus-ink:#1b1512; --focus-panel:#2b211b; --focus-panel-2:#3a2b21; --focus-line:rgba(225,193,132,.2); --focus-text:#f4eadc; --focus-muted:#b6a38d; font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; }
#equipment-display-view .focus-game-shell { position:relative; display:grid; gap:12px; max-width:980px; margin:0 auto; padding:6px 10px 22px; color:var(--focus-text); }
#equipment-display-view .focus-game-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
#equipment-display-view .focus-game-hero { position:relative; min-height:286px; overflow:hidden; border:1px solid rgba(225,193,132,.22); border-radius:24px 24px 18px 18px; background:#18120f; box-shadow:0 16px 42px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.04); }
#equipment-display-view .focus-game-slides { position:relative; min-height:286px; }
#equipment-display-view .focus-game-full-home { position:absolute; z-index:8; left:14px; top:14px; display:flex; align-items:center; gap:5px; min-height:30px; padding:0 9px; color:#d7c4aa; border:1px solid rgba(225,193,132,.18); border-radius:11px; background:rgba(29,22,18,.68); backdrop-filter:blur(5px); font-size:9px; }#equipment-display-view .focus-game-full-home .focus-game-icon{width:14px;height:14px}
#equipment-display-view .focus-game-slide { position:absolute; inset:0; display:grid; align-content:end; overflow:hidden; padding:24px; opacity:0; visibility:hidden; transform:translateX(18px); transition:opacity .38s ease,transform .38s ease,visibility .38s; }
#equipment-display-view .focus-game-slide.is-active { opacity:1; visibility:visible; transform:none; z-index:2; }
#equipment-display-view .focus-game-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,11,8,.97) 0%,rgba(20,14,10,.78) 43%,rgba(12,10,9,.08) 77%),linear-gradient(0deg,rgba(10,8,7,.82),transparent 62%); pointer-events:none; }
#equipment-display-view .focus-game-scene-daily { background:radial-gradient(circle at 78% 24%,rgba(224,184,104,.36),transparent 20%),linear-gradient(145deg,#4b3020,#17120f 68%); }
#equipment-display-view .focus-game-scene-territory { background:radial-gradient(circle at 78% 32%,rgba(141,171,91,.34),transparent 25%),linear-gradient(145deg,#344329,#17150f 68%); }
#equipment-display-view .focus-game-scene-battle { background:radial-gradient(circle at 76% 32%,rgba(117,140,169,.27),transparent 26%),linear-gradient(145deg,#283443,#17120f 68%); }
#equipment-display-view .focus-game-scene-art { position:absolute; inset:0; opacity:.92; }
#equipment-display-view .focus-game-scene-art::before,#equipment-display-view .focus-game-scene-art::after { content:""; position:absolute; right:-8%; bottom:-31%; width:76%; height:67%; border-radius:48% 52% 0 0; transform:rotate(-7deg); background:linear-gradient(155deg,rgba(116,84,52,.9),rgba(32,24,18,.98)); box-shadow:inset 0 1px rgba(255,255,255,.08); }
#equipment-display-view .focus-game-scene-art::after { right:-30%; bottom:-19%; width:63%; height:47%; transform:rotate(10deg); background:linear-gradient(155deg,rgba(72,60,40,.96),rgba(25,20,16,.99)); }
#equipment-display-view .focus-game-scene-territory .focus-game-scene-art::before { background:repeating-linear-gradient(112deg,rgba(116,91,49,.96) 0 10px,rgba(64,74,39,.95) 10px 18px); }
#equipment-display-view .focus-game-scene-territory .focus-game-scene-art::after { background:linear-gradient(155deg,#4b653b,#1d2618); }
#equipment-display-view .focus-game-scene-art i { position:absolute; right:18%; top:20%; width:5px; height:5px; border-radius:50%; background:#f1d799; box-shadow:0 0 18px #e6b85e; animation:focusGameGlow 3.8s ease-in-out infinite; }
#equipment-display-view .focus-game-scene-art i:nth-child(2){right:31%;top:34%;animation-delay:1.1s}#equipment-display-view .focus-game-scene-art i:nth-child(3){right:12%;top:48%;animation-delay:2.2s}
#equipment-display-view .focus-game-slide-copy { position:relative; z-index:3; max-width:590px; }
#equipment-display-view .focus-game-slide-copy>small { color:var(--focus-gold); font-size:11px; font-weight:700; letter-spacing:.2em; }
#equipment-display-view .focus-game-slide-copy h2 { margin:8px 0 8px; color:#fff5e6; font-family:"FZKai-Z03","STKaiti","KaiTi",serif; font-size:clamp(25px,5vw,39px); font-weight:700; line-height:1.17; letter-spacing:.02em; text-shadow:0 3px 14px rgba(0,0,0,.38); }
#equipment-display-view .focus-game-slide-copy p { max-width:600px; margin:0; color:#c8b8a4; font-size:12px; line-height:1.6; }
#equipment-display-view .focus-game-slide-copy>div { display:flex; gap:8px; margin-top:17px; }
#equipment-display-view .focus-game-slide-copy button { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; color:#27180c; border:1px solid rgba(255,227,169,.46); border-radius:13px 13px 11px 11px; background:linear-gradient(180deg,#e1c283,#b98548); box-shadow:0 7px 18px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.35); font-size:12px; font-weight:800; }
#equipment-display-view .focus-game-slide-copy button.secondary { color:#eadfce; border-color:rgba(225,193,132,.2); background:rgba(39,29,23,.74); box-shadow:none; }
#equipment-display-view .focus-game-slide-copy button:disabled { opacity:.48; cursor:not-allowed; }
#equipment-display-view .focus-game-slide-copy .focus-game-icon { width:16px; height:16px; }
#equipment-display-view .focus-game-scene-mark { position:absolute; z-index:3; right:18px; top:18px; display:grid; justify-items:end; gap:3px; color:#d7c5ae; text-align:right; }
#equipment-display-view .focus-game-scene-mark b { font-family:"STKaiti","KaiTi",serif; font-size:17px; }.focus-game-scene-mark small{font-size:9px;color:#aa9986}
#equipment-display-view .focus-game-carousel-nav { position:absolute; z-index:5; right:18px; bottom:15px; display:flex; gap:7px; }
#equipment-display-view .focus-game-carousel-nav button { width:18px; height:4px; padding:0; border:0; border-radius:8px; background:rgba(235,219,195,.28); transition:width .25s,background .25s; }
#equipment-display-view .focus-game-carousel-nav button.is-active { width:38px; background:var(--focus-gold); }
#equipment-display-view .focus-game-major { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#equipment-display-view .focus-game-major>button { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:76px; padding:11px 12px; text-align:left; color:#eee2d2; border:1px solid var(--focus-line); border-radius:18px 18px 14px 14px; background:linear-gradient(145deg,rgba(58,43,33,.94),rgba(35,27,22,.98)); box-shadow:0 8px 20px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.035); }
#equipment-display-view .focus-game-major>button:hover,#equipment-display-view .focus-game-major>button:focus-visible { border-color:rgba(232,200,137,.48); transform:translateY(-1px); }
#equipment-display-view .focus-game-major>button.is-active { border-color:rgba(232,200,137,.62); background:linear-gradient(145deg,rgba(91,62,36,.98),rgba(39,29,23,.98)); box-shadow:inset 3px 0 #d7b474,0 8px 20px rgba(0,0,0,.16); }
#equipment-display-view .focus-game-major>button.is-active>.focus-game-icon { color:#f0cf8b; background:rgba(215,180,116,.13); }
#equipment-display-view .focus-game-major>button>.focus-game-icon { display:grid; width:42px; height:42px; padding:10px; color:#d7b474; border-radius:15px 15px 12px 12px; background:radial-gradient(circle at 35% 25%,rgba(255,225,160,.16),rgba(177,126,64,.06)); }
#equipment-display-view .focus-game-major span { display:grid; min-width:0; gap:3px; }#equipment-display-view .focus-game-major b{font-family:"STKaiti","KaiTi",serif;font-size:17px}#equipment-display-view .focus-game-major small{overflow:hidden;color:#9f8d79;font-size:9px;white-space:nowrap;text-overflow:ellipsis}#equipment-display-view .focus-game-major em{display:grid;place-items:center;min-width:22px;height:22px;color:#2a190c;border-radius:50%;background:#d9b978;font-size:10px;font-style:normal;font-weight:800}
#equipment-display-view .focus-game-section-title { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:4px 2px 0; }
#equipment-display-view .focus-game-section-title span{display:grid;gap:1px}.focus-game-section-title small{color:#9b7a50;font-size:8px;letter-spacing:.18em}.focus-game-section-title h3{margin:0;color:#f1e6d7;font-family:"STKaiti","KaiTi",serif;font-size:19px}.focus-game-section-title>button{display:flex;align-items:center;gap:2px;padding:5px 1px;color:#b9a58e;border:0;background:none;font-size:10px}.focus-game-section-title .focus-game-icon{width:14px;height:14px}
#equipment-display-view .focus-game-task-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
#equipment-display-view .focus-game-task { display:grid; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:58px; padding:9px 11px; text-align:left; color:#eadfce; border:1px solid rgba(225,193,132,.16); border-radius:15px 15px 12px 12px; background:rgba(43,33,27,.82); }
#equipment-display-view .focus-game-task>i { width:6px; height:28px; border-radius:8px; background:linear-gradient(#efd28e,#9a672f); box-shadow:0 0 12px rgba(224,182,96,.26); }.focus-game-task span{display:grid;min-width:0;gap:3px}.focus-game-task b,.focus-game-task small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.focus-game-task b{font-size:11px}.focus-game-task small{color:#a8947e;font-size:8px}.focus-game-task em{color:#d4b77e;font-size:9px;font-style:normal}
#equipment-display-view .focus-game-task.is-ready { border-color:rgba(222,179,96,.36); background:rgba(70,49,31,.86); }
#equipment-display-view .focus-game-empty { grid-column:1/-1; padding:15px; color:#9f8d79; border:1px dashed rgba(225,193,132,.16); border-radius:14px; text-align:center; font-size:11px; }
#equipment-display-view .focus-game-bottom-grid { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:8px; }
#equipment-display-view .focus-game-status-card,#equipment-display-view .focus-game-assistant { display:flex; align-items:center; gap:10px; min-height:86px; padding:12px; text-align:left; color:#eadfce; border:1px solid rgba(225,193,132,.16); border-radius:17px 17px 13px 13px; background:linear-gradient(145deg,rgba(54,43,32,.92),rgba(31,25,21,.98)); }
#equipment-display-view .focus-game-status-card>.focus-game-icon{width:34px;height:34px;padding:7px;color:#c8aa70;border-radius:12px;background:rgba(207,170,101,.08)}.focus-game-status-card span{display:grid;gap:2px}.focus-game-status-card small,.focus-game-status-card em{color:#9f8d79;font-size:8px;font-style:normal}.focus-game-status-card strong{font-size:13px;color:#f0dfbd}
#equipment-display-view .focus-game-assistant { justify-content:space-between; background:radial-gradient(circle at 15% 15%,rgba(213,177,102,.13),transparent 40%),linear-gradient(145deg,#3d3025,#211a16); }.focus-game-assistant span{display:grid;gap:2px}.focus-game-assistant small{color:#bd945f;font-size:8px;letter-spacing:.12em}.focus-game-assistant strong{font-family:"STKaiti","KaiTi",serif;font-size:15px}.focus-game-assistant p{margin:0;color:#9e8c78;font-size:8px}.focus-game-assistant button{flex:none;padding:9px 11px;color:#27180c;border:1px solid rgba(255,227,169,.36);border-radius:12px;background:linear-gradient(180deg,#d9bb7c,#a97942);font-size:10px;font-weight:800}
#equipment-display-view .focus-game-challenge-rail { position:absolute; z-index:4; right:16px; bottom:44px; display:grid; grid-template-columns:repeat(3,auto); gap:5px; max-width:48%; }.focus-game-challenge-rail span{display:flex;align-items:center;gap:4px;padding:5px 7px;color:#9eacbc;border:1px solid rgba(151,171,193,.16);border-radius:10px;background:rgba(21,28,36,.66);font-size:8px}.focus-game-challenge-rail i{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(151,171,193,.12);font-style:normal}.focus-game-challenge-rail span.is-active{color:#ffe4a8;border-color:#d7b36b;box-shadow:0 0 16px rgba(218,175,89,.22)}.focus-game-challenge-rail span.is-success{color:#bfe3a7;border-color:rgba(145,196,105,.5)}.focus-game-challenge-rail span.is-failed{color:#e5a29a;border-color:rgba(211,105,94,.5)}
#equipment-display-view .focus-game-battle-stage { position:absolute; right:8%; top:20%; width:42%; height:120px; z-index:1; }.focus-game-fighter{position:absolute;bottom:12px;width:43px;height:72px;border-radius:48% 48% 30% 30%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}.focus-game-fighter::before{content:"";position:absolute;left:7px;top:-18px;width:29px;height:29px;border-radius:50%}.focus-game-fighter.player{left:17%;background:linear-gradient(90deg,#6a4930,#d4ad68)}.focus-game-fighter.player::before{background:#d7b678}.focus-game-fighter.enemy{right:17%;background:linear-gradient(90deg,#26394b,#7089a2)}.focus-game-fighter.enemy::before{background:#6e86a0}.focus-game-battle-stage>i{position:absolute;left:50%;top:40%;width:4px;height:4px;border-radius:50%;background:#ffe6a3;opacity:0;box-shadow:0 0 10px 5px #e8bc67}.focus-game-battle-stage.is-fighting .player{animation:focusPlayerStrike .75s ease-in-out infinite}.focus-game-battle-stage.is-fighting .enemy{animation:focusEnemyStrike .75s ease-in-out infinite}.focus-game-battle-stage.is-fighting>i{animation:focusClash .75s ease-in-out infinite}.focus-game-battle-stage.is-win .enemy{transform:rotate(76deg) translateY(12px);opacity:.55}.focus-game-battle-stage.is-lose .player{transform:rotate(-76deg) translateY(12px);opacity:.55}
#equipment-display-view .focus-game-drawer[hidden]{display:none}.focus-game-drawer{position:fixed;z-index:1200;inset:0;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}.focus-game-drawer.is-open{opacity:1}.focus-game-drawer-mask{position:absolute;inset:0;border:0;background:rgba(8,6,5,.7);backdrop-filter:blur(3px)}.focus-game-drawer>section{position:relative;width:min(760px,100%);max-height:min(72vh,640px);overflow:hidden;border:1px solid rgba(225,193,132,.24);border-radius:24px 24px 0 0;background:linear-gradient(160deg,#392b22,#1d1713);box-shadow:0 -20px 60px rgba(0,0,0,.38);transform:translateY(22px);transition:transform .2s}.focus-game-drawer.is-open>section{transform:none}.focus-game-drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(225,193,132,.14)}.focus-game-drawer header span{display:grid;gap:2px}.focus-game-drawer header small{color:#a9804e;font-size:8px;letter-spacing:.18em}.focus-game-drawer header h3{margin:0;font-family:"STKaiti","KaiTi",serif;font-size:21px}.focus-game-drawer header>button{display:grid;place-items:center;width:34px;height:34px;padding:0;color:#c9b59d;border:1px solid rgba(225,193,132,.16);border-radius:12px;background:rgba(255,255,255,.03)}.focus-game-drawer [data-focus-drawer-list]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:calc(min(72vh,640px) - 70px);overflow:auto;padding:12px 14px 24px}.focus-game-drawer [data-focus-drawer-list]>button{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:8px;min-height:58px;padding:10px 12px;text-align:left;color:#e9dece;border:1px solid rgba(225,193,132,.14);border-radius:14px;background:rgba(51,39,31,.72)}.focus-game-drawer [data-focus-drawer-list]>button.is-ready{border-color:rgba(222,179,96,.42);background:linear-gradient(135deg,rgba(93,65,35,.68),rgba(51,39,31,.78))}.focus-game-drawer [data-focus-drawer-list] span{display:grid;min-width:0;gap:3px}.focus-game-drawer [data-focus-drawer-list] b{font-size:11px}.focus-game-drawer [data-focus-drawer-list] small{color:#a6927b;font-size:8px;line-height:1.4}.focus-game-drawer [data-focus-drawer-list] .focus-game-icon{width:16px;height:16px;color:#b89765}
@keyframes focusGameGlow{50%{opacity:.35;transform:scale(.7)}}@keyframes focusPlayerStrike{50%{transform:translateX(36px) rotate(8deg)}}@keyframes focusEnemyStrike{50%{transform:translateX(-36px) rotate(-8deg)}}@keyframes focusClash{45%,60%{opacity:1;transform:scale(3)}}
@media(max-width:720px){#equipment-display-view .focus-game-shell{gap:9px;padding:4px 7px 18px}#equipment-display-view .focus-game-hero,#equipment-display-view .focus-game-slides{min-height:252px}#equipment-display-view .focus-game-slide{padding:18px 15px 20px}#equipment-display-view .focus-game-slide-copy{max-width:82%}#equipment-display-view .focus-game-slide-copy h2{font-size:27px}#equipment-display-view .focus-game-slide-copy p{font-size:9px}#equipment-display-view .focus-game-scene-mark{right:13px;top:13px}.focus-game-scene-mark small{display:none}#equipment-display-view .focus-game-major{gap:5px}#equipment-display-view .focus-game-major>button{grid-template-columns:34px minmax(0,1fr);gap:6px;min-height:64px;padding:8px 7px;border-radius:15px 15px 11px 11px}#equipment-display-view .focus-game-major>button>.focus-game-icon{width:34px;height:34px;padding:8px}#equipment-display-view .focus-game-major b{font-size:14px}#equipment-display-view .focus-game-major small{font-size:7px}#equipment-display-view .focus-game-major em{position:absolute;right:5px;top:5px;min-width:17px;height:17px;font-size:8px}#equipment-display-view .focus-game-task-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}#equipment-display-view .focus-game-task{min-height:53px;padding:8px}#equipment-display-view .focus-game-bottom-grid{grid-template-columns:1fr 1fr}#equipment-display-view .focus-game-assistant{grid-column:1/-1;min-height:72px}#equipment-display-view .focus-game-battle-stage{right:0;top:17%;width:45%;transform:scale(.78)}#equipment-display-view .focus-game-challenge-rail{right:10px;bottom:43px;max-width:50%;grid-template-columns:repeat(2,auto)}#equipment-display-view .focus-game-challenge-rail span{font-size:7px;padding:4px 5px}.focus-game-drawer [data-focus-drawer-list]{grid-template-columns:1fr}}
@media(max-width:390px){#equipment-display-view .focus-game-hero,#equipment-display-view .focus-game-slides{min-height:242px}#equipment-display-view .focus-game-slide-copy h2{font-size:24px}#equipment-display-view .focus-game-slide-copy>div{margin-top:12px}#equipment-display-view .focus-game-slide-copy button{min-height:34px;padding:0 10px;font-size:10px}#equipment-display-view .focus-game-major small{display:none}#equipment-display-view .focus-game-major>button{grid-template-columns:30px minmax(0,1fr);min-height:56px}#equipment-display-view .focus-game-major>button>.focus-game-icon{width:30px;height:30px;padding:7px}#equipment-display-view .focus-game-major b{font-size:13px}#equipment-display-view .focus-game-challenge-rail{display:none}}
@media(prefers-reduced-motion:reduce){#equipment-display-view .focus-game-slide,#equipment-display-view .focus-game-major>button,#equipment-display-view .focus-game-fighter,#equipment-display-view .focus-game-battle-stage>i{animation:none!important;transition:none!important}}

/* focus-game mobile text squeeze fix */
#equipment-display-view .focus-game-section-title h3,#equipment-display-view .focus-game-section-title>button{white-space:nowrap}
#equipment-display-view .focus-game-assistant>span{flex:1;min-width:0}
#equipment-display-view .focus-game-assistant strong,#equipment-display-view .focus-game-assistant p{display:block;white-space:normal}
#equipment-display-view .focus-game-assistant button{width:auto!important;min-width:78px;max-width:104px;white-space:nowrap}

/* focus-game typography aligned with game */
#equipment-display-view .focus-game-shell,
#equipment-display-view .focus-game-slide-copy h2,
#equipment-display-view .focus-game-scene-mark b,
#equipment-display-view .focus-game-major b,
#equipment-display-view .focus-game-section-title h3,
#equipment-display-view .focus-game-assistant strong,
#equipment-display-view .focus-game-drawer header h3 {
    font-family: var(--font-secondary);
}
#equipment-display-view .focus-game-slide-copy h2 {
    font-size: clamp(22px, 4.4vw, 32px);
    line-height: 1.28;
    letter-spacing: 0;
}
#equipment-display-view .focus-game-scene-mark b { font-size: 14px; }
#equipment-display-view .focus-game-major b { font-size: 15px; }
#equipment-display-view .focus-game-section-title h3 { font-size: 17px; }
#equipment-display-view .focus-game-assistant strong { font-size: 14px; }
#equipment-display-view .focus-game-drawer header h3 { font-size: 18px; }
@media(max-width:390px) {
    #equipment-display-view .focus-game-slide-copy h2 { font-size: 22px; }
    #equipment-display-view .focus-game-major b { font-size: 13px; }
}

/* focus-game fixed 450px frame layout */
#equipment-display-view .focus-game-shell { gap: 9px; padding: 4px 7px 18px; }
#equipment-display-view .focus-game-hero,
#equipment-display-view .focus-game-slides { min-height: 252px; }
#equipment-display-view .focus-game-slide { padding: 18px 15px 20px; }
#equipment-display-view .focus-game-slide-copy { max-width: 82%; }
#equipment-display-view .focus-game-slide-copy h2 { font-size: 24px; }
#equipment-display-view .focus-game-slide-copy p { font-size: 9px; }
#equipment-display-view .focus-game-scene-mark { right: 13px; top: 13px; }
#equipment-display-view .focus-game-scene-mark small { display: none; }
#equipment-display-view .focus-game-major { gap: 5px; }
#equipment-display-view .focus-game-major > button {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
    min-height: 64px;
    padding: 8px 7px;
    border-radius: 15px 15px 11px 11px;
}
#equipment-display-view .focus-game-major > button > .focus-game-icon { width: 34px; height: 34px; padding: 8px; }
#equipment-display-view .focus-game-major b { font-size: 14px; white-space: nowrap; }
#equipment-display-view .focus-game-major small { font-size: 7px; }
#equipment-display-view .focus-game-major em { position: absolute; right: 5px; top: 5px; min-width: 17px; height: 17px; font-size: 8px; }
#equipment-display-view .focus-game-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#equipment-display-view .focus-game-task { min-height: 53px; padding: 8px; }
#equipment-display-view .focus-game-bottom-grid { grid-template-columns: 1fr 1fr; }
#equipment-display-view .focus-game-assistant { grid-column: 1 / -1; min-height: 72px; }
#equipment-display-view .focus-game-battle-stage { right: 0; top: 17%; width: 45%; transform: scale(.78); }
#equipment-display-view .focus-game-challenge-rail { right: 10px; bottom: 43px; max-width: 50%; grid-template-columns: repeat(2, auto); }
#equipment-display-view .focus-game-challenge-rail span { font-size: 7px; padding: 4px 5px; }
#equipment-display-view .focus-game-drawer [data-focus-drawer-list] { grid-template-columns: 1fr; }
@media(max-width:390px) {
    #equipment-display-view .focus-game-hero,
    #equipment-display-view .focus-game-slides { min-height: 242px; }
    #equipment-display-view .focus-game-slide-copy h2 { font-size: 22px; }
    #equipment-display-view .focus-game-major b { font-size: 13px; }
    #equipment-display-view .focus-game-major small { display: none; }
    #equipment-display-view .focus-game-major > button { grid-template-columns: 30px minmax(0, 1fr); min-height: 56px; }
    #equipment-display-view .focus-game-major > button > .focus-game-icon { width: 30px; height: 30px; padding: 7px; }
}

/* focus-game sharper game-frame borders */
#equipment-display-view .focus-game-hero { border-radius: 2px; }
#equipment-display-view .focus-game-full-home,
#equipment-display-view .focus-game-slide-copy button,
#equipment-display-view .focus-game-major > button,
#equipment-display-view .focus-game-task,
#equipment-display-view .focus-game-status-card,
#equipment-display-view .focus-game-assistant,
#equipment-display-view .focus-game-assistant button { border-radius: 2px; }
#equipment-display-view .focus-game-major > button > .focus-game-icon,
#equipment-display-view .focus-game-status-card > .focus-game-icon { border-radius: 2px; }
#equipment-display-view .focus-game-task > i { border-radius: 1px; }
#equipment-display-view .focus-game-drawer > section { border-radius: 2px 2px 0 0; }
#equipment-display-view .focus-game-drawer header > button,
#equipment-display-view .focus-game-drawer [data-focus-drawer-list] > button { border-radius: 2px; }

/* focus-game live hub states */
#equipment-display-view .focus-game-full-home {
    position: static;
    z-index: auto;
    justify-self: stretch;
    width: 100%;
    min-height: 32px;
    background: rgba(29, 22, 18, .78);
    backdrop-filter: none;
}
#equipment-display-view .focus-game-hero,
#equipment-display-view .focus-game-slides { min-height: 300px; }
#equipment-display-view .focus-game-slide-actions { display: flex; gap: 8px; margin-top: 11px; }
#equipment-display-view .focus-game-daily-readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 420px;
    margin-top: 10px;
    border-top: 1px solid rgba(225, 193, 132, .18);
    border-bottom: 1px solid rgba(225, 193, 132, .12);
}
#equipment-display-view .focus-game-daily-readout > div { display: grid; gap: 1px; min-width: 0; padding: 7px 9px 7px 0; }
#equipment-display-view .focus-game-daily-readout > div + div { padding-left: 9px; border-left: 1px solid rgba(225, 193, 132, .14); }
#equipment-display-view .focus-game-daily-readout span { color: #a98e6c; font-size: 8px; }
#equipment-display-view .focus-game-daily-readout strong { overflow: hidden; color: #f1dfbd; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
#equipment-display-view .focus-game-daily-readout small { overflow: hidden; color: #9f8d79; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
#equipment-display-view .focus-game-scene-daily .focus-game-slide-copy,
#equipment-display-view .focus-game-scene-territory .focus-game-slide-copy { max-width: 90%; }
#equipment-display-view .focus-game-scene-territory { background: linear-gradient(145deg, #283126, #15130f 68%); }
#equipment-display-view .focus-game-scene-territory .focus-game-scene-art::before {
    background: repeating-linear-gradient(90deg, rgba(92, 94, 63, .92) 0 16px, rgba(51, 55, 40, .96) 16px 19px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(19, 23, 18, .32) 13px 16px);
}
#equipment-display-view .focus-game-scene-territory .focus-game-scene-art::after { background: linear-gradient(155deg, #364433, #182019); }
#equipment-display-view .focus-game-territory-watch {
    display: grid;
    gap: 5px;
    max-width: 340px;
    margin-top: 10px;
    padding: 7px 0;
    border-top: 1px solid rgba(176, 194, 125, .2);
    border-bottom: 1px solid rgba(176, 194, 125, .13);
}
#equipment-display-view .focus-game-territory-watch > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#equipment-display-view .focus-game-territory-watch span { color: #b8c89d; font-size: 9px; }
#equipment-display-view .focus-game-territory-watch strong { color: #e8ddc3; font-size: 10px; }
#equipment-display-view .focus-game-territory-watch > small { color: #9ca187; font-size: 8px; }
#equipment-display-view .focus-game-territory-route { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12px; }
#equipment-display-view .focus-game-territory-route::before { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1px; background: rgba(183, 196, 145, .24); }
#equipment-display-view .focus-game-territory-route::after { content: ""; position: absolute; left: 3px; top: 5px; width: var(--focus-room-progress, 0%); height: 1px; background: #c9b36f; transition: width .35s ease; }
#equipment-display-view .focus-game-territory-route i { position: relative; z-index: 1; width: 5px; height: 5px; border: 1px solid #778068; border-radius: 50%; background: #25291f; }
#equipment-display-view .focus-game-territory-route b { position: absolute; z-index: 2; left: var(--focus-room-progress, 0%); top: 1px; width: 9px; height: 9px; border-radius: 50%; background: #e4c77d; box-shadow: 0 0 10px rgba(228, 199, 125, .7); transform: translateX(-50%); transition: left .35s ease; }
#equipment-display-view .focus-game-territory-watch.is-running .focus-game-territory-route b { animation: focusTerritoryScout 1.25s ease-in-out infinite; }
#equipment-display-view .focus-game-challenge-rail span { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; min-width: 0; }
#equipment-display-view .focus-game-challenge-rail span b,
#equipment-display-view .focus-game-challenge-rail span small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#equipment-display-view .focus-game-challenge-rail span b { font-size: 8px; }
#equipment-display-view .focus-game-challenge-rail span small { grid-column: 2; color: #758699; font-size: 7px; }
#equipment-display-view .focus-game-challenge-rail span.is-success small { color: #9fc384; }
#equipment-display-view .focus-game-task { min-height: 66px; }
#equipment-display-view .focus-game-task small {
    display: -webkit-box;
    min-height: 2.7em;
    overflow: hidden;
    line-height: 1.35;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#equipment-display-view .focus-game-bottom-grid { grid-template-columns: 1fr; }
#equipment-display-view .focus-game-assistant { min-height: 78px; }
#equipment-display-view .focus-game-assistant p { display: -webkit-box; overflow: hidden; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#equipment-display-view .focus-game-assistant-actions { display: flex; flex: none; gap: 6px; }
#equipment-display-view .focus-game-assistant-actions button.secondary { color: #dfcfb9; border-color: rgba(225, 193, 132, .22); background: rgba(255, 255, 255, .04); }
@keyframes focusTerritoryScout { 50% { transform: translateX(-50%) scale(.72); opacity: .58; } }
@media(max-width:520px) {
    #equipment-display-view .focus-game-hero,
    #equipment-display-view .focus-game-slides { min-height: 292px; }
    #equipment-display-view .focus-game-slide-copy { max-width: 94%; }
    #equipment-display-view .focus-game-daily-readout { max-width: 100%; }
    #equipment-display-view .focus-game-assistant { align-items: flex-start; }
    #equipment-display-view .focus-game-assistant-actions { flex-direction: column; }
    #equipment-display-view .focus-game-assistant-actions button { min-width: 82px; }
}

/* Reserve separate columns for the patrol copy and progress rail. */
#equipment-display-view .focus-game-scene-battle .focus-game-slide-copy {
    width: 46%;
    max-width: 46%;
}
#equipment-display-view .focus-game-scene-battle .focus-game-slide-copy h2 {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.22;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#equipment-display-view .focus-game-scene-battle .focus-game-slide-copy p { max-width: 100%; }
#equipment-display-view .focus-game-scene-battle .focus-game-slide-actions { gap: 5px; }
#equipment-display-view .focus-game-scene-battle .focus-game-slide-actions button {
    width: auto;
    min-height: 34px;
    min-width: 0;
    padding: 0 9px;
    font-size: 10px;
    white-space: nowrap;
}
#equipment-display-view .focus-game-scene-battle [data-focus-auto-start] {
    flex: 1 1 auto;
    justify-content: center;
}
#equipment-display-view .focus-game-scene-battle [data-focus-auto-stop] { flex: none; }
#equipment-display-view .focus-game-scene-battle .focus-game-challenge-rail {
    width: 48%;
    max-width: 48%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#equipment-display-view .focus-game-scene-battle .focus-game-challenge-rail span { width: 100%; }
@media(max-width:390px) {
    #equipment-display-view .focus-game-scene-battle .focus-game-slide-copy {
        width: 92%;
        max-width: 92%;
    }
    #equipment-display-view .focus-game-scene-battle .focus-game-slide-copy h2 {
        overflow: visible;
        font-size: 22px;
        white-space: normal;
        text-overflow: clip;
    }
}
#equipment-display-view .focus-game-home-preference {
    padding-top: 3px;
    border-top: 1px solid rgba(225, 193, 132, .12);
}
#equipment-display-view .focus-game-home-preference > button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 3px;
    color: #b8a793;
    text-align: left;
    border: 0;
    background: transparent;
}
#equipment-display-view .focus-game-home-preference > button:hover,
#equipment-display-view .focus-game-home-preference > button:focus-visible { color: #eadcc8; }
#equipment-display-view .focus-game-home-preference-box {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: #8f7f6d;
    border: 1px solid rgba(225, 193, 132, .28);
    background: rgba(255, 255, 255, .025);
}
#equipment-display-view .focus-game-home-preference-box .focus-game-icon { width: 13px; height: 13px; }
#equipment-display-view .focus-game-home-preference > button.is-checked .focus-game-home-preference-box {
    color: #24170b;
    border-color: #e2c27f;
    background: #d9b978;
}
#equipment-display-view .focus-game-home-preference > button > span:nth-child(2) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
#equipment-display-view .focus-game-home-preference strong { color: inherit; font-size: 11px; font-weight: 600; }
#equipment-display-view .focus-game-home-preference small { flex: none; color: #897969; font-size: 8px; }
#equipment-display-view .focus-game-home-preference > button.is-checked small { color: #c7a86c; }
#guild-cdkey .cdkey-manual-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 12px 0 18px;
}

#guild-cdkey .cdkey-manual-row input {
    min-width: 0;
    margin: 0;
}

#guild-cdkey .cdkey-manual-row button,
#guild-cdkey .cdkey-entry > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#guild-cdkey .cdkey-available-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(205, 173, 112, 0.24);
}

#guild-cdkey .cdkey-available-head > span {
    display: grid;
    gap: 2px;
}

#guild-cdkey .cdkey-available-head small {
    color: #a98b5e;
    font-size: 10px;
}

#guild-cdkey .cdkey-available-head strong {
    color: #f0dfbd;
    font-size: 16px;
}

#guild-cdkey .cdkey-available-head em {
    color: #bda780;
    font-size: 12px;
    font-style: normal;
}

#guild-cdkey .cdkey-available-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

#guild-cdkey .cdkey-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(205, 173, 112, 0.2);
    border-radius: 6px;
    background: rgba(43, 34, 27, 0.56);
}

#guild-cdkey .cdkey-entry.is-redeemed {
    opacity: 0.68;
}

#guild-cdkey .cdkey-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

#guild-cdkey .cdkey-entry-head code {
    overflow: hidden;
    color: #f0d292;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#guild-cdkey .cdkey-entry-head > span {
    flex: 0 0 auto;
    color: #a99880;
    font-size: 11px;
}

#guild-cdkey .cdkey-reward-list {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1;
    gap: 5px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#guild-cdkey .cdkey-reward-list li {
    display: inline-flex;
    gap: 5px;
    color: #c9bca8;
    font-size: 12px;
}

#guild-cdkey .cdkey-reward-list strong {
    color: #e8d6b6;
    font-weight: 600;
}

#guild-cdkey .cdkey-entry > button {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 112px;
}

#guild-cdkey .cdkey-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 28px 12px;
    color: #9f907d;
    text-align: center;
    border: 1px dashed rgba(205, 173, 112, 0.2);
    border-radius: 6px;
}

#guild-cdkey .cdkey-empty i {
    margin-bottom: 3px;
    color: #b89765;
    font-size: 20px;
}

#guild-cdkey .cdkey-empty strong {
    color: #d7c6aa;
}

#guild-cdkey .cdkey-empty span {
    font-size: 11px;
}

@media (max-width: 600px) {
    #guild-cdkey .cdkey-entry {
        grid-template-columns: minmax(0, 1fr);
    }

    #guild-cdkey .cdkey-entry-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    #guild-cdkey .cdkey-reward-list,
    #guild-cdkey .cdkey-entry > button {
        grid-column: 1;
        grid-row: auto;
    }

    #guild-cdkey .cdkey-entry > button {
        width: 100%;
    }
}

/* ===== Pixel item assets: loot, shops, synthesis and reward reveals ===== */
.top-bar-material-row {
    grid-template-columns: 30px minmax(96px, 1fr) minmax(92px, auto);
}
.top-bar-material-icon,
.combat-loot-pixel,
.ghostwork-reward-pixel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.top-bar-material-icon .item-pixel-icon-wrap,
.top-bar-material-icon .item-pixel-icon {
    width: 26px;
    height: 26px;
}
.item-card-icon-badge .item-pixel-icon-wrap,
.item-card-icon-badge .item-pixel-icon {
    width: 36px;
    height: 36px;
}

.shop-flowing-light-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.shop-flowing-light-cost .item-pixel-icon-wrap,
.shop-flowing-light-cost .item-pixel-icon {
    width: 18px;
    height: 18px;
}

:where(
    #core-resources-display,
    .shop-flowing-light-cost,
    .combat-loot-pixel,
    .activity-settle-reward-icon,
    .ghostwork-chip-icon,
    .ghostwork-feature-icon,
    .ghostwork-summary-hero-icon,
    .ghostwork-orb-reward-icon
) .item-pixel-icon-wrap-flowing-light {
    isolation: isolate;
}

:where(
    #core-resources-display,
    .shop-flowing-light-cost,
    .combat-loot-pixel,
    .activity-settle-reward-icon,
    .ghostwork-chip-icon,
    .ghostwork-feature-icon,
    .ghostwork-summary-hero-icon,
    .ghostwork-orb-reward-icon
) .item-pixel-icon-wrap-flowing-light::before,
:where(
    #core-resources-display,
    .shop-flowing-light-cost,
    .combat-loot-pixel,
    .activity-settle-reward-icon,
    .ghostwork-chip-icon,
    .ghostwork-feature-icon,
    .ghostwork-summary-hero-icon,
    .ghostwork-orb-reward-icon
) .item-pixel-icon-wrap-flowing-light::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

:where(
    #core-resources-display,
    .shop-flowing-light-cost,
    .combat-loot-pixel,
    .activity-settle-reward-icon,
    .ghostwork-chip-icon,
    .ghostwork-feature-icon,
    .ghostwork-summary-hero-icon,
    .ghostwork-orb-reward-icon
) .item-pixel-icon-wrap-flowing-light::before {
    inset: 9%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #59e8f2, #9a77ff, #ff77cf, #ffe06a, #59e8f2);
    opacity: .54;
    filter: blur(4px);
    animation: flowingLightAura 4.8s linear infinite;
}

:where(
    #core-resources-display,
    .shop-flowing-light-cost,
    .combat-loot-pixel,
    .activity-settle-reward-icon,
    .ghostwork-chip-icon,
    .ghostwork-feature-icon,
    .ghostwork-summary-hero-icon,
    .ghostwork-orb-reward-icon
) .item-pixel-icon-wrap-flowing-light::after {
    inset: 0;
    z-index: 2;
    background: linear-gradient(110deg, transparent 20%, rgba(98, 240, 245, .15) 34%, rgba(255, 255, 255, .92) 48%, rgba(255, 111, 213, .58) 58%, transparent 73%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-mask: url('../assets/pixel-items/10001-flowing-light.png') center / contain no-repeat;
    mask: url('../assets/pixel-items/10001-flowing-light.png') center / contain no-repeat;
    animation: flowingLightSweep 2.8s ease-in-out infinite;
}

@keyframes flowingLightAura {
    0% { transform: rotate(0deg) scale(.86); opacity: .42; }
    50% { transform: rotate(180deg) scale(1.06); opacity: .68; }
    100% { transform: rotate(360deg) scale(.86); opacity: .42; }
}

@keyframes flowingLightSweep {
    0%, 18% { background-position: 130% 0; opacity: .18; }
    46% { opacity: .94; }
    72%, 100% { background-position: -130% 0; opacity: .16; }
}

#combat-summary-panel ul {
    display: grid;
    gap: 6px;
    padding-left: 0;
    list-style: none;
}
.combat-loot-row,
.combat-log-loot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.combat-loot-row {
    min-height: 38px;
    padding: 3px 5px 3px 10px;
    border: 1px solid rgba(183, 150, 104, 0.12);
    border-radius: 5px;
    background: rgba(183, 150, 104, 0.035);
}
.combat-log-loot-row {
    min-height: 34px;
}
.combat-loot-row > span:first-child,
.combat-log-loot-row > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.combat-loot-pixel .item-pixel-icon-wrap,
.combat-loot-pixel .item-pixel-icon {
    width: 30px;
    height: 30px;
}

#synthesis-view .compose-recipe-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
}
#synthesis-view .compose-recipe-side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#synthesis-view .compose-recipe-target {
    justify-content: flex-end;
    text-align: right;
}
#synthesis-view .compose-recipe-text {
    min-width: 0;
    overflow-wrap: anywhere;
}
#synthesis-view .compose-recipe-arrow {
    color: #d2a94f;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}
#synthesis-view .compose-side-icons {
    display: inline-flex;
    align-items: center;
    min-width: 30px;
    flex: 0 0 auto;
}
#synthesis-view .compose-side-icons .item-pixel-icon-wrap,
#synthesis-view .compose-side-icons .item-pixel-icon {
    width: 30px;
    height: 30px;
}
#synthesis-view .compose-side-icons .item-pixel-icon-wrap + .item-pixel-icon-wrap {
    margin-left: -7px;
}

.activity-settle-reward,
.ghostwork-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.activity-settle-reward-icon .item-pixel-icon-wrap,
.activity-settle-reward-icon .item-pixel-icon,
.ghostwork-chip-icon .item-pixel-icon-wrap,
.ghostwork-chip-icon .item-pixel-icon {
    width: 24px;
    height: 24px;
}
.ghostwork-feature-icon,
.ghostwork-summary-hero-icon {
    justify-self: center;
    width: 64px;
    height: 64px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--feature-primary, var(--gw-primary)) 55%, rgba(255,255,255,0.18));
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.66);
    box-shadow: 0 0 20px var(--feature-strong, var(--gw-strong));
}
.ghostwork-feature-icon .item-pixel-icon-wrap,
.ghostwork-feature-icon .item-pixel-icon,
.ghostwork-summary-hero-icon .item-pixel-icon-wrap,
.ghostwork-summary-hero-icon .item-pixel-icon {
    width: 56px;
    height: 56px;
}
.ghostwork-summary-hero-icon {
    border-color: color-mix(in srgb, var(--hero-primary) 55%, rgba(255,255,255,0.18));
    box-shadow: 0 0 20px var(--hero-strong);
}
.ghostwork-orb-reward-emerge {
    grid-area: 1 / 1;
    position: relative;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 18px var(--gw-strong));
    animation: ghostworkPixelRewardEmerge 0.52s cubic-bezier(.16,.82,.28,1) both;
}
.ghostwork-orb-reward-emerge .ghostwork-orb-reward-icon,
.ghostwork-orb-reward-emerge .item-pixel-icon-wrap {
    width: 76px;
    height: 76px;
}
.ghostwork-orb-reward-emerge .item-pixel-icon {
    width: 68px;
    height: 68px;
}
.ghostwork-orb-reward-emerge.tier-epic,
.ghostwork-orb-reward-emerge.tier-world {
    filter: drop-shadow(0 0 24px var(--gw-strong)) brightness(1.12);
}
@keyframes ghostworkPixelRewardEmerge {
    0% { opacity: 0; transform: translateY(24px) scale(.16) rotate(-8deg); }
    24% { opacity: 1; transform: translateY(0) scale(.68) rotate(3deg); }
    70% { opacity: 1; transform: translateY(-72px) scale(1.18) rotate(0); }
    100% { opacity: 1; transform: translateY(-104px) scale(1); }
}

@media (max-width: 420px) {
    #synthesis-view .compose-recipe-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
    #synthesis-view .compose-recipe-arrow {
        transform: rotate(90deg);
    }
    #synthesis-view .compose-recipe-target {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        #core-resources-display,
        .shop-flowing-light-cost,
        .combat-loot-pixel,
        .activity-settle-reward-icon,
        .ghostwork-chip-icon,
        .ghostwork-feature-icon,
        .ghostwork-summary-hero-icon,
        .ghostwork-orb-reward-icon
    ) .item-pixel-icon-wrap-flowing-light::before,
    :where(
        #core-resources-display,
        .shop-flowing-light-cost,
        .combat-loot-pixel,
        .activity-settle-reward-icon,
        .ghostwork-chip-icon,
        .ghostwork-feature-icon,
        .ghostwork-summary-hero-icon,
        .ghostwork-orb-reward-icon
    ) .item-pixel-icon-wrap-flowing-light::after {
        animation: none;
    }

    :where(
        #core-resources-display,
        .shop-flowing-light-cost,
        .combat-loot-pixel,
        .activity-settle-reward-icon,
        .ghostwork-chip-icon,
        .ghostwork-feature-icon,
        .ghostwork-summary-hero-icon,
        .ghostwork-orb-reward-icon
    ) .item-pixel-icon-wrap-flowing-light::after {
        background-position: center;
        opacity: .28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ghostwork-orb-reward-emerge {
        animation: none !important;
        opacity: 1;
        transform: translateY(-72px);
    }
}

/* Sublime voucher shop */
.sublime-voucher-shop {
    --voucher-gold: #d6a62f;
    --voucher-ink: #e9deca;
    --voucher-line: rgba(204, 155, 64, .3);
}

.sublime-voucher-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.sublime-voucher-heading h3 {
    margin: 0;
}

.sublime-voucher-balance {
    display: grid;
    grid-template-columns: 42px auto;
    align-items: center;
    column-gap: 8px;
    min-width: 154px;
    padding: 10px 12px;
    border: 1px solid var(--voucher-line);
    border-left: 3px solid var(--voucher-gold);
    border-radius: 6px;
    background: #1d1713;
    color: var(--voucher-ink);
    box-shadow: inset 0 0 0 1px rgba(255, 224, 151, .035);
}

.sublime-voucher-balance-icon {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-right: 1px solid rgba(210, 165, 74, .18);
}

.sublime-voucher-balance-icon .item-pixel-icon-wrap,
.sublime-voucher-balance-icon .item-pixel-icon {
    width: 34px;
    height: 34px;
}

.sublime-voucher-balance span {
    font-size: 12px;
    color: #aa9b85;
}

.sublime-voucher-balance strong {
    font-size: 18px;
    line-height: 1.15;
}

.sublime-voucher-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    border-left: 3px solid #3d78b4;
}

.sublime-voucher-notice > i {
    margin-top: 2px;
    color: #3d78b4;
}

.sublime-voucher-notice p {
    margin: 0;
    line-height: 1.65;
}

.sublime-voucher-section {
    margin: 0 0 20px;
}

.sublime-voucher-section > h4 {
    margin: 0 0 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--voucher-line);
    color: var(--voucher-ink);
    font-size: 15px;
}

.sublime-voucher-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.sublime-voucher-item .small-text {
    flex: 1;
    line-height: 1.55;
}

.sublime-voucher-item-icon {
    color: var(--voucher-gold);
}

.sublime-voucher-item .shop-item-cost {
    color: #805f0a;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sublime-voucher-cost-icon,
.sublime-voucher-cost-icon .item-pixel-icon-wrap {
    width: 18px;
    height: 18px;
}

.sublime-voucher-cost-icon .item-pixel-icon {
    width: 17px;
    height: 17px;
}

.sublime-voucher-item button {
    width: 100%;
    min-height: 38px;
}

.sublime-voucher-completed {
    margin-top: 8px;
}

.sublime-voucher-completed > summary {
    cursor: pointer;
    font-weight: 700;
}

.sublime-voucher-completed .shop-grid {
    margin-top: 12px;
}

@media (max-width: 560px) {
    .sublime-voucher-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .sublime-voucher-balance {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .sublime-voucher-item {
        min-height: 0;
    }
}


/* =========================================================================
 * 日常助手：签到页入口与三分页弹窗
 * ========================================================================= */
.daily-assistant-entry {
    width: 100%;
    min-height: 72px;
    margin-top: 14px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 11px;
    color: #dce8f3;
    text-align: left;
    border: 1px solid rgba(104, 132, 160, 0.62);
    border-left: 3px solid #d5ad62;
    border-radius: 7px;
    background: linear-gradient(105deg, rgba(21, 31, 45, 0.96), rgba(13, 21, 32, 0.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18);
    transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.daily-assistant-entry:hover,
.daily-assistant-entry:focus-visible {
    border-color: rgba(213, 173, 98, .86);
    transform: translateY(-1px);
}
.daily-assistant-entry-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #f2cf88;
    font-size: 18px;
    border: 1px solid rgba(213, 173, 98, .42);
    border-radius: 6px;
    background: #1a2635;
}
.daily-assistant-entry-icon.is-error { color: #e78a82; border-color: rgba(231,138,130,.45); }
.daily-assistant-entry-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.daily-assistant-entry-copy strong { color: #f1f5f9; font-size: 15px; line-height: 1.2; }
.daily-assistant-entry-copy small { color: #91a5b9; font-size: 12px; line-height: 1.45; white-space: normal; }
.daily-assistant-entry-count {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    color: #8597a9;
    font-size: 12px;
    border: 1px solid #3c4c5e;
    border-radius: 13px;
    background: #151e2a;
}
.daily-assistant-entry-count.has-pending { color: #ffe0a0; border-color: #9b743c; background: #352817; }
.daily-assistant-entry-arrow { color: #708398; font-size: 11px; }
.daily-assistant-entry-loading { width: 16px; height: 16px; border: 2px solid #3b4d61; border-top-color: #d5ad62; border-radius: 50%; animation: dailyAssistantSpin .8s linear infinite; }
@keyframes dailyAssistantSpin { to { transform: rotate(360deg); } }

#modal-content:has(.daily-assistant-modal) {
    position: relative;
    width: min(760px, 100%);
    max-width: 760px;
    max-height: min(88vh, 860px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #52667d;
    border-radius: 8px;
    background: #111a25;
    box-shadow: 0 24px 70px rgba(0,0,0,.58);
}
#modal-content:has(.daily-assistant-modal) > h3 {
    margin: 0;
    padding: 16px 18px 13px;
    color: #eef4fa;
    font-size: 17px;
    border-bottom: 1px solid #334356;
    background: #182433;
}
#modal-content:has(.daily-assistant-modal) > h3 i { margin-right: 7px; color: #d8b46c; }
#modal-content:has(.daily-assistant-modal) > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    display: flex;
    overflow: hidden;
}
#modal-content:has(.daily-assistant-modal) > .modal-actions {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    padding: 0;
    border: 0;
    background: transparent;
}
#modal-content:has(.daily-assistant-modal) #modal-close-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
}
#modal-content:has(.daily-assistant-modal) #modal-close-btn::before {
    content: '\00d7';
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #9fb0c0;
    font-size: 23px;
    font-weight: 400;
}
#modal-content:has(.daily-assistant-modal) #modal-close-btn:hover { border-color: #465a6f; background: #223142; }
#modal-content:has(.daily-assistant-modal) #modal-close-btn:hover::before { color: #eff5fa; }
.daily-assistant-modal { width: 100%; height: min(72vh, 680px); min-height: 0; display: flex; flex-direction: column; color: #d7e1eb; background: #111a25; }
.daily-assistant-modal-loading, .daily-assistant-modal-error { min-height: 340px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; color: #93a7bb; }
.daily-assistant-modal-loading i { color: #d5ad62; font-size: 22px; }
.daily-assistant-modal-error i { color: #e2867e; font-size: 24px; }
.daily-assistant-modal-error button { margin-top: 8px; }
.daily-assistant-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 14px;
    border-bottom: 1px solid #334356;
    background: #151f2c;
}
.daily-assistant-tab {
    height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8499ad;
    font-size: 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
}
.daily-assistant-tab:hover { color: #c8d6e3; background: rgba(255,255,255,.025); }
.daily-assistant-tab.active { color: #f0d08d; border-bottom-color: #d4aa5b; background: rgba(213,173,98,.06); }
.daily-assistant-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px; scrollbar-width: thin; scrollbar-color: #53677c #16212e; }
.daily-assistant-phase {
    margin-bottom: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #415368;
    border-radius: 6px;
    background: #172331;
}
.daily-assistant-phase > i { color: #d8b66d; font-size: 17px; }
.daily-assistant-phase > div { display: flex; flex-direction: column; gap: 2px; }
.daily-assistant-phase strong { color: #f0f4f8; font-size: 13px; }
.daily-assistant-phase span { color: #8fa3b7; font-size: 11px; line-height: 1.45; }
.daily-assistant-list { display: flex; flex-direction: column; gap: 7px; }
.daily-assistant-row {
    min-height: 58px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 18px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #33465a;
    border-radius: 6px;
    background: #151f2b;
}
.daily-assistant-row.is-actionable { border-color: #6f5935; background: #201f1b; }
.daily-assistant-row input[type=checkbox], .daily-assistant-card-check input[type=checkbox], .daily-assistant-switch-line input[type=checkbox] { accent-color: #cda65f; width: 16px; height: 16px; }
.daily-assistant-row-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #8fb1cf; border: 1px solid #3c5268; border-radius: 5px; background: #1a2837; }
.daily-assistant-row.is-actionable .daily-assistant-row-icon { color: #efca80; border-color: #725b35; }
.daily-assistant-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.daily-assistant-row-copy strong { color: #e3ebf2; font-size: 13px; }
.daily-assistant-row-copy small { color: #8195a9; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.daily-assistant-state { padding: 3px 7px; font-size: 10px; border: 1px solid; border-radius: 10px; white-space: nowrap; }
.daily-assistant-state.is-pending { color: #edc876; border-color: #7f6638; background: #2b2519; }
.daily-assistant-state.is-done { color: #86c2a0; border-color: #3f6852; background: #16271f; }
.daily-assistant-state.is-muted { color: #8291a0; border-color: #45515f; background: #171f28; }
.daily-assistant-resource-bar {
    margin-bottom: 10px;
    padding: 9px 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #8fa2b4;
    font-size: 11px;
    border: 1px solid #405266;
    border-radius: 6px;
    background: #172330;
}
.daily-assistant-resource-bar i { color: #d7b36a; margin-right: 5px; }
.daily-assistant-resource-bar strong { color: #e8eef4; margin-left: 3px; }
.daily-assistant-switch-line {
    margin-bottom: 10px;
    padding: 10px 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #304155;
}
.daily-assistant-switch-line > span { display: flex; flex-direction: column; gap: 2px; }
.daily-assistant-switch-line strong { color: #dfe8f0; font-size: 12px; }
.daily-assistant-switch-line small { color: #7f93a7; font-size: 10px; }
.daily-assistant-card-list { display: flex; flex-direction: column; gap: 8px; }
.daily-assistant-card-target { padding: 10px 11px; border: 1px solid #35485b; border-radius: 6px; background: #151f2b; }
.daily-assistant-card-target.is-enabled { border-color: #766039; background: #1e201f; }
.daily-assistant-card-check { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); align-items: center; gap: 9px; }
.daily-assistant-card-check > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.daily-assistant-card-check strong { color: #e4ecf3; font-size: 13px; }
.daily-assistant-card-check small { color: #8195a8; font-size: 10px; }
.daily-assistant-card-fields { margin-top: 9px; padding-left: 61px; display: flex; flex-wrap: wrap; gap: 8px; }
.daily-assistant-card-fields label, .daily-assistant-replay > label { display: flex; align-items: center; gap: 7px; color: #8498ab; font-size: 11px; }
.daily-assistant-card-fields input, .daily-assistant-replay input { width: 110px; height: 32px; padding: 4px 8px; color: #edf3f8; border: 1px solid #4a5e73; border-radius: 5px; background: #101821; }
.daily-assistant-card-fields .daily-assistant-auto-tier input[readonly] { color: #f1d28d; border-color: #7b663e; background: #171b1d; cursor: default; }
.daily-assistant-auto-match { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; color: #8fbba5; font-size: 10px; }
.daily-assistant-auto-match i { color: #d6b76f; }
.daily-assistant-card-target:not(.is-enabled) .daily-assistant-auto-match { color: #748797; }
.daily-assistant-abundance { min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; color: #8fbba5; font-size: 10px; border: 1px solid #3f5d50; border-radius: 5px; background: #16261f; white-space: nowrap; }
.daily-assistant-abundance i { color: #d6b76f; }
.daily-assistant-abundance strong { color: #b7dec8; font-size: 11px; }
.daily-assistant-card-target:not(.is-enabled) .daily-assistant-abundance { color: #748797; border-color: #3c4d5e; background: #151e28; }
.daily-assistant-card-target:not(.is-enabled) .daily-assistant-abundance strong { color: #91a2b2; }
.daily-assistant-capline { margin: 10px 2px 0; color: #758a9e; font-size: 10px; }
.daily-assistant-replay { margin-top: 10px; padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #3b4f63; border-radius: 6px; background: #16222f; }
.daily-assistant-replay > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.daily-assistant-replay strong { color: #e2eaf1; font-size: 13px; }
.daily-assistant-replay strong i { color: #d4ad64; margin-right: 4px; }
.daily-assistant-replay small { color: #8296a9; font-size: 10px; overflow-wrap: anywhere; }
.daily-assistant-resource-bar.is-replay-cost { margin-top: 8px; margin-bottom: 0; }
.daily-assistant-footer {
    padding: 11px 14px;
    display: grid;
    grid-template-columns: minmax(110px, .38fr) minmax(180px, 1fr);
    gap: 9px;
    border-top: 1px solid #34465a;
    background: #151f2b;
}
.daily-assistant-footer button { height: 39px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 5px; font-size: 12px; }
.daily-assistant-save { color: #afc0cf; border: 1px solid #4b5e71; background: #1b2937; }
.daily-assistant-execute { color: #1d1a13; border: 1px solid #e0bf7b; background: #d5ae65; font-weight: 700; }
.daily-assistant-execute:hover { background: #e2c17d; }
.daily-assistant-report { position: relative; isolation: isolate; margin-bottom: 13px; overflow: hidden; border: 1px solid #526a82; border-radius: 7px; background: linear-gradient(135deg, #172638, #101923 72%); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.24); }
.daily-assistant-report::before { content: ''; position: absolute; z-index: 3; top: 0; bottom: 0; left: -34%; width: 28%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(244,207,126,.16), transparent); transform: skewX(-15deg); animation: dailyAssistantHarvestSweep 1.05s .08s ease-out both; }
@keyframes dailyAssistantHarvestSweep { from { left: -34%; opacity: 0; } 18% { opacity: 1; } to { left: 112%; opacity: 0; } }
.daily-assistant-report-head { min-height: 54px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e7eef5; border-bottom: 1px solid #3b5065; background: linear-gradient(90deg, #1c2d40, #172434); }
.daily-assistant-report-title { min-width: 0; display: flex; align-items: center; gap: 9px; }
.daily-assistant-report-title > i { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #f2cf82; border: 1px solid #7c6337; border-radius: 5px; background: #25271f; box-shadow: inset 0 0 0 1px rgba(255,225,155,.05); }
.daily-assistant-report-title > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.daily-assistant-report-title strong { color: #f4f7fa; font-size: 13px; }
.daily-assistant-report-title small { color: #93a8ba; font-size: 10px; }
.daily-assistant-report-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.daily-assistant-report-summary b { padding: 3px 6px; color: #91a3b4; font-size: 9px; font-weight: 600; border: 1px solid #405267; border-radius: 3px; background: #151f2b; }
.daily-assistant-report-summary b.is-completed { color: #9dd8b7; border-color: #456c59; background: #172a22; }
.daily-assistant-report-summary b.is-failed { color: #efaaa4; border-color: #754743; background: #2d1d1d; }
.daily-assistant-report-list { max-height: min(260px, 36vh); padding: 7px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #536a80 #121b26; }
.daily-assistant-report-row { position: relative; min-height: 55px; padding: 8px 9px; display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 9px; overflow: hidden; border: 1px solid #34495e; border-radius: 5px; background: #162230; opacity: 0; transform: translateY(-9px) scale(.985); animation: dailyAssistantResultReveal .42s cubic-bezier(.2,.82,.28,1.16) both; animation-delay: calc(var(--result-index, 0) * 65ms + 70ms); }
.daily-assistant-report-row::after { content: ''; position: absolute; inset: 7px auto 7px 0; width: 2px; border-radius: 0 2px 2px 0; background: #5e7184; transform: scaleY(.2); animation: dailyAssistantResultAccent .35s ease-out both; animation-delay: calc(var(--result-index, 0) * 65ms + 220ms); }
.daily-assistant-report-row.is-completed { border-color: #3d5b50; background: linear-gradient(100deg, #172a26, #162330 58%); }
.daily-assistant-report-row.is-completed::after { background: #6fc798; }
.daily-assistant-report-row.is-failed { border-color: #704845; background: #2a1f22; }
.daily-assistant-report-row:hover { border-color: #587088; background-color: #1a2938; }
.daily-assistant-report-status { width: 27px; height: 27px; display: grid; place-items: center; color: #8999a8; font-size: 10px; border: 1px solid #405368; border-radius: 4px; background: #111b26; }
.daily-assistant-report-row.is-completed .daily-assistant-report-status { color: #99dfb8; border-color: #46705b; background: #14261f; }
.daily-assistant-report-row.is-failed .daily-assistant-report-status { color: #efa29b; border-color: #754b47; background: #301e1e; }
.daily-assistant-report-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.daily-assistant-report-copy strong { color: #e8eef4; font-size: 11px; }
.daily-assistant-report-copy small { color: #879cad; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.daily-assistant-report-loot-list { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.daily-assistant-report-loot { position: relative; width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #52677b; border-radius: 5px; background: #101a25; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); animation: dailyAssistantLootPop .38s cubic-bezier(.18,.9,.3,1.25) both; animation-delay: calc(var(--result-index, 0) * 65ms + var(--loot-index, 0) * 45ms + 230ms); }
.daily-assistant-report-loot .item-pixel-icon-wrap { width: 32px; height: 32px; }
.daily-assistant-report-loot .item-pixel-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.daily-assistant-report-loot em { position: absolute; right: -3px; bottom: -3px; max-width: 76px; padding: 1px 4px; overflow: hidden; color: #ffe0a0; font-size: 8px; font-style: normal; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #766038; border-radius: 3px; background: #241f16; box-shadow: 0 2px 6px rgba(0,0,0,.42); }
.daily-assistant-report-loot-more { min-width: 25px; height: 25px; display: grid; place-items: center; color: #c2ced9; font-size: 9px; border: 1px solid #46596c; border-radius: 4px; background: #17222e; }
@keyframes dailyAssistantResultReveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dailyAssistantResultAccent { to { transform: scaleY(1); } }
@keyframes dailyAssistantLootPop { from { opacity: 0; transform: translateY(-7px) scale(.72); } to { opacity: 1; transform: translateY(0) scale(1); } }
.daily-assistant-modal.is-busy { pointer-events: none; opacity: .82; }

@media (max-width: 620px) {
    #modal-overlay:has(.daily-assistant-modal) { padding: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); align-items: flex-end; overflow: hidden; }
    #modal-content:has(.daily-assistant-modal) { width: 100%; height: calc(100vh - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); border-radius: 7px 7px 0 0; }
    #modal-content:has(.daily-assistant-modal) > h3 { flex: 0 0 auto; padding: 13px 15px 11px; font-size: 16px; }
    .daily-assistant-modal { height: auto; flex: 1 1 auto; min-height: 0; }
    .daily-assistant-hero, .daily-assistant-tabs, .daily-assistant-footer { flex: 0 0 auto; }
    .daily-assistant-tabs { padding: 0 4px; }
    .daily-assistant-tab { height: 46px; font-size: 11px; gap: 5px; }
    .daily-assistant-content { padding: 10px; }
    .daily-assistant-row { grid-template-columns: 18px 30px minmax(0, 1fr); min-height: 56px; padding: 8px; }
    .daily-assistant-row-icon { width: 29px; height: 29px; }
    .daily-assistant-state { grid-column: 3; justify-self: start; margin-top: -2px; }
    .daily-assistant-card-fields { padding-left: 0; justify-content: flex-end; }
    .daily-assistant-card-fields label { flex: 1; }
    .daily-assistant-card-fields input { width: 100%; min-width: 0; }
    .daily-assistant-auto-match { order: 3; width: 100%; min-height: 22px; padding-left: 2px; }
    .daily-assistant-abundance { order: 4; width: 100%; min-height: 27px; }
    .daily-assistant-report-head { align-items: flex-start; flex-direction: column; gap: 7px; }
    .daily-assistant-report-summary { justify-content: flex-start; }
    .daily-assistant-report-list { max-height: none; overflow: visible; }
    .daily-assistant-report-row { grid-template-columns: 29px minmax(0, 1fr); align-items: start; }
    .daily-assistant-report-copy strong,
    .daily-assistant-report-copy small { max-width: 100%; white-space: normal; word-break: break-word; }
    .daily-assistant-report-loot-list { grid-column: 2; justify-content: flex-start; padding: 2px 0 1px; }
    .daily-assistant-replay { align-items: stretch; flex-direction: column; }
    .daily-assistant-replay > label { justify-content: space-between; }
    .daily-assistant-replay input { width: 150px; }
    .daily-assistant-footer { grid-template-columns: .42fr 1fr; padding: 9px 10px max(9px, env(safe-area-inset-bottom)); }
    .daily-assistant-entry { grid-template-columns: 38px minmax(0, 1fr) auto 12px; padding: 10px; gap: 8px; }
    .daily-assistant-entry-icon { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .daily-assistant-entry, .daily-assistant-entry-loading { animation: none; transition: none; }
    .daily-assistant-report::before,
    .daily-assistant-report-row,
    .daily-assistant-report-row::after,
    .daily-assistant-report-loot { animation: none; }
    .daily-assistant-report-row { opacity: 1; transform: none; }
}

/* Territory barracks and Apocalypse Era */
.territory-barracks {
    --barracks-ink: #18232a;
    --barracks-line: rgba(65, 81, 88, 0.22);
    display: grid;
    gap: 18px;
    width: 100%;
    container: territory-barracks / inline-size;
}
.territory-barracks-overview {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-top: 1px solid rgba(199, 159, 75, 0.44);
    border-bottom: 1px solid rgba(76, 95, 100, 0.2);
    background: linear-gradient(90deg, rgba(241, 246, 244, 0.96), rgba(228, 237, 234, 0.9)), #edf3f0;
    color: var(--barracks-ink);
}
.territory-barracks-overview h2 { margin: 2px 0 4px; font-size: 24px; line-height: 1.2; letter-spacing: 0; }
.territory-barracks-overview p { margin: 0; color: #53646a; font-size: 13px; }
.territory-barracks-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    gap: 1px;
    min-width: min(100%, 560px);
    overflow: hidden;
    border: 1px solid rgba(61, 81, 88, 0.2);
    border-radius: 6px;
    background: rgba(61, 81, 88, 0.18);
}
.territory-barracks-metrics span {
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.84);
}
.territory-barracks-metrics small, .territory-barracks-counts small { color: #66777c; font-size: 11px; }
.territory-barracks-metrics b {
    color: #1c4b43;
    font-size: 17px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.territory-barracks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.territory-barracks-unit {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    min-height: 230px;
    overflow: hidden;
    border: 1px solid var(--barracks-line);
    border-radius: 8px;
    background: #f7faf8;
    color: var(--barracks-ink);
    box-shadow: 0 8px 20px rgba(31, 43, 46, 0.09);
}
.territory-barracks-scene {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    background: #485b50;
}
.territory-barracks-unit.tone-earth .territory-barracks-scene { background: #6a6548; }
.territory-barracks-unit.tone-steel .territory-barracks-scene { background: #53656b; }
.territory-barracks-unit.tone-silver .territory-barracks-scene { background: #5b6671; }
.territory-barracks-unit.tone-heaven .territory-barracks-scene { background: #526c79; }
.territory-barracks-scene img {
    width: 144px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.territory-barracks-unit-mark {
    position: absolute;
    top: 10px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(21, 30, 32, 0.72);
    color: #f4d27b;
}
.territory-barracks-unit-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 17px;
}
.territory-barracks-unit-body header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.territory-barracks-unit-body h3 { margin: 2px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: 0; }
.territory-barracks-unit-body header > strong {
    color: #b24d33;
    font-size: 17px;
    overflow-wrap: anywhere;
    text-align: right;
}
.territory-barracks-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.territory-barracks-counts span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 9px;
    border-left: 2px solid #769487;
    background: #edf3f0;
}
.territory-barracks-counts b { min-width: 0; color: #24373b; font-size: 13px; overflow-wrap: anywhere; }
.territory-barracks-effect { min-height: 20px; margin: 0; color: #5b696d; font-size: 12px; }
.territory-barracks-orders {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(183, 142, 58, 0.25);
    border-radius: 5px;
    background: #fff9e9;
    color: #594b2e;
}
.territory-barracks-orders b { overflow-wrap: anywhere; text-align: right; }
.territory-barracks-recruit-actions { display: grid; grid-template-columns: repeat(3, 44px) minmax(88px, 1fr); gap: 7px; }
.territory-barracks-recruit-actions button { min-height: 34px; padding: 6px; border-radius: 5px; }
.territory-barracks-recruit-actions .primary { background: #255e52; color: #fff; }
.territory-barracks-unit.is-capped .territory-barracks-counts span:nth-child(2) {
    border-left-color: #c4513a;
    background: #fff0ec;
}
.territory-barracks-loading { display: grid; place-items: center; gap: 10px; min-height: 260px; color: #53666b; }
.territory-barracks-loading i { font-size: 28px; color: #a97b2f; }
.balance-fortune-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.balance-era-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(221, 173, 68, 0.42);
    border-radius: 5px;
    background: rgba(255, 225, 132, 0.12);
    color: #efc65f;
    font-size: 12px;
    font-weight: 700;
}
.balance-fortune-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.balance-fortune-actions button { min-height: 36px; }
.balance-fortune-actions .secondary {
    border-color: rgba(129, 154, 165, 0.4);
    background: rgba(78, 96, 105, 0.45);
}
@container territory-barracks (max-width: 760px) {
    .territory-barracks-overview { align-items: stretch; flex-direction: column; }
    .territory-barracks-metrics { min-width: 0; width: 100%; }
    .territory-barracks-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .territory-barracks-overview { align-items: stretch; flex-direction: column; }
    .territory-barracks-metrics { min-width: 0; width: 100%; }
    .territory-barracks-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .territory-barracks-overview { padding: 16px; }
    .territory-barracks-metrics { grid-template-columns: 1fr; }
    .territory-barracks-metrics span { min-height: 52px; }
    .territory-barracks-unit { grid-template-columns: 1fr; }
    .territory-barracks-scene {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }
    .territory-barracks-scene img { width: 168px; height: 112px; }
    .territory-barracks-counts { grid-template-columns: 1fr 1fr; }
    .territory-barracks-counts span:last-child { grid-column: 1 / -1; }
    .territory-barracks-recruit-actions { grid-template-columns: repeat(3, 42px) minmax(96px, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .territory-barracks-unit, .territory-barracks-unit * {
        transition: none !important;
        animation: none !important;
    }
}

/* Daily assistant game presentation */
.daily-assistant-entry {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(117, 151, 177, 0.54);
    border-left-color: #dfbd70;
    background:
        linear-gradient(90deg, rgba(13, 23, 35, 0.97), rgba(19, 36, 50, 0.95)),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px);
    box-shadow: inset 0 0 0 1px rgba(255, 220, 143, 0.035), 0 8px 18px rgba(0,0,0,.22);
}
.daily-assistant-entry::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -20px;
    bottom: -36px;
    width: 130px;
    height: 90px;
    opacity: .16;
    background: repeating-linear-gradient(135deg, #d8b768 0 2px, transparent 2px 8px);
    transform: skewX(-18deg);
}
.daily-assistant-entry-icon:not(.is-error) {
    border-color: rgba(222, 188, 112, .52);
    background: #101c29 url('../assets/pixel-systems/home-activity-center.png') center / 31px 31px no-repeat;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 2px rgba(7, 14, 22, .72), 0 0 14px rgba(218, 182, 101, .1);
}
.daily-assistant-entry-icon:not(.is-error) i { opacity: 0; }

#modal-content:has(.daily-assistant-modal) {
    border-color: #6c7f91;
    background: #0a131e;
    box-shadow: 0 26px 74px rgba(0,0,0,.64), 0 0 0 1px rgba(218, 184, 108, .08);
}
#modal-content:has(.daily-assistant-modal) > h3 {
    position: relative;
    padding-left: 20px;
    border-bottom-color: #806b3d;
    background:
        linear-gradient(90deg, #182a3a, #101c29 70%),
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.025) 15px 16px);
}
#modal-content:has(.daily-assistant-modal) > h3::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 52px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, #e1bd6c, rgba(225,189,108,0));
}
.daily-assistant-modal {
    --daily-ink: #e8eef2;
    --daily-muted: #8ca1b1;
    --daily-gold: #dfbd70;
    --daily-jade: #72b294;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--daily-ink);
    background: #0b1521;
}
.daily-assistant-modal::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(rgba(111, 145, 167, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 145, 167, .05) 1px, transparent 1px);
    background-size: 16px 16px;
}
.daily-assistant-hero {
    position: relative;
    min-height: 92px;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    border-bottom: 1px solid rgba(204, 165, 82, .38);
    background:
        linear-gradient(90deg, rgba(19, 44, 56, .96), rgba(12, 26, 39, .97) 72%),
        repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.03) 12px 13px);
}
.daily-assistant-hero::after {
    content: '';
    position: absolute;
    right: -12px;
    bottom: -28px;
    width: 190px;
    height: 95px;
    opacity: .18;
    background:
        linear-gradient(135deg, transparent 42%, #d5b568 43% 45%, transparent 46%),
        linear-gradient(45deg, transparent 42%, #6b9a91 43% 45%, transparent 46%);
    background-size: 22px 22px;
}
.daily-assistant-hero-art {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(230, 199, 126, .62);
    background: #0b1722;
    box-shadow: inset 0 0 0 3px #152c38, 0 5px 18px rgba(0,0,0,.3);
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.daily-assistant-hero-art img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.daily-assistant-hero-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.daily-assistant-hero-copy small { color: var(--daily-gold); font-size: 10px; font-weight: 700; }
.daily-assistant-hero-copy strong { color: #f2f5f6; font-size: 20px; line-height: 1.2; }
.daily-assistant-hero-value {
    position: relative;
    z-index: 1;
    min-width: 122px;
    min-height: 36px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #f2d792;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(205, 164, 78, .46);
    background: rgba(35, 31, 22, .72);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.daily-assistant-tabs { padding: 7px 12px; gap: 6px; border-bottom-color: #324b5b; background: #0f1c29; }
.daily-assistant-tab {
    height: 42px;
    border: 1px solid transparent;
    color: #879cab;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.daily-assistant-tab:hover { color: #d6e2e8; border-color: rgba(104, 136, 155, .38); background: #172938; }
.daily-assistant-tab.active { color: #f0d28b; border-color: rgba(215, 180, 100, .52); background: linear-gradient(180deg, #273128, #1b272b); box-shadow: inset 3px 0 #d6b363; }
.daily-assistant-content { padding: 13px; scrollbar-color: #607888 #0c1722; }
.daily-assistant-phase {
    border-color: rgba(100, 139, 157, .42);
    border-left: 3px solid var(--daily-gold);
    border-radius: 2px;
    background: linear-gradient(90deg, #172a35, #111f2d);
}
.daily-assistant-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid #314a5a;
    border-radius: 6px;
    background: #101c28;
}
.daily-assistant-row {
    border: 0;
    border-bottom: 1px solid rgba(75, 105, 122, .38);
    border-radius: 0;
    background: rgba(16, 29, 41, .84);
    transition: background-color .16s ease, box-shadow .16s ease;
}
.daily-assistant-row:last-child { border-bottom: 0; }
.daily-assistant-row:hover { background: #172b39; }
.daily-assistant-row.is-actionable { background: linear-gradient(90deg, rgba(72, 58, 29, .42), rgba(19, 34, 43, .9) 42%); box-shadow: inset 3px 0 #d4ae5b; }
.daily-assistant-row-icon { color: #8eb6ca; border-color: #3d6071; background: #10212e; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.daily-assistant-row.is-actionable .daily-assistant-row-icon { color: #f0ca78; border-color: #8a6d37; background: #28271f; }
.daily-assistant-state { border-radius: 3px; }
.daily-assistant-resource-bar { border-color: #3b5969; border-left: 3px solid #6da58e; border-radius: 3px; background: #132431; }
.daily-assistant-card-list { gap: 7px; }
.daily-assistant-card-target { border-color: #314b5b; border-radius: 4px; background: rgba(15, 28, 40, .9); }
.daily-assistant-card-target.is-enabled { border-color: #806a3e; background: linear-gradient(90deg, rgba(66, 56, 31, .34), #14242d 48%); box-shadow: inset 3px 0 #d3af62; }
.daily-assistant-card-fields input, .daily-assistant-replay input { border-color: #456779; border-radius: 3px; background: #09141e; }
.daily-assistant-replay { border-color: #3c596a; border-radius: 4px; background: #122330; }
.daily-assistant-footer { border-top-color: #3b5362; background: #0f1c28; box-shadow: 0 -8px 24px rgba(0,0,0,.18); }
.daily-assistant-footer button { border-radius: 3px; }
.daily-assistant-save { color: #b6c9d3; border-color: #496777; background: #172b38; }
.daily-assistant-execute { color: #1d1a13; border-color: #f0cf82; background: linear-gradient(180deg, #e3c273, #c49a4d); box-shadow: inset 0 1px rgba(255,255,255,.28); }
.daily-assistant-report { border-color: #5c7180; border-radius: 4px; background: linear-gradient(135deg, #152a35, #0d1a26 72%); }
.daily-assistant-report-head { background: linear-gradient(90deg, #1c3440, #142431); }

/* Barracks dark military presentation and container-safe layout */
.territory-barracks {
    --barracks-ink: #e7eef0;
    --barracks-muted: #8fa2a8;
    --barracks-gold: #d8b966;
    --barracks-line: rgba(100, 131, 141, .42);
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}
.territory-barracks-overview {
    position: relative;
    isolation: isolate;
    align-items: center;
    min-width: 0;
    padding: 20px 22px;
    border-top-color: rgba(216, 185, 102, .58);
    border-bottom-color: rgba(87, 121, 132, .48);
    color: var(--barracks-ink);
    background:
        linear-gradient(90deg, rgba(14, 28, 39, .98), rgba(19, 43, 51, .94)),
        url('../assets/pixel-systems/home-territory.png') right 24px center / 92px 92px no-repeat;
}
.territory-barracks-overview::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .11;
    background: repeating-linear-gradient(135deg, transparent 0 12px, #b9d0d2 12px 13px);
}
.territory-barracks-overview h2 { color: #f1f4f2; }
.territory-barracks-overview p { color: #9badb2; }
.territory-barracks .territory-kicker { color: var(--barracks-gold); }
.territory-barracks-metrics {
    width: min(100%, 560px);
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-color: rgba(101, 137, 148, .42);
    background: rgba(91, 123, 133, .28);
}
.territory-barracks-metrics span { min-width: 0; background: rgba(8, 21, 29, .88); }
.territory-barracks-metrics small,
.territory-barracks-counts small { color: var(--barracks-muted); }
.territory-barracks-metrics b { min-width: 0; color: #91d1b4; overflow-wrap: anywhere; }
.territory-barracks-grid { min-width: 0; }
.territory-barracks-unit {
    grid-template-columns: minmax(126px, 148px) minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
    border-color: var(--barracks-line);
    background: #111f2b;
    color: var(--barracks-ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.025);
}
.territory-barracks-scene { border-right-color: rgba(221, 192, 122, .22); }
.territory-barracks-unit.tone-earth .territory-barracks-scene { background: #3d3d2d; }
.territory-barracks-unit.tone-steel .territory-barracks-scene { background: #30444b; }
.territory-barracks-unit.tone-silver .territory-barracks-scene { background: #37434e; }
.territory-barracks-unit.tone-heaven .territory-barracks-scene { background: #294b58; }
.territory-barracks-scene img { max-width: 100%; }
.territory-barracks-unit-body { min-width: 0; padding: 15px; }
.territory-barracks-unit-body header { min-width: 0; }
.territory-barracks-unit-body header > div { min-width: 0; }
.territory-barracks-unit-body h3 { color: #f1f4f2; }
.territory-barracks-unit-body header > strong { max-width: 48%; color: #e8c46f; }
.territory-barracks-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.territory-barracks-counts span { border-left-color: #5e927f; background: #172b34; }
.territory-barracks-counts b { color: #dce7e8; }
.territory-barracks-effect { color: #9eb0b5; }
.territory-barracks-effect {
    display: grid;
    gap: 3px;
}
.territory-barracks-effect > span {
    color: #b9d7ce;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.territory-barracks-effect small {
    color: #718d95;
    font-size: 9px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.territory-barracks-orders {
    min-width: 0;
    border-color: rgba(198, 160, 74, .4);
    background: #25271f;
    color: #e4ca8a;
}
.territory-barracks-orders > span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.territory-barracks-orders > span > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.territory-barracks-orders b { min-width: 0; max-width: 44%; flex: 0 1 auto; color: #f0d99d; }
.territory-barracks-recruit-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.territory-barracks-recruit-actions button { min-width: 0; border-color: #4c6b77; background: #192d38; color: #dce8eb; }
.territory-barracks-recruit-actions .primary { grid-column: 1 / -1; background: #286554; color: #f3f7f3; }
.territory-barracks-unit.is-capped .territory-barracks-counts span:nth-child(2) { border-left-color: #bd6452; background: #352523; }
.territory-barracks-loading { color: #9eb1b5; }

@container territory-barracks (max-width: 520px) {
    .territory-barracks-overview { align-items: stretch; flex-direction: column; padding: 16px; }
    .territory-barracks-metrics { width: 100%; }
    .territory-barracks-unit { grid-template-columns: minmax(0, 1fr); }
    .territory-barracks-scene { min-height: 138px; border-right: 0; border-bottom: 1px solid rgba(221, 192, 122, .22); }
    .territory-barracks-scene img { width: 168px; height: 112px; }
}
@container territory-barracks (max-width: 390px) {
    .territory-barracks-metrics { grid-template-columns: minmax(0, 1fr); }
    .territory-barracks-metrics span { min-height: 50px; padding: 9px 11px; }
    .territory-barracks-counts { grid-template-columns: minmax(0, 1fr); }
    .territory-barracks-counts span:last-child { grid-column: auto; }
    .territory-barracks-unit-body header { flex-direction: column; gap: 6px; }
    .territory-barracks-unit-body header > strong { max-width: 100%; text-align: left; }
}

@media (max-width: 620px) {
    .daily-assistant-hero { min-height: 86px; padding: 11px 12px; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; }
    .daily-assistant-hero-art { width: 48px; height: 48px; }
    .daily-assistant-hero-art img { width: 36px; height: 36px; }
    .daily-assistant-hero-copy strong { font-size: 17px; }
    .daily-assistant-hero-value { grid-column: 2; justify-self: start; min-width: 0; min-height: 26px; margin-top: -4px; padding: 3px 7px; font-size: 10px; }
    .daily-assistant-tabs { padding: 6px; gap: 4px; }
    .daily-assistant-tab { height: 42px; padding: 0 4px; }
    .daily-assistant-content { padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .daily-assistant-row { transition: none; }
}
.territory-barracks-heading { min-width: 0; }
.territory-barracks-market-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}
.territory-barracks-market-links button {
    min-width: 0;
    min-height: 44px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 7px;
    color: #dce8eb;
    text-align: left;
    border: 1px solid rgba(111, 145, 154, .46);
    border-radius: 4px;
    background: rgba(8, 21, 29, .84);
}
.territory-barracks-market-links button:hover,
.territory-barracks-market-links button:focus-visible {
    border-color: rgba(221, 187, 105, .72);
    background: #182c34;
}
.territory-barracks-market-links button > i:first-child {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    color: #e5c36e;
    border: 1px solid rgba(218, 183, 96, .38);
    background: #24271f;
}
.territory-barracks-market-links button > i:last-child { color: #708b95; font-size: 9px; }
.territory-barracks-market-links button > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.territory-barracks-market-links strong { color: #edf2f2; font-size: 11px; line-height: 1.25; }
.territory-barracks-market-links small { color: #8da1a7; font-size: 9px; line-height: 1.25; }

@container territory-barracks (max-width: 390px) {
    .territory-barracks-market-links { grid-template-columns: minmax(0, 1fr); }
}
/* Barracks formation progression and artifact shortcut */
.territory-barracks-market-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.territory-barracks-formation {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(92, 128, 139, .5);
    border-top-color: rgba(216, 185, 102, .58);
    border-radius: 5px;
    color: #e7eef0;
    background: #101f2a;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
}
.territory-barracks-formation::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background: repeating-linear-gradient(135deg, transparent 0 15px, #9ab4b9 15px 16px);
}
.territory-barracks-formation-sigil {
    position: relative;
    z-index: 1;
    min-height: 142px;
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(216, 185, 102, .25);
    background: #26333a;
}
.territory-barracks-formation-sigil::before,
.territory-barracks-formation-sigil::after {
    content: '';
    position: absolute;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(226, 196, 119, .52);
    transform: rotate(45deg);
}
.territory-barracks-formation-sigil::after {
    width: 48px;
    height: 48px;
    border-color: rgba(117, 184, 157, .62);
}
.territory-barracks-formation-sigil i {
    color: #e7c875;
    font-size: 29px;
}
.territory-barracks-formation-sigil span {
    position: absolute;
    right: 9px;
    bottom: 8px;
    min-width: 28px;
    padding: 2px 5px;
    color: #122027;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid #efd58e;
    background: #d9b960;
}
.territory-barracks-formation-body {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 15px 17px;
    display: grid;
    gap: 9px;
}
.territory-barracks-formation-body header {
    min-width: 0;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.territory-barracks-formation-body h3 {
    margin: 2px 0 0;
    color: #f2f4f0;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0;
}
.territory-barracks-formation-body h3 small {
    color: #d8b966;
    font-size: 11px;
    font-weight: 700;
}
.territory-barracks-formation-body p {
    margin: 0;
    color: #94a8ad;
    font-size: 12px;
}
.territory-barracks-formation-count {
    flex: 0 1 auto;
    max-width: 48%;
    padding: 5px 8px;
    color: #eed591;
    text-align: right;
    overflow-wrap: anywhere;
    border: 1px solid rgba(218, 183, 96, .34);
    background: #25271f;
}
.territory-barracks-formation-stage-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
}
.territory-barracks-formation-stage-label strong {
    color: #ecd184;
    font-size: 12px;
}
.territory-barracks-formation-stage-label small {
    color: #82969d;
    font-size: 10px;
    text-align: right;
}
.territory-barracks-formation-effects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.territory-barracks-formation-effects span {
    min-width: 0;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-left: 3px solid #5e927f;
    background: #172b34;
}
.territory-barracks-formation-effects small { color: #8fa2a8; font-size: 10px; }
.territory-barracks-formation-effects b {
    min-width: 0;
    color: #9ad9bd;
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
}
.territory-barracks-formation-preview {
    display: grid;
    gap: 7px;
    padding-top: 9px;
    border-top: 1px solid rgba(216, 185, 102, .2);
}
.territory-barracks-formation-preview > header {
    align-items: baseline;
}
.territory-barracks-formation-preview > header strong {
    color: #e8ca75;
    font-size: 12px;
}
.territory-barracks-formation-preview > header span {
    color: #9fb0b5;
    font-size: 10px;
    text-align: right;
    overflow-wrap: anywhere;
}
.territory-barracks-formation-effects.is-preview span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.territory-barracks-formation-effects.is-preview em {
    grid-column: 1 / -1;
    color: #71868d;
    font-size: 9px;
    font-style: normal;
}
.territory-barracks-formation-explorer {
    --formation-current-position: 0%;
    --formation-view-position: 0%;
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(91, 132, 143, .48);
    background: #0c1a24;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.territory-barracks-formation-selector {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
}
.territory-barracks-formation-selector button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #e9d08a;
    border: 1px solid #506b72;
    border-radius: 3px;
    background: #172933;
    cursor: pointer;
}
.territory-barracks-formation-selector button:hover:not(:disabled),
.territory-barracks-formation-selector button:focus-visible {
    color: #fff0bd;
    border-color: #c7a85b;
    background: #243a42;
}
.territory-barracks-formation-selector button:disabled {
    color: #60747a;
    border-color: #31474f;
    cursor: not-allowed;
    opacity: .55;
}
.territory-barracks-formation-selector > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.territory-barracks-formation-selector span {
    color: #81979e;
    font-size: 10px;
}
.territory-barracks-formation-selector strong {
    color: #f0d486;
    font-size: 13px;
}
.territory-barracks-formation-range-shell {
    position: relative;
    height: 24px;
    display: grid;
    align-items: center;
}
.territory-barracks-formation-range-shell input[type=range] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}
.territory-barracks-formation-range-shell input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid #45616a;
    background: linear-gradient(90deg, #4f8d79 0 var(--formation-view-position), #142832 var(--formation-view-position) 100%);
}
.territory-barracks-formation-range-shell input[type=range]::-moz-range-track {
    height: 6px;
    border: 1px solid #45616a;
    background: #142832;
}
.territory-barracks-formation-range-shell input[type=range]::-moz-range-progress {
    height: 6px;
    background: #4f8d79;
}
.territory-barracks-formation-range-shell input[type=range]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #f0d486;
    border-radius: 2px;
    background: #294b4c;
    box-shadow: 0 0 0 2px rgba(8, 20, 27, .88);
}
.territory-barracks-formation-range-shell input[type=range]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #f0d486;
    border-radius: 2px;
    background: #294b4c;
    box-shadow: 0 0 0 2px rgba(8, 20, 27, .88);
}
.territory-barracks-formation-current-marker {
    position: absolute;
    z-index: 1;
    left: var(--formation-current-position);
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(233, 194, 91, .72);
    transform: translateX(-50%);
    pointer-events: none;
}
.territory-barracks-formation-current-marker::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -3px;
    border-width: 4px 3px 0;
    border-style: solid;
    border-color: #e9c25b transparent transparent;
}
.territory-barracks-formation-range-shell:not(.has-current-level) .territory-barracks-formation-current-marker {
    display: none;
}
.territory-barracks-formation-range-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #70858c;
    font-size: 9px;
}
.territory-barracks-formation-range-labels b {
    color: #bdcacc;
    font-weight: 600;
}
.territory-barracks-formation-target-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.territory-barracks-formation-target-summary > div,
.territory-barracks-formation-target-effects span {
    min-width: 0;
    padding: 7px 9px;
    display: grid;
    gap: 2px;
    border-left: 2px solid #627d84;
    background: #142731;
}
.territory-barracks-formation-target-summary small,
.territory-barracks-formation-target-effects small {
    color: #7f969d;
    font-size: 9px;
}
.territory-barracks-formation-target-summary strong,
.territory-barracks-formation-target-effects b {
    min-width: 0;
    color: #dce8e8;
    font-size: 11px;
    overflow-wrap: anywhere;
}
.territory-barracks-formation-target-summary > .is-reached {
    border-left-color: #69a88e;
    background: #152d2c;
}
.territory-barracks-formation-target-summary > .is-reached strong {
    color: #9bd9bd;
}
.territory-barracks-formation-target-effects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.territory-barracks-formation-target-effects span {
    border-left-color: #a88645;
}
.territory-barracks-formation-target-effects b {
    color: #f0d486;
}

.territory-barracks-formation-progress {
    height: 7px;
    overflow: hidden;
    border: 1px solid #3e5d68;
    background: #08151e;
}
.territory-barracks-formation-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #467d6c, #d1ad59);
    transition: width .3s ease;
}
.territory-barracks-formation-next { color: #b6c6c9; font-size: 11px; }
.territory-barracks-formation.is-locked {
    border-top-color: rgba(108, 133, 141, .52);
}
.territory-barracks-formation.is-locked .territory-barracks-formation-sigil {
    filter: saturate(.45);
}
.territory-barracks-recruit-actions {
    grid-template-columns: minmax(0, 1fr);
}
.territory-barracks-recruit-actions .primary {
    grid-column: auto;
}

@container territory-barracks (max-width: 620px) {
    .territory-barracks-market-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .territory-barracks-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .territory-barracks-market-links button:last-child { grid-column: 1 / -1; }
}
@container territory-barracks (max-width: 520px) {
    .territory-barracks-formation { grid-template-columns: minmax(0, 1fr); }
    .territory-barracks-formation-sigil {
        min-height: 92px;
        border-right: 0;
        border-bottom: 1px solid rgba(216, 185, 102, .25);
    }
    .territory-barracks-formation-body header { flex-direction: column; gap: 6px; }
    .territory-barracks-formation-count { max-width: 100%; text-align: left; }
    .territory-barracks-formation-stage-label { align-items: flex-start; flex-direction: column; gap: 3px; }
    .territory-barracks-formation-stage-label small,
    .territory-barracks-formation-preview > header span { text-align: left; }
}
@container territory-barracks (max-width: 390px) {
    .territory-barracks-market-links { grid-template-columns: minmax(0, 1fr); }
    .territory-barracks-market-links button:last-child { grid-column: auto; }
    .territory-barracks-formation-effects,
    .territory-barracks-formation-target-effects,
    .territory-barracks-formation-target-summary { grid-template-columns: minmax(0, 1fr); }
    .territory-barracks-formation-selector > div { align-items: center; flex-direction: column; gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .territory-barracks-formation-progress i { transition: none; }
}
/* Star Rune sequential Deep Law */
.srv3-law-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #31475a;
    border-radius: 7px;
    background: #101922;
    box-shadow: inset 0 1px #42617666, 0 10px 28px #04090e66;
}
.srv3-law-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid #273a49;
    background: #15222d;
}
.srv3-law-card > header div { min-width: 0; display: grid; gap: 3px; }
.srv3-law-card > header span { color: #91aaba; font-size: 12px; }
.srv3-law-card > header strong { color: #f1d78f; font-size: 18px; }
.srv3-law-card > header > i { color: #73c3d9; font-size: 24px; }
.srv3-law-track {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
    padding: 14px 17px 8px;
}
.srv3-law-track > span {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 30px;
    border: 1px solid #344856;
    border-radius: 4px;
    color: #8094a1;
    background: #0c141b;
}
.srv3-law-track > span:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    width: 6px;
    height: 1px;
    background: #344856;
}
.srv3-law-track > span.is-complete { border-color: #3f8169; color: #a4e2c3; background: #142920; }
.srv3-law-track > span.is-next { border-color: #c6a34c; color: #ffe4a0; background: #332a17; box-shadow: 0 0 0 2px #d1ad5530; }
.srv3-law-track i { font-style: normal; font-size: 12px; font-weight: 800; }
.srv3-law-summary {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(118px, 1fr));
    gap: 8px;
    padding: 8px 17px 14px;
}
.srv3-law-summary > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #263b49;
    border-radius: 5px;
    background: #0c151c;
}
.srv3-law-summary small { display: block; margin-bottom: 7px; color: #8299a8; font-size: 11px; }
.srv3-law-summary strong { color: #d8edf1; font-size: 14px; overflow-wrap: anywhere; }
.srv3-law-summary em { display: block; margin-top: 3px; color: #7394a5; font-size: 10px; font-style: normal; }
.srv3-law-summary > div:first-child > span { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.srv3-law-summary > div:first-child > span > span { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.srv3-law-summary > div:first-child i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #263b49; color: #b8ced8; font-size: 10px; font-style: normal; }
.srv3-law-summary > div:first-child b { max-width: 100%; color: #b9e4ed; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv3-law-card > footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    align-items: center;
    gap: 14px;
    padding: 13px 17px;
    border-top: 1px solid #273a49;
    background: #121e27;
}
.srv3-law-card > footer > div { min-width: 0; display: grid; gap: 2px; }
.srv3-law-card > footer > div > span { color: #76909f; font-size: 11px; }
.srv3-law-card > footer > div > strong { color: #f0d48b; font-size: 15px; }
.srv3-law-card > footer > div > small { color: #9ab1bd; overflow-wrap: anywhere; }
.srv3-law-card > footer button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; min-height: 45px; padding: 7px 13px; border: 1px solid #b18d3e; border-radius: 5px; color: #172029; background: #d6b65d; font-weight: 800; }
.srv3-law-card > footer button span { display: grid; gap: 1px; }
.srv3-law-card > footer button small { color: #4c4026; font-size: 10px; font-weight: 700; }
.srv3-law-card > footer button:disabled { border-color: #394957; color: #6f808b; background: #202d36; opacity: .72; }
@media (max-width: 700px) {
    .srv3-law-card > header, .srv3-law-card > footer { padding: 12px; }
    .srv3-law-track { gap: 3px; padding: 12px 12px 7px; }
    .srv3-law-track > span { height: 27px; }
    .srv3-law-track > span:not(:last-child)::after { width: 3px; }
    .srv3-law-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px 12px 12px; }
    .srv3-law-summary > div:first-child { grid-column: 1 / -1; }
    .srv3-law-card > footer { grid-template-columns: 1fr; align-items: stretch; }
}

.krona-batch-setting,
.daily-assistant-treasure-batch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin: 9px 0;
    padding: 9px 10px;
    border: 1px solid rgba(205, 166, 95, 0.32);
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(44, 37, 24, 0.82), rgba(15, 32, 43, 0.88));
}
.krona-batch-setting > span,
.daily-assistant-treasure-batch > span:not(.daily-assistant-row-icon) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.krona-batch-setting strong,
.daily-assistant-treasure-batch strong { color: #f0d18d; font-size: 13px; }
.krona-batch-setting small,
.daily-assistant-treasure-batch small { color: #91a5b5; font-size: 11px; line-height: 1.4; }
.krona-batch-setting select,
.daily-assistant-treasure-batch select {
    width: auto;
    min-width: 112px;
    height: 34px;
    border: 1px solid #536a79;
    border-radius: 4px;
    color: #e8f1f5;
    background: #10232f;
}
.daily-assistant-treasure-batch { grid-template-columns: 32px minmax(0, 1fr) auto; }
.daily-assistant-treasure-batch b { color: #f4cf78; }
@media (max-width: 640px) {
    .krona-batch-setting { grid-template-columns: minmax(0, 1fr) auto; }
    .krona-batch-setting > span { grid-column: 1 / -1; }
    .daily-assistant-treasure-batch { grid-template-columns: 30px minmax(0, 1fr); }
    .daily-assistant-treasure-batch select { grid-column: 1 / -1; width: 100%; }
}
/* Star Rune compact-shell override */
@container (max-width: 700px) {
    .srv3-law-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .srv3-law-summary > div:first-child {
        grid-column: 1 / -1;
    }
    .srv3-law-summary > div:first-child > span {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 5px;
    }
    .srv3-law-summary > div:first-child b {
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        font-size: 8px;
    }
    .srv3-law-card > footer {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .srv3-law-card > footer button {
        min-height: 48px;
    }
}