/* ========== 全局重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    --frame-w: 375px;
    --frame-h: 800px;
    --frame-r: 50px;
    --safe-top: 50px;
    --safe-bot: 34px;
}

html, body {
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #000 70%);
}

/* ========== 手机外壳 ========== */
.phone-frame {
    position: relative;
    width: var(--frame-w);
    height: var(--frame-h);
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border-radius: var(--frame-r);
    border: 8px solid #1a1a1a;
    box-shadow:
        0 0 0 2px #333,
        0 30px 80px rgba(0,0,0,0.7),
        inset 0 0 2px rgba(255,255,255,0.05);
    overflow: hidden;
}

.dynamic-island {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 32px;
    background: #000;
    border-radius: 20px;
    z-index: 999;
}

/* ========== 通用屏幕 ========== */
.screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
    display: none;
    flex-direction: column;
}

.screen.active {
    display: flex;
}

/* ========== 状态栏 ========== */
.status-bar {
    position: relative;
    z-index: 10;
    height: var(--safe-top);
    padding: 18px 26px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: transparent;
}

.sb-left { letter-spacing: 0.5px; }
.sb-right {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.sb-signal { font-size: 9px; letter-spacing: 1px; }
.sb-battery {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 13px;
}
.sb-battery i {
    display: inline-block;
    width: 22px;
    height: 11px;
    background: linear-gradient(to right, #fff 80%, transparent 80%);
    border: 1px solid #fff;
    border-radius: 2px;
    position: relative;
    margin-right: 2px;
}
.sb-battery i::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 3px;
    width: 2px;
    height: 5px;
    background: #fff;
    border-radius: 0 1px 1px 0;
}

/* ========== 锁屏（4位密码键盘，对齐原版 content.png） ========== */
.lockscreen {
    isolation: isolate;
    background: #000;
    color: #fff;
}

.lock-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(42,42,42,0.24) 0%, transparent 52%),
        linear-gradient(180deg, #0b0b0b 0%, #000 52%, #050505 100%);
    z-index: 0;
}

.lock-grain {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0, transparent 1px, transparent 4px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.lockscreen > .status-bar,
.lockscreen > .lock-date,
.lockscreen > .lock-time,
.lockscreen > .lock-avatar-block,
.lockscreen > .lock-prompt,
.lockscreen > .lock-dots,
.lockscreen > .lock-keypad {
    z-index: 2;
}

.lock-date {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    z-index: 10;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.3px;
}

.lock-time {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 96px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    letter-spacing: -4px;
    z-index: 10;
    text-shadow: 0 4px 30px rgba(0,0,0,0.6);
    font-feature-settings: "tnum";
}

.lock-avatar-block {
    position: absolute;
    top: 235px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.lock-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: url('/media/north-content.png') center / cover no-repeat;
    box-shadow:
        inset 0 0 0 1.5px rgba(255,255,255,0.05),
        0 4px 16px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
}
.lock-avatar::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, rgba(160,160,160,0.4), transparent 50%),
        linear-gradient(180deg, #2a2a2a 0%, #111 100%);
}
.lock-avatar::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translateX(-50%);
    width: 28px;
    height: 16px;
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    border-radius: 50% 50% 30% 30%;
    filter: blur(2px);
    opacity: 0.8;
}

.lock-stare {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
    letter-spacing: 0.3px;
}

.lock-stare-name {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

.lock-prompt {
    position: absolute;
    top: 410px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    z-index: 10;
    transition: color 0.2s;
    letter-spacing: 0.3px;
}
.lock-prompt.error { color: #ff5b5b; }

.lock-dots {
    position: absolute;
    top: 440px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 22px;
    z-index: 10;
}
.lock-dots span {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255,255,255,0.65);
    border-radius: 50%;
    transition: all 0.2s;
}
.lock-dots span.filled {
    background: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.95);
}
.lockscreen.shake .lock-dots {
    animation: shake 0.4s;
}
@keyframes shake {
    0%,100% { transform: translateX(-50%) translateX(0); }
    20% { transform: translateX(-50%) translateX(-10px); }
    40% { transform: translateX(-50%) translateX(10px); }
    60% { transform: translateX(-50%) translateX(-8px); }
    80% { transform: translateX(-50%) translateX(8px); }
}

.lock-keypad {
    position: absolute;
    bottom: 38px;
    left: 24px;
    right: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 22px;
    z-index: 10;
}
.lock-keypad button {
    height: 64px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-feature-settings: "tnum";
}
.lock-keypad button:active:not(:disabled) {
    background: rgba(255,255,255,0.15);
}
.lock-keypad button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.lock-keypad button.lock-action {
    font-size: 16px;
    color: rgba(255,255,255,0.95);
}
.lock-keypad button.lock-action svg {
    width: 26px;
    height: 26px;
}

/* 解锁淡出 */
.lockscreen.unlocking {
    animation: lockOut 0.5s ease-out forwards;
}
@keyframes lockOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); filter: blur(8px); }
}

/* ========== 主屏 ========== */
.homescreen { background: #000; }

.pages {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.pages::-webkit-scrollbar { display: none; }

.page {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    padding: 16px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: none;
}
.page::-webkit-scrollbar { display: none; }

.page.active { display: block; }

/* Widget 行 */
.widget-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.wdg {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 12px 8px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 76px;
}

.wdg.heart { background: rgba(255,60,80,0.18); }
.wdg-val { font-size: 22px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.wdg-val-sm { font-size: 13px; font-weight: 600; }
.wdg-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; }
.pct { font-size: 14px; opacity: 0.7; margin-left: 2px; }
.wdg-time { font-size: 22px; font-weight: 700; letter-spacing: -1px; }

.wdg-icon {
    width: 24px;
    height: 12px;
    border: 1.5px solid #fff;
    border-radius: 3px;
    position: relative;
    margin-top: 4px;
}
.wdg-icon i {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 55%;
}

.char-widget {
    background: linear-gradient(135deg, #555 0%, #222 100%);
    position: relative;
    overflow: hidden;
    padding: 0;
}

.cw-face {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at center 40%, rgba(220,220,220,0.4) 20%, transparent 60%),
        linear-gradient(135deg, #666, #222);
    border-radius: 18px;
    position: relative;
}

.cw-face::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    width: 60%;
    height: 60%;
    background:
        radial-gradient(ellipse 30% 35% at 35% 45%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(ellipse 30% 35% at 65% 45%, rgba(255,255,255,0.5), transparent 60%);
    border-radius: 50%;
}

/* App 网格 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 10px;
    margin: 18px 0;
    padding: 8px 4px;
}

.app-grid.small-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
}

.app {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px;
}

.app:active { transform: scale(0.92); }
.app:active .app-icon { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.05); }

.app-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    overflow: hidden;
}

.app-icon svg { width: 28px; height: 28px; }

.app-name {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 各 App 图标颜色 */
.icon-wechat { background: linear-gradient(135deg, #1aad19 0%, #0d8a0d 100%); }
.icon-douyin { background: linear-gradient(135deg, #000 0%, #333 100%); border: 1px solid rgba(255,255,255,0.2); }
.icon-x { background: #000; border: 1px solid rgba(255,255,255,0.3); font-weight: 900; font-style: italic; }
.icon-cinema { background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); }
.icon-thriller { background: linear-gradient(135deg, #4a1a1a 0%, #1a0000 100%); }
.icon-creepy { background: linear-gradient(135deg, #4a3a1a 0%, #1a1000 100%); }
.icon-cloud { background: linear-gradient(135deg, #1a3a5a 0%, #051020 100%); }
.icon-aipi { background: linear-gradient(135deg, #5a3a8a 0%, #20103a 100%); font-size: 18px; font-weight: 700; }
.icon-chat { background: linear-gradient(135deg, #2a1a3a 0%, #100420 100%); }
.icon-phone { background: linear-gradient(135deg, #1a4a1a 0%, #001000 100%); }
.icon-music { background: linear-gradient(135deg, #c41e3a 0%, #6a0e1a 100%); }
.icon-controller { background: linear-gradient(135deg, #2a2a3a 0%, #0a0a1a 100%); border: 1px solid rgba(120,180,255,0.3); }
.icon-tongyi { background: linear-gradient(135deg, #5a1a4a 0%, #200820 100%); }
.icon-shop { background: linear-gradient(135deg, #c4a01e 0%, #6a5010 100%); }
.icon-rpg { background: linear-gradient(135deg, #1a4a4a 0%, #001010 100%); }
.icon-browser { background: linear-gradient(135deg, #1a4a8a 0%, #051030 100%); }
.icon-games { background: linear-gradient(135deg, #4a1a5a 0%, #200a30 100%); }
.icon-worldcup { background: linear-gradient(135deg, #1a6a1a 0%, #002010 100%); font-size: 30px; }
.icon-waimai { background: linear-gradient(135deg, #c44a1e 0%, #6a2010 100%); font-size: 30px; }
.icon-clock-app { background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); }

/* Vinyl 黑胶大转盘 */
.app-vinyl {
    grid-column: span 2;
    width: 100%;
}
.app-vinyl-disc {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto;
}
.vd-record {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, #0a0a0a 0px, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 3px),
        radial-gradient(circle, #333 30%, #0a0a0a 60%);
    border: 2px solid #2a2a2a;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.5);
    position: relative;
    animation: spin 8s linear infinite;
}
.vd-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background:
        radial-gradient(circle, #c41e3a 30%, #2a0a14 80%);
    border-radius: 50%;
    border: 2px solid #fff;
}
.vd-arm {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 4px;
    height: 50px;
    background: linear-gradient(to bottom, #c0c0c0, #888);
    transform-origin: top right;
    transform: rotate(35deg);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
@keyframes spin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

.app-controller .app-icon {
    box-shadow: 0 0 12px rgba(120,180,255,0.4);
}

/* 角色卡 */
.character-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 10px;
    margin: 12px 0;
}

.cc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: url('/media/north-content.png') center / cover no-repeat;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}

.cc-text { flex: 1; min-width: 0; }
.cc-name { font-size: 14px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 6px; }
.cc-name span { font-size: 12px; opacity: 0.6; font-weight: 400; }
.cc-meta { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }

.music-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 8px 0 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.mm-icon { font-size: 14px; opacity: 0.7; }

/* 大角色卡（页2） */
.big-char-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    margin: 14px 6px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.3));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

.bcc-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: url('/media/north-content.png') center / cover no-repeat;
    border: 2px solid rgba(255,255,255,0.25);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.bcc-avatar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    width: 70%;
    height: 70%;
    background:
        radial-gradient(ellipse 30% 30% at 35% 45%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(ellipse 30% 30% at 65% 45%, rgba(255,255,255,0.5), transparent 60%);
    border-radius: 50%;
}

.bcc-name { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.bcc-sub { font-size: 12px; opacity: 0.6; margin-top: 4px; }

/* Polaroid 照片组 */
.polaroids {
    position: relative;
    height: 160px;
    margin: 18px 0;
}

.polaroid {
    position: absolute;
    width: 110px;
    height: 130px;
    background: #fff;
    padding: 6px 6px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border-radius: 2px;
}

.polaroid.p1 { left: 20px; top: 10px; transform: rotate(-8deg); z-index: 1; }
.polaroid.p2 { left: 105px; top: 0; transform: rotate(2deg); z-index: 3; }
.polaroid.p3 { right: 20px; top: 12px; transform: rotate(7deg); z-index: 2; }

.polaroid-img {
    width: 100%;
    height: 90px;
    background: #222;
    border-radius: 1px;
    background-size: cover;
    background-position: center;
}

.img-lover {
    background:
        repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 4px, #2a2a2a 4px, #2a2a2a 8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Brush Script MT', cursive;
    font-size: 18px;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}

.img-black-cat {
    background:
        radial-gradient(ellipse at 50% 60%, #000 30%, #1a1a1a 70%),
        linear-gradient(135deg, #2a2a2a, #000);
}
.img-black-cat::before {
    content: '';
    position: absolute;
    left: 30%;
    top: 30%;
    width: 8px;
    height: 12px;
    background: #4eff4e;
    box-shadow: 25px 0 #4eff4e;
    border-radius: 50%;
    opacity: 0.8;
}

.img-white-cat {
    background:
        radial-gradient(ellipse at 50% 60%, #fff 30%, #888 70%),
        linear-gradient(135deg, #fff, #ddd);
}

.polaroid-cap {
    text-align: center;
    color: #444;
    font-size: 11px;
    padding-top: 4px;
    font-family: 'Brush Script MT', cursive;
}

/* 页面指示器 */
.page-indicator {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.dot {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: all 0.2s;
}
.dot.active {
    background: #fff;
    width: 18px;
    border-radius: 3px;
}

/* 底部 Dock */
.dock {
    position: absolute;
    bottom: 24px;
    left: 16px;
    right: 16px;
    height: 70px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 22px;
    display: flex;
    padding: 6px;
    gap: 4px;
}

.dock-app {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.dock-app:active .dock-icon { transform: scale(0.92); }

.dock-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2a2a2a, #0a0a0a);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    transition: transform 0.1s;
}

.dock-icon svg { width: 30px; height: 30px; }
.dock-icon .dow { font-size: 22px; font-weight: 700; line-height: 1; }
.dock-icon .dom { font-size: 9px; opacity: 0.6; margin-top: 2px; }

/* Home Indicator */
.home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    background: #fff;
    border-radius: 3px;
    z-index: 100;
}

/* ========== App 页面 ========== */
.app-screen { background: #000; }

.app-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(20,20,20,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.back-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.back-btn svg { width: 22px; height: 22px; }

.app-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    margin-right: 36px;
}

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 30px;
    scrollbar-width: none;
}
.app-content::-webkit-scrollbar { display: none; }

/* ========== 弹层 ========== */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.overlay.active { display: flex; }

.overlay-card {
    background: rgba(30,30,30,0.95);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 24px;
    width: 86%;
    max-height: 80%;
    overflow-y: auto;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* ========== 通知堆叠 ========== */
.notification-stack {
    position: absolute;
    top: 50px;
    left: 12px;
    right: 12px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.notification {
    background: rgba(20,20,20,0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 12px 14px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    pointer-events: auto;
    animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.notification.removing {
    animation: slideUp 0.3s ease-in forwards;
}

.notif-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.notif-title { font-size: 14px; font-weight: 600; }
.notif-body { font-size: 13px; opacity: 0.8; margin-top: 2px; }

/* ========== 礼物弹窗 ========== */
.gift-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, rgba(40,40,40,0.97), rgba(20,20,20,0.97));
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 24px;
    padding: 28px 36px;
    text-align: center;
    color: #fff;
    z-index: 250;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(255,200,100,0.3);
    pointer-events: none;
}

.gift-popup.show {
    animation: giftPop 2.2s ease-out forwards;
}

@keyframes giftPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    25% { transform: translate(-50%, -50%) scale(1); }
    85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

.gift-emoji { font-size: 64px; margin-bottom: 8px; }
.gift-name { font-size: 18px; font-weight: 700; }
.gift-from { font-size: 12px; opacity: 0.6; margin-top: 4px; }

/* ========== 来电弹窗 ========== */
.call-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    display: none;
    align-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 60px 20px;
}

.call-popup.show {
    display: flex;
    animation: fadeIn 0.3s;
}

.call-popup.active {
    background: radial-gradient(ellipse at center top, #182a24 0%, #050706 62%, #000 100%);
}

.call-popup.active .call-avatar {
    animation: none;
    border-color: rgba(52,199,89,0.8);
    box-shadow: 0 0 0 8px rgba(52,199,89,0.12), 0 0 35px rgba(52,199,89,0.25);
}

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

.call-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center 30%, rgba(220,220,220,0.7) 18%, transparent 55%),
        linear-gradient(135deg, #777, #1a1a1a);
    border: 2px solid rgba(255,255,255,0.3);
    margin-bottom: 24px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255,255,255,0); }
}

.call-name { font-size: 28px; font-weight: 700; }
.call-sub { font-size: 14px; opacity: 0.6; margin-top: 6px; }

.call-actions {
    display: flex;
    gap: 60px;
    margin-top: auto;
}

.call-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.call-btn.hangup { background: #ff3b30; }
.call-btn.answer { background: #34c759; }
.call-btn svg { width: 28px; height: 28px; }

/* ========== 通用 App 内部 ========== */
.list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    margin-bottom: 8px;
    cursor: pointer;
}
.list-item:active { background: rgba(255,255,255,0.08); }

.list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #555, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.list-info { flex: 1; min-width: 0; }
.list-name { font-size: 14px; font-weight: 600; color: #fff; }
.list-meta { font-size: 12px; opacity: 0.6; margin-top: 2px; }

.input-box {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
    outline: none;
    margin-bottom: 10px;
}

.input-box:focus {
    border-color: rgba(120,180,255,0.5);
}

.btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #2a4a8a, #1a2a5a);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
}

.btn:active { transform: scale(0.98); }
.btn.secondary { background: rgba(255,255,255,0.08); }
.btn.danger { background: linear-gradient(135deg, #c41e3a, #6a0e1a); }

/* 聊天界面 */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-bubble {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-bubble.me {
    align-self: flex-end;
    background: linear-gradient(135deg, #2a4a8a, #1a2a5a);
}

.chat-bubble.them {
    align-self: flex-start;
    background: rgba(255,255,255,0.1);
}

.chat-time {
    align-self: center;
    font-size: 10px;
    opacity: 0.4;
    margin: 6px 0;
}

.chat-input-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px;
    background: rgba(20,20,20,0.95);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.chat-input-bar .input-box { margin: 0; flex: 1; }

.send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a4a8a, #1a2a5a);
    border: none;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

/* Vinyl 黑胶全屏 */
.vinyl-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}

.vinyl-disc-big {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, #0a0a0a 0px, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 3px),
        radial-gradient(circle, #555 30%, #0a0a0a 60%);
    border: 2px solid #2a2a2a;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 60px rgba(0,0,0,0.6);
    position: relative;
    margin-bottom: 24px;
    animation: spin 6s linear infinite;
    position: relative;
}

.vinyl-disc-big::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background:
        radial-gradient(circle, #c41e3a 30%, #2a0a14 80%);
    border-radius: 50%;
    border: 2px solid #fff;
}

.vinyl-info { text-align: center; margin-bottom: 24px; }
.vinyl-title { font-size: 22px; font-weight: 700; }
.vinyl-artist { font-size: 14px; opacity: 0.6; margin-top: 4px; }

.vinyl-controls {
    display: flex;
    gap: 28px;
    align-items: center;
}

.vc-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.vc-btn.play {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #c41e3a, #6a0e1a);
    border: none;
    font-size: 26px;
}

.vc-btn.play.playing {
    background: linear-gradient(135deg, #34c759, #1a6a2a);
}

.music-library {
    margin-top: 24px;
    width: 100%;
}

/* Controller 控制器 */
.controller-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ctrl-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.ctrl-btn:active { background: rgba(255,255,255,0.12); transform: scale(0.96); }

.ctrl-emoji { font-size: 28px; margin-bottom: 6px; }
.ctrl-name { font-size: 14px; font-weight: 600; }
.ctrl-desc { font-size: 11px; opacity: 0.6; margin-top: 2px; }

/* 视频流（抖音风） */
.dy-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}
.dy-feed::-webkit-scrollbar { display: none; }

.dy-item {
    position: relative;
    height: 100%;
    min-height: 380px;
    flex: 0 0 100%;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 16px;
    background: #050505;
    border: 1px solid rgba(255,255,255,0.08);
}
.dy-end { flex: 0 0 70px; text-align: center; padding: 18px; font-size: 12px; opacity: 0.5; }
.dy-end span { font-size: 10px; }

.video-unavailable {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    background: #0b0b0b;
}

.media-unavailable { opacity: 0.55; }

.dy-emoji {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 68px;
    pointer-events: none;
    opacity: 0.35;
}

.video-card {
    position: relative;
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    background: linear-gradient(180deg, #1a1a1a, #000);
    border: 1px solid rgba(255,255,255,0.08);
}

.dy-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #050505;
    z-index: 1;
}

.video-sound {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    cursor: pointer;
}

.video-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7);
    z-index: 0;
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
    color: #fff;
    z-index: 5;
}

.video-author { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.video-content { font-size: 12px; opacity: 0.9; line-height: 1.4; }

.video-side {
    position: absolute;
    right: 12px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    z-index: 6;
}

.video-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #fff;
}

.video-side-btn .v-icon {
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.video-side-btn .v-num { font-size: 11px; }

/* X 帖文 */
.x-post {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.x-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.x-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #555, #1a1a1a);
}

.x-name { font-size: 14px; font-weight: 600; }
.x-handle { font-size: 12px; opacity: 0.6; }

.x-content {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #fff;
}

.x-actions {
    display: flex;
    gap: 20px;
    font-size: 12px;
    opacity: 0.7;
}

.x-actions span {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* North 角色主页 */
.character-profile {
    text-align: center;
    padding: 20px 0;
}

.cp-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background:
        radial-gradient(ellipse at center 30%, rgba(220,220,220,0.7) 18%, transparent 55%),
        linear-gradient(135deg, #777, #1a1a1a);
    border: 2px solid rgba(255,255,255,0.25);
    position: relative;
    overflow: hidden;
}

.cp-avatar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    width: 70%;
    height: 70%;
    background:
        radial-gradient(ellipse 30% 30% at 35% 45%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(ellipse 30% 30% at 65% 45%, rgba(255,255,255,0.5), transparent 60%);
    border-radius: 50%;
}

.cp-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cp-status {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 6px;
}

.cp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.cp-stat {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px;
}

.cp-stat-num { font-size: 20px; font-weight: 700; }
.cp-stat-lbl { font-size: 11px; opacity: 0.6; margin-top: 4px; }

.cp-section {
    text-align: left;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px;
    margin: 14px 0;
}

.cp-section-title {
    font-size: 12px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.cp-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}
.cp-row:last-child { border-bottom: none; }

.chat-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}
.chat-quick button {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 6px 12px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

/* 影院/放映室 */
.cinema-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cinema-card {
    display: flex;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px;
}

.cc-poster {
    width: 80px;
    height: 110px;
    border-radius: 8px;
    background: linear-gradient(135deg, #555, #1a1a1a);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
}

.cinema-info { flex: 1; min-width: 0; }
.cinema-title { font-size: 15px; font-weight: 600; }
.cinema-meta { font-size: 12px; opacity: 0.6; margin-top: 4px; }

/* 备忘录 */
.note-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.note-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.note-content { font-size: 12px; opacity: 0.7; line-height: 1.5; }
.note-time { font-size: 10px; opacity: 0.4; margin-top: 6px; }

/* 浏览器地址栏 */
.url-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.site-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.site-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #444, #111);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* 猫相册详情 */
.cat-detail {
    padding: 20px;
    text-align: center;
}

.cat-detail-img {
    width: 100%;
    height: 200px;
    background:
        radial-gradient(ellipse at 50% 60%, #fff 30%, #888 70%),
        linear-gradient(135deg, #fff, #ddd);
    border-radius: 16px;
    margin-bottom: 16px;
}

/* 设置 */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    margin-bottom: 8px;
}

.toggle {
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background: rgba(255,255,255,0.15);
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.on { background: #34c759; }

.toggle::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle.on::before { transform: translateX(20px); }

/* 锁屏消息列表 */
.lock-msg-list {
    margin-top: 16px;
}

.lock-msg {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.lock-msg-name { font-weight: 600; opacity: 0.9; }
.lock-msg-text { opacity: 0.7; font-size: 12px; margin-top: 2px; }

/* 隐式滚动隐藏 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ========== 角色互动场景 ========== */
.interact-scene {
    position: relative;
    height: 100%;
    background: #0a0a0a;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#northAudio { display: none; }
.audio-hint { margin-top: 10px; font-size: 11px; opacity: 0.55; }
.audio-progress { width: min(280px, 90%); margin-top: 12px; accent-color: #c41e3a; }
.media-empty { padding: 20px 4px; font-size: 12px; opacity: 0.55; line-height: 1.5; }
.room-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(70,50,30,0.4) 0%, transparent 60%),
        linear-gradient(180deg, #1a1410 0%, #0a0807 100%);
}
.room-floor {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 35%;
    background:
        linear-gradient(180deg, #2a201a 0%, #1a1410 100%);
    border-top: 1px solid rgba(255,255,255,0.04);
}
.room-furniture { position: absolute; inset: 0; pointer-events: none; }
.rf-bed {
    position: absolute; left: 5%; bottom: 8%;
    width: 35%; height: 18%;
    background: linear-gradient(180deg, #3a2a20 0%, #2a1a14 100%);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.rf-bed::after {
    content: '床';
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.18);
    font-size: 13px;
}
.rf-desk {
    position: absolute; right: 5%; bottom: 8%;
    width: 30%; height: 22%;
    background: linear-gradient(180deg, #2a1f15 0%, #1a130c 100%);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.rf-desk::after {
    content: '书桌';
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.18);
    font-size: 13px;
}
.rf-lamp {
    position: absolute; right: 12%; top: 18%;
    width: 8%; height: 14%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,200,120,0.5) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
}

.char-stage {
    position: absolute;
    left: 50%; top: 50%;
    width: 280px; height: 360px;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
}
.char-figure {
    width: 180px; height: 240px;
    transition: transform 0.3s;
    cursor: grab;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.char-figure.dragging { cursor: grabbing; transition: none; }
.char-figure svg { width: 100%; height: 100%; }
.char-figure.hug { animation: charHug 1.1s ease-in-out; }
.char-figure.pet { animation: charPet 1.1s ease-in-out; }
.char-figure.kiss { animation: charKiss 1.1s ease-in-out; }
.char-figure.shake { animation: charShake 1.1s ease-in-out; }

@keyframes charHug {
    0% { transform: scale(1) translateY(0) rotate(0); }
    20% { transform: scale(1.06) translateY(-8px) rotate(-2deg); }
    40% { transform: scale(0.96) translateY(2px) rotate(2deg); }
    60% { transform: scale(1.04) translateY(-4px) rotate(-1deg); }
    100% { transform: scale(1) translateY(0) rotate(0); }
}
@keyframes charPet {
    0%,100% { transform: translateY(0); }
    30% { transform: translateY(-6px) rotate(2deg); }
    60% { transform: translateY(-3px) rotate(-2deg); }
}
@keyframes charKiss {
    0% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.1) translateX(8px); }
    60% { transform: scale(1.05) translateX(-4px) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes charShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-10px) rotate(-3deg); }
    40% { transform: translateX(10px) rotate(3deg); }
    60% { transform: translateX(-8px) rotate(-2deg); }
    80% { transform: translateX(8px) rotate(2deg); }
}

.char-emote {
    position: absolute;
    left: 60%; top: 8%;
    font-size: 38px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.4s;
    pointer-events: none;
    z-index: 5;
}
.char-bubble {
    position: absolute;
    left: 50%; top: 4%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.15);
    max-width: 80%;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 6;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.char-bubble.show {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
}
.char-bubble::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: rgba(0,0,0,0.85);
    border-right: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.char-stats {
    position: absolute;
    top: 18px; left: 16px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 3;
}
.cs-name { font-size: 15px; font-weight: 600; }
.cs-mood { color: rgba(255,255,255,0.6); }
.cs-mood b { color: #ff8a9a; font-size: 14px; }

.char-actions {
    position: absolute;
    left: 16px; right: 16px; bottom: 80px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    z-index: 3;
}
.char-actions button {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 10px 0;
    border-radius: 22px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.char-actions button:active {
    background: rgba(255,255,255,0.18);
    transform: scale(0.97);
}

.char-talk {
    position: absolute;
    left: 16px; right: 16px; bottom: 18px;
    display: flex;
    gap: 8px;
    z-index: 3;
}
.char-talk input {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 10px 14px;
    border-radius: 22px;
    font-size: 13px;
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: inherit;
}
.char-talk input::placeholder { color: rgba(255,255,255,0.4); }
.char-talk input:focus { border-color: rgba(255,255,255,0.4); }
.char-talk button {
    background: rgba(255,138,154,0.85);
    border: none;
    color: #fff;
    padding: 0 18px;
    border-radius: 22px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.char-talk button:active { background: rgba(255,138,154,0.65); }

.icon-interact {
    background: linear-gradient(135deg, #ff8a9a 0%, #c44 100%);
}