/* ========================================
   global.css - 全局基础样式
   ======================================== */
html,
body {
    margin: 0px;
    height: 100%;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: auto;
    overflow: hidden;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

body {
    background-color: black;
    font-family: "Microsoft YaHei UI";
    color: #008000;
    font-size: 14px;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

pre {
    font-size: inherit;
    font-family: inherit;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    display: none;
}

* {
    box-sizing: border-box;
    scrollbar-width: none;
}

.hide {
    display: none;
}

@media(min-width: 768px) {
    body {
        width: 768px;
        margin: auto;
        position: relative;
    }

    .dialog-stats>.top-item>.top-title {
        padding-left: 3em;
        margin-right: 2em;
    }
}

@media (max-width: 767px) {
    .dialog>.dialog-footer>.footer-item {
        width: 4em;
    }

    .dialog>.dialog-footer>.eq-group {
        margin-left: 0.5em;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.5em;
        margin-top: 0.5em;
    }

    .confirm-count>.btn {
        width: auto;
    }

    .stats-container-left>.stats-silder {
        writing-mode: vertical-rl;
        width: 2em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .dialog-list>.otype-list {
        width: 2.5em;
    }

    .dialog-list>.otype-list>.otype-item {
        writing-mode: vertical-rl;
        width: 2em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
}

.input-error {
    color: red;
}

.textbox {
    border-radius: 0.25rem;
    padding: 6px 12px 6px 12px;
    outline: none;
    border: none;
    border-bottom: solid 1px #888888;
    width: 80%;
    height: 1.5rem;
    border-radius: 0px;
    margin-right: 10px;
}

.loader {
    margin: auto auto;
    margin-top: 12.5rem;
    width: 18.75rem;
    text-align: center;
    line-height: 2rem;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25em;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    font-size: 0.875rem;
}

.loader>img {
    vertical-align: middle;
    border: 0;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-top: -4px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

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

.flex-1 {
    flex: 1;
}

.flex-0 {
    flex: none;
}

mem {
    color: gray;
    font-size: 0.8em;
}

/* ========================================
   颜色类 (grade / color tags / glyphicon)
   ======================================== */
.grade0 {
    --border-color: #C0C0C0;
    border-color: var(--border-color);
}

.grade1 {
    --border-color: #00FF00;
    border-color: var(--border-color);
}

.grade2 {
    --border-color: #00FFFF;
    border-color: var(--border-color);
}

.grade3 {
    --border-color: #FFFF00;
    border-color: var(--border-color);
}

.grade4 {
    --border-color: #912CEE;
    border-color: var(--border-color);
}

.grade5 {
    --border-color: #FFA500;
    border-color: var(--border-color);
}

.grade6 {
    --border-color: #FF4500;
    border-color: var(--border-color);
}

.grade7 {
    --border-color: #F8FBFF;
    border-color: var(--border-color);
}

CMD {
    font-weight: bold;
}

NOR {
    color: #008000;
}

GRE {
    color: #008000;
}

BLK {
    color: #505050;
}

BLU {
    color: #000080;
}

CYN {
    color: #008080;
}

RED {
    color: #800000;
}

MAG {
    color: #800080;
}

YEL {
    color: #808000;
}

WHT {
    color: #C0C0C0;
}

ORA {
    color: #d26900;
}

opt {
    opacity: 0.5
}

HIK {
    color: #808080;
}

HIB {
    color: #0000FF;
}

HIG {
    color: #00FF00;
}

HIC {
    color: #00FFFF;
}

HIR {
    color: #FF0000;
}

HIM {
    color: #FF00FF
}

HIY {
    color: #FFFF00;
}

HIW {
    color: #FFFFFF;
}

HIO {
    color: #FFA500;
}

HIJ {
    color: #FFD700;
}

HIZ {
    color: #912CEE;
}

HIDARKGOLD {
    color: #c08a24;
    text-shadow: 0 0 4px rgba(255, 204, 92, 0.55), 0 0 10px rgba(92, 58, 12, 0.75);
}

HICOLORFUL {
    display: inline-block;
    color: #35f5ff;
    font-weight: 700;
    background: linear-gradient(95deg, #35f5ff 0%, #69ff97 18%, #fff066 36%, #ff9f43 54%, #ff4fd8 72%, #8b5cf6 90%, #35f5ff 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: taichu-title-flow 3.8s linear infinite;
    text-shadow: 0 0 5px rgba(53, 245, 255, 0.45), 0 0 12px rgba(255, 79, 216, 0.26);
}

HIHUNDUN {
    display: inline-block;
    color: #f5d0ff;
    font-weight: 800;
    background: linear-gradient(96deg, #2a0f45 0%, #a855f7 22%, #f0abfc 44%, #ffd166 64%, #7c3aed 82%, #2a0f45 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: taichu-title-flow 4.2s linear infinite;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.85), 0 0 11px rgba(168, 85, 247, 0.5), 0 0 18px rgba(255, 209, 102, 0.25);
}

HIXIAN {
    color: #F8FBFF;
    text-shadow: 0 0 4px #FFFFFF, 0 0 10px rgba(248, 251, 255, 0.55);
}

HIXIAN1 {
    color: #D8FFF3;
    text-shadow: 0 0 4px #78F5DD, 0 0 10px rgba(216, 255, 243, 0.45);
}

HIXIAN2 {
    color: #DDF3FF;
    text-shadow: 0 0 4px #7FCBFF, 0 0 10px rgba(221, 243, 255, 0.45);
}

HIXIAN3 {
    color: #F1D8FF;
    text-shadow: 0 0 4px #C783FF, 0 0 10px rgba(241, 216, 255, 0.45);
}

HIXIAN4 {
    color: #FFE28A;
    text-shadow: 0 0 4px #FFBF40, 0 0 10px rgba(255, 226, 138, 0.45);
}

HIXIAN5 {
    color: #BFA7FF;
    text-shadow: 0 0 4px #8C70FF, 0 0 10px rgba(191, 167, 255, 0.45);
}

HIXIAN6 {
    color: #FFB36A;
    text-shadow: 0 0 4px #FF7D2B, 0 0 10px rgba(255, 179, 106, 0.45);
}

HIXIAN7 {
    color: #E6C2FF;
    text-shadow: 0 0 4px #B67AFF, 0 0 10px rgba(230, 194, 255, 0.45);
}

HIXIAN8 {
    color: #FFF0B8;
    text-shadow: 0 0 4px #FFD86A, 0 0 10px rgba(255, 240, 184, 0.45);
}

HIXIAN9 {
    color: #FFFFFF;
    text-shadow: 0 0 4px #BFF8FF, 0 0 12px rgba(255, 255, 255, 0.65);
}

HITAICHU {
    display: inline-block;
    color: #F8FBFF;
    font-weight: 800;
    background: linear-gradient(95deg, #35F5FF 0%, #8B5CF6 22%, #FF4FD8 44%, #FFD166 64%, #69FF97 82%, #35F5FF 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: taichu-title-flow 3.2s linear infinite;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.9),
        0 0 9px rgba(53, 245, 255, 0.45),
        0 0 16px rgba(255, 79, 216, 0.35);
}

@keyframes taichu-title-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 240% 50%;
    }
}

HITITLE01,
HITITLE02,
HITITLE03,
HITITLE04,
HITITLE05,
HITITLE06,
HITITLE07,
HITITLE08,
HITITLE09,
HITITLE10,
HITITLE11,
HITITLE12,
HITITLE13,
HITITLE14,
HITITLE15,
HITITLE16,
HITITLE17,
HITITLE18,
HITITLE19,
HITITLE20,
WXTITLE01,
WXTITLE02,
WXTITLE03,
WXTITLE04 {
    display: inline-block;
    color: #F8FBFF;
    font-weight: 800;
    background: var(--custom-title-flow);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: custom-title-flow 3.6s linear infinite;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.88),
        0 0 10px rgba(124, 236, 255, 0.38),
        0 0 18px rgba(255, 205, 103, 0.26);
}

HITITLE01 { --custom-title-flow: linear-gradient(96deg, #35F5FF 0%, #8B5CF6 24%, #FF4FD8 48%, #FFD166 72%, #35F5FF 100%); }
HITITLE02 { --custom-title-flow: linear-gradient(96deg, #FFE082 0%, #FFF8C2 26%, #F6B73C 52%, #8EF8FF 78%, #FFE082 100%); }
HITITLE03 { --custom-title-flow: linear-gradient(96deg, #DDF3FF 0%, #86D9FF 28%, #FFFFFF 50%, #BFA7FF 76%, #DDF3FF 100%); }
HITITLE04 { --custom-title-flow: linear-gradient(96deg, #FF4D4D 0%, #FFB347 30%, #FFF2A8 52%, #FF6A00 76%, #FF4D4D 100%); }
HITITLE05 { --custom-title-flow: linear-gradient(96deg, #7FFFD4 0%, #33FF99 26%, #C8FFD8 50%, #55D6FF 76%, #7FFFD4 100%); }
HITITLE06 { --custom-title-flow: linear-gradient(96deg, #7C3AED 0%, #C084FC 28%, #F0ABFC 52%, #67E8F9 76%, #7C3AED 100%); }
HITITLE07 { --custom-title-flow: linear-gradient(96deg, #1DD3B0 0%, #38BDF8 28%, #E0F2FE 52%, #14B8A6 76%, #1DD3B0 100%); }
HITITLE08 { --custom-title-flow: linear-gradient(96deg, #FF7AC8 0%, #A78BFA 24%, #60A5FA 48%, #6EE7B7 72%, #FF7AC8 100%); }
HITITLE09 { --custom-title-flow: linear-gradient(96deg, #FFD166 0%, #FFF3B0 25%, #FF8C42 50%, #FFDD55 75%, #FFD166 100%); }
HITITLE10 { --custom-title-flow: linear-gradient(96deg, #5B1A7A 0%, #E879F9 28%, #FF5C8A 52%, #2DD4BF 76%, #5B1A7A 100%); }
HITITLE11 { --custom-title-flow: linear-gradient(96deg, #60A5FA 0%, #93C5FD 25%, #D8FFF3 50%, #2563EB 75%, #60A5FA 100%); }
HITITLE12 { --custom-title-flow: linear-gradient(96deg, #E5E7EB 0%, #FFFFFF 25%, #93C5FD 50%, #CBD5E1 75%, #E5E7EB 100%); }
HITITLE13 { --custom-title-flow: linear-gradient(96deg, #FF6B6B 0%, #FFD166 25%, #FF2E63 50%, #FFA600 75%, #FF6B6B 100%); }
HITITLE14 { --custom-title-flow: linear-gradient(96deg, #0F172A 0%, #22D3EE 30%, #A7F3D0 54%, #64748B 78%, #0F172A 100%); }
HITITLE15 { --custom-title-flow: linear-gradient(96deg, #38BDF8 0%, #FFFFFF 22%, #A855F7 46%, #FDE047 70%, #38BDF8 100%); }
HITITLE16 { --custom-title-flow: linear-gradient(96deg, #BAE6FD 0%, #FFFFFF 28%, #A5B4FC 52%, #F0ABFC 76%, #BAE6FD 100%); }
HITITLE17 { --custom-title-flow: linear-gradient(96deg, #DC2626 0%, #FB7185 28%, #FBBF24 52%, #7F1D1D 76%, #DC2626 100%); }
HITITLE18 { --custom-title-flow: linear-gradient(96deg, #0EA5E9 0%, #F9A8D4 25%, #C4B5FD 50%, #FDE68A 75%, #0EA5E9 100%); }
HITITLE19 { --custom-title-flow: linear-gradient(96deg, #111827 0%, #A78BFA 30%, #F472B6 54%, #6B7280 78%, #111827 100%); }
HITITLE20 { --custom-title-flow: linear-gradient(96deg, #84CC16 0%, #FACC15 24%, #22D3EE 48%, #F472B6 72%, #84CC16 100%); }

/* 万仙古城四条剧情线专属流光，不进入通用自定义称号色池。 */
WXTITLE01 { --custom-title-flow: linear-gradient(96deg, #163A46 0%, #76E6D3 22%, #E7FFF8 46%, #B99A52 72%, #163A46 100%); }
WXTITLE02 { --custom-title-flow: linear-gradient(96deg, #781E2A 0%, #FF6B3D 22%, #FFE6A1 48%, #D49A24 74%, #781E2A 100%); }
WXTITLE03 { --custom-title-flow: linear-gradient(96deg, #17233F 0%, #4BC8D5 24%, #D9F7FF 48%, #8873C9 74%, #17233F 100%); }
WXTITLE04 { --custom-title-flow: linear-gradient(96deg, #35134F 0%, #B94DCE 22%, #F1C86A 46%, #FFF7D6 68%, #6B2783 86%, #35134F 100%); }

@keyframes custom-title-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 260% 50%;
    }
}

ORD {
    color: #FF4500;
}

FLA {}

BBLK {
    background-color: #FFFFFF;
}

BBLU {
    background-color: #000080;
}

BCYN {
    background-color: #008080;
}

BRED {
    background-color: #800000;
}

BMAG {
    background-color: #800080;
}

BYEL {
    background-color: #808000;
}

BWHT {
    background-color: #C0C0C0;
}

BHIK {
    background-color: #808080;
}

HBBLU {
    background-color: #0000FF;
}

HBGRN {
    background-color: #00FF00;
}

HBCYN {
    background-color: #00FFFF;
}

HBRED {
    background-color: #FF0000;
}

HBMAG {
    background-color: #FF00FF
}

HBYEL {
    background-color: #FFFF00;
}

HBWHT {
    background-color: #FFFFFF;
}

.equip-flow,
.equip-flow-gold {
    display: inline-block;
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: equip-flow 3.5s linear infinite;
    line-height: 1.15;
}

.equip-flow {
    color: #00FFFF;
    background-image: linear-gradient(90deg, #ff2d2d 0%, #ffb000 16%, #fff04a 30%, #21f564 45%, #19f0ff 60%, #3577ff 76%, #c034ff 90%, #ff2d2d 100%);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.42), 0 0 11px rgba(255, 80, 255, 0.28);
}

.equip-flow-gold {
    color: #FFD700;
    background-image: linear-gradient(90deg, #7a3900 0%, #ff9b1a 20%, #fff2a8 42%, #ffd35a 58%, #ff8a00 78%, #7a3900 100%);
    text-shadow: 0 0 5px rgba(255, 198, 74, 0.48), 0 0 12px rgba(255, 118, 0, 0.32);
}

.equip-glow-cyan {
    color: #9ffcff;
    text-shadow: 0 0 4px #00FFFF, 0 0 10px rgba(0, 255, 255, 0.58), 0 0 18px rgba(145, 44, 238, 0.36);
    animation: equip-glow-pulse 2.8s ease-in-out infinite;
}

.equip-glow-gold {
    color: #FFE28A;
    text-shadow: 0 0 4px #FFD700, 0 0 10px rgba(255, 215, 0, 0.58), 0 0 18px rgba(255, 69, 0, 0.32);
    animation: equip-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes equip-flow {
    0% {
        background-position: 0% 50%;
    }

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

@keyframes equip-glow-pulse {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.28);
    }
}

@keyframes equip-lightning-flicker {
    0%, 84%, 100% {
        filter: brightness(1);
    }

    87% {
        filter: brightness(1.85);
    }

    90% {
        filter: brightness(0.9);
    }

    94% {
        filter: brightness(1.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .equip-flow,
    .equip-flow-gold,
    .equip-glow-cyan,
    .equip-glow-gold,
    .equip-dye-advanced-thunder {
        animation: none;
    }
}

.equip-dye-basic-jade,
.equip-dye-basic-sky,
.equip-dye-basic-violet,
.equip-dye-basic-gold,
.equip-dye-basic-moon,
.equip-dye-basic-rose,
.equip-dye-advanced-frost,
.equip-dye-advanced-crimson,
.equip-dye-advanced-shadow,
.equip-dye-advanced-amber,
.equip-dye-advanced-thunder,
.equip-dye-advanced-stardust,
.equip-dye-colorful-aurora,
.equip-dye-colorful-sakura,
.equip-dye-colorful-flame,
.equip-dye-colorful-dream,
.equip-dye-colorful-neon,
.equip-dye-colorful-kingfisher,
.equip-dye-flow-rainbow,
.equip-dye-flow-gold,
.equip-dye-flow-cyan,
.equip-dye-flow-purple,
.equip-dye-flow-lightning,
.equip-dye-flow-starlight,
.equip-dye-prismatic-cosmos,
.equip-dye-prismatic-dragon,
.equip-dye-prismatic-immortal,
.equip-dye-prismatic-void,
.equip-dye-prismatic-thunder,
.equip-dye-prismatic-divine {
    display: inline-block;
    line-height: 1.15;
}

.equip-dye-basic-jade {
    color: #70ffb0;
    text-shadow: 0 0 4px rgba(112, 255, 176, 0.55);
}

.equip-dye-basic-sky {
    color: #70ddff;
    text-shadow: 0 0 4px rgba(112, 221, 255, 0.55);
}

.equip-dye-basic-violet {
    color: #d38cff;
    text-shadow: 0 0 4px rgba(211, 140, 255, 0.55);
}

.equip-dye-basic-gold {
    color: #ffd35a;
    text-shadow: 0 0 4px rgba(255, 211, 90, 0.55);
}

.equip-dye-basic-moon {
    color: #e9f7ff;
    text-shadow: 0 0 4px rgba(233, 247, 255, 0.62);
}

.equip-dye-basic-rose {
    color: #ff9fcb;
    text-shadow: 0 0 4px rgba(255, 109, 175, 0.58);
}

.equip-dye-advanced-frost {
    color: #d6fbff;
    text-shadow: 0 0 4px #b9f7ff, 0 0 10px rgba(74, 216, 255, 0.55);
}

.equip-dye-advanced-crimson {
    color: #ff7b7b;
    text-shadow: 0 0 4px #ff4d4d, 0 0 10px rgba(255, 45, 45, 0.55);
}

.equip-dye-advanced-shadow {
    color: #cab6ff;
    text-shadow: 0 0 4px #912CEE, 0 0 10px rgba(145, 44, 238, 0.60);
}

.equip-dye-advanced-amber {
    color: #ffe7a0;
    text-shadow: 0 0 4px #ffd35a, 0 0 10px rgba(255, 155, 26, 0.55);
}

.equip-dye-advanced-thunder {
    color: #d8fbff;
    text-shadow: 0 0 4px #f5ffff, 0 0 10px rgba(54, 210, 255, 0.70), 0 0 18px rgba(145, 44, 238, 0.45);
    animation: equip-lightning-flicker 2.4s steps(2, end) infinite;
}

.equip-dye-advanced-stardust {
    color: #f2e9ff;
    text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(180, 135, 255, 0.58), 0 0 18px rgba(255, 236, 168, 0.32);
}

.equip-dye-colorful-aurora,
.equip-dye-colorful-sakura,
.equip-dye-colorful-flame,
.equip-dye-colorful-dream,
.equip-dye-colorful-neon,
.equip-dye-colorful-kingfisher,
.equip-dye-flow-rainbow,
.equip-dye-flow-gold,
.equip-dye-flow-cyan,
.equip-dye-flow-purple,
.equip-dye-flow-lightning,
.equip-dye-flow-starlight,
.equip-dye-prismatic-cosmos,
.equip-dye-prismatic-dragon,
.equip-dye-prismatic-immortal,
.equip-dye-prismatic-void,
.equip-dye-prismatic-thunder,
.equip-dye-prismatic-divine {
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.equip-dye-colorful-aurora {
    background-image: linear-gradient(92deg, #7ef4ff 0%, #7bff9b 35%, #fff18c 58%, #c9a6ff 100%);
    text-shadow: 0 0 8px rgba(126, 244, 255, 0.35);
}

.equip-dye-colorful-sakura {
    background-image: linear-gradient(92deg, #ffd1e8 0%, #ff73b7 42%, #ffe6a8 72%, #c7b7ff 100%);
    text-shadow: 0 0 8px rgba(255, 115, 183, 0.35);
}

.equip-dye-colorful-flame {
    background-image: linear-gradient(92deg, #ff382d 0%, #ff9b1a 35%, #fff04a 58%, #ff4db8 100%);
    text-shadow: 0 0 8px rgba(255, 80, 45, 0.38);
}

.equip-dye-colorful-dream {
    background-image: linear-gradient(92deg, #91f7ff 0%, #bda1ff 32%, #ff9de7 66%, #fff0a8 100%);
    text-shadow: 0 0 8px rgba(189, 161, 255, 0.38);
}

.equip-dye-colorful-neon {
    background-image: linear-gradient(92deg, #00fff0 0%, #6dff4a 24%, #fff14a 50%, #ff3df2 75%, #00fff0 100%);
    text-shadow: 0 0 8px rgba(0, 255, 240, 0.42), 0 0 14px rgba(255, 61, 242, 0.28);
}

.equip-dye-colorful-kingfisher {
    background-image: linear-gradient(92deg, #06384f 0%, #19f0ff 26%, #7dffbf 50%, #fff3a0 74%, #06384f 100%);
    text-shadow: 0 0 8px rgba(25, 240, 255, 0.42), 0 0 14px rgba(125, 255, 191, 0.25);
}

.equip-dye-flow-rainbow,
.equip-dye-flow-gold,
.equip-dye-flow-cyan,
.equip-dye-flow-purple,
.equip-dye-flow-lightning,
.equip-dye-flow-starlight,
.equip-dye-prismatic-cosmos,
.equip-dye-prismatic-dragon,
.equip-dye-prismatic-immortal,
.equip-dye-prismatic-void,
.equip-dye-prismatic-thunder,
.equip-dye-prismatic-divine {
    animation: equip-flow 3.2s linear infinite;
}

.equip-dye-flow-rainbow {
    background-image: linear-gradient(90deg, #ff2d2d 0%, #ffb000 16%, #fff04a 30%, #21f564 45%, #19f0ff 60%, #3577ff 76%, #c034ff 90%, #ff2d2d 100%);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.42), 0 0 11px rgba(255, 80, 255, 0.28);
}

.equip-dye-flow-gold {
    background-image: linear-gradient(90deg, #7a3900 0%, #ff9b1a 20%, #fff2a8 42%, #ffd35a 58%, #ff8a00 78%, #7a3900 100%);
    text-shadow: 0 0 5px rgba(255, 198, 74, 0.48), 0 0 12px rgba(255, 118, 0, 0.32);
}

.equip-dye-flow-cyan {
    background-image: linear-gradient(90deg, #003b5f 0%, #00d4ff 25%, #b6fff9 52%, #3f85ff 75%, #003b5f 100%);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.50), 0 0 12px rgba(63, 133, 255, 0.35);
}

.equip-dye-flow-purple {
    background-image: linear-gradient(90deg, #2e005f 0%, #912CEE 28%, #ff7bf5 55%, #7f83ff 78%, #2e005f 100%);
    text-shadow: 0 0 5px rgba(145, 44, 238, 0.50), 0 0 12px rgba(255, 123, 245, 0.35);
}

.equip-dye-flow-lightning {
    background-image: linear-gradient(90deg, #07132a 0%, #4f8cff 20%, #f8ffff 42%, #9b5cff 57%, #22e9ff 76%, #07132a 100%);
    text-shadow: 0 0 5px rgba(248, 255, 255, 0.62), 0 0 13px rgba(79, 140, 255, 0.50), 0 0 20px rgba(155, 92, 255, 0.32);
    animation: equip-flow 2.4s linear infinite, equip-lightning-flicker 1.9s steps(2, end) infinite;
}

.equip-dye-flow-starlight {
    background-image: linear-gradient(90deg, #05051f 0%, #3e6cff 22%, #ffffff 38%, #ffd86d 54%, #9b6cff 76%, #05051f 100%);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.58), 0 0 13px rgba(62, 108, 255, 0.42), 0 0 20px rgba(255, 216, 109, 0.30);
}

.equip-dye-prismatic-cosmos,
.equip-dye-prismatic-dragon,
.equip-dye-prismatic-immortal,
.equip-dye-prismatic-void,
.equip-dye-prismatic-thunder,
.equip-dye-prismatic-divine {
    animation: equip-flow 2.6s linear infinite, equip-glow-pulse 2.8s ease-in-out infinite;
    font-weight: 700;
}

.equip-dye-prismatic-cosmos {
    background-image: linear-gradient(90deg, #0b1028 0%, #39e7ff 24%, #e9f7ff 42%, #b36cff 62%, #ff6fd8 82%, #0b1028 100%);
    text-shadow: 0 0 6px rgba(57, 231, 255, 0.62), 0 0 14px rgba(179, 108, 255, 0.46), 0 0 22px rgba(255, 111, 216, 0.32);
}

.equip-dye-prismatic-dragon {
    background-image: linear-gradient(90deg, #320000 0%, #ff2d2d 22%, #ffd35a 45%, #ffffff 54%, #ff8a00 72%, #320000 100%);
    text-shadow: 0 0 6px rgba(255, 45, 45, 0.62), 0 0 14px rgba(255, 211, 90, 0.48), 0 0 22px rgba(255, 138, 0, 0.32);
}

.equip-dye-prismatic-immortal {
    background-image: linear-gradient(90deg, #eaffff 0%, #96fff4 24%, #ffffff 43%, #ffe8a3 62%, #c8b4ff 82%, #eaffff 100%);
    text-shadow: 0 0 6px rgba(150, 255, 244, 0.58), 0 0 14px rgba(255, 232, 163, 0.42), 0 0 22px rgba(200, 180, 255, 0.36);
}

.equip-dye-prismatic-void {
    background-image: linear-gradient(90deg, #050008 0%, #6216a8 24%, #ef7bff 43%, #58e8ff 62%, #1b0060 82%, #050008 100%);
    text-shadow: 0 0 6px rgba(239, 123, 255, 0.58), 0 0 14px rgba(88, 232, 255, 0.42), 0 0 22px rgba(98, 22, 168, 0.40);
}

.equip-dye-prismatic-thunder {
    background-image: linear-gradient(90deg, #020914 0%, #1b68ff 20%, #ffffff 38%, #9df7ff 48%, #7a3cff 66%, #020914 100%);
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.78), 0 0 16px rgba(27, 104, 255, 0.58), 0 0 26px rgba(122, 60, 255, 0.42);
    animation: equip-flow 2.1s linear infinite, equip-lightning-flicker 1.6s steps(2, end) infinite;
}

.equip-dye-prismatic-divine {
    background-image: linear-gradient(90deg, #fff6c8 0%, #ffcc33 20%, #ffffff 39%, #9fffe9 58%, #ffa8f2 78%, #fff6c8 100%);
    text-shadow: 0 0 7px rgba(255, 246, 200, 0.72), 0 0 16px rgba(255, 204, 51, 0.50), 0 0 26px rgba(159, 255, 233, 0.38);
}

@media (prefers-reduced-motion: reduce) {
    .equip-dye-flow-rainbow,
    .equip-dye-flow-gold,
    .equip-dye-flow-cyan,
    .equip-dye-flow-purple,
    .equip-dye-flow-lightning,
    .equip-dye-flow-starlight,
    .equip-dye-prismatic-cosmos,
    .equip-dye-prismatic-dragon,
    .equip-dye-prismatic-immortal,
    .equip-dye-prismatic-void,
    .equip-dye-prismatic-thunder,
    .equip-dye-prismatic-divine {
        animation: none;
    }
}

CMD {
    cursor: pointer;
    text-decoration: underline;
    background-color: transparent;
}

DEL {
    text-decoration: line-through;
    color: gray;
}

line {
    color: #008080;
    height: 30px;
    line-height: 30px;
    width: 100%;
    display: inline-block;
    position: relative;
    text-align: center;
}

line::before {
    content: '';
    border-top: 1px solid #008080;
    width: 45%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0px;
}

line::after {
    content: '';
    border-top: 1px solid #008080;
    width: 45%;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 0px;
}

svg.map line {
    color: inherit;
    display: inline;
    height: auto;
    line-height: normal;
    position: static;
    text-align: initial;
    width: auto;
}

svg.map line::before,
svg.map line::after {
    content: none;
}

.blink {
    animation-name: flash;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

@keyframes flash {
    50% {
        color: inherit;
    }

    50% {
        color: black;
    }
}

/* ========================================
   login.css - 登录界面样式
   ======================================== */

.server-list {
    list-style-type: none;
    font-weight: bold;
    min-height: 5rem;
    max-height: 20rem;

}

.server-list .select {

    list-style-type: disc;
    color: unset;
}

.server-list li {
    cursor: pointer;
    padding-top: 0.4px;
    padding-bottom: 0.4px;
    color: #999;
    line-height: 2em;
}

.login-content {
    height: 100%;
    overflow: auto;
}

.mypanel {
    width: 100%;
    display: none;
    margin: 0px auto;
}

.mypanel>ul {
    padding-left: 0;
    display: block;
    margin: 0px;
    list-style-type: disc;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

#role_panel {
    min-height: 100%;
}

#role_panel>ul {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.mypanel>ul>.active {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.mypanel .content {
    background-color: white;
    border-bottom: none;
    list-style-type: none;
    padding: 0.6rem 1rem;
    -webkit-overflow-scrolling: touch;
    overflow: auto !important;
}

.mypanel .bottom {
    background-color: black;
    border-bottom: none;
    list-style-type: none;
    padding: 0.6rem 1rem;
}

.new-list {
    padding-left: 0.6rem;
}

.role-footer {
    margin-top: auto;
    background-color: black;
    border-bottom: none;
    list-style-type: none;
    padding: 1.2rem 1rem 0.8rem;
}

.healthy-game-notice {
    margin: 0 auto;
    padding: 0.55rem 0.65rem;
    border-top: 1px solid rgba(128, 128, 128, 0.32);
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
    color: #9a9a66;
    font-size: 0.92rem;
    line-height: 1.45rem;
    text-align: center;
    letter-spacing: 0;
}

.new-list>li {
    list-style-type: disc;
    font-size: 1rem;
    line-height: 1.2em;
    padding-top: 0.6rem;
    color: #808000;
    cursor: pointer;
}

.new-list>li:hover {
    text-decoration: underline;
}

.panel_item {
    cursor: pointer;
    background-color: black;
    border-bottom: 1px solid #666666;
    color: #999999;
    list-style-type: none;
    padding: 0.6rem 1rem;
}

.panel_item:hover {
    background-color: #999999;
    color: black;

}

.role-list {}

.role-list>.role-item {
    font-size: 1rem;
    cursor: pointer;
    padding: 0.32rem 0.55rem;
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: nowrap;
    border-radius: 0.25rem;
}

.role-list>.role-item::before {
    content: "";
    flex: 0 0 0.34rem;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
}

.role-list>.role-item:hover {
    background: rgba(51, 122, 183, 0.04);
}

.role-list .role-realm {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 2.2rem;
    min-height: 1.35rem;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.35rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

.role-list .role-realm-color-hixian,
.role-list .role-realm-color-hixian1,
.role-list .role-realm-color-hixian2,
.role-list .role-realm-color-hixian3,
.role-list .role-realm-color-hixian4,
.role-list .role-realm-color-hixian5,
.role-list .role-realm-color-hixian6,
.role-list .role-realm-color-hixian7,
.role-list .role-realm-color-hixian8,
.role-list .role-realm-color-hixian9 {
    position: relative;
    isolation: isolate;
}

.role-list .role-realm-color-hixian::before,
.role-list .role-realm-color-hixian1::before,
.role-list .role-realm-color-hixian2::before,
.role-list .role-realm-color-hixian3::before,
.role-list .role-realm-color-hixian4::before,
.role-list .role-realm-color-hixian5::before,
.role-list .role-realm-color-hixian6::before,
.role-list .role-realm-color-hixian7::before,
.role-list .role-realm-color-hixian8::before,
.role-list .role-realm-color-hixian9::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.32rem;
    right: -0.32rem;
    top: 0.08rem;
    bottom: 0.02rem;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 30% 45%, rgba(122, 241, 255, 0.30), transparent 58%),
        radial-gradient(ellipse at 76% 50%, rgba(202, 196, 255, 0.22), transparent 62%);
    filter: blur(2px);
}

.role-list .role-realm hixian,
.role-list .role-realm hixian1,
.role-list .role-realm hixian2,
.role-list .role-realm hixian3,
.role-list .role-realm hixian4,
.role-list .role-realm hixian5,
.role-list .role-realm hixian6,
.role-list .role-realm hixian7,
.role-list .role-realm hixian8,
.role-list .role-realm hixian9 {
    display: inline-block;
    color: #0a8ec0;
    background: linear-gradient(92deg, #0b79ad 0%, #12c5ed 38%, #7ef4ff 54%, #8a9dff 78%, #d7c8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    -webkit-text-stroke: 0.45px rgba(0, 70, 112, 0.62);
    text-shadow:
        0 1px 0 rgba(0, 63, 98, 0.45),
        0 0 2px rgba(255, 255, 255, 0.85),
        0 0 7px rgba(65, 224, 255, 0.45),
        0 0 15px rgba(192, 201, 255, 0.30);
}

.role-list .role-title {
    color: #777777;
    font-size: 0.92rem;
    min-width: 0;
}

.role-list .role-name {
    color: #008000;
}

.role-list>.select {
    list-style-type: none;
    background: linear-gradient(90deg, rgba(110, 224, 255, 0.09), rgba(196, 202, 255, 0.045));
}

.role-list>.select::before {
    background: #80eaff;
    box-shadow: 0 0 0 0.12rem rgba(128, 234, 255, 0.16), 0 0 0.45rem rgba(128, 234, 255, 0.55);
}

.role-list>.select::after {
    content: "将使用此角色登录";
    flex-basis: 100%;
    margin-left: 4.8rem;
    color: #7a8790;
    font-size: 0.78rem;
    line-height: 1rem;
}

.role-list>.select::after {
    content: none !important;
    display: none !important;
}

.hide_txt {
    border: none;
    clear: both;
    border-bottom: 1px solid #888888;
    width: 2.5rem;
    color: #337ab7;
    padding-left: 0.5rem;
}

.hide_txt:focus {
    outline: none;
}

.regist-info-text {
    margin: 0.5rem 0px;
    color: #999999;
    margin-bottom: 0px;
}

.regist-title-text {
    display: inline-block;
    margin-right: 0.5rem;
}

.regist-title-ref {
    color: gray;
    cursor: pointer;
    clear: both;
}

.validnum-box {
    width: 100%;
    white-space: nowrap;
    position: relative;
}

.validnum-box>.validnum-btn {
    margin: 0px;
    position: absolute;
    right: 20%;
    padding: 0px;
    outline: none;
    border: none;
    height: 100%;
    cursor: pointer;

    background-color: transparent;
}

.validnum-box>.validnum-img {
    margin: 0px;
    position: absolute;
    right: 20%;
    bottom: 1px;
    padding: 0px;
    outline: none;
    border: none;
    height: 100%;
    cursor: pointer;
    width: 130px;
    height: 40px;
}

/* ========================================
   Glyphicons 字体图标
   ======================================== */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/assets/glyphicons-halflings-regular-BUJKDMgK.eot');
    src: url('/assets/glyphicons-halflings-regular-BUJKDMgK.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular-BKjkU69z.woff') format('woff'), url('/assets/glyphicons-halflings-regular-DrwTMapi.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-saved:before {
    content: "\e168";
}

.glyphicon-ok:before {
    content: "\e013";
}

.glyphicon-plus:before {
    content: "\2b";
}

.glyphicon-minus:before {
    content: "\2212";
}

.glyphicon-user:before {
    content: "\e008";
}

.glyphicon-th-list:before {
    content: "\e012";
}

.glyphicon-remove:before {
    content: "\e014";
}

.glyphicon-zoom-in:before {
    content: "\e015";
}

.glyphicon-zoom-out:before {
    content: "\e016";
}

.glyphicon-off:before {
    content: "\e017";
}

.glyphicon-cog:before {
    content: "\e019";
}

.glyphicon-trash:before {
    content: "\e020";
}

.glyphicon-home:before {
    content: "\e021";
}

.glyphicon-file:before {
    content: "\e022";
}

.glyphicon-time:before {
    content: "\e023";
}

.glyphicon-refresh:before {
    content: "\e031";
}

.glyphicon-lock:before {
    content: "\e033";
}

.glyphicon-dashboard:before {
    content: "\e141";
}

.glyphicon-flag:before {
    content: "\e034";
}

.glyphicon-book:before {
    content: "\e043";
}

.glyphicon-comment:before {
    content: "\e111";
}

.glyphicon-bookmark:before {
    content: "\e044";
}

.glyphicon-chevron-left:before {
    content: "\e079";
}

.glyphicon-chevron-right:before {
    content: "\e080";
}

.glyphicon-plus-sign:before {
    content: "\e081";
}

.glyphicon-minus-sign:before {
    content: "\e082";
}

.glyphicon-remove-sign:before {
    content: "\e083";
}

.glyphicon-ok-sign:before {
    content: "\e084";
}

.glyphicon-question-sign:before {
    content: "\e085";
}

.glyphicon-info-sign:before {
    content: "\e086";
}

.glyphicon-remove-circle:before {
    content: "\e088";
}

.glyphicon-ok-circle:before {
    content: "\e089";
}

.glyphicon-ban-circle:before {
    content: "\e090";
}

.glyphicon-log-in:before {
    content: "\e161";
}

.glyphicon-flash:before {
    content: "\e162";
}

.glyphicon-edit:before {
    content: "\e065";
}

.glyphicon-send:before {
    content: "\e171";
}

.glyphicon-triangle-bottom:before {
    content: "\e252";
}

.glyphicon-tasks:before {
    content: "\e137";
}

.glyphicon-briefcase:before {
    content: "\e139";
}

.glyphicon-triangle-top:before {
    content: "\e253";
}

.glyphicon-map-marker:before {
    content: "\e062";
}

.glyphicon-search:before {
    content: "\e003";
}

.glyphicon-exclamation-sign:before {
    content: "\e101";
}

.glyphicon-volume-down:before {
    content: "\e037";
}

.glyphicon-chevron-down:before {
    content: "\e114";
}

.glyphicon-option-horizontal:before {
    content: "\e234";
}

.glyphicon-arrow-left:before {
    content: "\e091";
}

.glyphicon-stats:before {
    content: "\e185";
}

.glyphicon-shopping-cart:before {
    content: "\e116";
}

.glyphicon-envelope:before {
    content: "\2709";
}

.glyphicon-qrcode:before {
    content: "\e039";
}

.glyphicon-resize-horizontal:before {
    content: "\e120";
}

.glyphicon-heart:before {
    content: "\e005";
}

.glyphicon-list:before {
    content: "\e056";
}

.glyphicon-volume-up:before {
    content: "\e038";
}
/* ========================================
   game.css - 游戏主界面样式
   ======================================== */

.channel {
    max-height: 5em;
    overflow-y: auto;
}

.channel-dialog {
    height: 15em;
    max-height: 15em;
    overflow-y: auto;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.channel>pre {
    margin: 0px;
    white-space: pre-line;
}

.container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    position: relative;
    line-height: 1.25em;
}

.container>.content-message {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.content-message>pre {
    margin: 0px;
    white-space: pre-line;
}

.xianbing-battle-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0.45em 0;
    padding: 0.15em 0.5em;
    color: #d8d8d8;
    text-align: center;
    letter-spacing: 0;
    background: none;
    border: 0;
    text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.25);
}

.xianbing-battle-title {
    color: #d7d7d7;
    font-weight: 700;
    line-height: 1.5em;
}

.xianbing-battle-line {
    color: #cfcfcf;
    line-height: 1.45em;
}

.xianbing-battle-force {
    color: #ff6b6b;
    line-height: 1.45em;
    font-weight: 700;
}

.xianbing-battle-awake {
    color: #f0cf61;
    line-height: 1.45em;
}

.scroll-flag {
    background-color: #222;
    text-align: center;
    position: absolute;
    line-height: 2.5em;
    color: #555;
    border-radius: 0.5em;
    width: 2.5em;
    height: 2.5em;
    margin-right: 0.15em;
    cursor: pointer;
}

.chat-panel {
    height: 4em;
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding: 0 0.25rem;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 999;
}

.chat-panel>.channel-emotes {

    background-color: #000;
    padding: 0.3em;
    max-height: 20em;
    overflow-y: auto;
    margin-top: 1px;
}

.chat-panel>.channel-emotes>span {
    line-height: 2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: 1px solid #808080;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
}

.chat-panel>.channel-box {}

.chat-panel>.channel-box>span {
    line-height: 1.5em;
    padding: 0.2em 0.3em;
    border: 1px solid #C0C0C0;
    display: inline-block;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: black;
}

.chat-panel>.channel-box>.selected {
    background-color: #bebebe;
    color: #343434
}

.chat-panel>.channel-box>.close {
    float: right;
    background-color: #ababab;
    color: #343434
}

.chat-panel>.chat-input {
    display: flex;
    flex-direction: row;
    height: 2.8em;
    line-height: 2.8em;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.chat-panel>.chat-input>.sender-box {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    background-color: #bebebe;
    border-radius: 0px;
    height: 100%;
    padding-left: 2px;
    line-height: 2.8em;
    margin: 0px;
    padding: 0px
}

.chat-panel>.chat-input>.sender-btn {
    width: 4em;
    height: 100%;
    cursor: pointer;
    background-color: #ababab;
    text-align: center;
    color: #343434;
    font-weight: bold;
    line-height: 2.8em;
    top: 0px;
    margin: 0px;
    padding: 0px;

}



.combat-panel {}

.charac-status {
    display: inline-block;
}

.charac-status>.title {}

.hp>.progress-bar {
    background-color: darkred;
    transition-duration: 1s;
    transition-property: width;
    transition-timing-function: ease-out;
}

.item-damage {}

.mp>.progress-bar {
    background-color: darkblue;
}

.progress {
    border: 1px solid #343434;
    display: block;
    height: 0.3em;
    width: 6.25em;
    position: relative;
    margin-top: 2px;

    box-sizing: content-box;
}

.progress-num {
    display: inline-block;
}

.progress>.progress-bar {
    height: 100%;
    border: 1px solid transparent;
    float: right;
}

/*.progress>.progress-text {
    color:#898989;
    position:absolute;
    line-height:4px;
    height:4px;
    font-size:0.5em;
    width:100%;
    text-align:center;
 }*/
.tool-bar {
    position: absolute;
    z-index: 11;
}

.right-bar {
    right: 0px;
    bottom: 3em;
}

.left-bar {
    left: 0px;
    transition-property: bottom;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}

.left-bar>.tool-item {
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    border-left: none;
    margin-bottom: 0.25rem;
    font-size: 1em;
    line-height: 1.25em;
    width: 3em;
    height: 3em;
}

.tool-bar>.tool-item {
    text-align: center;
    background-color: gray;
    color: #111;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    border: solid 1px #222;
}

.tool-bar>.tool-item:hover {

    background-color: #666;
}

.tool-bar>.tool-item>.tag {
    background-color: red;
    color: white;
    border-radius: 0.6em;
    width: 1em;
    height: 1em;
    position: absolute;
    right: -0.2em;
    top: -0.3em;
}



.bottom-bar {
    display: block;
    position: relative;
    white-space: nowrap;
    display: flex;
    margin-top: 0.5em;
    margin-bottom: 4px;
}

.right-bar>.tool-item>.tool-icon,
.bottom-bar>.tool-item>.tool-icon {
    display: block;
    line-height: 1.25em;
}

.tool-item>.tool-text,
.tool-item>.tool-text {
    line-height: 1.5em;
    font-weight: bold;
    display: block;
    font-size: 0.8em;
}

.bottom-bar>.tool-item,
.right-bar>.tool-item {
    display: block;
    width: 2.5em;
    height: 2.5em;
    border-radius: 0.5em;
    margin-bottom: 0.15em;
    margin-right: 0.15em;
}



.bottom-bar>.br-tool {
    line-height: 2.5em;
    top: 0px;
    font-family: 'Glyphicons Halflings';
}

.bottom-bar>.br-tool::before {
    content: "\e234";
}


.room-commands,
.combat-commands {
    white-space: nowrap;
    overflow-x: auto;
    display: block;
    line-height: 2em;
    margin-bottom: 0.25em;
}

.obj-money {
    float: right;
    padding-right: 10px;
    color: #C0C0C0;
}

.obj-money>span {
    margin-left: 1em;
    padding-left: 1em;
    color: #C0C0C0;
    border-left: 1px solid gray;
    color: #808080;
    line-height: 1.8em;
    cursor: pointer;
    user-select: none;
}

.combat-wrap {
    white-space: pre-wrap;
    position: relative;
}


.combat-wrap::before {
    position: absolute;
    height: 100%;
    left: 0px;
    top: 0px;
}

.room-commands>.act-item,
.combat-commands>.pfm-item {
    display: inline-block;
    border: solid 1px gray;
    color: gray;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    min-width: 2.5em;
    margin-right: 0.5em;
    position: relative;
    padding-left: 0.4em;
    padding-right: 0.4em;
    margin-bottom: 2px;
    /* transition: background-size 0.2s linear; */
    background: linear-gradient(to top, rgba(128, 128, 128, 0.5) 0%, rgba(128, 128, 128, 0.5) 100%);
    background-size: 0% 100%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cd-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.5);
    opacity: 0.75;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
}



.room-commands>.act-item:active,
.combat-commands>.pfm-item:active {
    background-color: gray;
    color: black;
}

/* .room-commands>span>.shadow,
.combat-commands>.pfm-item>.shadow {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    opacity: 0.5;
    background-color: white;
    display: none;
    border: none;
    border-radius: 0.45em;
} */

.item-commands {
    white-space: normal;
    display: block;
    user-select: none;
    padding-bottom: 0.315em;
    text-shadow: none;
    filter: none;
}

.item-commands>span {
    display: inline-block;
    border: solid 1px gray;
    color: gray;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25em;
    min-width: 2.5em;
    margin-right: 0.625em;
    padding: 0.25em 1em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    text-shadow: none;
    filter: none;
    -webkit-font-smoothing: antialiased;
}

.item-commands>span:active {
    background-color: gray;
    color: black;
}

.jh-plane-tabs {
    display: flex;
    gap: 0.5em;
    margin: 0 0 0.75em;
    white-space: nowrap;
}

.jh-plane-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8em;
    padding: 0.28em 0.8em;
    border: 1px solid gray;
    border-radius: 0.25em;
    background: #111;
    color: gray;
    cursor: pointer;
}

.jh-plane-tab.selected {
    color: #00ff00;
    border-color: #00ff00;
}

.jh-plane-panel {
    display: none;
}

.jh-plane-panel.selected {
    display: block;
}

.jh-family-layout {
    display: flex;
    flex-direction: column;
    gap: 0.65em;
    align-items: stretch;
    white-space: normal;
    width: 100%;
}

.jh-family-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45em;
    width: 100%;
}

.jh-family-tab {
    flex: 0 0 auto;
    min-width: 5.4em;
    min-height: 2.15em;
    padding: 0.35em 0.65em;
    border: 1px solid #333;
    border-radius: 0.25em;
    background: #111;
    color: #008000;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    word-break: keep-all;
}

.jh-family-tab.selected {
    background: #202020;
    color: #00ff00;
    border-color: gray;
}

.jh-family-detail,
.jh-family-section {
    min-width: 0;
}

.jh-family-section {
    display: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.jh-family-section.selected {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.jh-family-section>.jh-goto-grid {
    grid-template-columns: minmax(0, 1fr);
}

.jh-family-section>.jh-wdww-family-commands {
    align-self: center;
}

.jh-goto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5em, 1fr));
    gap: 0.75em 0.9em;
    margin: 0.75em 0;
    white-space: normal;
}

.jh-goto-grid>.fb-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.8em, auto);
    min-width: 0;
    min-height: 3.1em;
    border: 1px solid #333;
    border-radius: 0.28em;
    overflow: hidden;
    background: #101010;
}

.jh-goto-grid .action-desc,
.jh-goto-grid .action-name {
    min-width: 0;
    min-height: 100%;
    box-sizing: border-box;
}

.jh-goto-grid .action-desc {
    display: flex;
    align-items: center;
    padding: 0.55em 0.8em;
    color: #c0c0c0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.jh-goto-grid .action-name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45em 0.8em;
    background: #232323;
    color: #00ff00;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    word-break: keep-all;
    border-left: 1px solid #222;
}

.jh-goto-grid .action-name.disabled {
    color: gray;
    cursor: default;
}

.jh-map-primary-commands>span,
.jh-map-extra-commands>span,
.jh-wdww-commands .item-commands>span {
    white-space: nowrap;
    word-break: keep-all;
}

.fenjie-quality-panel {
    min-width: 0;
    color: #C0C0C0;
    white-space: nowrap;
}

.fenjie-quality-title {
    display: inline-block;
    line-height: 1.8em;
    color: #C0C0C0;
    margin-right: 0.6em;
}

.fenjie-quality-options {
    display: inline-flex;
    gap: 0.35em;
    vertical-align: middle;
}

.fenjie-quality-option {
    display: inline-block;
    border: 1px solid var(--border-color, gray);
    color: var(--border-color, gray);
    background-color: #050505;
    border-radius: 0.25em;
    line-height: 1.8em;
    min-width: 3.2em;
    padding: 0 0.45em;
    text-align: center;
    cursor: pointer;
    user-select: none;
    text-shadow: none;
}

.fenjie-quality-option:active {
    color: #000;
    background-color: var(--border-color, gray);
}

.dialog-confirm.fenjie-quality-confirm {
    left: 50%;
    right: auto;
    bottom: 3.15em;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 1.5em);
    height: auto;
    min-height: 0;
    line-height: 1.8em;
    padding: 0.35em 0.5em;
    border-left-width: 2px;
    display: block;
    overflow-x: auto;
}

.dialog-confirm.fenjie-quality-confirm>.dialog-content {
    padding-left: 0;
    flex: none;
}

.item-commands.zsd-bagua-commands {
    display: grid;
    grid-template-columns: repeat(5, 3.5em);
    grid-template-rows: repeat(5, 2em);
    gap: 0.35em 0.45em;
    width: max-content;
    max-width: 100%;
    padding-top: 0.25em;
}

.item-commands.zsd-bagua-commands>span {
    min-width: 0;
    width: 3.5em;
    margin: 0;
    padding: 0.15em 0;
    line-height: 1.5em;
    font-size: 1.05em;
}

.zsd-bagua-north { grid-column: 3; grid-row: 1; }
.zsd-bagua-northwest { grid-column: 2; grid-row: 2; }
.zsd-bagua-northeast { grid-column: 4; grid-row: 2; }
.zsd-bagua-west { grid-column: 1; grid-row: 3; }
.zsd-bagua-east { grid-column: 5; grid-row: 3; }
.zsd-bagua-southwest { grid-column: 2; grid-row: 4; }
.zsd-bagua-southeast { grid-column: 4; grid-row: 4; }
.zsd-bagua-south { grid-column: 3; grid-row: 5; }

.room_exits {}

.room_exits>.exits-item {
    color: #FFFF00;
}

.room-item {
    cursor: pointer;
    display: block;
    clear: both;
    position: relative;
}

.room-item>.item-name {
    margin-left: 2em;

}

.room-item>.perform-cast-bar {
    --cast-rgb: 57, 230, 57;
    display: none;
    width: 11em;
    height: 0.3em;
    margin-left: 2em;
    margin-bottom: 0.08em;
    border: 1px solid rgba(var(--cast-rgb), 0.58);
    box-sizing: content-box;
    background: rgba(var(--cast-rgb), 0.12);
    box-shadow: inset 0 0 0.12em rgba(255, 255, 255, 0.08);
    overflow: hidden;
    border-radius: 0.18em;
    vertical-align: bottom;
}

.room-item>.perform-cast-bar.cast-level-0 { --cast-rgb: 57, 230, 57; }
.room-item>.perform-cast-bar.cast-level-1 { --cast-rgb: 255, 213, 42; }
.room-item>.perform-cast-bar.cast-level-2 { --cast-rgb: 255, 59, 48; }

.room-item.has-nameframe>.perform-cast-bar {
    margin-left: 0.35em;
}

.room-item>.perform-cast-bar>.perform-cast-fill {
    display: block;
    width: 100%;
    height: 100%;
    margin-right: auto;
    border-radius: inherit;
    background: rgba(var(--cast-rgb), 0.94);
    box-shadow: 0 0 0.18em rgba(var(--cast-rgb), 0.72);
}

.room-item.has-nameframe {
    min-height: 3.12em;
    padding: 0.22em 0;
    overflow: visible;
}

.room-item.has-nameframe>.item-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: calc(100% - 8.9em);
    margin-left: 0.35em;
    overflow: visible;
    vertical-align: middle;
}

.room-item.has-nameframe>.item-status,
.room-item.has-nameframe>.item-status-bar {
    margin-top: 0.82em;
}

.nameframe {
    --nf-a: #ffd66a;
    --nf-b: #8d52ff;
    --nf-c: #fff5c1;
    --nf-d: #ffffff;
    --nf-shadow: rgba(255, 214, 106, 0.58);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 13.4em;
    max-width: min(38em, calc(100vw - 9em));
    min-height: 2.48em;
    padding: 0.24em 2.15em 0.28em;
    border: 1px solid rgba(255, 242, 178, 0.72);
    border-radius: 0.34em;
    color: #fffaf0;
    background:
        radial-gradient(ellipse at 18% 50%, color-mix(in srgb, var(--nf-a) 34%, transparent), transparent 62%),
        radial-gradient(ellipse at 82% 45%, color-mix(in srgb, var(--nf-b) 24%, transparent), transparent 64%),
        linear-gradient(90deg, rgba(9, 8, 13, 0.96), rgba(39, 29, 36, 0.91) 48%, rgba(9, 8, 13, 0.96));
    box-shadow:
        0 0 0.35em color-mix(in srgb, var(--nf-a) 42%, transparent),
        0 0 1.1em color-mix(in srgb, var(--nf-b) 28%, transparent),
        inset 0 0 0.42em rgba(255, 255, 255, 0.14);
    overflow: visible;
    transform: translateZ(0);
}

.nameframe::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -0.18em -0.52em;
    border-radius: 0.56em;
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, transparent 0%, var(--nf-a) 17%, var(--nf-d) 30%, var(--nf-b) 48%, var(--nf-c) 68%, transparent 100%) border-box;
    background-size: 230% 100%;
    filter: drop-shadow(0 0 0.32em var(--nf-shadow));
    opacity: 0.9;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: nameframe-border-flow 2.4s linear infinite;
}

.nameframe::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -0.98em;
    right: -0.98em;
    top: 50%;
    height: 2.08em;
    border-radius: 58% 42% 56% 44%;
    border-top: 0.12em solid color-mix(in srgb, var(--nf-a) 82%, transparent);
    border-bottom: 0.08em solid color-mix(in srgb, var(--nf-b) 52%, transparent);
    filter: blur(0.2px) drop-shadow(0 0 0.36em var(--nf-a));
    opacity: 0.54;
    transform: translateY(-50%) skewX(-10deg);
    pointer-events: none;
    animation: nameframe-breathe 3.2s ease-in-out infinite;
}

.nameframe-aura,
.nameframe-line,
.nameframe-ornament,
.nameframe-wing,
.nameframe-creature,
.nameframe-emblem,
.nameframe-dragon-sprite,
.nameframe-spark {
    pointer-events: none;
}

.nameframe-aura {
    position: absolute;
    z-index: 0;
    inset: -0.48em -1.25em;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--nf-a) 20%, transparent), transparent 66%);
    opacity: 0.78;
    filter: blur(0.12em);
    animation: nameframe-aura-pulse 3.8s ease-in-out infinite;
}

.nameframe-line {
    position: absolute;
    z-index: 2;
    left: -1.12em;
    right: -1.12em;
    top: -0.48em;
    bottom: -0.48em;
    border-radius: 64% 38% 58% 42%;
    background:
        radial-gradient(circle at 8% 46%, var(--nf-d) 0 0.11em, transparent 0.16em),
        radial-gradient(circle at 94% 50%, var(--nf-c) 0 0.09em, transparent 0.16em),
        linear-gradient(102deg, transparent 0%, color-mix(in srgb, var(--nf-a) 76%, transparent) 18%, transparent 34%, color-mix(in srgb, var(--nf-c) 70%, transparent) 52%, transparent 72%, color-mix(in srgb, var(--nf-b) 66%, transparent) 88%, transparent 100%);
    background-size: 220% 100%;
    opacity: 0.76;
    animation: nameframe-line-flow 4.2s ease-in-out infinite;
}

.nameframe-line::before,
.nameframe-line::after,
.nameframe-ornament::before,
.nameframe-ornament::after,
.nameframe-wing::before,
.nameframe-wing::after,
.nameframe-creature::before,
.nameframe-creature::after,
.nameframe-emblem::before,
.nameframe-emblem::after,
.nameframe-spark::before,
.nameframe-spark::after {
    content: "";
    position: absolute;
}

.nameframe-line::before,
.nameframe-line::after {
    width: 1.26em;
    height: 1.26em;
    border: 0.12em solid color-mix(in srgb, var(--nf-c) 78%, transparent);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 65% 35% 65% 35%;
    filter: drop-shadow(0 0 0.28em var(--nf-c));
}

.nameframe-line::before {
    left: -0.2em;
    top: 0.62em;
    transform: rotate(-24deg);
}

.nameframe-line::after {
    right: -0.12em;
    bottom: 0.52em;
    transform: rotate(152deg) scale(0.84);
}

.nameframe-ornament {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 1.26em;
    height: 1.75em;
    border: 0.1em solid color-mix(in srgb, var(--nf-c) 72%, transparent);
    border-radius: 50% 18% 50% 18%;
    filter: drop-shadow(0 0 0.28em var(--nf-a));
    transform: translateY(-50%) rotate(38deg);
}

.nameframe-ornament-left {
    left: -0.58em;
}

.nameframe-ornament-right {
    right: -0.58em;
    transform: translateY(-50%) rotate(-142deg);
}

.nameframe-ornament::before {
    inset: 0.18em;
    border-top: 0.1em solid color-mix(in srgb, var(--nf-a) 72%, transparent);
    border-radius: 50%;
}

.nameframe-wing,
.nameframe-creature,
.nameframe-emblem,
.nameframe-dragon-sprite {
    display: none;
    position: absolute;
    z-index: 5;
}

.nameframe-text {
    position: relative;
    z-index: 8;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.55em;
    font-size: 1.08em;
    font-weight: 700;
    letter-spacing: 0;
    color: #fffaf1;
    text-shadow:
        0 0 0.22em rgba(255, 255, 255, 0.94),
        0 0 0.58em color-mix(in srgb, var(--nf-a) 72%, transparent),
        0 0 1.1em color-mix(in srgb, var(--nf-b) 58%, transparent);
    animation: nameframe-text-glow 2.8s ease-in-out infinite;
}

.nameframe-spark,
.nameframe-spark::before,
.nameframe-spark::after {
    position: absolute;
    z-index: 7;
    width: 0.32em;
    height: 0.32em;
    border-radius: 50%;
    background: var(--nf-d);
    box-shadow:
        0 0 0.25em var(--nf-d),
        0 0 0.78em var(--nf-a);
}

.nameframe-spark {
    left: 0.62em;
    top: 0.18em;
    animation: nameframe-spark-fly 2.4s ease-in-out infinite;
}

.nameframe-spark::before {
    left: 7.2em;
    top: 1.46em;
    animation: nameframe-spark-fly 3.1s 0.5s ease-in-out infinite;
}

.nameframe-spark::after {
    left: 13.6em;
    top: 0.22em;
    animation: nameframe-spark-fly 2.8s 1s ease-in-out infinite;
}

.nameframe-dragon {
    --nf-a: #ffd76a;
    --nf-b: #d88a18;
    --nf-c: #fff0ad;
    --nf-d: #ffffff;
    --nf-shadow: rgba(255, 210, 88, 0.82);
    border-color: rgba(255, 224, 125, 0.9);
    background:
        radial-gradient(ellipse at 12% 50%, rgba(255, 222, 104, 0.34), transparent 62%),
        radial-gradient(ellipse at 88% 48%, rgba(255, 145, 44, 0.24), transparent 65%),
        repeating-linear-gradient(135deg, rgba(255, 218, 105, 0.16) 0 0.12em, transparent 0.12em 0.5em),
        linear-gradient(90deg, rgba(30, 16, 5, 0.98), rgba(74, 43, 10, 0.95) 50%, rgba(30, 16, 5, 0.98));
}

.nameframe-dragon .nameframe-dragon-sprite {
    display: block;
    width: 4.9em;
    height: 1.86em;
    filter: drop-shadow(0 0 0.26em #ffe38a) drop-shadow(0 0 0.62em rgba(255, 166, 38, 0.72));
    animation: nameframe-gold-dragon-orbit 5.6s linear infinite;
}

.nameframe-dragon .nameframe-dragon-b {
    animation-delay: -2.8s;
}

.nameframe-dragon .nameframe-dragon-b .nameframe-dragon-svg {
    transform: scaleX(-1);
    transform-origin: 50% 50%;
}

.nameframe-dragon-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.nameframe-dragon-body,
.nameframe-dragon-tail,
.nameframe-dragon-ridge,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    fill: none;
    stroke: #ffd45f;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nameframe-dragon-body {
    stroke-width: 7.2;
}

.nameframe-dragon-tail {
    stroke-width: 4.2;
}

.nameframe-dragon-ridge,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    stroke-width: 2.1;
    stroke: #fff0a6;
}

.nameframe-dragon-head {
    fill: #ffc342;
    stroke: #fff2a5;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.nameframe-dragon-eye {
    fill: #fff8d6;
    filter: drop-shadow(0 0 0.18em #ffffff);
}

.nameframe-frost {
    --nf-a: #9effff;
    --nf-b: #7f9cff;
    --nf-c: #d9f8ff;
    --nf-d: #ffffff;
    --nf-shadow: rgba(144, 245, 255, 0.68);
    border-radius: 0.72em 0.18em;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 0.08em, transparent 0.08em 0.46em),
        linear-gradient(90deg, rgba(5, 29, 43, 0.96), rgba(23, 55, 92, 0.93), rgba(6, 21, 48, 0.98));
}

.nameframe-frost .nameframe-creature {
    display: block;
    width: 1.18em;
    height: 0.92em;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(222, 255, 255, 0.98) 0 34%, transparent 36%),
        radial-gradient(ellipse at 70% 50%, rgba(151, 207, 255, 0.96) 0 34%, transparent 36%);
    border-radius: 48% 48% 18% 18%;
    filter: drop-shadow(0 0 0.36em #bffcff);
    animation: nameframe-butterfly-flight 3.2s ease-in-out infinite;
}

.nameframe-frost .nameframe-creature-a {
    left: -0.62em;
    top: -0.46em;
}

.nameframe-frost .nameframe-creature-b {
    right: -0.5em;
    bottom: -0.34em;
    animation-delay: -1.5s;
}

.nameframe-flame {
    --nf-a: #ffd36a;
    --nf-b: #ff4b38;
    --nf-c: #fff0a4;
    --nf-d: #ffffff;
    --nf-shadow: rgba(255, 93, 40, 0.72);
    border-radius: 0.22em 0.82em;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(255, 67, 24, 0.38), transparent 55%),
        linear-gradient(90deg, rgba(42, 10, 4, 0.98), rgba(86, 24, 12, 0.94), rgba(45, 11, 7, 0.98));
}

.nameframe-flame .nameframe-wing {
    display: block;
    top: -0.54em;
    width: 2.25em;
    height: 2.25em;
    background: linear-gradient(135deg, #fff2a6, #ff8a22 42%, #d71916 78%);
    clip-path: polygon(0 52%, 80% 0, 58% 44%, 100% 42%, 54% 62%, 70% 100%);
    filter: drop-shadow(0 0 0.42em #ff6b29);
    animation: nameframe-wing-beat 1.75s ease-in-out infinite;
}

.nameframe-flame .nameframe-wing-left {
    left: -1.18em;
    transform-origin: 100% 70%;
}

.nameframe-flame .nameframe-wing-right {
    right: -1.18em;
    transform: scaleX(-1);
    transform-origin: 0% 70%;
}

.nameframe-jade {
    --nf-a: #68ffc8;
    --nf-b: #2bb786;
    --nf-c: #e2ff9f;
    --nf-d: #ffffff;
    --nf-shadow: rgba(86, 255, 200, 0.6);
    border-radius: 1.1em 0.34em;
    background:
        radial-gradient(ellipse at 50% -30%, rgba(221, 255, 168, 0.28), transparent 60%),
        linear-gradient(90deg, rgba(4, 40, 31, 0.97), rgba(8, 77, 59, 0.92), rgba(7, 45, 35, 0.97));
}

.nameframe-jade .nameframe-emblem {
    display: block;
    left: 50%;
    bottom: -0.62em;
    width: 1.48em;
    height: 1.1em;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at 50% 68%, #f3ffbf 0 22%, transparent 24%),
        radial-gradient(ellipse at 30% 72%, #59ffc7 0 30%, transparent 32%),
        radial-gradient(ellipse at 70% 72%, #59ffc7 0 30%, transparent 32%);
    filter: drop-shadow(0 0 0.32em #85ffd6);
    animation: nameframe-lotus-open 2.8s ease-in-out infinite;
}

.nameframe-thunder {
    --nf-a: #f0dbff;
    --nf-b: #8a4cff;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-shadow: rgba(156, 92, 255, 0.76);
    background:
        linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, 0.22) 18% 20%, transparent 20% 34%, rgba(145, 79, 255, 0.32) 34% 36%, transparent 36%),
        linear-gradient(90deg, rgba(18, 7, 35, 0.98), rgba(42, 18, 74, 0.94), rgba(14, 7, 30, 0.98));
}

.nameframe-thunder .nameframe-line {
    border-radius: 0.15em;
    background:
        linear-gradient(120deg, transparent 0 10%, var(--nf-d) 10% 12%, transparent 12% 32%, var(--nf-b) 32% 35%, transparent 35% 58%, var(--nf-a) 58% 61%, transparent 61% 100%);
    animation: nameframe-thunder-flash 1.35s steps(2, end) infinite;
}

.nameframe-star {
    --nf-a: #9fd6ff;
    --nf-b: #d590ff;
    --nf-c: #fff7ca;
    --nf-d: #ffffff;
    --nf-shadow: rgba(175, 151, 255, 0.7);
    border-radius: 1.3em;
    background:
        radial-gradient(circle at 18% 40%, rgba(255, 255, 255, 0.7) 0 0.05em, transparent 0.08em),
        radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.55) 0 0.05em, transparent 0.08em),
        radial-gradient(ellipse at 50% 50%, rgba(112, 73, 210, 0.35), transparent 64%),
        linear-gradient(90deg, rgba(8, 7, 34, 0.98), rgba(29, 24, 76, 0.94), rgba(7, 9, 33, 0.98));
}

.nameframe-star .nameframe-aura {
    background: conic-gradient(from 0deg, transparent, rgba(165, 215, 255, 0.42), transparent, rgba(229, 173, 255, 0.36), transparent);
    animation: nameframe-orbit-spin 6s linear infinite;
}

.nameframe-ink {
    --nf-a: #f3f3e9;
    --nf-b: #6f6f63;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-shadow: rgba(240, 240, 220, 0.48);
    border-radius: 0.1em 0.62em 0.18em 0.7em;
    border-color: rgba(245, 245, 230, 0.64);
    background:
        radial-gradient(ellipse at 24% 35%, rgba(255, 255, 245, 0.2), transparent 48%),
        linear-gradient(90deg, rgba(5, 5, 5, 0.98), rgba(37, 36, 31, 0.96), rgba(5, 5, 5, 0.98));
}

.nameframe-ink .nameframe-line {
    background: linear-gradient(96deg, transparent 0%, rgba(255, 255, 245, 0.72) 16%, transparent 38%, rgba(200, 200, 180, 0.48) 62%, transparent 100%);
    filter: blur(0.5px) drop-shadow(0 0 0.16em #fff);
    animation: nameframe-ink-wash 4.8s ease-in-out infinite;
}

.nameframe-moon {
    --nf-a: #fff4c7;
    --nf-b: #9fb7ff;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-shadow: rgba(246, 236, 185, 0.62);
    border-radius: 1.1em 0.18em 1.1em 0.18em;
    background:
        radial-gradient(circle at 9% 50%, rgba(255, 242, 180, 0.25), transparent 38%),
        linear-gradient(90deg, rgba(16, 17, 41, 0.98), rgba(42, 48, 93, 0.92), rgba(11, 15, 39, 0.98));
}

.nameframe-moon .nameframe-emblem {
    display: block;
    left: -0.55em;
    top: -0.4em;
    width: 1.32em;
    height: 1.32em;
    border-radius: 50%;
    box-shadow: inset -0.36em 0 0 #fff4bd, 0 0 0.42em #fff4bd;
    animation: nameframe-moon-float 3.6s ease-in-out infinite;
}

.nameframe-sword {
    --nf-a: #d8f7ff;
    --nf-b: #8fbcff;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-shadow: rgba(178, 226, 255, 0.72);
    border-radius: 0.08em;
    background:
        linear-gradient(110deg, transparent 0 22%, rgba(255, 255, 255, 0.16) 22% 24%, transparent 24% 74%, rgba(255, 255, 255, 0.16) 74% 76%, transparent 76%),
        linear-gradient(90deg, rgba(8, 18, 26, 0.98), rgba(28, 52, 63, 0.94), rgba(6, 17, 25, 0.98));
}

.nameframe-sword .nameframe-wing {
    display: block;
    top: 50%;
    width: 2.8em;
    height: 0.16em;
    background: linear-gradient(90deg, transparent, #ffffff 18%, #9ee6ff 56%, transparent);
    box-shadow: 0 0 0.38em #bdefff;
    transform-origin: 50% 50%;
    animation: nameframe-sword-spin 3.4s linear infinite;
}

.nameframe-sword .nameframe-wing-left {
    left: -1.6em;
}

.nameframe-sword .nameframe-wing-right {
    right: -1.6em;
    animation-delay: -1.7s;
}

.nameframe-royal {
    --nf-a: #ffe38a;
    --nf-b: #b23cff;
    --nf-c: #ff5d9c;
    --nf-d: #ffffff;
    --nf-shadow: rgba(255, 226, 120, 0.74);
    border-radius: 0.42em;
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 68, 151, 0.38), transparent 44%),
        linear-gradient(90deg, rgba(28, 9, 37, 0.98), rgba(70, 25, 79, 0.94), rgba(26, 10, 36, 0.98));
}

.nameframe-royal .nameframe-emblem {
    display: block;
    left: 50%;
    top: -0.9em;
    width: 2.05em;
    height: 1.08em;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #fff4ad, #d98b22);
    clip-path: polygon(0 100%, 12% 32%, 32% 70%, 50% 0, 68% 70%, 88% 32%, 100% 100%);
    filter: drop-shadow(0 0 0.36em #ffd66a);
    animation: nameframe-crown-rise 2.8s ease-in-out infinite;
}

.nameframe-blood {
    --nf-a: #ff6884;
    --nf-b: #9d0b24;
    --nf-c: #ffd0d8;
    --nf-d: #ffffff;
    --nf-shadow: rgba(255, 65, 96, 0.7);
    border-radius: 0.22em 1em;
    background:
        radial-gradient(circle at 90% 48%, rgba(255, 53, 82, 0.32), transparent 34%),
        linear-gradient(90deg, rgba(25, 3, 8, 0.98), rgba(70, 6, 17, 0.95), rgba(24, 3, 8, 0.98));
}

.nameframe-blood .nameframe-emblem {
    display: block;
    right: -0.44em;
    top: -0.38em;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 35%, #ffccd4, #ff314f 42%, #5d0612 74%);
    filter: drop-shadow(0 0 0.36em #ff4968);
    animation: nameframe-blood-moon 3.2s ease-in-out infinite;
}

.nameframe-picker {
    margin: 0.25em 0;
}

.nameframe-picker-commands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-top: 0.35em;
    text-align: left;
}

.item-commands.nameframe-picker-commands>span.nameframe-choice {
    --choice-a: #ffd66a;
    --choice-b: #2b1a0b;
    box-sizing: border-box;
    min-width: 4.4em;
    height: 2.1em;
    line-height: 2.1em;
    margin: 0.15em 0.2em 0.15em 0;
    padding: 0 0.8em;
    color: #f8fdff;
    border-color: rgba(232, 244, 255, 0.72);
    border-radius: 0.28em;
    font-weight: 700;
    text-shadow: 0 0 0.35em rgba(255, 255, 255, 0.82);
    background:
        linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, 0.2) 18% 20%, transparent 20%),
        linear-gradient(90deg, var(--choice-b), var(--choice-a), var(--choice-b));
    box-shadow: inset 0 0 0.35em rgba(255, 255, 255, 0.12);
}

.item-commands.nameframe-picker-commands>span.nameframe-choice.selected {
    color: #fff;
    border-color: #fff7be;
    box-shadow:
        0 0 0.48em rgba(255, 240, 150, 0.68),
        inset 0 0 0.5em rgba(255, 255, 255, 0.2);
}

.nameframe-choice-dragon { --choice-a: #d79a22; --choice-b: #2d1705; }
.nameframe-choice-frost { --choice-a: #74c7ff; --choice-b: #0b2a41; }
.nameframe-choice-flame { --choice-a: #e44820; --choice-b: #3c0c04; }
.nameframe-choice-jade { --choice-a: #2ebf8a; --choice-b: #072d23; }
.nameframe-choice-thunder { --choice-a: #8e55ff; --choice-b: #17082d; }
.nameframe-choice-star { --choice-a: #bc8cff; --choice-b: #080726; }
.nameframe-choice-ink { --choice-a: #6d6a5e; --choice-b: #050505; }
.nameframe-choice-moon { --choice-a: #d9c98b; --choice-b: #11142d; }
.nameframe-choice-sword { --choice-a: #a9e7ff; --choice-b: #091721; }
.nameframe-choice-royal { --choice-a: #a94dff; --choice-b: #26092f; }
.nameframe-choice-blood { --choice-a: #c31331; --choice-b: #230308; }

.nameframe-choice-none {
    --choice-a: #333;
    --choice-b: #111;
    color: #bbb !important;
}

@keyframes nameframe-border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 230% 50%; }
}

@keyframes nameframe-breathe {
    0%, 100% {
        opacity: 0.48;
        transform: translateY(-50%) skewX(-10deg) scaleX(0.985);
    }
    50% {
        opacity: 0.84;
        transform: translateY(-50%) skewX(-6deg) scaleX(1.025);
    }
}

@keyframes nameframe-aura-pulse {
    0%, 100% { opacity: 0.46; transform: scaleX(0.96); }
    50% { opacity: 0.88; transform: scaleX(1.04); }
}

@keyframes nameframe-line-flow {
    0% {
        background-position: 0% 50%;
        transform: translateX(-1.4%) rotate(-0.6deg);
    }
    50% {
        background-position: 110% 50%;
        transform: translateX(1.2%) rotate(0.6deg);
    }
    100% {
        background-position: 220% 50%;
        transform: translateX(-1.4%) rotate(-0.6deg);
    }
}

@keyframes nameframe-gold-dragon-orbit {
    0% {
        left: -2.08em;
        top: -1.05em;
        opacity: 0.96;
        transform: rotate(-8deg) scale(1);
        z-index: 9;
    }
    25% {
        left: calc(100% - 2.75em);
        top: -0.92em;
        opacity: 1;
        transform: rotate(6deg) scale(1.02);
        z-index: 9;
    }
    50% {
        left: calc(100% - 2.42em);
        top: 1.72em;
        opacity: 0.66;
        transform: rotate(178deg) scale(0.9);
        z-index: 1;
    }
    75% {
        left: -1.92em;
        top: 1.64em;
        opacity: 0.62;
        transform: rotate(188deg) scale(0.9);
        z-index: 1;
    }
    100% {
        left: -2.08em;
        top: -1.05em;
        opacity: 0.96;
        transform: rotate(352deg) scale(1);
        z-index: 9;
    }
}

@keyframes nameframe-butterfly-flight {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scaleX(0.95); opacity: 0.72; }
    35% { transform: translate3d(1.3em, 0.25em, 0) rotate(10deg) scaleX(1.18); opacity: 1; }
    70% { transform: translate3d(0.35em, -0.22em, 0) rotate(-18deg) scaleX(0.82); opacity: 0.82; }
}

@keyframes nameframe-wing-beat {
    0%, 100% { transform: rotate(-8deg) scaleY(0.9); opacity: 0.86; }
    50% { transform: rotate(5deg) scaleY(1.08); opacity: 1; }
}

.nameframe-flame .nameframe-wing-right {
    animation-name: nameframe-wing-beat-right;
}

@keyframes nameframe-wing-beat-right {
    0%, 100% { transform: scaleX(-1) rotate(-8deg) scaleY(0.9); opacity: 0.86; }
    50% { transform: scaleX(-1) rotate(5deg) scaleY(1.08); opacity: 1; }
}

@keyframes nameframe-lotus-open {
    0%, 100% { transform: translateX(-50%) scale(0.92); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

@keyframes nameframe-thunder-flash {
    0%, 100% { opacity: 0.3; filter: drop-shadow(0 0 0.16em var(--nf-b)); }
    45%, 55% { opacity: 1; filter: drop-shadow(0 0 0.55em var(--nf-d)); }
}

@keyframes nameframe-orbit-spin {
    0% { transform: rotate(0deg) scaleX(1.05); opacity: 0.42; }
    100% { transform: rotate(360deg) scaleX(1.05); opacity: 0.42; }
}

@keyframes nameframe-ink-wash {
    0%, 100% { opacity: 0.34; transform: translateX(-0.8em) skewX(-10deg); }
    50% { opacity: 0.86; transform: translateX(0.8em) skewX(8deg); }
}

@keyframes nameframe-moon-float {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(0.3em) rotate(6deg); }
}

@keyframes nameframe-sword-spin {
    0% { transform: translateY(-50%) rotate(0deg); opacity: 0.46; }
    50% { transform: translateY(-50%) rotate(180deg); opacity: 1; }
    100% { transform: translateY(-50%) rotate(360deg); opacity: 0.46; }
}

@keyframes nameframe-crown-rise {
    0%, 100% { transform: translateX(-50%) translateY(0.08em); opacity: 0.82; }
    50% { transform: translateX(-50%) translateY(-0.08em); opacity: 1; }
}

@keyframes nameframe-blood-moon {
    0%, 100% { transform: scale(0.94); opacity: 0.78; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes nameframe-text-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.22); }
}

@keyframes nameframe-spark-fly {
    0%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.55);
    }
    25% { opacity: 0.95; }
    55% {
        opacity: 0.72;
        transform: translate3d(1.35em, -0.28em, 0) scale(1);
    }
    78% {
        opacity: 0.15;
        transform: translate3d(2.4em, 0.18em, 0) scale(0.7);
    }
}

/* Nameframe v2: rebuilt base, slower aura movement, distinct preview cards. */
.room-item.has-nameframe {
    min-height: 3.9em;
    padding: 0.35em 0;
}

.room-item.has-nameframe>.item-name {
    max-width: calc(100% - 2.4em);
    margin-left: 0.25em;
}

.room-item.has-nameframe>.item-status,
.room-item.has-nameframe>.item-status-bar {
    margin-top: 1.12em;
}

.nameframe {
    --nf-a: #78eaff;
    --nf-b: #f5c76a;
    --nf-c: #ffffff;
    --nf-d: #9eefff;
    --nf-ink: rgba(3, 7, 13, 0.92);
    --nf-shadow: rgba(106, 232, 255, 0.62);
    width: auto;
    min-width: 19.2em;
    max-width: min(46em, calc(100vw - 7em));
    min-height: 3.18em;
    padding: 0.42em 3.1em 0.48em;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
}

.nameframe::before,
.nameframe::after {
    display: none;
}

.nameframe-backglow,
.nameframe-shell,
.nameframe-depth,
.nameframe-rune,
.nameframe-aura,
.nameframe-line,
.nameframe-ornament,
.nameframe-wing,
.nameframe-creature,
.nameframe-emblem,
.nameframe-dragon-sprite,
.nameframe-spark {
    pointer-events: none;
}

.nameframe-backglow,
.nameframe-shell,
.nameframe-depth,
.nameframe-rune {
    position: absolute;
}

.nameframe-backglow {
    z-index: 0;
    inset: -0.82em -1.55em;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 12% 50%, color-mix(in srgb, var(--nf-a) 38%, transparent), transparent 54%),
        radial-gradient(ellipse at 88% 52%, color-mix(in srgb, var(--nf-b) 34%, transparent), transparent 58%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.12), transparent 72%);
    filter: blur(0.22em);
    opacity: 0.85;
    animation: nameframe-v2-spirit-breathe 7.8s ease-in-out infinite;
}

.nameframe-shell {
    z-index: 1;
    inset: 0.1em 0.35em;
    border: 1px solid color-mix(in srgb, var(--nf-c) 54%, transparent);
    border-radius: 0.18em 1.05em 0.18em 1.05em;
    clip-path: polygon(4% 0, 96% 0, 100% 31%, 96% 100%, 4% 100%, 0 69%);
    background:
        linear-gradient(90deg, transparent 0 4%, color-mix(in srgb, var(--nf-c) 64%, transparent) 4.4% 4.8%, transparent 5.2% 94.8%, color-mix(in srgb, var(--nf-c) 58%, transparent) 95.2% 95.6%, transparent 96%),
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--nf-c) 20%, transparent), transparent 45%),
        linear-gradient(100deg, color-mix(in srgb, var(--nf-a) 26%, transparent), transparent 28%, color-mix(in srgb, var(--nf-b) 20%, transparent) 72%, color-mix(in srgb, var(--nf-a) 20%, transparent)),
        linear-gradient(90deg, rgba(1, 5, 12, 0.95), color-mix(in srgb, var(--nf-ink) 86%, var(--nf-a) 14%) 50%, rgba(1, 5, 12, 0.96));
    box-shadow:
        inset 0 0 0.18em rgba(255, 255, 255, 0.34),
        inset 0 0 1.1em color-mix(in srgb, var(--nf-a) 28%, transparent),
        0 0 0.38em color-mix(in srgb, var(--nf-a) 44%, transparent),
        0 0 1.05em color-mix(in srgb, var(--nf-b) 28%, transparent);
}

.nameframe-depth {
    z-index: 2;
    left: 1.1em;
    right: 1.1em;
    top: 0.48em;
    bottom: 0.48em;
    border-top: 0.08em solid color-mix(in srgb, var(--nf-c) 56%, transparent);
    border-bottom: 0.08em solid color-mix(in srgb, var(--nf-a) 44%, transparent);
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 22%, transparent 48%, rgba(255, 255, 255, 0.07) 72%, transparent),
        repeating-linear-gradient(118deg, transparent 0 0.55em, rgba(255, 255, 255, 0.07) 0.58em 0.62em);
    opacity: 0.9;
    animation: nameframe-v2-inner-flow 11s ease-in-out infinite;
}

.nameframe-aura {
    z-index: 3;
    inset: -0.35em -0.95em;
    border-radius: 50%;
    background:
        conic-gradient(from 12deg, transparent, color-mix(in srgb, var(--nf-a) 28%, transparent), transparent, color-mix(in srgb, var(--nf-b) 24%, transparent), transparent);
    opacity: 0.36;
    filter: blur(0.08em);
    animation: nameframe-v2-aura-drift 18s linear infinite;
}

.nameframe-line {
    z-index: 4;
    left: 0.24em;
    right: 0.24em;
    top: 0.1em;
    bottom: 0.1em;
    border-radius: 0.28em 1.1em 0.28em 1.1em;
    background:
        radial-gradient(circle at 10% 51%, var(--nf-c) 0 0.08em, transparent 0.13em),
        radial-gradient(circle at 90% 51%, var(--nf-c) 0 0.08em, transparent 0.13em),
        linear-gradient(98deg, transparent 0%, color-mix(in srgb, var(--nf-a) 58%, transparent) 18%, transparent 30%, color-mix(in srgb, var(--nf-c) 64%, transparent) 50%, transparent 68%, color-mix(in srgb, var(--nf-b) 54%, transparent) 84%, transparent 100%);
    background-size: 190% 100%;
    opacity: 0.7;
    animation: nameframe-v2-light-thread 9.5s ease-in-out infinite;
}

.nameframe-rune {
    z-index: 7;
    top: 50%;
    width: 2.1em;
    height: 2.1em;
    border: 0.1em solid color-mix(in srgb, var(--nf-c) 72%, transparent);
    border-radius: 50%;
    transform: translateY(-50%) rotate(45deg);
    box-shadow:
        inset 0 0 0.32em color-mix(in srgb, var(--nf-a) 42%, transparent),
        0 0 0.55em color-mix(in srgb, var(--nf-a) 48%, transparent);
}

.nameframe-rune::before,
.nameframe-rune::after {
    content: "";
    position: absolute;
    inset: 0.42em;
    border-top: 0.12em solid color-mix(in srgb, var(--nf-b) 78%, transparent);
    border-bottom: 0.12em solid color-mix(in srgb, var(--nf-a) 66%, transparent);
    transform: rotate(45deg);
}

.nameframe-rune-left {
    left: -0.14em;
}

.nameframe-rune-right {
    right: -0.14em;
    transform: translateY(-50%) rotate(-45deg);
}

.nameframe-ornament {
    z-index: 8;
    top: 50%;
    width: 1.25em;
    height: 2.65em;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 50% 12%, var(--nf-c) 0 0.13em, transparent 0.18em),
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--nf-a) 78%, transparent), transparent);
    filter: drop-shadow(0 0 0.34em var(--nf-a));
}

.nameframe-ornament-left {
    left: 0.55em;
    transform: translateY(-50%) skewY(-18deg);
}

.nameframe-ornament-right {
    right: 0.55em;
    transform: translateY(-50%) skewY(18deg);
}

.nameframe-ornament::before {
    inset: 0.25em 0.34em;
    border-left: 0.12em solid color-mix(in srgb, var(--nf-c) 72%, transparent);
    border-top: 0;
}

.nameframe-text {
    z-index: 12;
    font-size: 1.14em;
    line-height: 1.62em;
    max-width: 100%;
    color: #fffdf5;
    text-shadow:
        0 0 0.18em rgba(255, 255, 255, 0.92),
        0 0 0.55em color-mix(in srgb, var(--nf-a) 80%, transparent),
        0 0 1.15em color-mix(in srgb, var(--nf-b) 64%, transparent),
        0 0 0.08em #000;
    animation: nameframe-v2-text-breathe 5.8s ease-in-out infinite;
}

.nameframe-spark,
.nameframe-spark::before,
.nameframe-spark::after {
    z-index: 10;
    width: 0.28em;
    height: 0.28em;
    background: var(--nf-c);
    box-shadow:
        0 0 0.28em var(--nf-c),
        0 0 0.8em var(--nf-a);
}

.nameframe-spark {
    left: 2.4em;
    top: 0.28em;
    animation: nameframe-v2-spark-wander 6.4s ease-in-out infinite;
}

.nameframe-spark::before {
    left: 8.8em;
    top: 1.96em;
    animation: nameframe-v2-spark-wander 7.8s -2.2s ease-in-out infinite;
}

.nameframe-spark::after {
    left: 15.8em;
    top: 0.2em;
    animation: nameframe-v2-spark-wander 8.6s -4s ease-in-out infinite;
}

.nameframe-dragon {
    --nf-a: #65ecff;
    --nf-b: #ffd36d;
    --nf-c: #fff8c7;
    --nf-d: #aaf7ff;
    --nf-ink: rgba(4, 10, 16, 0.94);
    --nf-shadow: rgba(255, 218, 118, 0.68);
}

.nameframe-dragon .nameframe-shell {
    border-radius: 1.25em 0.24em 1.25em 0.24em;
    clip-path: polygon(7% 0, 93% 0, 100% 38%, 93% 100%, 7% 100%, 0 62%);
    background:
        radial-gradient(ellipse at 7% 50%, rgba(101, 236, 255, 0.28), transparent 55%),
        radial-gradient(ellipse at 93% 52%, rgba(255, 215, 107, 0.3), transparent 56%),
        repeating-linear-gradient(138deg, transparent 0 0.54em, rgba(255, 226, 132, 0.11) 0.56em 0.62em),
        linear-gradient(90deg, rgba(2, 7, 12, 0.97), rgba(12, 33, 39, 0.95) 48%, rgba(31, 18, 5, 0.95));
}

.nameframe-dragon .nameframe-dragon-sprite {
    display: block;
    width: 5.4em;
    height: 2.08em;
    filter:
        drop-shadow(0 0 0.2em #fff8c0)
        drop-shadow(0 0 0.64em rgba(255, 201, 70, 0.86));
    animation: nameframe-v2-dragon-glide 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.nameframe-dragon .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    height: 1.35em;
    transform: translateY(-50%);
    border-top: 0.16em solid rgba(255, 218, 104, 0.62);
    border-radius: 50%;
    filter: drop-shadow(0 0 0.3em #ffd76a);
    opacity: 0.72;
}

.nameframe-dragon .nameframe-rune {
    border-radius: 42% 58% 40% 60%;
    border-color: rgba(255, 224, 125, 0.88);
}

.nameframe-dragon .nameframe-dragon-b {
    animation-duration: 18s;
    animation-delay: -9s;
}

.nameframe-dragon .nameframe-dragon-b .nameframe-dragon-svg {
    transform: scaleX(-1);
    transform-origin: 50% 50%;
}

.nameframe-dragon-body {
    stroke-width: 8;
    stroke: #ffd66f;
}

.nameframe-dragon-tail {
    stroke-width: 4.4;
    stroke: #fff0a2;
}

.nameframe-dragon-head {
    fill: #ffd35d;
    stroke: #fff9c8;
}

.nameframe-frost {
    --nf-a: #9df5ff;
    --nf-b: #89aaff;
    --nf-c: #ffffff;
    --nf-d: #d9fcff;
    --nf-ink: rgba(4, 22, 36, 0.94);
}

.nameframe-frost .nameframe-shell {
    border-radius: 0.18em 1.3em 0.18em 1.3em;
    clip-path: polygon(2% 18%, 12% 0, 88% 0, 98% 18%, 94% 100%, 6% 100%);
    background:
        linear-gradient(132deg, rgba(255, 255, 255, 0.2) 0 0.08em, transparent 0.09em 0.48em),
        radial-gradient(ellipse at 15% 45%, rgba(178, 251, 255, 0.34), transparent 55%),
        linear-gradient(90deg, rgba(2, 18, 30, 0.97), rgba(16, 58, 85, 0.94), rgba(6, 20, 48, 0.96));
}

.nameframe-frost .nameframe-creature {
    display: block;
    width: 1.55em;
    height: 1.16em;
    background:
        radial-gradient(ellipse at 30% 45%, rgba(232, 255, 255, 0.98) 0 35%, transparent 37%),
        radial-gradient(ellipse at 70% 45%, rgba(145, 210, 255, 0.98) 0 35%, transparent 37%),
        radial-gradient(circle at 50% 62%, #ffffff 0 0.12em, transparent 0.16em);
    border-radius: 52% 52% 20% 20%;
    filter: drop-shadow(0 0 0.45em #cfffff);
    animation: nameframe-v2-butterfly-float 8.6s ease-in-out infinite;
}

.nameframe-frost .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 13%;
    right: 13%;
    top: 50%;
    height: 1.25em;
    transform: translateY(-50%);
    background:
        linear-gradient(135deg, transparent 0 47%, rgba(230, 255, 255, 0.34) 48% 51%, transparent 52%),
        linear-gradient(45deg, transparent 0 47%, rgba(136, 213, 255, 0.28) 48% 51%, transparent 52%);
    opacity: 0.9;
}

.nameframe-frost .nameframe-rune {
    border-radius: 18% 82% 18% 82%;
    transform: translateY(-50%) rotate(45deg) skewX(-8deg);
}

.nameframe-frost .nameframe-creature-a {
    left: 1.1em;
    top: -0.58em;
}

.nameframe-frost .nameframe-creature-b {
    right: 1.1em;
    bottom: -0.52em;
    animation-delay: -4.1s;
}

.nameframe-flame {
    --nf-a: #ffd476;
    --nf-b: #ff5134;
    --nf-c: #fff1b3;
    --nf-d: #ffffff;
    --nf-ink: rgba(35, 7, 3, 0.95);
}

.nameframe-flame .nameframe-shell {
    border-radius: 1.1em 0.1em 0.75em 0.1em;
    clip-path: polygon(0 34%, 7% 0, 93% 0, 100% 34%, 96% 100%, 4% 100%);
    background:
        radial-gradient(ellipse at 50% 116%, rgba(255, 62, 27, 0.45), transparent 58%),
        linear-gradient(90deg, rgba(35, 7, 3, 0.98), rgba(94, 24, 9, 0.95), rgba(38, 8, 4, 0.98));
}

.nameframe-flame .nameframe-wing {
    display: block;
    top: -0.58em;
    width: 2.7em;
    height: 2.35em;
    background: linear-gradient(135deg, #fff2a6, #ff8d23 45%, #dd1916 78%);
    clip-path: polygon(0 54%, 72% 0, 56% 42%, 100% 36%, 58% 62%, 74% 100%);
    filter: drop-shadow(0 0 0.5em #ff672a);
    animation: nameframe-v2-phoenix-wing 4.8s ease-in-out infinite;
}

.nameframe-flame .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: -0.1em;
    height: 1em;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(255, 218, 100, 0.72), transparent 42%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 82, 33, 0.68), transparent 48%),
        radial-gradient(ellipse at 80% 100%, rgba(255, 180, 55, 0.64), transparent 42%);
    filter: blur(0.02em) drop-shadow(0 0 0.28em #ff5e27);
    opacity: 0.88;
}

.nameframe-flame .nameframe-rune {
    border-radius: 58% 20% 58% 20%;
    border-color: rgba(255, 210, 98, 0.82);
}

.nameframe-flame .nameframe-wing-left {
    left: -0.4em;
    transform-origin: 100% 70%;
}

.nameframe-flame .nameframe-wing-right {
    right: -0.4em;
    transform: scaleX(-1);
    transform-origin: 0% 70%;
    animation-name: nameframe-v2-phoenix-wing-right;
}

.nameframe-jade {
    --nf-a: #68ffd0;
    --nf-b: #dcff9b;
    --nf-c: #f3ffc4;
    --nf-d: #ffffff;
    --nf-ink: rgba(3, 34, 26, 0.95);
}

.nameframe-jade .nameframe-shell {
    border-radius: 1.55em;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(220, 255, 155, 0.34), transparent 56%),
        linear-gradient(90deg, rgba(2, 34, 27, 0.97), rgba(8, 82, 61, 0.94), rgba(4, 42, 33, 0.97));
}

.nameframe-jade .nameframe-emblem {
    display: block;
    left: 50%;
    bottom: -0.7em;
    width: 1.95em;
    height: 1.35em;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at 50% 70%, #f4ffbc 0 20%, transparent 23%),
        radial-gradient(ellipse at 30% 70%, #69ffd0 0 32%, transparent 34%),
        radial-gradient(ellipse at 70% 70%, #69ffd0 0 32%, transparent 34%);
    filter: drop-shadow(0 0 0.38em #8cffdc);
    animation: nameframe-v2-lotus-open 6.2s ease-in-out infinite;
}

.nameframe-jade .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 19%;
    right: 19%;
    top: 50%;
    height: 1.18em;
    transform: translateY(-42%);
    background:
        radial-gradient(ellipse at 50% 85%, rgba(220, 255, 155, 0.55) 0 20%, transparent 22%),
        radial-gradient(ellipse at 34% 74%, rgba(104, 255, 208, 0.48) 0 28%, transparent 30%),
        radial-gradient(ellipse at 66% 74%, rgba(104, 255, 208, 0.48) 0 28%, transparent 30%);
    opacity: 0.86;
}

.nameframe-jade .nameframe-rune {
    border-radius: 50% 6% 50% 6%;
    border-color: rgba(130, 255, 218, 0.86);
}

.nameframe-thunder {
    --nf-a: #f0ddff;
    --nf-b: #8f56ff;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-ink: rgba(19, 8, 42, 0.95);
}

.nameframe-thunder .nameframe-shell {
    border-radius: 0.1em;
    clip-path: polygon(6% 0, 74% 0, 69% 24%, 100% 24%, 93% 100%, 22% 100%, 29% 72%, 0 72%);
    background:
        linear-gradient(118deg, transparent 0 17%, rgba(255, 255, 255, 0.22) 17% 19%, transparent 19% 34%, rgba(151, 88, 255, 0.38) 34% 36%, transparent 36%),
        linear-gradient(90deg, rgba(20, 7, 43, 0.97), rgba(54, 22, 88, 0.94), rgba(17, 8, 35, 0.98));
}

.nameframe-thunder .nameframe-line {
    animation: nameframe-v2-thunder-surge 5.2s steps(2, end) infinite;
}

.nameframe-thunder .nameframe-depth::after {
    content: "";
    position: absolute;
    inset: 0.2em 18%;
    background:
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.82) 35% 38%, transparent 39% 50%, rgba(151, 88, 255, 0.65) 51% 55%, transparent 56%);
    filter: drop-shadow(0 0 0.28em #f5e7ff);
    opacity: 0.76;
}

.nameframe-thunder .nameframe-rune {
    border-radius: 0.2em;
    transform: translateY(-50%) rotate(0deg) skewX(-12deg);
}

.nameframe-star {
    --nf-a: #a8dfff;
    --nf-b: #d894ff;
    --nf-c: #fff6c8;
    --nf-d: #ffffff;
    --nf-ink: rgba(8, 8, 40, 0.95);
}

.nameframe-star .nameframe-shell {
    border-radius: 1.8em;
    clip-path: ellipse(50% 50% at 50% 50%);
    background:
        radial-gradient(circle at 18% 40%, rgba(255,255,255,0.8) 0 0.05em, transparent 0.08em),
        radial-gradient(circle at 68% 64%, rgba(255,255,255,0.7) 0 0.05em, transparent 0.08em),
        radial-gradient(ellipse at 50% 50%, rgba(112, 75, 216, 0.42), transparent 64%),
        linear-gradient(90deg, rgba(7, 7, 35, 0.98), rgba(31, 26, 83, 0.95), rgba(7, 9, 36, 0.98));
}

.nameframe-star .nameframe-aura {
    opacity: 0.52;
    animation-duration: 26s;
}

.nameframe-star .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    height: 1.45em;
    transform: translateY(-50%);
    border-top: 0.12em solid rgba(170, 220, 255, 0.55);
    border-bottom: 0.08em solid rgba(218, 150, 255, 0.48);
    border-radius: 50%;
    box-shadow: 0 0 0.45em rgba(198, 170, 255, 0.48);
}

.nameframe-star .nameframe-rune {
    border-radius: 50%;
    box-shadow:
        inset 0 0 0.2em rgba(255, 255, 255, 0.38),
        0 0 0.8em rgba(191, 166, 255, 0.5);
}

.nameframe-ink {
    --nf-a: #f2f2df;
    --nf-b: #8c8876;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-ink: rgba(5, 5, 5, 0.98);
}

.nameframe-ink .nameframe-shell {
    border-radius: 0.08em 1em 0.18em 1.15em;
    clip-path: polygon(2% 18%, 8% 4%, 96% 0, 98% 82%, 90% 100%, 3% 94%);
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 255, 245, 0.22), transparent 50%),
        linear-gradient(96deg, rgba(2, 2, 2, 0.98), rgba(42, 40, 34, 0.96), rgba(5, 5, 5, 0.98));
}

.nameframe-ink .nameframe-depth {
    filter: blur(0.4px);
    animation: nameframe-v2-ink-wash 10s ease-in-out infinite;
}

.nameframe-ink .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    height: 0.72em;
    transform: translateY(-50%) skewX(-14deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 245, 0.58), rgba(140, 136, 118, 0.4), transparent);
    filter: blur(0.08em);
    opacity: 0.72;
}

.nameframe-ink .nameframe-rune {
    border-radius: 0.08em 0.7em;
    opacity: 0.58;
}

.nameframe-moon {
    --nf-a: #fff2bd;
    --nf-b: #9fb9ff;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-ink: rgba(13, 17, 44, 0.95);
}

.nameframe-moon .nameframe-shell {
    border-radius: 1.45em 0.2em 1.45em 0.2em;
    clip-path: polygon(9% 0, 100% 0, 92% 100%, 0 100%);
    background:
        radial-gradient(circle at 9% 50%, rgba(255, 242, 180, 0.32), transparent 38%),
        linear-gradient(90deg, rgba(13, 15, 42, 0.98), rgba(41, 48, 98, 0.94), rgba(10, 15, 42, 0.98));
}

.nameframe-moon .nameframe-emblem {
    display: block;
    left: 0.7em;
    top: -0.48em;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    box-shadow: inset -0.42em 0 0 #fff3bd, 0 0 0.52em #fff3bd;
    animation: nameframe-v2-moon-float 7s ease-in-out infinite;
}

.nameframe-moon .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 17%;
    right: 17%;
    top: 50%;
    height: 1.28em;
    transform: translateY(-50%);
    border-top: 0.14em solid rgba(255, 244, 190, 0.58);
    border-radius: 50%;
    filter: drop-shadow(0 0 0.32em #fff2bd);
    opacity: 0.78;
}

.nameframe-moon .nameframe-rune {
    border-radius: 50%;
    box-shadow: inset -0.35em 0 0 rgba(255, 242, 189, 0.28), 0 0 0.55em rgba(255, 242, 189, 0.45);
}

.nameframe-sword {
    --nf-a: #d8f7ff;
    --nf-b: #91d5ff;
    --nf-c: #ffffff;
    --nf-d: #ffffff;
    --nf-ink: rgba(8, 18, 28, 0.96);
}

.nameframe-sword .nameframe-shell {
    border-radius: 0.08em;
    clip-path: polygon(0 50%, 7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%);
    background:
        linear-gradient(110deg, transparent 0 22%, rgba(255, 255, 255, 0.18) 22% 24%, transparent 24% 76%, rgba(255, 255, 255, 0.16) 76% 78%, transparent 78%),
        linear-gradient(90deg, rgba(7, 17, 27, 0.98), rgba(28, 57, 70, 0.95), rgba(7, 17, 26, 0.98));
}

.nameframe-sword .nameframe-wing {
    display: block;
    top: 50%;
    width: 3.3em;
    height: 0.16em;
    background: linear-gradient(90deg, transparent, #ffffff 16%, #98e7ff 55%, transparent);
    box-shadow: 0 0 0.42em #bdefff;
    transform-origin: 50% 50%;
    animation: nameframe-v2-sword-light 8s ease-in-out infinite;
}

.nameframe-sword .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: 50%;
    height: 0.18em;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96), rgba(145, 213, 255, 0.72), transparent);
    box-shadow: 0 0 0.55em rgba(183, 238, 255, 0.84);
}

.nameframe-sword .nameframe-rune {
    width: 1.2em;
    border-radius: 0.08em;
    transform: translateY(-50%) rotate(45deg) scaleX(0.62);
}

.nameframe-sword .nameframe-wing-left {
    left: -0.45em;
}

.nameframe-sword .nameframe-wing-right {
    right: -0.45em;
    animation-delay: -4s;
}

.nameframe-royal {
    --nf-a: #ffe18a;
    --nf-b: #b65bff;
    --nf-c: #ff76b2;
    --nf-d: #ffffff;
    --nf-ink: rgba(31, 10, 42, 0.95);
}

.nameframe-royal .nameframe-shell {
    border-radius: 0.52em;
    clip-path: polygon(3% 0, 97% 0, 100% 22%, 94% 100%, 6% 100%, 0 22%);
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 83, 157, 0.4), transparent 45%),
        linear-gradient(90deg, rgba(30, 9, 41, 0.98), rgba(76, 30, 88, 0.94), rgba(29, 10, 40, 0.98));
}

.nameframe-royal .nameframe-emblem {
    display: block;
    left: 50%;
    top: -1em;
    width: 2.2em;
    height: 1.16em;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #fff4ad, #d98a22);
    clip-path: polygon(0 100%, 12% 32%, 32% 70%, 50% 0, 68% 70%, 88% 32%, 100% 100%);
    filter: drop-shadow(0 0 0.42em #ffd66a);
    animation: nameframe-v2-crown-rise 7s ease-in-out infinite;
}

.nameframe-royal .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    top: 50%;
    height: 1.3em;
    transform: translateY(-48%);
    background:
        linear-gradient(180deg, transparent 0 48%, rgba(255, 225, 138, 0.52) 49% 55%, transparent 56%),
        radial-gradient(circle at 50% 20%, rgba(255, 118, 178, 0.46) 0 0.32em, transparent 0.36em);
    opacity: 0.88;
}

.nameframe-royal .nameframe-rune {
    border-radius: 0.35em;
    border-color: rgba(255, 226, 138, 0.86);
}

.nameframe-blood {
    --nf-a: #ff758e;
    --nf-b: #a80b26;
    --nf-c: #ffd5dc;
    --nf-d: #ffffff;
    --nf-ink: rgba(30, 3, 8, 0.96);
}

.nameframe-blood .nameframe-shell {
    border-radius: 0.16em 1.45em 0.16em 1.45em;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    background:
        radial-gradient(circle at 90% 48%, rgba(255, 55, 85, 0.36), transparent 34%),
        linear-gradient(90deg, rgba(27, 3, 9, 0.98), rgba(78, 7, 20, 0.96), rgba(26, 3, 9, 0.98));
}

.nameframe-blood .nameframe-emblem {
    display: block;
    right: 0.55em;
    top: -0.44em;
    width: 1.45em;
    height: 1.45em;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 35%, #ffccd4, #ff314f 42%, #5d0612 74%);
    filter: drop-shadow(0 0 0.42em #ff4968);
    animation: nameframe-v2-blood-pulse 7.4s ease-in-out infinite;
}

.nameframe-blood .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    height: 1.28em;
    transform: translateY(-50%);
    border-bottom: 0.14em solid rgba(255, 117, 142, 0.56);
    border-radius: 50%;
    filter: drop-shadow(0 0 0.35em #ff4968);
    opacity: 0.78;
}

.nameframe-blood .nameframe-rune {
    border-radius: 0.2em 0.8em;
    border-color: rgba(255, 117, 142, 0.78);
}

.nameframe-preview {
    min-width: 12.8em;
    max-width: 12.8em;
    min-height: 2.65em;
    padding: 0.34em 2.1em 0.38em;
    font-size: 0.88em;
}

.nameframe-preview .nameframe-text {
    font-size: 1em;
}

.nameframe-preview .nameframe-dragon .nameframe-dragon-sprite,
.nameframe-preview.nameframe-dragon .nameframe-dragon-sprite {
    width: 4.1em;
    height: 1.55em;
}

.nameframe-picker {
    margin: 0.35em 0 0.55em;
}

.nameframe-picker-commands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.5em, max-content));
    gap: 0.52em 0.78em;
    margin-top: 0.55em;
    text-align: left;
}

.nameframe-picker-commands .nameframe-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14.7em;
    min-height: 3.55em;
    margin: 0;
    padding: 0.16em;
    cursor: pointer;
    border: 1px solid rgba(185, 225, 255, 0.34);
    border-radius: 0.5em;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.28);
}

.nameframe-picker-commands .nameframe-choice * {
    pointer-events: none;
}

.nameframe-picker-commands .nameframe-choice.selected {
    border-color: rgba(255, 244, 176, 0.94);
    box-shadow:
        0 0 0.45em rgba(255, 230, 130, 0.6),
        inset 0 0 0.7em rgba(255, 255, 255, 0.12);
}

.nameframe-picker-commands .nameframe-choice.selected::after {
    content: "";
    position: absolute;
    inset: -0.15em;
    border: 1px solid rgba(255, 252, 205, 0.68);
    border-radius: 0.65em;
    box-shadow: 0 0 0.55em rgba(255, 230, 130, 0.6);
    pointer-events: none;
}

.nameframe-choice-none-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12.8em;
    min-height: 2.65em;
    color: #bfbfbf;
    border: 1px solid rgba(180, 180, 180, 0.36);
    border-radius: 0.35em;
    background: linear-gradient(90deg, rgba(15, 15, 15, 0.9), rgba(44, 44, 44, 0.74), rgba(15, 15, 15, 0.9));
    text-shadow: none;
}

@keyframes nameframe-v2-spirit-breathe {
    0%, 100% { opacity: 0.56; transform: scaleX(0.97) scaleY(0.92); }
    50% { opacity: 0.95; transform: scaleX(1.03) scaleY(1.06); }
}

@keyframes nameframe-v2-inner-flow {
    0%, 100% { opacity: 0.62; transform: translateX(-0.45em); }
    50% { opacity: 1; transform: translateX(0.45em); }
}

@keyframes nameframe-v2-aura-drift {
    0% { transform: rotate(0deg) scaleX(1.02); }
    100% { transform: rotate(360deg) scaleX(1.02); }
}

@keyframes nameframe-v2-light-thread {
    0%, 100% { background-position: 0% 50%; opacity: 0.48; }
    50% { background-position: 180% 50%; opacity: 0.92; }
}

@keyframes nameframe-v2-text-breathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.14); }
}

@keyframes nameframe-v2-spark-wander {
    0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
    20% { opacity: 1; }
    58% { opacity: 0.82; transform: translate3d(1.2em, -0.3em, 0) scale(1); }
    82% { opacity: 0.18; transform: translate3d(2.05em, 0.18em, 0) scale(0.7); }
}

@keyframes nameframe-v2-dragon-glide {
    0%, 100% {
        left: 0.2em;
        top: -0.58em;
        opacity: 0.94;
        transform: rotate(-4deg) scale(0.96);
        z-index: 13;
    }
    24% {
        left: calc(100% - 5.5em);
        top: -0.48em;
        opacity: 1;
        transform: rotate(4deg) scale(1);
        z-index: 13;
    }
    52% {
        left: calc(100% - 5.25em);
        top: 2.0em;
        opacity: 0.42;
        transform: rotate(180deg) scale(0.82);
        z-index: 2;
    }
    76% {
        left: 0.08em;
        top: 1.92em;
        opacity: 0.46;
        transform: rotate(184deg) scale(0.82);
        z-index: 2;
    }
}

@keyframes nameframe-v2-butterfly-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg) scaleX(0.95); opacity: 0.72; }
    35% { transform: translate3d(1.15em, 0.2em, 0) rotate(9deg) scaleX(1.12); opacity: 1; }
    70% { transform: translate3d(0.25em, -0.28em, 0) rotate(-13deg) scaleX(0.88); opacity: 0.82; }
}

@keyframes nameframe-v2-phoenix-wing {
    0%, 100% { transform: rotate(-7deg) scaleY(0.94); opacity: 0.82; }
    50% { transform: rotate(4deg) scaleY(1.08); opacity: 1; }
}

@keyframes nameframe-v2-phoenix-wing-right {
    0%, 100% { transform: scaleX(-1) rotate(-7deg) scaleY(0.94); opacity: 0.82; }
    50% { transform: scaleX(-1) rotate(4deg) scaleY(1.08); opacity: 1; }
}

@keyframes nameframe-v2-lotus-open {
    0%, 100% { transform: translateX(-50%) scale(0.94); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

@keyframes nameframe-v2-thunder-surge {
    0%, 100% { opacity: 0.34; filter: drop-shadow(0 0 0.12em var(--nf-b)); }
    48%, 55% { opacity: 1; filter: drop-shadow(0 0 0.6em var(--nf-c)); }
}

@keyframes nameframe-v2-ink-wash {
    0%, 100% { opacity: 0.38; transform: translateX(-0.9em) skewX(-9deg); }
    50% { opacity: 0.88; transform: translateX(0.9em) skewX(7deg); }
}

@keyframes nameframe-v2-moon-float {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(0.26em) rotate(6deg); }
}

@keyframes nameframe-v2-sword-light {
    0%, 100% { transform: translateY(-50%) rotate(-4deg); opacity: 0.38; }
    50% { transform: translateY(-50%) rotate(3deg); opacity: 1; }
}

@keyframes nameframe-v2-crown-rise {
    0%, 100% { transform: translateX(-50%) translateY(0.08em); opacity: 0.82; }
    50% { transform: translateX(-50%) translateY(-0.1em); opacity: 1; }
}

@keyframes nameframe-v2-blood-pulse {
    0%, 100% { transform: scale(0.94); opacity: 0.78; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* Nameframe v3: five immortal-MUD styles with a living gold dragon. */
.room-item.has-nameframe {
    min-height: 4.25em;
    padding: 0.28em 0 0.36em;
    overflow: visible;
}

.room-item.has-nameframe>.item-name {
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 2.2em);
    margin-left: 0.18em;
    overflow: visible;
}

.room-item.has-nameframe>.item-status,
.room-item.has-nameframe>.item-status-bar {
    margin-top: 1.24em;
}

.nameframe {
    --nf-a: #f7d477;
    --nf-b: #63e9ff;
    --nf-c: #fff8c8;
    --nf-d: #ffffff;
    --nf-ink: rgba(4, 7, 11, 0.95);
    --nf-shadow: rgba(255, 217, 111, 0.72);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 18em;
    max-width: min(48em, calc(100vw - 6em));
    min-height: 3.38em;
    padding: 0.44em 3.45em 0.48em;
    border: 0;
    border-radius: 0;
    color: #fffaf0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateZ(0);
}

.nameframe::before,
.nameframe::after {
    display: none !important;
}

.nameframe-backglow,
.nameframe-shell,
.nameframe-depth,
.nameframe-rune,
.nameframe-aura,
.nameframe-line,
.nameframe-ornament,
.nameframe-wing,
.nameframe-creature,
.nameframe-emblem,
.nameframe-dragon-sprite {
    position: absolute;
    pointer-events: none;
}

.nameframe-wing,
.nameframe-creature,
.nameframe-emblem,
.nameframe-dragon-sprite {
    display: none;
}

.nameframe-spark,
.nameframe-spark::before,
.nameframe-spark::after {
    display: none !important;
}

.nameframe-line::before,
.nameframe-line::after,
.nameframe-ornament::before,
.nameframe-ornament::after,
.nameframe-wing::before,
.nameframe-wing::after,
.nameframe-creature::before,
.nameframe-creature::after,
.nameframe-emblem::before,
.nameframe-emblem::after,
.nameframe-rune::before,
.nameframe-rune::after {
    content: "";
    position: absolute;
}

.nameframe-backglow {
    z-index: 0;
    inset: -0.82em -1.18em;
    border-radius: 44% 56% 48% 52%;
    background:
        radial-gradient(ellipse at 13% 50%, color-mix(in srgb, var(--nf-a) 42%, transparent), transparent 58%),
        radial-gradient(ellipse at 88% 52%, color-mix(in srgb, var(--nf-b) 35%, transparent), transparent 60%),
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--nf-c) 13%, transparent), transparent);
    filter: blur(0.18em);
    opacity: 0.88;
    animation: nameframe-v3-qi-breathe 9s ease-in-out infinite;
}

.nameframe-shell {
    z-index: 1;
    inset: 0.12em 0.44em;
    border: 1px solid color-mix(in srgb, var(--nf-c) 68%, transparent);
    border-radius: 0.24em 1.1em 0.24em 1.1em;
    clip-path: polygon(5% 0, 95% 0, 100% 35%, 95% 100%, 5% 100%, 0 65%);
    background:
        linear-gradient(90deg, transparent 0 4%, color-mix(in srgb, var(--nf-c) 72%, transparent) 4.4% 4.7%, transparent 5.1% 94.9%, color-mix(in srgb, var(--nf-c) 70%, transparent) 95.3% 95.6%, transparent 96%),
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--nf-c) 17%, transparent), transparent 48%),
        linear-gradient(102deg, color-mix(in srgb, var(--nf-a) 23%, transparent), transparent 27%, color-mix(in srgb, var(--nf-b) 20%, transparent) 73%, color-mix(in srgb, var(--nf-a) 18%, transparent)),
        linear-gradient(90deg, rgba(2, 5, 9, 0.98), color-mix(in srgb, var(--nf-ink) 88%, var(--nf-a) 12%) 52%, rgba(2, 5, 9, 0.98));
    box-shadow:
        inset 0 0 0.16em rgba(255, 255, 255, 0.38),
        inset 0 0 1.05em color-mix(in srgb, var(--nf-a) 27%, transparent),
        0 0 0.45em color-mix(in srgb, var(--nf-a) 48%, transparent),
        0 0 1.1em color-mix(in srgb, var(--nf-b) 28%, transparent);
}

.nameframe-depth {
    z-index: 2;
    left: 1.08em;
    right: 1.08em;
    top: 0.54em;
    bottom: 0.54em;
    border-top: 0.08em solid color-mix(in srgb, var(--nf-c) 62%, transparent);
    border-bottom: 0.08em solid color-mix(in srgb, var(--nf-a) 55%, transparent);
    border-radius: 48%;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09) 24%, transparent 49%, rgba(255, 255, 255, 0.08) 74%, transparent),
        repeating-linear-gradient(122deg, transparent 0 0.62em, color-mix(in srgb, var(--nf-c) 10%, transparent) 0.65em 0.69em);
    opacity: 0.86;
    animation: nameframe-v3-inner-current 12s ease-in-out infinite;
}

.nameframe-aura {
    z-index: 3;
    left: 2.1em;
    right: 2.1em;
    top: 0.18em;
    bottom: 0.18em;
    border-radius: 50%;
    border-top: 0.13em solid color-mix(in srgb, var(--nf-a) 70%, transparent);
    border-bottom: 0.1em solid color-mix(in srgb, var(--nf-b) 48%, transparent);
    filter: drop-shadow(0 0 0.34em var(--nf-shadow));
    opacity: 0.58;
    animation: nameframe-v3-orbit-breathe 8.8s ease-in-out infinite;
}

.nameframe-line {
    z-index: 5;
    left: 0.62em;
    right: 0.62em;
    top: 0.38em;
    bottom: 0.38em;
    border-radius: 0.28em 1em 0.28em 1em;
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--nf-a) 76%, transparent) 15%, transparent 30%, color-mix(in srgb, var(--nf-c) 74%, transparent) 49%, transparent 68%, color-mix(in srgb, var(--nf-b) 68%, transparent) 84%, transparent);
    background-size: 220% 100%;
    opacity: 0.72;
    filter: drop-shadow(0 0 0.24em var(--nf-shadow));
    animation: nameframe-v3-thread-flow 10s ease-in-out infinite;
}

.nameframe-line::before,
.nameframe-line::after {
    display: none;
}

.nameframe-rune {
    z-index: 8;
    top: 50%;
    width: 1.58em;
    height: 2.42em;
    border: 0.1em solid color-mix(in srgb, var(--nf-c) 72%, transparent);
    border-radius: 50% 16% 50% 16%;
    transform: translateY(-50%) rotate(36deg);
    box-shadow:
        inset 0 0 0.36em color-mix(in srgb, var(--nf-a) 44%, transparent),
        0 0 0.56em color-mix(in srgb, var(--nf-a) 48%, transparent);
}

.nameframe-rune::before,
.nameframe-rune::after {
    inset: 0.38em;
    border-top: 0.1em solid color-mix(in srgb, var(--nf-b) 82%, transparent);
    border-bottom: 0.1em solid color-mix(in srgb, var(--nf-a) 74%, transparent);
    transform: rotate(45deg);
}

.nameframe-rune-left {
    left: 0.1em;
}

.nameframe-rune-right {
    right: 0.1em;
    transform: translateY(-50%) rotate(-144deg);
}

.nameframe-ornament {
    z-index: 9;
    top: 50%;
    width: 1.15em;
    height: 2.9em;
    border-radius: 50%;
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--nf-a) 88%, transparent), transparent),
        radial-gradient(ellipse at 50% 13%, var(--nf-c) 0 0.13em, transparent 0.18em);
    filter: drop-shadow(0 0 0.36em var(--nf-a));
}

.nameframe-ornament-left {
    left: 0.75em;
    transform: translateY(-50%) skewY(-18deg);
}

.nameframe-ornament-right {
    right: 0.75em;
    transform: translateY(-50%) skewY(18deg);
}

.nameframe-ornament::before,
.nameframe-ornament::after {
    display: none;
}

.nameframe-text {
    position: relative;
    z-index: 14;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.62em;
    font-size: 1.16em;
    font-weight: 700;
    letter-spacing: 0;
    color: #fffdf0;
    text-shadow:
        0 0 0.14em rgba(0, 0, 0, 0.92),
        0 0 0.22em rgba(255, 255, 255, 0.94),
        0 0 0.68em color-mix(in srgb, var(--nf-a) 82%, transparent),
        0 0 1.18em color-mix(in srgb, var(--nf-b) 62%, transparent);
    animation: nameframe-v3-text-glow 6.6s ease-in-out infinite;
}

.nameframe-dragon {
    --nf-a: #ffd86a;
    --nf-b: #66f0ff;
    --nf-c: #fff3b0;
    --nf-d: #ffffff;
    --nf-ink: rgba(18, 9, 2, 0.96);
    --nf-shadow: rgba(255, 210, 80, 0.9);
}

.nameframe-dragon .nameframe-shell {
    border-radius: 1.2em 0.18em 1.2em 0.18em;
    clip-path: polygon(7% 0, 93% 0, 100% 40%, 93% 100%, 7% 100%, 0 60%);
    background:
        radial-gradient(ellipse at 8% 50%, rgba(255, 223, 101, 0.38), transparent 56%),
        radial-gradient(ellipse at 92% 50%, rgba(95, 238, 255, 0.22), transparent 58%),
        repeating-linear-gradient(138deg, transparent 0 0.58em, rgba(255, 226, 132, 0.12) 0.61em 0.68em),
        linear-gradient(90deg, rgba(20, 10, 3, 0.98), rgba(65, 37, 8, 0.95) 48%, rgba(5, 22, 28, 0.96));
}

.nameframe-dragon .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 13%;
    right: 13%;
    top: 50%;
    height: 1.3em;
    transform: translateY(-50%);
    border-top: 0.18em solid rgba(255, 216, 92, 0.68);
    border-bottom: 0.1em solid rgba(102, 240, 255, 0.36);
    border-radius: 50%;
    filter: drop-shadow(0 0 0.3em #ffd86a);
}

.nameframe-dragon .nameframe-dragon-a {
    display: block;
    width: 9.05em;
    height: 3.05em;
    left: 0.42em;
    top: 0.15em;
    z-index: 11;
    transform-origin: 50% 50%;
    filter:
        drop-shadow(0 0 0.16em #fff7bf)
        drop-shadow(0 0 0.55em rgba(255, 195, 45, 0.9));
    animation: nameframe-v3-dragon-patrol 13.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.nameframe-dragon .nameframe-dragon-b {
    display: none !important;
}

.nameframe-dragon-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.nameframe-dragon-outer-glow,
.nameframe-dragon-body,
.nameframe-dragon-belly,
.nameframe-dragon-tail,
.nameframe-dragon-ridge,
.nameframe-dragon-mane,
.nameframe-dragon-horn,
.nameframe-dragon-whisker,
.nameframe-dragon-claws path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nameframe-dragon-outer-glow {
    stroke: rgba(255, 180, 32, 0.32);
    stroke-width: 16;
}

.nameframe-dragon-body {
    stroke: #f6c64b;
    stroke-width: 10.5;
}

.nameframe-dragon-belly {
    stroke: #fff1a8;
    stroke-width: 3.6;
    opacity: 0.92;
}

.nameframe-dragon-tail {
    fill: rgba(255, 205, 70, 0.62);
    stroke: #fff0a0;
    stroke-width: 2.2;
}

.nameframe-dragon-ridge,
.nameframe-dragon-mane,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    stroke: #fff5b8;
    stroke-width: 3;
}

.nameframe-dragon-head {
    fill: #ffd15a;
    stroke: #fff5bc;
    stroke-width: 2.3;
    stroke-linejoin: round;
}

.nameframe-dragon-eye {
    fill: #ffffff;
    filter: drop-shadow(0 0 0.18em #ffffff);
}

.nameframe-dragon-claws path {
    stroke: #fff7c8;
    stroke-width: 3.2;
}

.nameframe-dragon-head-group {
    animation: nameframe-v3-dragon-head-bob 2.8s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.nameframe-dragon-claws-a {
    animation: nameframe-v3-dragon-claw-flex 2.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 0%;
}

.nameframe-dragon-claws-b {
    animation: nameframe-v3-dragon-claw-flex 2.6s -1.1s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 0%;
}

.nameframe-frost {
    --nf-a: #cfffff;
    --nf-b: #77b8ff;
    --nf-c: #ffffff;
    --nf-ink: rgba(2, 21, 34, 0.96);
    --nf-shadow: rgba(173, 248, 255, 0.78);
}

.nameframe-frost .nameframe-shell {
    border-radius: 0.18em 1.35em 0.18em 1.35em;
    clip-path: polygon(3% 18%, 12% 0, 88% 0, 97% 18%, 94% 100%, 6% 100%);
    background:
        linear-gradient(132deg, rgba(255, 255, 255, 0.18) 0 0.08em, transparent 0.1em 0.52em),
        radial-gradient(ellipse at 16% 48%, rgba(215, 255, 255, 0.34), transparent 56%),
        linear-gradient(90deg, rgba(2, 18, 29, 0.98), rgba(13, 61, 88, 0.94), rgba(7, 20, 48, 0.97));
}

.nameframe-frost .nameframe-creature {
    display: block;
    z-index: 12;
    width: 2em;
    height: 1.38em;
    filter: drop-shadow(0 0 0.48em #d8ffff);
    animation: nameframe-v3-butterfly-float 8.8s ease-in-out infinite;
}

.nameframe-frost .nameframe-creature::before,
.nameframe-frost .nameframe-creature::after {
    display: block;
    width: 1.12em;
    height: 1.3em;
    top: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.95), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(116,196,255,0.82));
}

.nameframe-frost .nameframe-creature::before {
    left: 0;
    border-radius: 76% 22% 58% 28%;
    transform-origin: 100% 60%;
    animation: nameframe-v3-butterfly-wing 1.9s ease-in-out infinite;
}

.nameframe-frost .nameframe-creature::after {
    right: 0;
    border-radius: 22% 76% 28% 58%;
    transform-origin: 0% 60%;
    animation: nameframe-v3-butterfly-wing-right 1.9s ease-in-out infinite;
}

.nameframe-frost .nameframe-creature-a {
    left: 0.72em;
    top: -0.45em;
}

.nameframe-frost .nameframe-creature-b {
    right: 0.76em;
    bottom: -0.45em;
    animation-delay: -4.2s;
}

.nameframe-flame {
    --nf-a: #ffd16c;
    --nf-b: #ff4934;
    --nf-c: #fff0ae;
    --nf-ink: rgba(35, 6, 2, 0.96);
    --nf-shadow: rgba(255, 82, 31, 0.78);
}

.nameframe-flame .nameframe-shell {
    border-radius: 1em 0.12em 0.8em 0.12em;
    clip-path: polygon(0 34%, 8% 0, 92% 0, 100% 34%, 96% 100%, 4% 100%);
    background:
        radial-gradient(ellipse at 50% 116%, rgba(255, 62, 27, 0.48), transparent 58%),
        linear-gradient(90deg, rgba(35, 7, 3, 0.98), rgba(96, 24, 7, 0.95), rgba(38, 7, 3, 0.98));
}

.nameframe-flame .nameframe-wing {
    display: block;
    z-index: 11;
    top: -0.54em;
    width: 2.75em;
    height: 2.4em;
    background: linear-gradient(135deg, #fff2a9, #ff8d20 45%, #dd1512 78%);
    clip-path: polygon(0 54%, 72% 0, 56% 42%, 100% 36%, 58% 62%, 74% 100%);
    filter: drop-shadow(0 0 0.52em #ff672a);
    animation: nameframe-v3-flame-wing 4.8s ease-in-out infinite;
}

.nameframe-flame .nameframe-wing-left {
    left: -0.35em;
    transform-origin: 100% 70%;
}

.nameframe-flame .nameframe-wing-right {
    right: -0.35em;
    transform: scaleX(-1);
    transform-origin: 0% 70%;
    animation-name: nameframe-v3-flame-wing-right;
}

.nameframe-flame .nameframe-depth::after {
    content: "";
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: -0.12em;
    height: 1.05em;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(255, 218, 100, 0.72), transparent 42%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 82, 33, 0.7), transparent 48%),
        radial-gradient(ellipse at 80% 100%, rgba(255, 180, 55, 0.65), transparent 42%);
    filter: drop-shadow(0 0 0.3em #ff5e27);
}

.nameframe-jade {
    --nf-a: #66ffd0;
    --nf-b: #d6ff96;
    --nf-c: #f6ffc8;
    --nf-ink: rgba(3, 34, 26, 0.96);
    --nf-shadow: rgba(103, 255, 210, 0.72);
}

.nameframe-jade .nameframe-shell {
    border-radius: 1.5em;
    clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(220, 255, 155, 0.36), transparent 56%),
        linear-gradient(90deg, rgba(2, 34, 27, 0.98), rgba(8, 84, 62, 0.94), rgba(3, 41, 33, 0.98));
}

.nameframe-jade .nameframe-emblem {
    display: block;
    z-index: 12;
    left: 50%;
    bottom: -0.76em;
    width: 2.25em;
    height: 1.45em;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at 50% 70%, #f4ffbc 0 20%, transparent 23%),
        radial-gradient(ellipse at 30% 70%, #69ffd0 0 32%, transparent 34%),
        radial-gradient(ellipse at 70% 70%, #69ffd0 0 32%, transparent 34%);
    filter: drop-shadow(0 0 0.42em #8cffdc);
    animation: nameframe-v3-lotus-open 6.2s ease-in-out infinite;
}

.nameframe-thunder {
    --nf-a: #f0ddff;
    --nf-b: #8c55ff;
    --nf-c: #ffffff;
    --nf-ink: rgba(18, 7, 42, 0.96);
    --nf-shadow: rgba(159, 91, 255, 0.82);
}

.nameframe-thunder .nameframe-shell {
    border-radius: 0.08em;
    clip-path: polygon(6% 0, 74% 0, 69% 24%, 100% 24%, 93% 100%, 22% 100%, 29% 72%, 0 72%);
    background:
        linear-gradient(118deg, transparent 0 17%, rgba(255, 255, 255, 0.22) 17% 19%, transparent 19% 34%, rgba(151, 88, 255, 0.38) 34% 36%, transparent 36%),
        linear-gradient(90deg, rgba(20, 7, 43, 0.98), rgba(54, 22, 88, 0.94), rgba(17, 8, 35, 0.98));
}

.nameframe-thunder .nameframe-line {
    border-radius: 0.12em;
    background:
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.88) 35% 38%, transparent 39% 50%, rgba(151, 88, 255, 0.74) 51% 55%, transparent 56%),
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--nf-b) 72%, transparent), transparent);
    animation: nameframe-v3-thunder-surge 5.1s steps(2, end) infinite;
}

.nameframe-preview {
    min-width: 13.9em;
    max-width: 13.9em;
    min-height: 3.05em;
    padding: 0.34em 2.4em 0.38em;
    font-size: 0.86em;
}

.nameframe-preview .nameframe-text {
    font-size: 1em;
}

.nameframe-preview.nameframe-dragon .nameframe-dragon-a {
    width: 5.65em;
    height: 1.92em;
    animation-duration: 12s;
}

.nameframe-picker {
    margin: 0.35em 0 0.55em;
}

.nameframe-picker-commands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.2em, max-content));
    gap: 0.54em 0.78em;
    margin-top: 0.55em;
    text-align: left;
}

.nameframe-picker-commands .nameframe-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15.4em;
    min-height: 3.65em;
    margin: 0;
    padding: 0.16em;
    cursor: pointer;
    border: 1px solid rgba(185, 225, 255, 0.34);
    border-radius: 0.36em;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.28);
}

.nameframe-picker-commands .nameframe-choice * {
    pointer-events: none;
}

.nameframe-picker-commands .nameframe-choice.selected {
    border-color: rgba(255, 244, 176, 0.94);
    box-shadow:
        0 0 0.46em rgba(255, 230, 130, 0.62),
        inset 0 0 0.7em rgba(255, 255, 255, 0.12);
}

.nameframe-picker-commands .nameframe-choice.selected::after {
    content: "";
    position: absolute;
    inset: -0.15em;
    border: 1px solid rgba(255, 252, 205, 0.68);
    border-radius: 0.5em;
    box-shadow: 0 0 0.55em rgba(255, 230, 130, 0.6);
    pointer-events: none;
}

.nameframe-choice-none-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13.9em;
    min-height: 3.05em;
    color: #bfbfbf;
    border: 1px solid rgba(180, 180, 180, 0.36);
    border-radius: 0.28em;
    background: linear-gradient(90deg, rgba(15, 15, 15, 0.9), rgba(44, 44, 44, 0.74), rgba(15, 15, 15, 0.9));
    text-shadow: none;
}

@keyframes nameframe-v3-qi-breathe {
    0%, 100% { opacity: 0.62; transform: scaleX(0.97) scaleY(0.92); }
    50% { opacity: 0.96; transform: scaleX(1.03) scaleY(1.06); }
}

@keyframes nameframe-v3-inner-current {
    0%, 100% { opacity: 0.62; transform: translateX(-0.42em); }
    50% { opacity: 0.98; transform: translateX(0.42em); }
}

@keyframes nameframe-v3-orbit-breathe {
    0%, 100% { opacity: 0.44; transform: scaleX(0.96) skewX(-4deg); }
    50% { opacity: 0.78; transform: scaleX(1.04) skewX(4deg); }
}

@keyframes nameframe-v3-thread-flow {
    0%, 100% { background-position: 0% 50%; opacity: 0.48; }
    50% { background-position: 190% 50%; opacity: 0.92; }
}

@keyframes nameframe-v3-text-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.13); }
}

@keyframes nameframe-v3-dragon-patrol {
    0%, 100% {
        left: 0.38em;
        top: 0.12em;
        opacity: 0.98;
        transform: scaleX(1) rotate(-5deg);
        z-index: 11;
    }
    42% {
        left: calc(100% - 9.18em);
        top: 0.22em;
        opacity: 1;
        transform: scaleX(1) rotate(4deg);
        z-index: 11;
    }
    50% {
        left: calc(100% - 9.18em);
        top: 0.72em;
        opacity: 0.86;
        transform: scaleX(-1) rotate(-4deg);
        z-index: 6;
    }
    92% {
        left: 0.38em;
        top: 0.76em;
        opacity: 0.9;
        transform: scaleX(-1) rotate(5deg);
        z-index: 6;
    }
}

@keyframes nameframe-v3-dragon-head-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2.5px) rotate(2.6deg); }
}

@keyframes nameframe-v3-dragon-claw-flex {
    0%, 100% { transform: rotate(0deg) translateY(0); opacity: 0.92; }
    50% { transform: rotate(-4deg) translateY(2px); opacity: 1; }
}

@keyframes nameframe-v3-butterfly-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); opacity: 0.78; }
    38% { transform: translate3d(1.12em, 0.18em, 0) rotate(8deg); opacity: 1; }
    72% { transform: translate3d(0.2em, -0.26em, 0) rotate(-12deg); opacity: 0.86; }
}

@keyframes nameframe-v3-butterfly-wing {
    0%, 100% { transform: rotateY(0deg) rotate(-7deg); }
    50% { transform: rotateY(42deg) rotate(8deg); }
}

@keyframes nameframe-v3-butterfly-wing-right {
    0%, 100% { transform: rotateY(0deg) rotate(7deg); }
    50% { transform: rotateY(-42deg) rotate(-8deg); }
}

@keyframes nameframe-v3-flame-wing {
    0%, 100% { transform: rotate(-7deg) scaleY(0.94); opacity: 0.82; }
    50% { transform: rotate(4deg) scaleY(1.08); opacity: 1; }
}

@keyframes nameframe-v3-flame-wing-right {
    0%, 100% { transform: scaleX(-1) rotate(-7deg) scaleY(0.94); opacity: 0.82; }
    50% { transform: scaleX(-1) rotate(4deg) scaleY(1.08); opacity: 1; }
}

@keyframes nameframe-v3-lotus-open {
    0%, 100% { transform: translateX(-50%) scale(0.94); opacity: 0.82; }
    50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

@keyframes nameframe-v3-thunder-surge {
    0%, 100% { opacity: 0.32; filter: drop-shadow(0 0 0.12em var(--nf-b)); }
    48%, 55% { opacity: 1; filter: drop-shadow(0 0 0.62em var(--nf-c)); }
}

/* Nameframe v3.1: remove round bubble-like endpoints and sharpen the dragon silhouette. */
.nameframe-rune {
    width: 0.88em;
    height: 2.34em;
    border-radius: 0.08em;
    clip-path: polygon(50% 0, 100% 18%, 72% 50%, 100% 82%, 50% 100%, 0 82%, 28% 50%, 0 18%);
    opacity: 0.68;
    box-shadow:
        inset 0 0 0.22em color-mix(in srgb, var(--nf-a) 34%, transparent),
        0 0 0.34em color-mix(in srgb, var(--nf-a) 36%, transparent);
}

.nameframe-rune::before,
.nameframe-rune::after {
    inset: 0.48em 0.18em;
}

.nameframe-ornament {
    width: 0.48em;
    height: 2.68em;
    border-radius: 0.08em;
    opacity: 0.62;
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--nf-c) 70%, transparent) 18%, color-mix(in srgb, var(--nf-a) 78%, transparent) 52%, color-mix(in srgb, var(--nf-b) 46%, transparent) 78%, transparent);
    filter: drop-shadow(0 0 0.22em var(--nf-a));
}

.nameframe-dragon .nameframe-rune,
.nameframe-dragon .nameframe-ornament {
    display: none;
}

.nameframe-dragon .nameframe-shell {
    inset: 0.2em 0.58em;
    border-color: rgba(255, 232, 138, 0.74);
    box-shadow:
        inset 0 0 0.1em rgba(255, 255, 255, 0.28),
        inset 0 0 0.72em rgba(255, 196, 55, 0.18),
        0 0 0.28em rgba(255, 218, 96, 0.42),
        0 0 0.74em rgba(92, 239, 255, 0.18);
}

.nameframe-dragon .nameframe-depth {
    left: 0.96em;
    right: 0.96em;
    top: 0.7em;
    bottom: 0.62em;
    opacity: 0.58;
}

.nameframe-dragon .nameframe-aura {
    opacity: 0.42;
}

.nameframe-dragon .nameframe-dragon-a {
    width: 12.7em;
    height: 4.18em;
    left: 0.12em;
    top: -0.88em;
    opacity: 0.82;
    z-index: 12;
    filter:
        drop-shadow(0 0 0.08em #fffbe0)
        drop-shadow(0 0 0.26em rgba(255, 196, 35, 0.74))
        drop-shadow(0 0 0.58em rgba(255, 118, 20, 0.34));
}

.nameframe-preview.nameframe-dragon .nameframe-dragon-a {
    width: 8.35em;
    height: 2.75em;
    top: -0.18em;
}

.nameframe-dragon-outer-glow {
    stroke-width: 8;
    stroke: rgba(255, 173, 25, 0.32);
}

.nameframe-dragon-body {
    stroke-width: 10.8;
    stroke: #f2b92e;
}

.nameframe-dragon-belly {
    stroke-width: 4.2;
    stroke: #fff5b8;
}

.nameframe-dragon-ridge,
.nameframe-dragon-mane,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    stroke-width: 3.8;
    stroke: #fff2a6;
}

.nameframe-dragon-head {
    fill: #f8bf35;
    stroke-width: 2.6;
}

.nameframe-dragon-claws path {
    stroke-width: 3.4;
}

.nameframe-dragon .nameframe-text {
    z-index: 16;
    color: #fff8d4;
    text-shadow:
        0 0 0.12em #000,
        0 0.05em 0.08em #000,
        0 0 0.34em rgba(0, 0, 0, 0.95),
        0 0 0.46em rgba(255, 230, 122, 0.72),
        0 0 0.9em rgba(255, 210, 74, 0.52);
}

@keyframes nameframe-v3-dragon-patrol {
    0%, 100% {
        left: 0.18em;
        top: -0.88em;
        opacity: 0.84;
        transform: scaleX(1) rotate(-4deg);
        z-index: 12;
    }
    42% {
        left: calc(100% - 12.9em);
        top: -0.76em;
        opacity: 0.88;
        transform: scaleX(1) rotate(4deg);
        z-index: 12;
    }
    50% {
        left: calc(100% - 12.9em);
        top: 1.02em;
        opacity: 0.78;
        transform: scaleX(-1) rotate(-3deg);
        z-index: 7;
    }
    92% {
        left: 0.18em;
        top: 1.08em;
        opacity: 0.8;
        transform: scaleX(-1) rotate(4deg);
        z-index: 7;
    }
}

/* Nameframe v4: transparent name border plus one five-claw gold dragon mark. */
.room-item.has-nameframe {
    min-height: 2.2em;
    padding: 0.08em 0;
}

.room-item.has-nameframe>.item-name {
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 2.2em);
    margin-left: 0.35em;
    overflow: visible;
    vertical-align: middle;
}

.room-item.has-nameframe>.item-status,
.room-item.has-nameframe>.item-status-bar {
    margin-top: 0.36em;
}

.nameframe {
    --nf-border: #e6b740;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 10em;
    max-width: min(42em, calc(100vw - 6em));
    min-height: 1.75em;
    padding: 0.12em 2.45em 0.14em 0.72em;
    border: 1px solid var(--nf-border);
    border-radius: 0.08em;
    color: inherit;
    background: transparent !important;
    box-shadow:
        0 0 0.12em rgba(255, 255, 255, 0.18),
        0 0 0.24em color-mix(in srgb, var(--nf-border) 38%, transparent);
    overflow: visible;
    transform: none;
}

.nameframe::before,
.nameframe::after,
.nameframe-backglow,
.nameframe-shell,
.nameframe-depth,
.nameframe-rune,
.nameframe-aura,
.nameframe-line,
.nameframe-ornament,
.nameframe-wing,
.nameframe-creature,
.nameframe-emblem,
.nameframe-dragon-sprite,
.nameframe-spark {
    display: none !important;
}

.nameframe-text {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: inherit;
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: 0;
    color: inherit;
    text-shadow: inherit;
    animation: none !important;
    filter: none !important;
}

.nameframe.nameframe-dragon .nameframe-text {
    color: inherit;
    text-shadow: inherit;
    font-size: 1em;
    font-weight: inherit;
    animation: none !important;
    filter: none !important;
}

.nameframe-dragon {
    --nf-border: #d9a52c;
    color: inherit;
}

.nameframe-dragon-mark {
    position: absolute;
    z-index: 3;
    right: 0.22em;
    top: 50%;
    display: block;
    width: 2.05em;
    height: 0.98em;
    transform: translateY(-52%);
    pointer-events: none;
    opacity: 0.95;
    filter: drop-shadow(0 0 0.12em rgba(255, 220, 110, 0.78));
}

.nameframe-dragon-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.nameframe-dragon-cloud,
.nameframe-dragon-body,
.nameframe-dragon-belly,
.nameframe-dragon-ridge,
.nameframe-dragon-claw,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nameframe-dragon-cloud {
    stroke: rgba(255, 220, 116, 0.35);
    stroke-width: 5.4;
}

.nameframe-dragon-body {
    stroke: #d9a52c;
    stroke-width: 5.4;
}

.nameframe-dragon-belly {
    stroke: #fff0a6;
    stroke-width: 1.7;
}

.nameframe-dragon-ridge,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    stroke: #ffe58d;
    stroke-width: 1.55;
}

.nameframe-dragon-claw {
    stroke: #fff5bd;
    stroke-width: 1.75;
}

.nameframe-dragon-head {
    fill: #e7b43a;
    stroke: #fff1a8;
    stroke-width: 1.35;
    stroke-linejoin: round;
}

.nameframe-dragon-eye {
    fill: #fff7cf;
}

.nameframe-preview {
    min-width: 10.8em;
    max-width: 10.8em;
    min-height: 1.9em;
    padding: 0.13em 2.35em 0.13em 0.72em;
    font-size: 1em;
}

.nameframe-preview .nameframe-dragon-mark {
    width: 2em;
    height: 0.96em;
}

.nameframe-picker {
    margin: 0.3em 0 0.45em;
}

.nameframe-picker-commands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42em;
    margin-top: 0.42em;
    text-align: left;
}

.nameframe-picker-commands .nameframe-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-height: 2.35em;
    margin: 0;
    padding: 0.1em;
    cursor: pointer;
    border: 1px solid rgba(210, 210, 210, 0.42);
    border-radius: 0.1em;
    background: transparent !important;
}

.nameframe-picker-commands .nameframe-choice * {
    pointer-events: none;
}

.nameframe-picker-commands .nameframe-choice.selected {
    border-color: rgba(232, 188, 68, 0.95);
    box-shadow: 0 0 0.28em rgba(232, 188, 68, 0.45);
}

.nameframe-picker-commands .nameframe-choice.selected::after {
    display: none;
}

.nameframe-choice-none-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6em;
    min-height: 1.75em;
    padding: 0 0.8em;
    color: #bfbfbf;
    border: 1px solid rgba(180, 180, 180, 0.36);
    border-radius: 0.08em;
    background: transparent !important;
    text-shadow: none;
}

.room-item>.item-icon {
    opacity: 0.3;
    width: 2em;
    text-align: center;
}

.room-item>.item-status {
    display: inline-block;
    float: right;
}

.room-item>.item-status-bar {
    display: inline-block;
    float: right;
}

.room_items>.item-commands {
    margin-left: 2em;
}

.map-panel {
    width: 100%;
    max-height: 6em;
    overflow: auto;
}

.room-title {
    position: relative;
    color: #ffff00;
    line-height: 1.875em;
    height: 1.875em;
    padding-right: 1.6em;
}

.room-title>.map-icon {
    position: absolute;
    right: 0.35em;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
}

.room-title>.map-icon:hover {
    color: #00ff00;
}

.room-commands>.empty-msg,
.combat-commands>.empty-msg {
    border: none;
}

.state-bar {
    flex: 1;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-left: .5em;
    border-radius: .5em;
    border-left-width: 2px;
    border-left-style: solid;
    white-space: nowrap;
    overflow-x: auto;
    background-color: #111;
    cursor: pointer;
    height: 2.5em;
    margin-right: 0.15em;
}


.state-bar>.title {
    line-height: 2.5em;
}

.state-bar>.stop {
    display: inline-block;
    color: #808080;
    text-align: center;
    cursor: pointer;
    width: 3.75em;
    text-decoration: underline;
}

.state-bar>.item-command {
    display: inline-block;
    border: solid 1px gray;
    color: gray;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    min-width: 2.5em;
    margin-right: 0.6em;
    padding: 0px 0.4em;
    margin-top: 0.2em;
    line-height: 2em;
}


.dialog-confirm {
    position: fixed;
    left: 50%;
    bottom: 0px;
    width: min(100vw, 768px);
    max-width: 100vw;
    transform: translateX(-50%);
    background-color: #111;
    border-left: 4px solid #108ee9;
    border-radius: 4px;
    z-index: 10000;
    user-select: none;
    box-sizing: border-box;
    pointer-events: auto;

    overflow-y: hidden;
    min-height: 3.5em;
    height: auto;
    line-height: normal;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.dialog-confirm>.dialog-btn>.btn-icon {
    margin-right: 0.4em;
}

.dialog-confirm>.dialog-btn {
    height: auto;
    min-height: 3.5em;
    width: 7.5em;
    max-width: 30vw;
    text-align: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
    min-width: 5.5em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
    white-space: normal;
    touch-action: manipulation;
}

.dialog-confirm>.dialog-content {
    color: #ababab;
    padding-left: 1em;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.dialog-confirm.custom-title-confirm {
    align-items: stretch;
}

.dialog-confirm.custom-title-confirm>.dialog-content {
    padding: 0.75em 0.85em;
    align-items: stretch;
}

.dialog-confirm.custom-title-confirm>.dialog-btn {
    min-width: 5em;
    width: 6.25em;
}

.custom-title-form {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.custom-title-field {
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 0;
}

.custom-title-field>span {
    flex: 0 0 5.8em;
    color: #d0d0d0;
    line-height: 1.3;
}

.custom-title-field>.confirm-text-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5em;
    color: #111;
    background: #f5f5f5;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0 0.55em;
}

.custom-title-tip {
    color: #8fcfff;
    font-size: 0.88em;
    line-height: 1.25;
}

@media (max-width: 430px) {
    .dialog-confirm.custom-title-confirm>.dialog-content {
        padding-left: 0.65em;
        padding-right: 0.65em;
    }

    .custom-title-field {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25em;
    }

    .custom-title-field>span {
        flex: none;
    }
}

.dialog-confirm>.btn-ok {
    background-color: #108ee9;
    color: white;
    cursor: pointer;
}

.confirm-count {
    text-align: center;
    display: flex;
    gap: 0.625em;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-items: center;
}

.confirm-count>.btn {
    display: inline-block;
    border: solid 1px gray;
    color: gray;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25em;
    flex: 1 1 0;
    min-width: 0;
    margin-right: 0;
    margin-top: 0.25em;
    height: 2.5em;
    line-height: 2.5em;
    touch-action: manipulation;
}

.confirm-count>input {
    background-color: transparent;
    outline: none;
    border: 1px solid #666666;
    border-radius: 0.25em;
    flex: 1 1 0;
    min-width: 0;
    height: 2.5em;
    line-height: 2.5em;
    color: inherit;
    text-align: center;
    font-weight: bold;
    margin-right: 0;
    box-sizing: border-box;
}

.room-item>.item-status {
    display: inline-block;
    float: right;
}

.room-item>.item-status-bar {
    display: inline-block;
    float: right;
}

.room_items>.item-commands {
    margin-left: 2em;
}

.warn-dialog {

    position: absolute;
    left: auto;
    right: 3.5em;
    z-index: 20;
    min-width: 20em;
    max-width: 100%;
    padding: 0.5em;

    transition-property: bottom;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    background: #111;
    border-radius: 6px;
    overflow: hidden;
    border-top-width: 4px;
    border-top-style: solid;
}

.warn-dialog>.warn-content {
    color: #bdc3c7;
    white-space: pre-wrap;
}

.warn-dialog>.item-commands {
    float: right;
    padding-bottom: 0px;
}

.item-status-bar>.status-item {
    position: relative;
    cursor: pointer;
    margin-right: 0.75em;
    background-color: #008000;
    border-radius: 0.25em;
    color: white;
    line-height: 1.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    height: 1.25em;
    display: inline-block;
    zoom: 0.8;
}

.item-status-bar>.downside {
    background-color: #800000;
}

.item-status-bar>.status-item[sid="room"] {
    background-color: #b58900;
    border: 1px solid #ffff00;
    color: #ffff00;
}

.item-status-bar>.status-item.status-color-hiz[sid="room"] {
    background-color: #7a35d8;
    border: 1px solid #d7c5ff;
    color: #fff;
    box-shadow: 0 0 4px rgba(185, 134, 255, 0.65);
}

.item-status-bar>.status-item.status-color-hiz[sid="room"]>.shadow {
    background-color: #2d115a;
}

.item-status-bar>.status-item.status-color-hig[sid="room"] {
    background-color: #008000;
    border: 1px solid #00d020;
    color: #fff;
}

.item-status-bar>.status-item.status-color-hig[sid="room"]>.shadow {
    background-color: #005000;
}

.item-status-bar>.status-item.status-color-hiy[sid="room"] {
    background-color: #b58900;
    border: 1px solid #ffff00;
    color: #ffff00;
}

.item-status-bar>.status-item[sid="wudao_sixiang_suppression"] {
    min-width: 2.2em;
    height: 1.45em;
    line-height: 1.45em;
    padding: 0 0.3em;
    margin-right: 0.5em;
    border-radius: 0.38em;
    border: 0;
    background: #9f100e;
    color: #ffe9df;
    font-weight: 500;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 235, 225, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.35);
    zoom: 0.86;
}

.item-status-bar>.status-item[sid="wudao_sixiang_suppression"]>.shadow {
    display: none;
}

.item-status-bar>.status-item>.status-bg {
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
    display: inline;
    border-radius: 4px;
}

.item-status-bar>.status-item>.shadow {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 100%;
    bottom: 0px;
    background-color: black;
    opacity: 0.5;
    height: 100%;
    border-radius: 0.25em;
    border-radius: 0.25em;
}

@media (max-width: 767px) {
    .container {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        line-height: 1.28em;
    }

    .container>.content-message {
        min-height: 0;
    }

    .room_desc,
    .room_exits {
        overflow-wrap: anywhere;
    }

    .room_items {
        max-height: 7.5rem !important;
    }

    .bottom-bar {
        align-items: center;
        gap: 0.2em;
        margin-top: 0.35em;
        margin-bottom: max(0.25em, env(safe-area-inset-bottom));
        padding: 0 0.15em;
        min-width: 0;
    }

    .state-bar {
        min-width: 0;
        height: 2.35em;
    }

    .state-bar>.title {
        line-height: 2.35em;
    }

    .bottom-bar>.tool-item,
    .right-bar>.tool-item {
        width: 2.35em;
        height: 2.35em;
        margin-right: 0;
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .right-bar {
        bottom: calc(3em + env(safe-area-inset-bottom));
    }

    .room-commands,
    .combat-commands {
        white-space: normal;
        overflow-x: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em;
        line-height: 1.8em;
        padding-right: 0.25em;
    }

    .room-commands>.act-item,
    .combat-commands>.pfm-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2em;
        margin-right: 0;
        margin-bottom: 0;
        padding-left: 0.55em;
        padding-right: 0.55em;
    }

    .jh-plane-tabs {
        gap: 0.35em;
    }

    .jh-plane-tab {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.35em;
        padding-right: 0.35em;
    }

    .jh-family-layout {
        grid-template-columns: 1fr;
        gap: 0.6em;
    }

    .jh-family-tabs {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.2em;
    }

    .jh-family-tab {
        flex: 0 0 auto;
    }

    .jh-goto-grid {
        grid-template-columns: 1fr;
        gap: 0.55em;
    }

    .jh-goto-grid>.fb-action {
        grid-template-columns: minmax(0, 1fr) minmax(4.5em, auto);
    }
}

/* Name frame v5: transparent frame with orbiting dragon. */
.nameframe {
    --nf-border: #e2ba42;
    --nf-dragon: #d9a52c;
    --nf-dragon-light: #fff0a6;
    --nf-shadow: rgba(232, 188, 68, 0.45);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 10em;
    max-width: min(42em, calc(100vw - 6em));
    min-height: 1.75em;
    padding: 0.12em 2.55em 0.14em 0.82em;
    border: 1px solid var(--nf-border);
    border-radius: 0.09em;
    color: inherit;
    background: transparent !important;
    box-shadow:
        0 0 0.1em rgba(255, 255, 255, 0.18),
        0 0 0.26em var(--nf-shadow);
    overflow: visible;
    transform: none;
}

.nameframe.nameframe-dragon-gold {
    --nf-border: #e2ba42;
    --nf-dragon: #d9a52c;
    --nf-dragon-light: #fff0a6;
    --nf-shadow: rgba(232, 188, 68, 0.45);
}

.nameframe.nameframe-dragon-green {
    --nf-border: #76c861;
    --nf-dragon: #4fbf78;
    --nf-dragon-light: #d7ffd1;
    --nf-shadow: rgba(104, 211, 112, 0.38);
}

.nameframe.nameframe-dragon-red {
    --nf-border: #c64f4c;
    --nf-dragon: #db5a3f;
    --nf-dragon-light: #ffe0cc;
    --nf-shadow: rgba(219, 74, 55, 0.36);
}

.nameframe.nameframe-dragon-purple {
    --nf-border: #a96ad9;
    --nf-dragon: #b66dff;
    --nf-dragon-light: #f1d6ff;
    --nf-shadow: rgba(177, 104, 229, 0.38);
}

.nameframe.nameframe-dragon-blue {
    --nf-border: #57b8dd;
    --nf-dragon: #4faeea;
    --nf-dragon-light: #d6f5ff;
    --nf-shadow: rgba(71, 174, 226, 0.38);
}

.nameframe[class*="nameframe-dragon-"]::before,
.nameframe[class*="nameframe-dragon-"]::after {
    content: "";
    position: absolute;
    display: block !important;
    box-sizing: border-box;
    border-radius: inherit;
    pointer-events: none;
    background: transparent !important;
}

.nameframe.nameframe-dragon-gold::before {
    inset: 0.16em 0.34em;
    border-top: 1px solid color-mix(in srgb, var(--nf-dragon-light) 64%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--nf-dragon-light) 52%, transparent);
}

.nameframe.nameframe-dragon-gold::after {
    inset: -0.11em -0.14em;
    border: 1px solid color-mix(in srgb, var(--nf-border) 34%, transparent);
}

.nameframe.nameframe-dragon-green {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--nf-border) 28%, transparent),
        0 0 0.1em rgba(255, 255, 255, 0.14),
        0 0 0.24em var(--nf-shadow);
}

.nameframe.nameframe-dragon-green::before {
    inset: -0.14em 0.18em;
    border-top: 1px solid color-mix(in srgb, var(--nf-border) 62%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--nf-border) 42%, transparent);
}

.nameframe.nameframe-dragon-green::after {
    inset: 0.2em 0.55em;
    border-left: 1px solid color-mix(in srgb, var(--nf-dragon-light) 58%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--nf-dragon-light) 58%, transparent);
}

.nameframe.nameframe-dragon-red {
    border-width: 1px 2px;
}

.nameframe.nameframe-dragon-red::before {
    inset: -0.12em -0.22em;
    border-left: 2px solid color-mix(in srgb, var(--nf-border) 78%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--nf-border) 78%, transparent);
}

.nameframe.nameframe-dragon-red::after {
    inset: 0.16em 0.32em;
    border-top: 1px solid color-mix(in srgb, var(--nf-dragon-light) 48%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--nf-dragon-light) 42%, transparent);
}

.nameframe.nameframe-dragon-purple::before {
    inset: -0.13em 0.28em;
    border-top: 1px solid color-mix(in srgb, var(--nf-dragon-light) 62%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--nf-dragon-light) 50%, transparent);
    transform: skewX(-8deg);
}

.nameframe.nameframe-dragon-purple::after {
    inset: 0.12em 0.08em;
    border: 1px solid color-mix(in srgb, var(--nf-border) 24%, transparent);
}

.nameframe.nameframe-dragon-blue {
    border-radius: 0.14em;
}

.nameframe.nameframe-dragon-blue::before {
    inset: 0.12em 0.22em;
    border: 1px solid color-mix(in srgb, var(--nf-dragon-light) 38%, transparent);
}

.nameframe.nameframe-dragon-blue::after {
    inset: -0.16em 0.44em;
    border-top: 1px solid color-mix(in srgb, var(--nf-border) 56%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--nf-border) 56%, transparent);
}

.nameframe[class*="nameframe-dragon-"] .nameframe-text,
.nameframe-text {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: inherit;
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: 0;
    color: inherit;
    text-shadow: inherit;
    animation: none !important;
    filter: none !important;
}

.nameframe-dragon-mark {
    position: absolute;
    z-index: 4;
    left: 0.16em;
    right: auto;
    top: -0.56em;
    display: block;
    width: 2.36em;
    height: 1.08em;
    pointer-events: none;
    opacity: 0.96;
    filter: drop-shadow(0 0 0.13em var(--nf-shadow));
    animation: nameframe-v5-dragon-orbit 9.6s linear infinite;
    transform-origin: 50% 50%;
}

.nameframe.nameframe-dragon-green .nameframe-dragon-mark {
    width: 2.2em;
    height: 1.02em;
    animation-duration: 10.8s;
}

.nameframe.nameframe-dragon-red .nameframe-dragon-mark {
    width: 2.46em;
    animation-duration: 8.9s;
}

.nameframe.nameframe-dragon-purple .nameframe-dragon-mark {
    width: 2.28em;
    animation-direction: reverse;
    animation-duration: 10.2s;
}

.nameframe.nameframe-dragon-blue .nameframe-dragon-mark {
    width: 2.16em;
    height: 1.04em;
    animation-duration: 11.4s;
}

.nameframe-dragon-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: nameframe-v5-dragon-flex 1.9s ease-in-out infinite;
    transform-origin: 50% 50%;
}

.nameframe-dragon-cloud,
.nameframe-dragon-body,
.nameframe-dragon-belly,
.nameframe-dragon-ridge,
.nameframe-dragon-claw,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nameframe-dragon-cloud {
    stroke: color-mix(in srgb, var(--nf-dragon-light) 42%, transparent);
    stroke-width: 5.4;
}

.nameframe-dragon-body {
    stroke: var(--nf-dragon);
    stroke-width: 5.4;
}

.nameframe-dragon-belly {
    stroke: var(--nf-dragon-light);
    stroke-width: 1.7;
}

.nameframe-dragon-ridge,
.nameframe-dragon-horn,
.nameframe-dragon-whisker {
    stroke: var(--nf-dragon-light);
    stroke-width: 1.55;
}

.nameframe-dragon-claw {
    stroke: color-mix(in srgb, var(--nf-dragon-light) 88%, white);
    stroke-width: 1.75;
    animation: nameframe-v5-dragon-claw 1.55s ease-in-out infinite;
}

.nameframe-dragon-head {
    fill: var(--nf-dragon);
    stroke: var(--nf-dragon-light);
    stroke-width: 1.35;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: 50% 58%;
    animation: nameframe-v5-dragon-nod 1.75s ease-in-out infinite;
}

.nameframe-dragon-eye {
    fill: #fff8d8;
}

.nameframe-preview {
    min-width: 11.8em;
    max-width: 11.8em;
    min-height: 1.9em;
    padding: 0.13em 2.45em 0.13em 0.72em;
    font-size: 1em;
}

.nameframe-preview .nameframe-dragon-mark {
    width: 2.12em;
    height: 1em;
    animation-duration: 9.6s;
}

.nameframe-picker {
    margin: 0.3em 0 0.45em;
}

.nameframe-picker-commands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42em;
    margin-top: 0.42em;
    text-align: left;
}

.nameframe-picker-commands .nameframe-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-height: 2.35em;
    margin: 0;
    padding: 0.1em;
    cursor: pointer;
    border: 1px solid rgba(210, 210, 210, 0.42);
    border-radius: 0.1em;
    background: transparent !important;
}

.nameframe-choice-dragon-gold { border-color: rgba(226, 186, 66, 0.55) !important; }
.nameframe-choice-dragon-green { border-color: rgba(118, 200, 97, 0.55) !important; }
.nameframe-choice-dragon-red { border-color: rgba(198, 79, 76, 0.55) !important; }
.nameframe-choice-dragon-purple { border-color: rgba(169, 106, 217, 0.55) !important; }
.nameframe-choice-dragon-blue { border-color: rgba(87, 184, 221, 0.55) !important; }

.nameframe-picker-commands .nameframe-choice * {
    pointer-events: none;
}

.nameframe-picker-commands .nameframe-choice.selected {
    border-color: rgba(232, 188, 68, 0.95) !important;
    box-shadow: 0 0 0.28em rgba(232, 188, 68, 0.45);
}

.nameframe-picker-commands .nameframe-choice.selected::after {
    display: none;
}

.nameframe-choice-none-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6em;
    min-height: 1.75em;
    padding: 0 0.8em;
    color: #bfbfbf;
    border: 1px solid rgba(180, 180, 180, 0.36);
    border-radius: 0.08em;
    background: transparent !important;
    text-shadow: none;
}

@keyframes nameframe-v5-dragon-orbit {
    0%, 100% {
        left: 0.16em;
        top: -0.56em;
        opacity: 0.98;
        transform: scaleX(1) rotate(-4deg);
        z-index: 4;
    }
    24% {
        left: calc(100% - 2.54em);
        top: -0.56em;
        opacity: 1;
        transform: scaleX(1) rotate(5deg);
        z-index: 4;
    }
    35% {
        left: calc(100% - 2.54em);
        top: calc(100% - 0.46em);
        opacity: 0.84;
        transform: scaleX(-1) rotate(4deg);
        z-index: 1;
    }
    62% {
        left: 0.16em;
        top: calc(100% - 0.46em);
        opacity: 0.82;
        transform: scaleX(-1) rotate(-5deg);
        z-index: 1;
    }
    76% {
        left: 0.16em;
        top: -0.56em;
        opacity: 0.96;
        transform: scaleX(1) rotate(-4deg);
        z-index: 4;
    }
}

@keyframes nameframe-v5-dragon-flex {
    0%, 100% { transform: skewX(-2deg) translateY(0); }
    50% { transform: skewX(3deg) translateY(-0.03em) scaleY(0.96); }
}

@keyframes nameframe-v5-dragon-nod {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-0.04em); }
}

@keyframes nameframe-v5-dragon-claw {
    0%, 100% { stroke-width: 1.55; }
    50% { stroke-width: 2.05; }
}

/* Name frame v6: only five-claw golden dragon keeps the dragon animation. */
.nameframe[class*="nameframe-dragon-"]::before,
.nameframe[class*="nameframe-dragon-"]::after {
    content: none !important;
    display: none !important;
}

.nameframe:not(.nameframe-dragon-gold) {
    padding: 0.12em 0.82em 0.14em;
    box-shadow:
        0 0 0.08em rgba(255, 255, 255, 0.14),
        0 0 0.18em var(--nf-shadow);
}

.nameframe:not(.nameframe-dragon-gold) .nameframe-dragon-mark {
    display: none !important;
}

.nameframe:not(.nameframe-dragon-gold).nameframe-preview {
    padding: 0.13em 0.72em;
}
.signinfo {
    position: absolute;
    bottom: 1em;
    color: #333;
    font-size: 0.5rem;
    left: 0px;
    right: 0px;
    text-align: center;
}

.signinfo>a {
    color: #333;
}

.dialog {
    width: 100%;
    z-index: 10;
    background-color: #000;
}

.dialog>.dialog-header {
    height: 2.5em;
    line-height: 2.5em;
    background-color: #222;
    padding-left: 0.5em;
    display: flex;
    flex-direction: row;
}

.dialog>.dialog-content {
    overflow: auto;
    width: 100%;
}

.dialog>.dialog-content .item-commands {
    text-align: center;
}


.dialog>.dialog-header>.dialog-title {
    color: #808000;
    font-weight: bold;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.dialog>.dialog-header>.dialog-icon {
    color: #808000;
    margin-top: 0.65em;
    margin-right: 0.25em;
}

.dialog>.dialog-header>.dialog-close {
    line-height: 2em;
    color: gray;
    cursor: pointer;
    font-size: 1.25em;
    margin-right: 4px;
}

.dialog>.dialog-footer>.trade_btn {
    float: right;
    border-left: solid 1px gray;
    display: inline-block;
    text-align: center;
    width: 120px;
    height: 1.875em;
    line-height: 1.875em;
}

.dialog>.dialog-footer>.ok {
    color: #00FFFF;
}


.dialog>.dialog-footer {
    background-color: #222;
    white-space: nowrap;
    height: 2.5em;
    user-select: none;
    line-height: 2.5em;
}

.dialog>.dialog-footer>.item-commands {
    float: right;
    margin-right: 2px;
    padding-bottom: 0px;
}

.dialog>.dialog-footer>.item-commands>span {
    height: 2em;
    line-height: 2em;
    padding: 0 0.5em 0 0.5em;
    margin: 0;
    margin-left: 1em;
}

.dialog>.dialog-footer>.footer-item {
    color: #bdc3c7;
    display: inline-block;
    width: 5em;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}


.dialog>.dialog-footer>.eq-group {
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background-color: #111;
    line-height: 2em;
    margin-left: 1em;
    margin-top: 0.25em;
}

.dialog>.dialog-footer>.channel-item {

    width: 4em;
}



.dialog>.dialog-footer>.select {
    background-color: #555;
    color: #bdc3c7;
}


.dialog>.dialog-footer>.sk-group {
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background-color: #111;
    line-height: 2em;
    margin-top: .25em;
    margin-right: 0.5em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    float: right
}

.dialog-score {
    min-width: 360px;
    height: 29em;
    padding-top: 0.5em;
}

.dialog-score>.score-section {
    line-height: 1em;
    padding-left: 0.5em;
    border-radius: 4px;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: gray;
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 0.5em;
    background-color: #111;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    position: relative;
}


.dialog-score .title {
    width: 4.375em;
    display: inline-block;
    line-height: 1.25em;
}

.dialog-score .value {
    width: 6em;
    display: inline-block;
    line-height: 1.25em;
}

.dialog-score h3 {
    color: #C0C0C0;
    margin: 0.625em;
    border-top: 1px solid #343434;
    border-bottom: 1px solid #343434;
    font-size: 1em;
    line-height: 2em;
}

.dialog-score2 {
    min-width: 360px;
    height: 29em;
    padding-top: 0.5em;
}

.dialog-score2 .title {
    width: 8em;
    display: inline-block;
    line-height: 1.6em;
}

.dialog-score2 .value {
    display: inline-block;
    line-height: 1.6em;
    color: #00ff00;
}

.dialog-score2 h3 {
    color: #C0C0C0;
    margin: 0.625em;
    border-top: 1px solid #343434;
    border-bottom: 1px solid #343434;
    font-size: 1em;
}

.dialog-titles {
    min-width: 360px;
    height: 29em;
    padding-top: 0.5em;
}

.dialog-titles>.title-item {
    line-height: 2em;
    padding-left: 1.5em;
    border-radius: 4px;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: gray;
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 0.5em;
    background-color: #111;
}

.dialog-titles>.selected {
    border-left-color: #00FF00;
}

.dialog-titles>.title-item>.btn-noused {
    float: right;
    display: inline-block;
    color: #00ff00;
    padding-left: 2em;
    background-color: #343434;
    padding-right: 2em;
    border-left: 1px solid #121212;
    cursor: pointer;
}

.dialog-titles>.empty {
    color: gray;
    padding-left: 1.4em;
    line-height: 2em;
}

@media (min-width: 1536px) {
    body.dialog-side-docked .container>.dialog {
        position: fixed;
        top: 0.5rem;
        right: calc(50vw + 24rem + 0.75rem);
        display: flex;
        flex-direction: column;
        width: min(48rem, calc(50vw - 25.25rem));
        min-width: 0;
        max-width: 48rem;
        max-height: calc(100dvh - 1rem);
        margin: 0;
        overflow: hidden;
        border: 1px solid #3c454a;
    }

    body.dialog-side-docked.dialog-main-docked .container>.dialog {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: none;
        transform: none;
    }

    body.dialog-side-docked .container>.dialog>.dialog-header,
    body.dialog-side-docked .container>.dialog>.dialog-footer {
        flex: 0 0 auto;
    }

    body.dialog-side-docked .container>.dialog>.dialog-content {
        flex: 0 1 auto;
        min-height: 0;
        max-height: calc(100dvh - 6rem);
        overflow: auto;
    }
}
.dialog-wdww {
    --wdww-accent: #36c7b4;
    --wdww-danger: #df6470;
    --wdww-ok: #74c77a;
    --wdww-panel: #15191c;
    --wdww-line: #3c454a;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 3.5rem);
    overflow: hidden;
    color: #e8ecee;
}

.wdww-dialog {
    height: auto;
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
}

.wdww-dialog > .dialog-content {
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 3.5rem);
    overflow: hidden;
}

.wdww-dialog > .dialog-footer:empty {
    display: none;
}

.wdww-tabs {
    display: flex;
    flex: 0 0 auto;
    overflow-x: auto;
    border-bottom: 1px solid var(--wdww-line);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.wdww-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.wdww-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.6rem;
    padding: 0 0.15rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #aeb8bd;
    cursor: pointer;
}

.wdww-tab.active {
    border-bottom-color: var(--wdww-accent);
    color: #fff;
}

.wdww-content {
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(100dvh - 6.1rem);
    overflow: auto;
    padding: 0.75rem;
}

.wdww-band {
    width: 100%;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--wdww-line);
}

.wdww-band:last-child {
    border-bottom: 0;
}

.wdww-band h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 600;
}

.wdww-status-band,
.wdww-command-row,
.wdww-running-row,
.wdww-pane-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wdww-status-band,
.wdww-running-row {
    justify-content: space-between;
}

.wdww-status-band > div,
.wdww-running-row > span:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.wdww-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    min-width: 5.25rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #526069;
    border-radius: 4px;
    background: #252c30;
    color: #f0f3f4;
    cursor: pointer;
}

.wdww-button:hover,
.wdww-list-row:hover,
.wdww-icon-button:hover,
.wdww-definition-action:hover {
    border-color: var(--wdww-accent);
    background: #2b3538;
}

.wdww-button.disabled {
    pointer-events: none;
    opacity: 0.45;
}

.wdww-stop-all,
.wdww-delete-flow,
.wdww-delete-trigger,
.wdww-reset-settings {
    border-color: #8f4850;
    color: #ffdce0;
}

.wdww-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
    gap: 0.5rem;
}

.wdww-action-grid .wdww-button {
    width: 100%;
}

.wdww-running-list {
    display: grid;
    gap: 0.35rem;
}

.wdww-running-row {
    min-height: 2.65rem;
    padding: 0.35rem 0.5rem;
    background: var(--wdww-panel);
    border-left: 3px solid var(--wdww-accent);
}

.wdww-running-row .wdww-button {
    min-width: 4.5rem;
    min-height: 2rem;
}

.wdww-state-dot {
    display: inline-block;
    flex: 0 0 0.55rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #7d898f;
}

.wdww-state-dot.running {
    background: var(--wdww-ok);
}

.wdww-state-dot.blocked {
    background: var(--wdww-danger);
}

.wdww-state-dot.ready {
    background: #e8b55c;
}

.wdww-muted {
    margin-left: 0.5rem;
    color: #9aa6ab;
}

.wdww-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.wdww-tag {
    padding: 0.2rem 0.5rem;
    border: 1px solid #53636a;
    border-radius: 4px;
    background: #20272b;
}

.wdww-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.8rem;
}

.wdww-trigger-fields {
    display: contents;
}

.wdww-form-grid label,
.wdww-editor-pane > label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    color: #cbd2d5;
}

.wdww-form-grid label.wide {
    grid-column: 1 / -1;
}

.wdww-form-grid label.wdww-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
}

.wdww-mode-field {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.wdww-mode-field legend {
    margin-bottom: 0.25rem;
    color: #cbd2d5;
}

.wdww-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 22rem;
    border: 1px solid #4a565c;
    border-radius: 4px;
    overflow: hidden;
}

.wdww-segmented label {
    display: block;
    cursor: pointer;
}

.wdww-segmented label + label {
    border-left: 1px solid #4a565c;
}

.dialog-wdww .wdww-segmented input {
    position: absolute;
    width: 1px;
    min-height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wdww-segmented span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.35rem 0.6rem;
    background: #0f1315;
    color: #b8c1c5;
}

.wdww-segmented input:checked + span {
    background: #284641;
    color: #f4fffd;
}

.wdww-segmented input:focus-visible + span {
    outline: 2px solid var(--wdww-accent);
    outline-offset: -2px;
}

.wdww-task-actions {
    margin-top: 0.8rem;
}

.dialog-wdww input,
.dialog-wdww select,
.dialog-wdww textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.2rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid #4a565c;
    border-radius: 4px;
    background: #0f1315;
    color: #f1f3f4;
}

.dialog-wdww input[type="checkbox"] {
    width: 1.1rem;
    min-height: 1.1rem;
    accent-color: var(--wdww-accent);
}

.dialog-wdww textarea {
    min-height: 4.75rem;
    resize: vertical;
}

#wdww-flow-source,
#wdww-trigger-source {
    min-height: 17rem;
    font-family: Consolas, monospace;
    line-height: 1.45;
    white-space: pre;
}

.wdww-command-row {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}

.wdww-definition-list,
.wdww-editor-page {
    min-width: 0;
}

.wdww-list-toolbar,
.wdww-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.wdww-list-toolbar {
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

.wdww-definition-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.wdww-definition-grid > .wdww-empty {
    grid-column: 1 / -1;
}

.wdww-definition-row {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
    align-items: center;
    min-width: 0;
    min-height: 2.75rem;
    border: 1px solid #394247;
    border-radius: 4px;
    background: #151a1d;
    overflow: hidden;
}

.wdww-definition-row.active {
    border-color: #43877e;
    background: #1d292a;
}

.wdww-icon-button,
.wdww-definition-action {
    height: 100%;
    min-height: 2.65rem;
    border: 0;
    background: transparent;
    color: #dfe4e6;
    cursor: pointer;
}

.wdww-icon-button {
    width: 2.2rem;
    border-right: 1px solid #394247;
    color: #aeb9bd;
}

.wdww-definition-action {
    min-width: 0;
    padding: 0.35rem 0.5rem;
    overflow: hidden;
    text-align: left;
}

.wdww-definition-action > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdww-definition-action:disabled {
    cursor: default;
    color: #fff;
}

.wdww-definition-action:disabled:hover {
    background: transparent;
}

.wdww-flow-list-stop {
    border-right: 0;
    border-left: 1px solid #394247;
    color: #ffdce0;
}

.wdww-definition-row > .wdww-state-dot {
    justify-self: center;
}

.wdww-editor-page {
    border: 1px solid var(--wdww-line);
}

.wdww-editor-toolbar {
    min-height: 2.75rem;
    border-bottom: 1px solid var(--wdww-line);
    background: #111517;
}

.wdww-editor-toolbar .wdww-icon-button {
    align-self: stretch;
}

.wdww-split {
    display: grid;
    grid-template-columns: minmax(10rem, 28%) minmax(0, 1fr);
    min-height: 24rem;
    border: 1px solid var(--wdww-line);
}

.wdww-list-pane {
    overflow: auto;
    border-right: 1px solid var(--wdww-line);
    background: #111517;
}

.wdww-pane-tools {
    justify-content: flex-end;
    padding: 0.45rem;
    border-bottom: 1px solid var(--wdww-line);
}

.wdww-pane-tools .wdww-button {
    min-width: 4.75rem;
    min-height: 2rem;
}

.wdww-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.65rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-bottom: 1px solid #30383c;
    background: transparent;
    color: #dfe4e6;
    text-align: left;
    cursor: pointer;
}

.wdww-list-row.active {
    background: #233033;
    color: #fff;
    box-shadow: inset 3px 0 var(--wdww-accent);
}

.wdww-editor-pane {
    min-width: 0;
    padding: 0.7rem;
    overflow: auto;
}

.wdww-diagnostics,
.wdww-valid {
    margin-top: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-left: 3px solid var(--wdww-danger);
    background: #2b1a1d;
    color: #ffd6da;
}

.wdww-valid {
    border-left-color: var(--wdww-ok);
    background: #17251c;
    color: #d8f4dc;
}

.wdww-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    color: #9aa6ab;
    text-align: center;
}

.wdww-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--wdww-line);
    border-left: 1px solid var(--wdww-line);
}

.wdww-metric-grid > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.55rem;
    border-right: 1px solid var(--wdww-line);
    border-bottom: 1px solid var(--wdww-line);
}

.wdww-metric-grid span,
.wdww-last-gain {
    color: #9aa6ab;
}

.wdww-metric-grid strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdww-last-gain,
.wdww-notice {
    margin-top: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-left: 3px solid var(--wdww-accent);
    background: #172326;
}

.wdww-notice {
    border-left-color: #e3b341;
    background: #292415;
    color: #ffe2a3;
}

.wdww-ecosystem,
.wdww-wiki {
    min-width: 0;
}

.wdww-section-heading,
.wdww-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.wdww-section-heading h3 {
    margin: 0;
}

.wdww-cloud-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--wdww-line);
    border-left: 1px solid var(--wdww-line);
}

.wdww-cloud-category {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    min-height: 3.1rem;
    padding: 0.45rem;
    border-right: 1px solid var(--wdww-line);
    border-bottom: 1px solid var(--wdww-line);
}

.wdww-cloud-category small {
    grid-column: 2;
    overflow: hidden;
    color: #8e9ca2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdww-ecosystem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.6rem;
}

.wdww-ecosystem-grid label,
.wdww-command-row label {
    display: grid;
    gap: 0.25rem;
    min-width: 8rem;
}

.wdww-ecosystem-list {
    margin-top: 0.65rem;
    border-top: 1px solid var(--wdww-line);
}

.wdww-ecosystem-row {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    border-bottom: 1px solid var(--wdww-line);
}

.wdww-ecosystem-item {
    display: grid;
    flex: 1 1 auto;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.6rem 0.35rem;
    border: 0;
    background: transparent;
    color: #eef2f3;
    text-align: left;
    cursor: pointer;
}

.wdww-ecosystem-item:hover {
    background: #20292d;
}

.wdww-ecosystem-item span,
.wdww-ecosystem-item small {
    overflow: hidden;
    color: #a7b2b7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdww-tags-text {
    color: #e3b85b !important;
}

.wdww-ecosystem-preview pre,
.wdww-wiki pre {
    max-width: 100%;
    max-height: 22rem;
    overflow: auto;
    padding: 0.65rem;
    border: 1px solid #465258;
    border-radius: 4px;
    background: #0d1113;
    color: #dce8e6;
    font-family: Consolas, monospace;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wdww-preview-meta {
    justify-content: flex-start;
    color: #aeb9bd;
}

.wdww-preview-meta strong {
    color: #fff;
}

.wdww-wiki-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--wdww-line);
}

.wdww-wiki-section h2,
.wdww-wiki-section h3,
.wdww-wiki-section p {
    margin: 0 0 0.6rem;
}

.wdww-wiki-command {
    display: grid;
    grid-template-columns: 6rem minmax(12rem, 1.2fr) minmax(16rem, 2fr);
    gap: 0.6rem;
    align-items: start;
    padding: 0.55rem 0;
    border-top: 1px solid #30393d;
}

.wdww-wiki-command code,
.wdww-wiki-section code {
    color: #86d8ca;
    overflow-wrap: anywhere;
}

.wdww-wiki-command p {
    color: #bdc7cb;
}

.wdww-wiki-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.wdww-wiki-example {
    min-width: 0;
}

@media (max-width: 1535px) {
    body.wdww-bottom-docked .container > .wdww-dialog {
        position: fixed;
        left: 50%;
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        width: min(100vw, 48rem);
        min-width: 0;
        max-width: 100vw;
        max-height: 45dvh;
        margin: 0;
        overflow: hidden;
        border: 1px solid #3c454a;
        background: #000;
        transform: translateX(-50%);
    }

    body.wdww-bottom-docked .container > .wdww-dialog > .dialog-content {
        flex: 0 1 auto;
        max-height: calc(45dvh - 2.5em);
    }

    body.wdww-bottom-docked .dialog-wdww {
        max-height: calc(45dvh - 2.5em);
    }

    body.wdww-bottom-docked .wdww-content {
        max-height: calc(45dvh - 5.1rem);
    }
}

@media (max-width: 700px) {
    .wdww-content {
        padding: 0.5rem;
    }

    .wdww-form-grid,
    .wdww-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .wdww-list-pane {
        max-height: 10rem;
        border-right: 0;
        border-bottom: 1px solid var(--wdww-line);
    }

    .wdww-form-grid label.wide {
        grid-column: auto;
    }

    .wdww-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wdww-cloud-categories,
    .wdww-wiki-examples {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wdww-ecosystem-grid,
    .wdww-wiki-command {
        grid-template-columns: minmax(0, 1fr);
    }

    .wdww-ecosystem-row {
        align-items: center;
    }
}

.wdww-skill-estimate {
    display: block;
    margin-top: 0.2rem;
    color: #74c7ba;
    font-size: 0.82rem;
}

.wdww-input-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(8 12 14 / 72%);
}

.wdww-input-dialog {
    display: grid;
    gap: 0.8rem;
    width: min(26rem, 100%);
    padding: 1rem;
    border: 1px solid #465156;
    border-radius: 6px;
    background: #1d2427;
    color: #f2f5f6;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 40%);
}

.wdww-input-dialog h3 {
    margin: 0;
    font-size: 1rem;
}

.wdww-input-control {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid #58666c;
    border-radius: 4px;
    background: #111719;
    color: #fff;
}

.wdww-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}