/* 点击不出现浏览器的蓝色高亮块 / 聚焦框（键盘 Tab 才显示聚焦环） */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
:root { --ink: #2b3443; --muted: #7a8494; --blue: #4a78c2; --bg: #eef0f4; --serif: "Songti SC", "STSong", "Noto Serif SC", serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font: 15px/1.7 "PingFang SC", "Noto Sans SC", system-ui, sans-serif; }
.g-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 980px; margin: 0 auto; padding: 12px 16px; font-size: 13px; }
.g-top a { color: var(--blue); text-decoration: none; }
.g-top span { color: var(--muted); font-family: var(--serif); }
.g-top button, .g-gallery-head button { border: 1px solid rgba(74, 120, 194, .3); background: #fff; color: var(--blue); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
.g-main { max-width: 980px; margin: 0 auto; padding: 0 12px 40px; }
.g-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #d9dde5; box-shadow: 0 18px 44px rgba(43, 52, 67, .18); }
.g-bg, .g-cg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-bg { transform: scale(1.04) translate(var(--px, 0px), var(--py, 0px)); transition: transform .3s ease-out; filter: saturate(.95); }
.g-cg { opacity: 0; transition: opacity .6s ease; }
.g-cg.show { opacity: 1; }
.depth-cg { pointer-events: none; }
#cg.show + #cg-depth { opacity: 1; }
#cg[hidden] + #cg-depth { display: none; }
.g-pose { position: absolute; left: 50%; bottom: 2%; height: 72%; transform: translateX(-50%); filter: drop-shadow(0 12px 18px rgba(43, 52, 67, .25)); animation: breathe 3.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.012, .992); } }
.g-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 24px; text-align: center; background: linear-gradient(180deg, rgba(238, 240, 244, 0) 30%, rgba(238, 240, 244, .92) 85%); }
.g-cover h1 { margin: 0; font: 400 clamp(26px, 5vw, 40px)/1.2 var(--serif); letter-spacing: .08em; }
.g-kicker { margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--blue); }
.g-progress { margin: 0; font-size: 12px; color: var(--muted); }
.g-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #6f9ae0, #4a78c2); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.g-btn.line { background: #fff; color: var(--blue); border: 1px solid rgba(74, 120, 194, .35); font-weight: 400; }
.g-box { position: relative; min-height: 150px; margin-top: 12px; padding: 16px 18px 26px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(43, 52, 67, .08); cursor: pointer; user-select: none; }
.g-speaker { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 13px; color: var(--blue); }
.g-speaker img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.g-text { margin: 6px 0 0; font: 17px/1.8 var(--serif); white-space: pre-wrap; }
.g-box.heart .g-text { color: #5b6f92; font-style: italic; }
.g-box.lu .g-text { font-weight: 600; }
.g-choices { display: grid; gap: 8px; margin-top: 12px; }
.g-choices:empty { display: none; }
.g-choices button { min-height: 46px; padding: 8px 16px; border: 1px solid rgba(74, 120, 194, .35); border-radius: 12px; background: linear-gradient(180deg, #fff, #f3f6fc); color: var(--ink); font: 15px var(--serif); text-align: left; cursor: pointer; }
.g-choices button:hover { border-color: var(--blue); }
.g-next { position: absolute; right: 16px; bottom: 8px; color: var(--blue); animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.g-end { margin-top: 12px; padding: 22px 18px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 8px 24px rgba(43, 52, 67, .08); }
.g-end h2 { margin: 4px 0; font: 400 28px var(--serif); }
.g-end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.g-hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.g-hint a { color: var(--blue); }
.g-gallery { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(43, 52, 67, .55); backdrop-filter: blur(6px); }
.g-gallery-box { width: min(880px, 100%); max-height: 90svh; overflow: auto; padding: 18px; border-radius: 18px; background: var(--bg); }
.g-gallery-head { display: flex; justify-content: space-between; align-items: center; }
.g-gallery-head h2 { margin: 0; font: 400 22px var(--serif); }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.g-grid figure { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; }
.g-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.g-grid figure.locked img { filter: blur(14px) grayscale(1) brightness(1.15); }
.g-grid figcaption { padding: 6px 10px; font-size: 13px; }
@media (max-width: 640px) {
  .g-stage { aspect-ratio: 4 / 3; border-radius: 14px; }
  .g-pose { height: 58%; }
  .g-text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .g-pose, .g-next { animation: none; } .g-cg { transition: none; } }
/* 午后小剧场：轻磨砂、名牌与收藏卡。 */
body { background:radial-gradient(ellipse at 18% 8%,#f8f4ed,transparent 65%),var(--bg); }
.g-top { padding-block:16px; }
.g-tools { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.g-top button,.g-gallery-head button { min-height:44px; }
.g-top > span { flex:1; text-align:center; }
.g-box { background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.94); backdrop-filter:blur(20px); box-shadow:0 16px 40px rgba(43,52,67,.07),inset 0 1px 0 #fff; padding:22px 24px 30px; }
.g-speaker { width:max-content; max-width:100%; padding:4px 12px 4px 4px; border-radius:22px; background:rgba(74,120,194,.08); letter-spacing:.04em; }
.g-speaker:empty { display:none; }
.g-box.heart { background:rgba(244,247,255,.86); border-left:3px solid #a9bfe2; }
.g-box.heart .g-text { font-style:normal; color:#647393; }
.g-speaker img { width:38px; height:38px; box-shadow:0 2px 7px #4a78c222; }
.g-box.lu .g-text { font-weight:500; }
.g-text { min-height:2.2em; letter-spacing:.035em; }
.g-pose.enter { animation:pose-enter .5s ease-out,breathe 3.8s .5s ease-in-out infinite; }
@keyframes pose-enter { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%); } }
.g-cg.show { animation:cg-arrive 1.2s ease-out both; }
@keyframes cg-arrive { from { opacity:0; transform:scale(1.025); } to { opacity:1; transform:scale(1); } }
.g-choices button { transition:transform .2s,background .2s,border-color .2s,box-shadow .2s; animation:choice-arrive .35s ease-out both; }
.g-choices button:nth-child(2) { animation-delay:.07s; }
.g-choices button:nth-child(3) { animation-delay:.14s; }
@keyframes choice-arrive { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.g-choices button:hover { transform:translateY(-2px); background:#fff; box-shadow:0 5px 16px #4a78c215; }
.g-btn:active,.g-choices button:active { transform:scale(.98); }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.g-heart-feedback { position:absolute; left:50%; bottom:20%; z-index:4; color:#d5879f; font-size:34px; opacity:0; pointer-events:none; }
.g-heart-feedback.flash { animation:choice-heart .75s ease-out; }
@keyframes choice-heart { 0% { opacity:0; transform:translateY(10px) scale(.6); } 35% { opacity:1; transform:translateY(-6px) scale(1); } 100% { opacity:0; transform:translateY(-38px) scale(1.1); } }
.g-end { background:rgba(255,255,255,.86); border:1px solid #fff; padding:28px; }
.g-end h2 { letter-spacing:.12em; margin:10px 0; }
.g-end-cg { width:min(460px,100%); aspect-ratio:16/9; object-fit:contain; border-radius:12px; margin:18px auto 0; display:block; box-shadow:0 8px 24px #2b344318; }
.g-grid figure { box-shadow:0 4px 14px #2b344310; }
.g-grid figure button { display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.g-grid figure button:hover img { filter:brightness(1.04); }
.g-grid figcaption { padding:12px; }
.g-viewer { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:12px; padding:64px 16px 24px; background:rgba(24,30,40,.92); backdrop-filter:blur(12px); color:#fff; }
.g-viewer figure { margin:0; width:min(1000px,85%); text-align:center; }
.g-viewer img { display:block; max-width:100%; max-height:70svh; object-fit:contain; margin:auto; border-radius:8px; }
.g-viewer figcaption { margin:12px 0; }
.g-viewer > button { flex:none; width:44px; height:44px; border:1px solid #ffffff55; border-radius:50%; background:#ffffff15; color:#fff; font-size:30px; cursor:pointer; }
.g-viewer > button:disabled { opacity:.3; }
.g-viewer .g-viewer-close { position:absolute; top:16px; right:16px; }
@media(max-width:640px) {
 .g-top { padding:10px 12px; flex-wrap:wrap; font-size:12px; }
 .g-top > span { order:3; flex-basis:100%; text-align:left; }
 .g-main { padding-inline:10px; }
 .g-box { padding:18px 16px 28px; }
 .g-cg { object-fit:cover; }
 .g-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .g-grid figcaption { font-size:12px; padding:10px 8px; }
 .g-viewer { gap:6px; padding-inline:8px; }
 .g-viewer figure { width:calc(100% - 100px); }
 .g-end { padding:22px 16px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .g-bg { transform:none; transition:none; }
 .g-cg.show,.g-pose.enter,.g-choices button,.g-heart-feedback.flash { animation:none; }
 .g-choices button,.g-cg { transition:none; }
}

/* 倾斜开关：只在 iPhone 需要授权时出现，放在舞台右上角，不挤顶栏 */
.g-tilt { position:absolute; top:10px; right:10px; z-index:5; min-height:32px; padding:0 12px; border:0; border-radius:999px; background:rgba(255,255,255,.82); color:var(--blue); font:12px/1 inherit; white-space:nowrap; box-shadow:0 4px 12px rgba(43,52,67,.15); backdrop-filter:blur(8px); cursor:pointer; }
@media(max-width:640px) { .g-top > span { display:none; } .g-top { flex-wrap:nowrap; } }

/* 封面在手机上收紧：渐变从下 40% 才开始，文字更小，露出人和猫 */
@media(max-width:640px) {
 .g-main > .g-cover { position:static; padding:16px 8px 4px; gap:4px; background:none; }  /* 封面挪到画框下方 */
 .g-cover h1 { font-size:24px; letter-spacing:.06em; }
 .g-cover .g-kicker { font-size:11px; letter-spacing:.12em; }
 .g-cover .g-btn { min-height:38px; padding:0 20px; margin-top:4px; }
}

/* 顶栏按钮做成胶囊，不被压成圆 */
.g-top button { padding:0 16px; white-space:nowrap; border-radius:999px; }

/* 结局卡不重复显示 CG：舞台上已定格结局 CG */
.g-end-cg { display:none; }

/* 看大图在手机上占满宽度，左右箭头浮在图片两侧 */
@media(max-width:640px) {
 .g-viewer { padding-inline:0; }
 .g-viewer figure { width:100%; }
 .g-viewer img { border-radius:0; max-height:62svh; }
 .g-viewer > button:not(.g-viewer-close) { position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(24,30,40,.45); }
 #previous-cg { left:8px; }
 #next-cg { right:8px; }
}
#voice-toggle[aria-pressed="false"] { opacity:.6; }

/* ── 总裁站深色版 ── */
:root { --ink: #f3ecdf; --muted: #9fb0a6; --blue: #d3ac75; --bg: #0b1615; --panel: rgba(18, 34, 32, .82); --line: rgba(211, 172, 117, .25); }
body { background: radial-gradient(ellipse at 18% 8%, #16302d, transparent 65%), var(--bg); color: var(--ink); }
.g-top button, .g-gallery-head button { background: rgba(18, 34, 32, .85); border-color: rgba(211, 172, 117, .4); color: var(--blue); }
.g-stage { background: #0f1f1d; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.g-box { background: var(--panel); border-color: var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); color: var(--ink); }
.g-speaker { background: rgba(211, 172, 117, .12); color: var(--ink); }
.g-box.heart { background: rgba(14, 30, 28, .9); border-left-color: var(--blue); }
.g-box.heart .g-text { color: #cfd9d1; }
.g-choices button { background: rgba(18, 34, 32, .9); border-color: rgba(211, 172, 117, .35); color: var(--ink); }
.g-choices button:hover { background: rgba(211, 172, 117, .18); }
.g-btn { background: var(--blue); color: #1a1408; }
.g-btn.line { background: transparent; color: var(--blue); border-color: rgba(211, 172, 117, .5); }
.g-gallery-box, .g-end { background: #102120; color: var(--ink); }
.g-grid figure.locked { background: rgba(255, 255, 255, .06); }
/* 手机聊天气泡：林予安在左，顾总在右 */
.g-box.msg_lin, .g-box.msg_gu { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.g-box.msg_lin .g-text, .g-box.msg_gu .g-text { display: inline-block; max-width: 86%; padding: 10px 16px; border-radius: 18px; font-size: 15px; font-style: normal; }
.g-box.msg_lin .g-text { background: #f3ecdf; color: #1c2a28; border-bottom-left-radius: 4px; }
.g-box.msg_gu { text-align: right; }
.g-box.msg_gu .g-speaker { margin-left: auto; }
.g-box.msg_gu .g-text { background: var(--gold, #d3ac75); color: #1a1408; border-bottom-right-radius: 4px; text-align: left; }