/* css/style.css 全局样式 */
body, html {
    margin: 0; padding: 0; width: 100vw; height: 100vh; font-family: "微软雅黑", sans-serif; overflow: hidden; background: #111;
}
.video-bg-container { position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:0; }
.bg-video, .bg-image { width:100%; height:100%; object-fit:cover; opacity:0.6; transition:opacity 0.3s; position:absolute; top:0; left:0;}
.bg-image { width: 100%;height: 100%;object-fit: contain; /* 关键修改 */background-color: #000; /* 填充黑边 */opacity: 0.6;position: absolute;top: 0;left: 0;}
.video-controls { position: absolute; top: 20px; right: 30px; z-index:2; background:rgba(0,0,0,0.3); padding:8px 16px; border-radius:8px; color:#fff; display: flex; align-items: center; gap: 8px;}
.video-controls label { display: flex; align-items: center; gap: 4px; font-size: 1em;}
.main-title { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); font-size: 2.8em; color: #fff; letter-spacing: 8px; z-index:2; text-shadow: 0 2px 16px #000; }

/* 首页气泡动画样式 */
.bubble-container {
    position: absolute;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 2;
}
.bubble {
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 70%, #fc575e 100%);
    box-shadow: 0 8px 32px #ffffff88, 0 0 0 4px #fff4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    transition: filter 0.2s, transform 0.2s;
    border: 0px solid #ffffff;
    font-family: "华文行楷", cursive;
    font-size: 1.1em;
    color: #fc575e;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    animation: bubble-float 2s infinite alternate;
}
.bubble-content {
    pointer-events: none;
}
.bubble .member-name {
    font-size: 1.3em;
    color: #fc575e;
    font-weight: bold;
    margin-bottom: 4px;
}
.bubble .member-group {
    font-size: 1em;
    color: #fc575e99;
}
.bubble:active, .bubble.burst {
    filter: blur(8px) brightness(0.7);
    transform: scale(1.2);
    opacity: 0.2;
    transition: all 0.3s;
}
.bubble.burst {
    pointer-events: none;
}
.bubble.hovered {
    z-index: 10;
    transform: scale(2.0);
    filter: brightness(1.2) drop-shadow(0 0 16px #fff8);
    animation: none;
}
@keyframes bubble-float {
    0% { filter: blur(0px);}
    100% { filter: blur(2px);}
}

/* 卡通人物样式 */
.role-character {
    position: absolute;
    left: 50vw; top: 80vh;
    width: 60px; height: 80px;
    z-index: 3;
    transition: filter 0.2s;
    will-change: transform;
}
.role-character img {
    width: 100%; height: 100%;
    user-drag: none; user-select: none;
    pointer-events: none;
}

/* 控制提示 */
.controls-hint {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 1.1em; background: rgba(0,0,0,0.25); padding: 8px 18px; border-radius: 12px; z-index: 10;
    text-shadow: 0 2px 8px #000;
}

/* 侧边菜单 */
.side-menu { position: fixed; top:0; left:0; width: 60px; height: 100vh; background:rgba(255,255,255,0.3); z-index:10; transition: width 0.3s; overflow: hidden; }
.side-menu.expanded { width: 220px; }
.menu-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2em; color: #000; cursor: pointer; }
.side-menu ul { list-style: none; padding: 60px 0 0 0; margin:0; }
.side-menu li { color: #000; padding: 18px 32px; cursor: pointer; font-size: 1.2em; border-bottom: 1px solid #0002; transition: background 0.2s; font-family: "华文行楷", cursive; }
.side-menu li:hover { background: #fc575e; color: #fff; }
.member-title { position: absolute; top: 40px; left: 120px; font-size: 2.2em; color: #fff; z-index:2; text-shadow: 0 2px 12px #000; }

/* 日志卡片 */
.log-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 32px 24px;
    position: absolute;
    left: 120px; top: 160px;
    width: calc(100vw - 180px);
    height: 520px;
    z-index: 2;
}
.log-card {
    background: rgba(255,255,255,0.85);
    border-radius: 18px;
    box-shadow: 0 4px 24px #fc575e33;
    padding: 24px 18px 18px 18px;
    font-size: 1.1em;
    color: #333;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, filter 0.2s;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.log-card-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #fc575e;
    margin-bottom: 8px;
}
.log-card-content {
    flex: 1;
    color: #333;
}
.log-card-date {
    position: absolute; top: 10px; right: 18px; font-size: 0.9em; color: #fc575e99;
}
.log-card.active {
    transform: scale(1.15) translateY(-18px);
    box-shadow: 0 8px 32px #fc575e77;
    z-index: 5;
    filter: brightness(1.1);
}
.log-card.inactive {
    filter: blur(2px) brightness(0.8);
    z-index: 1;
    transform: scale(0.95);
}

/* 日期指示器 */
.date-indicator {
    position: absolute; top: 120px; left: 120px; color: #fc575e; font-size: 1.1em; z-index: 3;
}

/* 纸飞机按钮 */
.plane-container {
    position: absolute; top: 100px; left: 120px; display: flex; gap: 18px;
}
.plane {
    width: 60px; height: 60px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px #fc575e33;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1em; color: #fc575e; font-family: "华文行楷", cursive; transition: background 0.2s, transform 0.2s;
}
.plane.active { background: #fc575e; color: #fff; transform: scale(1.15);}
.plane:hover { background: #fc575e99; color: #fff;}

/* 图片库轮播 */
.gallery-container {
    position: absolute; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:2;
}
.gallery-track {
    display: flex; align-items: center; justify-content: center; width: 900px; height: 420px; overflow: hidden; position: relative;
}
.gallery-img {
    width: 260px; height: 360px; object-fit: cover; border-radius: 18px; margin: 0 18px; box-shadow: 0 4px 32px #0008; transition: transform 0.5s, filter 0.5s, opacity 0.5s;
    opacity: 0.7; filter: brightness(0.7);
}
.gallery-img.center {
    width: 340px; height: 420px; z-index: 2; opacity: 1; filter: brightness(1.1) drop-shadow(0 0 24px #fc575e88);
    transform: scale(1.15);
}
.gallery-img.side {
    z-index: 1;
}
.gallery-arrow {
    font-size: 3em; color: #fff; cursor: pointer; user-select: none; margin: 0 32px; z-index: 3; transition: color 0.2s;
}
.gallery-arrow:hover { color: #fc575e; }