.avatar-stage { display: grid; justify-items: center; min-width: 0; }
.avatar-art { display: block; width: 100%; max-width: 320px; overflow: visible; image-rendering: pixelated; }
.avatar-caption { display: grid; gap: 5px; text-align: center; max-width: 100%; }
.avatar-caption b { color: var(--ink); font-size: 22px; overflow-wrap: anywhere; }
.avatar-caption span { color: var(--accent); font-size: 13px; letter-spacing: .12em; }
.avatar-breathe { animation: avatar-breathe 2.4s steps(1, end) infinite; }
.avatar-eyes { animation: avatar-blink 5.2s steps(1, end) infinite; }
.avatar-eyes-closed { opacity: 0; animation: avatar-blink-closed 5.2s steps(1, end) infinite; }
.avatar-gear { animation: avatar-sway 2.4s steps(1, end) infinite; }
@keyframes avatar-breathe { 50% { translate: 0 -1px; } }
@keyframes avatar-blink { 0%, 47%, 100% { opacity: 1; } 43% { opacity: 0; } }
@keyframes avatar-blink-closed { 0%, 47%, 100% { opacity: 0; } 43% { opacity: 1; } }
@keyframes avatar-sway { 50% { translate: 0 1px; } }
.character-page main { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.character-preview { position: sticky; top: 28px; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #8066bc30, transparent 65%), var(--surface); }
.character-preview .avatar-stage { padding: 12px 0 24px; }
.character-preview h2 { color: var(--accent); font-size: 14px; letter-spacing: .18em; }
.character-preview p { font-size: 12px; }
.character-page .character-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.character-section legend { color: var(--accent); font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.class-option { position: relative; display: flex; gap: 10px; align-items: center; padding: 14px 10px; border: 1px solid var(--line); border-radius: 0; cursor: pointer; background: var(--well); }
.class-option:has(:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.class-option:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.class-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.class-option .ms { color: var(--accent); font-size: 25px; }
.class-option .hint-info { flex-shrink: 0; margin-left: -6px; }
.class-option .hint-info .ms { color: inherit; font-size: 18px; }
/* Character sheet portrait (角色面板): beside the stat plaques, above them on phones */
.char-avatar { padding: 14px 0 6px; animation: badgeIn .4s var(--ease-out) backwards; }
.char-avatar .avatar-art { width: 176px; border-radius: 0; background: radial-gradient(closest-side at 50% 60%, rgba(128, 102, 188, .3), transparent); }
.char-avatar .avatar-lantern { filter: drop-shadow(0 0 2px #FFC86B); animation: lanternFlicker 2.6s steps(1, end) infinite; }
@keyframes lanternFlicker { 40% { filter: drop-shadow(0 0 1px #FFC86B); } 70% { filter: drop-shadow(0 0 3px #FFC86B); } }
.char-avatar .avatar-caption b { font-size: 15px; }
.char-avatar .avatar-caption span { font-size: 12px; }
/* The hero leans over the board's top edge, centred above the stars: it shares the board's grid cell, the board
   drops by the head's height, and the svg's last two rows (the hands) overlap the edge. --px is one sprite pixel. */
.diary-grid { --px: 4px; --stars-w: 125px; --board-pad: 22px; }
.home-avatar { grid-area: board; align-self: start; justify-self: end; position: relative; z-index: 2; display: block;
    width: calc(32 * var(--px)); margin: -14px calc(var(--board-pad) + (var(--stars-w) - 32 * var(--px)) / 2) 0 0; cursor: pointer; }
.home-avatar .avatar-art { width: 100%; }
.home-avatar .avatar-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The right column drops by the same amount so its first card lines up with the board's top edge */
.diary-grid > .board, .diary-side { margin-top: calc(19 * var(--px) - 14px); }
@media (max-width: 1100px) { .diary-side { margin-top: 0; } }
/* The date nav fills the board's drop on the left, level with the hero's face on the right */
.diary-nav { grid-area: board; align-self: start; justify-self: start; z-index: 1; height: calc(19 * var(--px) - 14px); min-height: 0; margin: 0; flex-wrap: nowrap; }
/* Departure (character page) and arrival (home) share one golden light so the hand-off reads as one move */
.departure { position: fixed; inset: 0; z-index: 9000; overflow: hidden; cursor: pointer;
    background: radial-gradient(circle at 50% 38%, #FFF4D6 0, var(--accent) 16%, #6B4BB0 42%, var(--paper) 72%); }
.departure::after, .is-arriving::after { content: ""; position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 38%, #FFFBEF 0, #FFE7AE 35%, var(--accent) 80%); }
.departure::after { z-index: 5; opacity: 0; transition: opacity .55s ease-in .1s; }
.departure.is-flash::after { opacity: 1; }
.departure-rays { position: absolute; left: 50%; top: 38%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
    background: repeating-conic-gradient(#FFE7AE33 0 5deg, transparent 5deg 15deg);
    mask: radial-gradient(circle, #000, transparent 40%); animation: raysSpin 18s linear infinite; }
@keyframes raysSpin { to { rotate: 360deg; } }
.departure-embers i { position: absolute; left: var(--x); bottom: -8px; width: 4px; height: 4px; background: #FFE7AE; box-shadow: 0 0 8px #FFC86B;
    animation: emberRise var(--d) linear var(--delay) infinite; }
@keyframes emberRise { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(12px, -85vh); } }
.departure-half { position: absolute; inset: 0; overflow: hidden; background: var(--paper); box-shadow: 0 0 40px #0008; }
.departure-half main { position: absolute; margin: 0; }
.departure-half * { animation: none !important; }
.departure-half .avatar-art { visibility: hidden; }
.departure-hero { position: absolute; z-index: 2; max-width: none; filter: drop-shadow(0 0 18px #FFE7AE); }
.departure-hero :is(.avatar-breathe, .avatar-gear) { animation-duration: .3s; }
/* Title card: the kicker's rules draw outwards, the title sharpens out of a blur, then the hero's line fades up */
.chapter-card { position: absolute; z-index: 3; left: 16px; right: 16px; top: 59%; display: grid; justify-items: center; gap: 10px; text-align: center; color: #FFF8E8; pointer-events: none;
    padding: 18px 0 24px; background: radial-gradient(closest-side, #0B0812B3, transparent); }
.chapter-card > * { margin: 0; opacity: 0; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out), letter-spacing 1.2s var(--ease-out); }
.chapter-kicker { display: flex; align-items: center; gap: 12px; font: 800 13px 'Cinzel', serif; letter-spacing: .7em; color: #FFE7AE; text-shadow: 0 1px 6px #000; }
.chapter-kicker::before, .chapter-kicker::after { content: ""; width: 0; height: 1px; background: currentColor; transition: width .8s var(--ease-out) .3s; }
.chapter-title { font-size: clamp(34px, 7vw, 60px); font-weight: 900; letter-spacing: .3em; transform: scale(1.15); filter: blur(8px);
    text-shadow: 0 0 24px #FFB84D, 0 2px 0 #4A2F0A; }
.chapter-sub { font-size: 15px; color: #FFF1D0; transform: translateY(8px); text-shadow: 0 1px 6px #000; }
.chapter-sub b { color: #FFE7AE; }
.is-titled .chapter-card > * { opacity: 1; transform: none; filter: none; }
.is-titled .chapter-kicker { letter-spacing: .35em; }
.is-titled .chapter-kicker::before, .is-titled .chapter-kicker::after { width: 48px; }
.is-titled .chapter-title { transition-delay: .25s; }
.is-titled .chapter-sub { transition-delay: .8s; }
.departure-bar { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 11vh; background: #000; animation: barIn .5s var(--ease-out) both; }
.departure-bar.is-bottom { top: auto; bottom: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 24px; --from: 100%; }
.departure-bar span { color: #fff8; font-size: 12px; letter-spacing: .2em; }
@keyframes barIn { from { transform: translateY(var(--from, -100%)); } }
.is-arriving::after { z-index: 9000; animation: arrivalLight .9s var(--ease-out) forwards; }
.is-arriving .home-avatar { animation: avatarLand .6s var(--ease-spring) .35s both; }
@keyframes arrivalLight { to { opacity: 0; transform: scale(1.3); } }
@keyframes avatarLand { from { opacity: 0; transform: translateY(-36px) scale(.6); } }
/* Skins: an aura glow traced around the sprite, sparkles twinkling in place, and a pop when a skin is put on */
.avatar-art.has-aura { filter: drop-shadow(0 0 1px var(--aura)) drop-shadow(0 0 5px color-mix(in srgb, var(--aura) 55%, transparent)); }
.avatar-sparkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.2s ease-in-out infinite; }
.is-equipping .avatar-art { animation: tierPop .45s var(--ease-spring); }
:is(.home-avatar, .char-avatar) { border-radius: 0; cursor: pointer; }
:is(.home-avatar, .char-avatar):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.char-avatar:hover .avatar-art { filter: drop-shadow(0 0 6px rgba(232, 176, 75, .35)); }
.char-avatar:hover .avatar-art.has-aura { filter: drop-shadow(0 0 1px var(--aura)) drop-shadow(0 0 8px color-mix(in srgb, var(--aura) 70%, transparent)); }

/* Wardrobe: one slot per title in a scrolling grid; locked skins show as silhouettes */
.sd-icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; color: var(--accent);
    background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(232, 176, 75, .45), 0 -2px 0 var(--rim), 0 2px 0 var(--rim), -2px 0 0 var(--rim), 2px 0 0 var(--rim), 0 0 14px rgba(232, 176, 75, .2); }
.skin-dialog[open] .sd-icon { animation: stamp .45s var(--ease-spring) .1s backwards; }
.sd-icon .ms { font-size: 28px; }
.skin-dialog { width: min(560px, calc(100vw - 32px)); }
.skin-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px;
    max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; margin: 14px -8px 0; padding: 4px 8px 8px; }
.skin-grid li { animation: badgeIn .35s var(--ease-out) backwards; animation-delay: calc(var(--j) * 25ms + 120ms); }
.skin-slot { display: grid; justify-items: center; gap: 2px; width: 100%; padding: 8px 6px 10px; border-radius: 0; text-align: center;
    background: var(--well); box-shadow: inset 0 0 0 1px var(--well-line), 0 -2px 0 var(--rim), 0 2px 0 var(--rim), -2px 0 0 var(--rim), 2px 0 0 var(--rim); transition: transform .2s var(--ease-out), box-shadow .2s; }
.skin-slot:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--accent-deep), 0 -2px 0 var(--accent-deep), 0 2px 0 var(--accent-deep), -2px 0 0 var(--accent-deep), 2px 0 0 var(--accent-deep), 0 0 14px rgba(232, 176, 75, .22); }
.skin-slot[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), 0 -2px 0 var(--accent), 0 2px 0 var(--accent), -2px 0 0 var(--accent), 2px 0 0 var(--accent), 0 0 16px rgba(232, 176, 75, .3); }
.skin-slot b { font-size: 13px; line-height: 1.3; }
.skin-slot small { font-size: 11px; color: var(--muted); }
.skin-slot[aria-pressed="true"] b { color: var(--accent); }
.skin-art { width: 72px; }
.skin-art .avatar-art { width: 72px; }
.skin-art .avatar-caption { display: none; }
.skin-slot.is-locked { cursor: not-allowed; }
.skin-slot.is-locked .avatar-art { filter: brightness(0); opacity: .35; }
.skin-slot.is-locked b { color: var(--subtle); }
.skin-slot small .ms { font-size: 12px; vertical-align: -2px; margin-right: 2px; }

@media (max-width: 720px) {
    .character-page main { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .character-preview { position: static; grid-row: 1; }
    .character-page .character-preview { padding: 16px; }
    .character-preview .avatar-stage { grid-template-columns: 128px minmax(0, 1fr); align-items: center; padding: 0; }
    .character-preview .avatar-art { width: 128px; }
    .character-preview h2 { margin: 0; }
    .character-preview p { margin: 6px 0 0; }
    .diary-grid { --px: 3px; --stars-w: 82px; --board-pad: 16px; }
    .char-avatar { grid-template-columns: 132px minmax(0, 1fr); align-items: center; justify-items: start; gap: 14px; padding: 14px 16px 0; }
    .char-avatar .avatar-art { width: 132px; }
    .char-avatar .avatar-caption { text-align: left; }
    .char-avatar:focus-visible { outline: none; }
    .char-avatar:focus-visible .avatar-caption b { text-decoration: underline; }
    /* Too narrow to share the drop with the hero, so the date nav takes its own row above the board */
    .diary-grid { grid-template-areas: "nav" "board" "side" "log"; }
    .diary-nav { grid-area: nav; height: auto; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .avatar-breathe, .avatar-eyes, .avatar-eyes-closed, .avatar-gear, .char-avatar .avatar-lantern, .avatar-sparkle { animation: none; }
}