/* 首页独立的幻羽组件。共享颜色定义在 style.css；角色配色取自 OC 原型。 */
.home-oc {
    --oc-ink: #6c5186;
    --oc-soft: #eee5f6;
    --oc-paper: #fffaf8;
    --oc-line: #c8b4d9;
    --oc-pink: #e8a3c3;
}
[data-theme="dark"] .home-oc {
    --oc-ink: #d8c2f0;
    --oc-soft: #342f42;
    --oc-paper: #252d29;
    --oc-line: #6e5f7e;
    --oc-pink: #e9b3cf;
}
.home-oc .hero { padding: 32px 0 max(196px, calc(var(--scene-h) * .9)); }
/* 锚在 Hero 的草地上，不参与正文排版，也不随页面悬浮。 */
.oc { position: absolute; right: clamp(24px, 20vw, 420px); bottom: max(18px, calc(var(--scene-h) * .12)); z-index: 3; width: clamp(120px, 12vw, 176px); color: var(--oc-ink); text-align: center; --oc-lean: 0deg; }
.oc [hidden] { display: none !important; }
.oc button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oc button:disabled { cursor: default; }
.oc button:focus-visible, .oc a:focus-visible, .oc-bubble p:focus-visible { outline: 3px solid var(--oc-ink); outline-offset: 5px; }
.oc-icon { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.oc-scene { aspect-ratio: 1; position: relative; }
.oc-character { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; background: none; border: 0; border-radius: 40%; transform: rotate(var(--oc-lean)); transition: transform .25s ease; touch-action: manipulation; }
.oc-character::after { content: ''; position: absolute; height: 18px; width: 45%; left: 28%; bottom: -4px; background: color-mix(in srgb, var(--oc-ink) 12%, transparent); border-radius: 50%; filter: blur(5px); z-index: -1; }
.oc-character img { width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; animation: oc-breathe 5s ease-in-out infinite; filter: drop-shadow(0 5px 3px color-mix(in srgb, var(--oc-ink) 10%, transparent)); }
.oc-character:hover img { filter: drop-shadow(0 3px 9px color-mix(in srgb, var(--oc-pink) 40%, transparent)); }
.oc[data-state="sleep"] .oc-character img { animation-duration: 7s; }
/* 对话贴近角色临时弹出，隐藏时不留下空白面板或焦点目标。 */
.oc-bubble { position: absolute; right: calc(100% + 8px); bottom: 0; width: 280px; padding: 12px 15px 4px; text-align: left; overflow-wrap: anywhere; background: var(--oc-paper); border: 1.5px solid var(--oc-line); border-radius: var(--wobble-card); box-shadow: 3px 4px 0 color-mix(in srgb, var(--oc-line) 22%, transparent); }
.oc-bubble::before { content: ''; width: 12px; height: 12px; position: absolute; bottom: 32px; right: -7px; transform: rotate(45deg); border-top: 1.5px solid var(--oc-line); border-right: 1.5px solid var(--oc-line); background: var(--oc-paper); }
.oc-bubble p { font-size: .88rem; line-height: 1.7; margin: 0; max-height: 6.8em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.oc-book-button { padding: 6px 0; min-height: 44px; display: flex; align-items: center; gap: 6px; margin-left: auto; background: none; border: 0; font-size: .75rem !important; }
.oc-book-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.oc-voice-controls { display: flex; justify-content: center; gap: 10px; }
.oc-voice-controls button { background: var(--oc-paper); border: 1px solid var(--oc-line); border-radius: 20px; padding: 8px 12px; min-height: 44px; font-size: .8rem; }
.oc-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.oc-sparkles span { position: absolute; left: calc(15% + var(--i) * 11%); top: 55%; color: var(--oc-pink); font-size: 22px; opacity: 0; animation: oc-spark 1.25s calc(var(--i) * .02s) ease-out forwards; }

/* 星屿手记：原生 dialog 的焦点圈与 Escape，所有内容在首页内。 */
.oc-book { margin: auto; width: min(780px, calc(100% - 32px)); max-height: min(84dvh, 840px); padding: 0; color: var(--dark-text); background: var(--card-bg); border: 2px solid var(--oc-line); border-radius: var(--wobble-card); box-shadow: 8px 10px 0 color-mix(in srgb, var(--oc-ink) 15%, transparent); text-align: left; overscroll-behavior: contain; }
.oc-book::backdrop { background: rgba(22, 29, 24, .48); backdrop-filter: blur(5px); }
.oc-book-heading { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px 15px; }
.oc-book-heading p { font-size: .67rem; letter-spacing: .22em; color: var(--oc-ink); margin: 0; }
.oc-book-heading h2 { font-size: 1.65rem; margin: 0; }
.oc-close { align-self: flex-start; width: 44px; height: 44px; border: 1px solid var(--oc-line); background: var(--oc-soft); border-radius: 50%; font-size: 1.5rem !important; }
.oc-tabs { display: flex; padding: 0 24px; gap: 20px; border-bottom: 1px solid var(--line-soft); }
.oc-tabs button { background: none; border: 0; padding: 10px 3px; min-height: 44px; font-size: .92rem; color: var(--light-text); border-bottom: 2px solid transparent; }
.oc-tabs [aria-selected="true"] { color: var(--oc-ink); border-bottom-color: var(--oc-ink); }
.oc-panel { padding: 25px 28px; }
.oc-profile { display: grid; grid-template-columns: 185px 1fr; gap: 26px; align-items: center; }
.oc-profile > img { width: 100%; height: 245px; object-fit: contain; }
.oc-profile h3 { color: var(--oc-ink); font-size: 1.5rem; margin-bottom: 10px; }
.oc-profile h3 small { font-size: .8rem; font-weight: 400; margin-left: 10px; }
.oc-profile p { font-size: .9rem; margin-bottom: 12px; }
.oc-profile-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 15px; }
.oc-profile-tags span { font-size: .72rem; color: var(--oc-ink); background: var(--oc-soft); border-radius: 20px; padding: 3px 10px; }
.oc-world-note { display: flex; align-items: center; gap: 15px; margin-top: 16px; padding: 18px; background: var(--bg-soft); border-radius: var(--wobble-sm); }
.oc-world-note p { font-size: .82rem; margin: 0; }
.oc-world-note .oc-icon { width: 48px; height: 48px; }
.oc-world-note button { flex-shrink: 0; padding: 10px; font-size: .78rem; background: var(--card-bg); border: 1px solid var(--oc-line); border-radius: var(--wobble-sm); }
.oc-collection-count { margin: 0 0 14px; font-size: .82rem; color: var(--oc-ink); }
.oc-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-keepsake { padding: 16px; border: 1px dashed var(--oc-line); border-radius: var(--wobble-sm); display: flex; align-items: flex-start; gap: 12px; }
.oc-keepsake > .oc-icon { width: 47px; height: 55px; opacity: .5; filter: grayscale(.8); }
.oc-keepsake.is-collected { border-style: solid; background: color-mix(in srgb, var(--oc-soft) 42%, transparent); }
.oc-keepsake.is-collected .oc-icon { opacity: 1; filter: none; }
.oc-keepsake h3 { font-size: .94rem; }
.oc-keepsake p { font-size: .78rem; color: var(--light-text); margin: 6px 0; }
.oc-keepsake small { color: var(--oc-ink); font-size: .67rem; }
.oc-keepsake a { display: block; font-size: .8rem; padding-top: 8px; color: var(--primary-hover); }
.oc-memory { font-size: .75rem; margin: 16px 0 0; color: var(--light-text); }
.oc-gallery-intro { font-size: .85rem; color: var(--light-text); margin: 0 0 18px; }
.oc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.oc-pose-card { padding: 12px 8px; background: color-mix(in srgb, var(--oc-soft) 38%, transparent); border: 1px solid var(--oc-line); border-radius: var(--wobble-sm); }
.oc-pose-card img { width: 100%; height: 155px; object-fit: contain; }
.oc-pose-card span { display: block; font-size: .82rem; margin-top: 8px; }
.oc-pose-card:hover { background: var(--oc-soft); }
@keyframes oc-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes oc-spark { 10% { opacity: 1; } 100% { transform: translateY(-115px) rotate(16deg); opacity: 0; } }
.oc[data-paused="true"] *, .oc[data-paused="true"] *::before, .oc[data-paused="true"] *::after { animation-play-state: paused !important; }
@media (max-width: 768px) {
    .home-oc .hero { padding: 38px 0 180px; min-height: auto; }
    .oc { right: 24px; width: 120px; }
    /* 气泡仍留在角色左侧的草地内，不挤出视口或遮挡探索按钮。 */
    .oc-bubble { width: min(280px, calc(100vw - 168px)); }
    .oc-profile { grid-template-columns: 130px 1fr; gap: 16px; }
    .oc-profile > img { height: 200px; }
}
@media (max-width: 480px) {
    .oc-book { max-height: 88dvh; }
    .oc-book-heading { padding: 18px 18px 12px; }
    .oc-tabs { padding-inline: 18px; gap: 17px; }
    .oc-tabs button { font-size: .82rem; }
    .oc-panel { padding: 20px 18px; }
    .oc-profile { grid-template-columns: 1fr; gap: 12px; }
    .oc-profile > img { height: 185px; }
    .oc-profile h3 { text-align: center; }
    .oc-profile-tags { justify-content: center; }
    .oc-collection { grid-template-columns: 1fr; }
    .oc-gallery { grid-template-columns: 1fr 1fr; }
    .oc-pose-card img { height: 132px; }
    .oc-world-note { flex-wrap: wrap; padding: 13px; }
    .oc-world-note p { flex: 1; min-width: 135px; }
    .oc-world-note button { margin-left: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .oc *, .oc *::before, .oc *::after { animation: none !important; transition: none !important; }
    .oc-character { transform: none; }
}