/* 从末日豌豆 33e9a16 的 css/main.css 摘出来：:root 变量、照镜子页（.cc2）、立绘（.npc-bust） */
:root {
    
    --m-base: #c4bdb6;
    --m-card: #d8d2cc;
    --m-elevated: #e2ddd7;
    --m-text: #565049;
    --m-text-2: #635d57;
    --m-muted: #827c76;
    --m-line: rgba(90, 84, 78, 0.1);

    
    --m-red: #b07a78;
    --m-orange: #b89a72;
    --m-blue: #7a92aa;
    --m-pink: #c495a2;
    --m-purple: #8a7aa4;
    --m-green: #7a9a82;
    --m-yellow: #b0a070;

    
    --glass-blur: blur(6px);
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-shadow: none;
    --glass-inset: none;
    
    --glass-2: rgba(255, 255, 255, 0.72);      
    --glass-bar: rgba(255, 255, 255, 0.68);    
    --track-bg: rgba(255, 255, 255, 0.55);     
    --tab-on-bg: rgba(255, 255, 255, 0.85);    
    --tab-on-fg: var(--m-text);
    --tab-on-bd: rgba(255, 255, 255, 0.9);

    
    --radius: 16px;
    --radius-sm: 10px;

    
    --ease: 0.2s ease;

    
    --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
        'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
    --font-display: 'Songti SC', 'STSong', 'Noto Serif CJK SC', 'Noto Serif SC',
        'Source Han Serif SC', 'SimSun', serif;
}

:root {
    --ease-game: cubic-bezier(.22, .61, .36, 1);
    --dur-press: .12s;
    --dur-enter: .26s;
    --dur-bar: .46s;
    --dur-veil: .56s;
}

.npc-bust {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 500 / 590;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(122, 146, 170, 0.08), rgba(122, 146, 170, 0.02));
}

.npc-bust img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.npc-bust:empty::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
}

.dlg-figure .npc-bust {
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.cc2 {
    padding: 0;
    overflow: hidden;
    
    background:
        radial-gradient(118% 52% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, rgba(226, 221, 214, 0.52) 0%, rgba(216, 210, 204, 0.84) 30%,
            rgba(221, 216, 210, 0.95) 58%, rgba(226, 221, 215, 1) 100%),
        url('../assets/bg_wasteland.webp?v=202611061828') center top / 100% auto no-repeat,
        linear-gradient(145deg, var(--m-base) 0%, var(--m-card) 50%, var(--m-elevated) 100%);
}

.cc2-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 18px 4px;
}

.cc2-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--m-text);
}

.cc2-brand-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--m-blue), var(--m-purple));
    box-shadow: 0 0 0 4px rgba(122, 146, 170, 0.16);
}

.cc2-count {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--m-muted);
    font-variant-numeric: tabular-nums;
}

.cc2-count b {
    font-size: 15px;
    font-weight: 800;
    color: var(--m-blue);
    margin-right: 1px;
}

.cc2-crumb {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 18px 0;
}

.cc2-crumb-title {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--m-text);
    line-height: 1.15;
}

.cc2-crumb-right {
    text-align: right;
    padding-bottom: 3px;
}

.cc2-crumb-en {
    display: block;
    font-size: 9px;
    letter-spacing: 2.4px;
    color: var(--m-blue);
    opacity: 0.85;
}

.cc2-crumb-hint {
    display: block;
    font-size: 10px;
    color: var(--m-muted);
    margin-top: 3px;
    letter-spacing: 0.4px;
}

.cc2-bars {
    display: flex;
    gap: 5px;
    padding: 9px 18px 0;
}

.cc2-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(90, 84, 78, 0.12);
    cursor: pointer;
    transition: all 0.25s ease;
}

.cc2-bar.done {
    background: rgba(122, 146, 170, 0.45);
}

.cc2-bar.on {
    background: linear-gradient(90deg, var(--m-blue), var(--m-purple));
    box-shadow: 0 0 8px rgba(122, 146, 170, 0.5);
}

.cc2-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 18px 14px;
    -webkit-overflow-scrolling: touch;
}

.cc2-main::-webkit-scrollbar {
    display: none;
}

.cc2-main {
    scrollbar-width: none;
}

.cc2-main.cc-in > * {
    animation: ccStepIn 0.36s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

.cc2-look {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.cc2-stage {
    position: relative;
    height: min(34vh, 306px);
    padding: 6px 0 14px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: radial-gradient(122% 80% at 50% 20%, rgba(255, 255, 255, 0.92),
            rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0.16) 76%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 14px 34px rgba(90, 84, 78, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cc2-stage-glow {
    position: absolute;
    left: 50%;
    top: 14%;
    width: 200px;
    height: 200px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 146, 170, 0.2), rgba(122, 146, 170, 0) 68%);
    pointer-events: none;
}

.cc2-stage-floor {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 128px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 84, 78, 0.22), rgba(90, 84, 78, 0) 72%);
    filter: blur(3px);
    pointer-events: none;
}

.cc2-figure {
    position: relative;
    height: 100%;
    width: auto;
    max-width: 82%;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(90, 84, 78, 0.2));
    animation: ccFloat 5.4s ease-in-out infinite;
}

.cc2-figure-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--m-muted);
}

.cc2-dice {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--m-text-2);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(90, 84, 78, 0.14);
    transition: all var(--ease);
}

.cc2-dice:hover {
    background: #fff;
    color: var(--m-blue);
}

.cc2-dice:active {
    transform: scale(0.95);
}

.cc2-gender {
    display: flex;
    gap: 8px;
}

.cc2-gb {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--m-text-2);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all var(--ease);
}

.cc2-gb.on {
    border-color: var(--m-blue);
    background: rgba(122, 146, 170, 0.16);
    color: var(--m-blue);
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(122, 146, 170, 0.1);
}

.cc2-tabs {
    display: flex;
    gap: 6px;
}

.cc2-tab {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--m-text-2);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--ease);
}

.cc2-tab.on {
    background: linear-gradient(120deg, var(--m-blue), var(--m-purple));
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(122, 146, 170, 0.3);
}

.cc2-panel {
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 12px 12px 14px;
    box-shadow: 0 10px 26px rgba(90, 84, 78, 0.08);
}

.cc2-panel.cc-in {
    animation: ccTabIn 0.28s ease both;
}

.cc2-row + .cc2-row {
    margin-top: 14px;
}

.cc2-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cc2-row-name {
    position: relative;
    padding-left: 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--m-text);
}

.cc2-row-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--m-blue), var(--m-purple));
}

.cc2-row-extra {
    font-size: 10px;
    color: var(--m-muted);
    letter-spacing: 0.5px;
}

.cc2-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.cc2-strip::-webkit-scrollbar {
    display: none;
}

.cc2-tile {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 74px;
    padding: 2px;
    border-radius: 13px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    transition: all var(--ease);
}

.cc2-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cc2-tile-ph {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(90, 84, 78, 0.06);
}

.cc2-tile.on {
    border-color: var(--m-blue);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(122, 146, 170, 0.28), 0 6px 14px rgba(122, 146, 170, 0.18);
}

.cc2-tile-tick {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--m-blue);
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    opacity: 0;
    transform: scale(0.6);
    transition: all var(--ease);
}

.cc2-tile.on .cc2-tile-tick {
    opacity: 1;
    transform: scale(1);
}

.cc2-tile-sq {
    width: 68px;
    height: 68px;
    border-radius: 15px;
}

.cc2-tile-sq img {
    object-fit: cover;
}

.cc2-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.cc2-sw {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(90, 84, 78, 0.18);
    transition: all var(--ease);
}

.cc2-sw.on {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m-blue), 0 4px 12px rgba(90, 84, 78, 0.2);
}

.cc2-sw-tick {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity var(--ease);
}

.cc2-sw.on .cc2-sw-tick {
    opacity: 1;
}

.cc2-sw-skin {
    width: 38px;
    height: 38px;
}

.cc2-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc2-chips i {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.5px;
    color: var(--m-muted);
    margin-right: 1px;
}

.cc2-chip {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(90, 84, 78, 0.16);
    transition: all var(--ease);
}

.cc2-chip.on {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--m-blue);
}

.cc2-tip {
    margin-top: 12px;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--m-muted);
}

.cc2-who-cast {
    position: relative;
    
    height: 306px;
    margin: 0 -14px 2px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cc2-who-glow {
    position: absolute;
    left: 50%;
    top: 26%;
    width: 260px;
    height: 260px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 247, 234, 0.95),
            rgba(255, 247, 234, 0.42) 52%, rgba(255, 247, 234, 0) 74%);
    pointer-events: none;
}

.cc2-who-fig {
    position: relative;
    display: block;
    
    width: 250px;
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 12px 20px rgba(90, 84, 78, 0.18));
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 15%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 15%);
    animation: ccFloat 5.4s ease-in-out infinite;
}

.cc2-who-fig-ph {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--m-muted);
    animation: none;
}

.cc2-sec {
    padding-top: 14px;
}

.cc2-sec-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--m-text);
}

.cc2-sec-sub {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--m-muted);
}

.cc2-sec-title .cc-points {
    margin-left: auto;
}

.cc2-namewrap {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cc2-namepair {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
}

.cc2-input-half {
    min-width: 0;
    text-align: center;
}

.cc2-input#cc2Surname { flex: 0 0 34%; }

.cc2-birth {
    display: flex;
    gap: 10px;
}

.cc2-sel {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--m-text);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    
    background-image: linear-gradient(45deg, transparent 50%, var(--m-muted) 50%),
                      linear-gradient(135deg, var(--m-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.cc2-mini {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px rgba(90, 84, 78, 0.16);
}

.cc2-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc2-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--m-text);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    outline: none;
    transition: all var(--ease);
}

.cc2-input:focus {
    border-color: var(--m-blue);
    box-shadow: 0 0 0 3px rgba(122, 146, 170, 0.15);
}

.cc2-input::placeholder {
    color: var(--m-muted);
}

.cc2-mini-btn {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--m-text-2);
    font-family: inherit;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ease);
}

.cc2-mini-btn:hover {
    background: #fff;
    color: var(--m-blue);
}

.cc2-mini-btn:active {
    transform: scale(0.97);
}

.cc2-abgroup {
    margin-bottom: 12px;
}

.cc2-abgroup-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.cc2-abgroup-name {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.cc2-abgroup-count {
    font-size: 10.5px;
    color: var(--m-muted);
}

.cc2-bodygrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cc2-bt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 4px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--ease);
}

.cc2-bt-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--m-text);
}

.cc2-bt-meta {
    font-size: 9px;
    letter-spacing: 0.3px;
    color: var(--m-muted);
}

.cc2-bt:hover {
    background: rgba(255, 255, 255, 0.55);
}

.cc2-bt.on {
    border-color: var(--m-blue);
    background: rgba(122, 146, 170, 0.14);
    box-shadow: 0 0 0 3px rgba(122, 146, 170, 0.1);
}

.cc2-bt.on .cc2-bt-name {
    color: var(--m-blue);
}

.cc2-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.75;
    color: var(--m-text-2);
    background: rgba(122, 146, 170, 0.1);
    border: 1px solid rgba(122, 146, 170, 0.16);
}

.cc2-ability,
.cc2-fixedcard {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.cc2-ability.selected {
    cursor: pointer;
}

.cc2-tools {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.cc2-tools .cc2-mini-btn {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
}

.cc2-hint {
    margin: 0 2px 10px;
    font-size: 10.5px;
    line-height: 1.7;
    letter-spacing: 0.4px;
    color: var(--m-muted);
}

.cc2-attr {
    margin-bottom: 7px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    overflow: hidden;
    transition: all var(--ease);
}

.cc2-attr.open {
    border-color: rgba(122, 146, 170, 0.4);
    background: rgba(255, 255, 255, 0.72);
}

.cc2-attr-main {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
}

.cc2-attr-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--m-blue);
    opacity: 0.85;
}

.cc2-attr-name {
    flex: 1;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--m-text);
    cursor: pointer;
}

.cc2-attr-desc {
    padding: 0 12px 10px 39px;
    font-size: 10.5px;
    line-height: 1.75;
    color: var(--m-muted);
    animation: ccStepIn 0.22s ease both;
}

.cc2-quote {
    margin-top: 20px;
    padding: 14px 16px 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-display);
    font-size: 12.5px;
    line-height: 2;
    letter-spacing: 1px;
    text-align: center;
    color: var(--m-text-2);
}

.cc2-quote-sep {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto 9px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, var(--m-blue), transparent);
    opacity: 0.65;
}

.cc2-foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(226, 221, 215, 0), rgba(226, 221, 215, 0.88) 30%, rgba(226, 221, 215, 0.99));
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.cc2-foot-inner {
    display: flex;
    gap: 10px;
}

.cc2-foot-hint {
    font-size: 10.5px;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--m-red);
}

.cc2-ghost {
    flex: 0 0 96px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--m-text-2);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--ease);
}

.cc2-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.55);
}

.cc2-ghost:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.cc2-next {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(120deg, var(--m-blue), var(--m-purple));
    box-shadow: 0 10px 26px rgba(122, 146, 170, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all var(--ease);
}

.cc2-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(122, 146, 170, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cc2-next:active:not(:disabled) {
    transform: translateY(0);
}

.cc2-next.off,
.cc2-next:disabled {
    background: linear-gradient(120deg, var(--m-muted), var(--m-text-2));
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
}

.cc2-next-arrow {
    font-size: 17px;
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-height: 700px) {
  .cc2-stage { height: min(30vh, 250px); }
  .cc2-crumb-title { font-size: 22px; }
  .cc2-tile { width: 56px; height: 67px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc2-figure { animation: none; }
  .cc2-main.cc-in > *,
    .cc2-panel.cc-in,
    .cc2-attr-desc { animation: none; }
}

.fig-body .npc-bust {
    width: 262px;
    height: 328px;
    margin-bottom: 0;
    background: none;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

:root[data-theme="night"] .achv-badge,
:root[data-theme="night"] .achv-card.unlocked,
:root[data-theme="night"] .act-btn,
:root[data-theme="night"] .arena-result,
:root[data-theme="night"] .attr-bars,
:root[data-theme="night"] .attr-strip,
:root[data-theme="night"] .bag-card,
:root[data-theme="night"] .bag-cell,
:root[data-theme="night"] .pick-cell,
:root[data-theme="night"] .pick-name,
:root[data-theme="night"] .bag-eff,
:root[data-theme="night"] .bag-empty,
:root[data-theme="night"] .bag-gear-row,
:root[data-theme="night"] .bag-slot,
:root[data-theme="night"] .bet-chips button,
:root[data-theme="night"] .bet-col,
:root[data-theme="night"] .bet-col input,
:root[data-theme="night"] .bid-chip,
:root[data-theme="night"] .bid-log,
:root[data-theme="night"] .bid-manual input,
:root[data-theme="night"] .cc2-attr.open,
:root[data-theme="night"] .cc2-dice,
:root[data-theme="night"] .cc2-mini,
:root[data-theme="night"] .cc2-panel,
:root[data-theme="night"] .cc2-tile,
:root[data-theme="night"] .checkin-card.can,
:root[data-theme="night"] .dialog-sheet,
:root[data-theme="night"] .dlg-chip,
:root[data-theme="night"] .dlg-opt,
:root[data-theme="night"] .exp-opt,
:root[data-theme="night"] .enc-hero,
:root[data-theme="night"] .end-hero,
:root[data-theme="night"] .info-box,
:root[data-theme="night"] .item-effect,
:root[data-theme="night"] .item-figure,
:root[data-theme="night"] .journal-sheet,
:root[data-theme="night"] .kin-node,
:root[data-theme="night"] .log-list,
:root[data-theme="night"] .log-who,
:root[data-theme="night"] .lot,
:root[data-theme="night"] .map-spot-label,
:root[data-theme="night"] .mf-btn.mf-redo,
:root[data-theme="night"] .mf-cancel,
:root[data-theme="night"] .modal-backdrop.center .modal-sheet,
:root[data-theme="night"] .modal-content.glass-card,
:root[data-theme="night"] .modal-overlay .modal-content,
:root[data-theme="night"] .nra,
:root[data-theme="night"] .page-sheet,
:root[data-theme="night"] .panel-sheet,
:root[data-theme="night"] .people-card,
:root[data-theme="night"] .people-say,
:root[data-theme="night"] .quest-toast.achv-toast,
:root[data-theme="night"] .quest-toast.final,
:root[data-theme="night"] .rel-card,
:root[data-theme="night"] .rel-track,
:root[data-theme="night"] .round-list,
:root[data-theme="night"] .rt-fig,
:root[data-theme="night"] .rt-row,
:root[data-theme="night"] .rt-step-btn,
:root[data-theme="night"] .say-face,
:root[data-theme="night"] .sc-btn.ghost,
:root[data-theme="night"] .sc-card,
:root[data-theme="night"] .sc-chip,
:root[data-theme="night"] .sc-fighter,
:root[data-theme="night"] .sc-lot-img,
:root[data-theme="night"] .sc-rest-go,
:root[data-theme="night"] .sc-rest-img,
:root[data-theme="night"] .scene-hero-band,
:root[data-theme="night"] .scene-npc,
:root[data-theme="night"] .scene-say,
:root[data-theme="night"] .shenhe-btn,
:root[data-theme="night"] .shenhe-place,
:root[data-theme="night"] .soc-act,
:root[data-theme="night"] .soc-card,
:root[data-theme="night"] .tab-banner-action,
:root[data-theme="night"] .tab-bar .tab.on::after,
:root[data-theme="night"] .task-band .task-risk,
:root[data-theme="night"] .task-card,
:root[data-theme="night"] .title-off,
:root[data-theme="night"] .tl-tile,
:root[data-theme="night"] .vs-card,
:root[data-theme="night"] .vs-hp,
:root[data-theme="night"] .wallet-line {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

:root[data-theme="night"] .achv-badge.on,
:root[data-theme="night"] .cc2-tile.on,
:root[data-theme="night"] .panel-tab.on,
:root[data-theme="night"] .soc-filter.on,
:root[data-theme="night"] .title-card.on {
    background: var(--tab-on-bg) !important;
    border-color: var(--tab-on-bd);
    color: var(--tab-on-fg) !important;
}

:root[data-theme="night"] .action-tag:hover,
:root[data-theme="night"] .attr-btn:hover,
:root[data-theme="night"] .body-type-card:hover,
:root[data-theme="night"] .cc-ability-card:hover,
:root[data-theme="night"] .cc-body-card:hover,
:root[data-theme="night"] .cc2-bt:hover,
:root[data-theme="night"] .cc2-dice:hover,
:root[data-theme="night"] .cc2-ghost:hover:not(:disabled),
:root[data-theme="night"] .cc2-mini-btn:hover,
:root[data-theme="night"] .choice:hover,
:root[data-theme="night"] .dlg-opt:active,
:root[data-theme="night"] .soc-act:active {
    background: rgba(236, 228, 212, 0.10) !important;
}

:root[data-theme="night"] .cc2 {
    background: radial-gradient(118% 52% at 50% 0%, rgba(18, 24, 38, 0.55), rgba(18, 24, 38, 0) 62%),
        linear-gradient(180deg, rgba(18, 24, 38, 0.52) 0%, rgba(18, 24, 38, 0.84) 30%,
            rgba(18, 24, 38, 0.95) 58%, rgba(18, 24, 38, 1) 100%),
        url('../assets/bg_wasteland.webp?v=202611061828') center top / 100% auto no-repeat,
        linear-gradient(145deg, var(--m-base) 0%, var(--m-card) 50%, var(--m-elevated) 100%) !important;
}

:root[data-theme="night"] .cc2-foot {
    background: linear-gradient(180deg, rgba(18, 24, 38, 0), rgba(18, 24, 38, 0.88) 30%, rgba(18, 24, 38, 0.99)) !important;
}

:root[data-theme="night"] .cc2-stage {
    background: radial-gradient(122% 80% at 50% 20%, rgba(18, 24, 38, 0.92),
            rgba(18, 24, 38, 0.46) 50%, rgba(18, 24, 38, 0.16) 76%, rgba(18, 24, 38, 0) 100%) !important;
}

:root[data-theme="night"] .cc2-who-glow {
    background: radial-gradient(circle, rgba(255, 247, 234, 0.95),
            rgba(255, 247, 234, 0.42) 52%, rgba(255, 247, 234, 0) 74%) !important;
}

.rail-fig .npc-bust {
    height: 88px;
    margin: 0;
    border-radius: 0;
    background: none;
}

.rail-fig .npc-bust img {
    object-fit: cover;
    object-position: center top;
}

.cc2-lead {
    margin: 2px 4px 12px;
    font-size: 13.5px;
    line-height: 1.9;
    font-weight: 500;
    color: var(--m-text);
}

.cc2-wake {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--m-text);
}

.cc2-stage.cc2-mirror {
    
    width: min(240px, 68vw);
    height: min(40vh, 340px);
    margin: 0 auto;
    padding: 0;
    border-radius: 140px 140px 18px 18px;
    border: 7px solid #cdbfae;
    background: linear-gradient(180deg, #e9eef0 0%, #dfe5e7 55%, #d5dbdc 100%);
    box-shadow: 0 0 0 1px #b3a491, inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        inset 0 -18px 40px rgba(120, 130, 135, 0.18), 0 14px 30px rgba(90, 84, 78, 0.16);
}

.cc2-mirror-glare {
    
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 13%),
        linear-gradient(280deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 9%);
}

.cc2-stage.cc2-mirror .cc2-dice { z-index: 3; }

.cc2-stage.cc2-mirror .cc2-figure {
    height: 128%;
    max-width: none;
    margin-bottom: -26%;
}

.cc2-lead {
    font-size: 15px;
    line-height: 1.85;
}

:root {
    --open-top: calc(100dvh - 64px - 288px);
}

:root { --open-top: calc(100dvh - 380px); }

.cc2-abgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.cc2-abchip {
    padding: 11px 4px;
    border-radius: 12px;
    border: 1px solid rgba(90, 84, 78, 0.16);
    background: rgba(255, 253, 249, 0.92);
    color: #3d3832;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cc2-abchip.on {
    background: var(--ab);
    border-color: var(--ab);
    color: #fff;
    font-weight: 600;
}

.cc2-abchip:active { transform: scale(0.96); }

.cc2-reselect {
    position: fixed;
    left: 18px;
    right: auto;
    bottom: 22px;
    cursor: pointer;
}

:root {
    --dlg-hmax: 288px;
    --dlg-foot: calc(20px + env(safe-area-inset-bottom, 0px));
}

@keyframes ccStepIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes ccFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes ccTabIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}