:root{--bg:#f9f7f7;--card:#bb9999;--accent:#3768f0;--muted:#6b7280}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#111}
.container{max-width:900px;margin:28px auto;padding:24px}
h1{margin:0 0 6px;font-size:77px;}
.muted{color:var(--muted);margin:0 0 16px}
.wheel-area{display:flex;align-items:center;gap:20px;margin-top:20px}
.wheel-wrap{position:relative;width:220px;height:220px}
.wheel{width:100%;height:100%}
.pointer{position:absolute;left:50%;top:-10px;transform:translateX(-50%);font-size:24px;color:var(--accent)}
.status{color:var(--muted);font-size:14px}
.results{margin-top:20px;background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.result-item{padding:10px;border-left:4px solid var(--accent);margin-bottom:10px;background:#fff;border-radius:6px}
.tag{display:inline-block;background:#eef2ff;color:var(--accent);padding:4px 8px;border-radius:999px;font-size:12px;margin-right:8px}
.muted small{color:var(--muted)}
:root{--bg:#f2f6fb;--card:#fff;--deep-blue:#0b3d91;--accent:#ff7a00;--muted:#6b7280}
*{box-sizing:border-box}
body{margin:0;background:#000;color:#e8f0ff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;overflow-x:hidden}
.container{max-width:1100px;margin:32px auto;padding:28px;position:relative;z-index:3}
.hero{text-align:center;padding:8px 12px 22px}
.logo-wrap{margin:0 auto 8px}
h1{margin:6px 0 6px;font-size:28px;color:var(--deep-blue)}
.lead{color:var(--accent);font-weight:700;margin:6px 0}
.intro{color:#24324a;max-width:820px;margin:6px auto 16px}
.mode-toggle{margin-top:12px}
.mode-toggle button{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer}
.cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.card{min-width:160px;flex:1 1 180px;max-width:260px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));backdrop-filter:blur(6px);border-radius:14px;padding:22px 18px;text-align:center;box-shadow:0 18px 40px rgba(3,8,28,0.45);cursor:pointer;border:1px solid rgba(255,255,255,0.04);font-weight:800;color:#f5f9ff;transform:translateY(0)}

.card:hover{transform:translateY(-8px)}
.card.active{box-shadow:0 30px 80px rgba(255,122,0,0.14),0 8px 30px rgba(3,8,28,0.6);border-color:rgba(255,122,0,0.35);background:linear-gradient(180deg,rgba(255,122,0,0.08),rgba(255,255,255,0.02));transform:translateY(-12px) scale(1.02)}
.card .glow{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:14px;pointer-events:none}

/* person figure inside card */
.person{margin:6px 0 4px;text-align:center;display:flex;flex-direction:column;align-items:center}
.person-img{width:100%;height:190px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,0.04);display:block}
.person-caption{margin-top:6px;text-align:center;font-size:14px;color:rgba(255,255,255,0.95);padding:0}
.card-title{font-size:15px;font-weight:800;color:var(--deep-blue);margin-bottom:8px}
.person-caption .person-name{color:var(--deep-blue);font-weight:800;font-size:15px;margin-bottom:0}

/* hover info bubble inside card (if JS injects it) */
.card .hover-info{position:absolute;left:12px;right:12px;bottom:12px;background:linear-gradient(180deg,rgba(11,61,145,0.06),rgba(255,255,255,0.03));backdrop-filter:blur(6px);padding:10px;border-radius:10px;color:#fff;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity 220ms ease, transform 220ms ease;pointer-events:none}
.card.active .hover-info{opacity:1;transform:translateY(0)}
.card .hover-info .line{opacity:0;transform:translateY(6px);transition:opacity 280ms ease, transform 280ms ease}
.card .hover-info .line.show{opacity:1;transform:translateY(0)}

/* floating animation */
@keyframes floatY {
	0%{transform:translateY(0px)}
	50%{transform:translateY(-10px)}
	100%{transform:translateY(0px)}
}
.card{animation:floatY 6s ease-in-out infinite;}
.card:nth-child(1){animation-delay:0s}
.card:nth-child(2){animation-delay:0.5s}
.card:nth-child(3){animation-delay:1.0s}
.card:nth-child(4){animation-delay:1.5s}

/* floating person image micro-motion */
.person-img{transition:transform 420ms ease, filter 320ms ease;transform-origin:center center}
.card{perspective:800px}
.person-img{animation:imgFloat 8s ease-in-out infinite}
@keyframes imgFloat{
	0%{transform:translateY(0) rotateZ(-1deg) scale(1)}
	50%{transform:translateY(-8px) rotateZ(1deg) scale(1.02)}
	100%{transform:translateY(0) rotateZ(-1deg) scale(1)}
}
.card.active .person-img{filter:brightness(1.05) saturate(1.05);transform:scale(1.04) translateY(-6px)}
.card.quote-open .person-img{transform:scale(1.02)}
.results{margin-top:20px;background:transparent;padding:0}
.formula{margin-top:28px;text-align:center}
.formula-inner{font-size:20px;color:var(--deep-blue);font-weight:800}
.formula-desc{color:#3b4862;font-size:13px;margin-top:6px;max-width:900px;margin-left:auto;margin-right:auto}

/* modal */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,16,0.6);z-index:1200}
.tag{display:inline-block;background:rgba(255,122,0,0.12);color:var(--accent);padding:4px 8px;border-radius:999px;font-size:12px;margin-right:8px}

/* starfield canvas sits behind everything */
#videoBgWrap{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;overflow:hidden;pointer-events:none;}
#videoBg{width:100vw;height:100vh;object-fit:cover;pointer-events:none;}

/* Day mode overrides */
body.day #starfield{background:linear-gradient(180deg,#eaf6ff,#fff)}
body.day .card{color:#04243a;box-shadow:0 18px 40px rgba(2,36,65,0.08);background:linear-gradient(180deg,rgba(11,61,145,0.05),rgba(255,255,255,0.5));border:1px solid rgba(11,61,145,0.06)}
body.day h1{color:var(--deep-blue)}
body.day .mode-toggle button{border-color:rgba(11,61,145,0.12);color:var(--deep-blue);background:rgba(255,255,255,0.06)}

.modal[aria-hidden="false"],.modal.open{display:flex}
.modal-content{background:var(--card);padding:18px;border-radius:12px;max-width:720px;width:92%;box-shadow:0 20px 60px rgba(8,16,36,0.25);color:#0b2545}
.modal-close{position:absolute;right:18px;top:18px;border:0;background:transparent;font-size:18px;cursor:pointer}
.panel-flow{background:#f8fbff;border-radius:8px;padding:10px;margin:8px 0;color:#123}
.modal-actions{display:flex;gap:10px;margin-top:10px}
button{background:var(--deep-blue);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
button.secondary{background:#eef2f8;color:var(--deep-blue)}
.modal-results{margin-top:12px}
.modal-results .result-item{background:#fff;padding:10px;border-left:4px solid var(--accent);border-radius:6px;margin-bottom:10px}

/* === 强化视频背景下内容可读性 === */
.container {
  background: rgba(18,24,38,0.82)!important;
  backdrop-filter: blur(14px) saturate(1.2)!important;
  color: #fff!important;
}
.card {
  background: rgba(24,32,48,0.92)!important;
  color: #fff!important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.38)!important;
}
.modal-content {
  background: rgba(24,32,48,0.98)!important;
  color: #fff!important;
  backdrop-filter: blur(12px)!important;
}
.results {
  background: rgba(24,32,48,0.88)!important;
  color: #fff!important;
}
.result-item {
  background: rgba(44,54,74,0.96)!important;
  color: #fff!important;
}
input, button {
  background: rgba(24,32,48,0.92)!important;
  color: #fff!important;
  border: 1px solid rgba(255,255,255,0.18)!important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18)!important;
}
.person-caption, .card-title, .formula-inner, .formula-desc {
  color: #fff!important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.38)!important;
}