/* Refined xianxia interaction layer: local SVG icons, ambient qi and restrained motion. */

.ui-icon {
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.xianxia-ornament {
  position: absolute;
  z-index: -1;
  inset: 82px 0 0;
  opacity: .13;
  background: url("./assets/images/xianxia-ui-ornament.png") center / cover no-repeat;
  filter: drop-shadow(0 0 16px rgba(211, 181, 110, .12));
  mix-blend-mode: multiply;
  transform: scale(1.015);
  animation: ornament-breathe 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.xianxia-ornament--profiles { opacity: .1; background-position: center 42%; }
.xianxia-ornament--creation { position: fixed; inset: 88px 0 0; opacity: .08; }

.account-card,
.profile-card,
.creation-shell .form-section,
.status-card,
.action-dock,
.scene-card,
.combat-card,
.side-panel {
  transform-style: preserve-3d;
}

.account-card { animation: account-card-enter .7s cubic-bezier(.2,.8,.2,1) both, card-aura 7s 1s ease-in-out infinite alternate; }
.account-card:hover { box-shadow: 0 34px 88px rgba(26, 61, 52, .28), inset 0 0 0 1px rgba(255, 248, 220, .66), 0 0 32px rgba(171, 141, 76, .09); }
.account-card__seal { box-shadow: inset 0 0 16px rgba(220, 192, 123, .12), 0 0 22px rgba(70, 126, 112, .1); animation: seal-hover 4.8s ease-in-out infinite alternate; }

.account-submit,
.creation-shell .button--primary,
.free-action button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.account-submit::before,
.creation-shell .button--primary::before,
.free-action button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90%;
  bottom: -90%;
  left: -32%;
  width: 22%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(250, 234, 186, .48), transparent);
  transform: rotate(17deg);
}

.account-submit:hover::before,
.account-submit:focus-visible::before,
.creation-shell .button--primary:hover::before,
.creation-shell .button--primary:focus-visible::before,
.free-action button:hover::before,
.free-action button:focus-visible::before { animation: button-light-pass .85s ease-out; }

.account-submit i,
.landing-continue i,
.profile-card__enter i,
.free-action button > i { display: grid; place-items: center; }
.account-submit .ui-icon,
.landing-continue .ui-icon,
.profile-card__enter .ui-icon,
.free-action button .ui-icon { width: 17px; height: 17px; transition: transform .25s, filter .25s; }
.account-submit:hover .ui-icon,
.landing-continue:hover .ui-icon,
.profile-card:hover .profile-card__enter .ui-icon,
.free-action button:hover .ui-icon { filter: drop-shadow(0 0 5px currentColor); transform: translateX(4px); }

.profile-card { animation: profile-awaken .55s cubic-bezier(.2,.8,.2,1) both; }
.profile-card:nth-child(2) { animation-delay: .08s; }
.profile-card:nth-child(3) { animation-delay: .16s; }
.profile-card:nth-child(4) { animation-delay: .24s; }
.profile-card::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  bottom: 7px;
  width: 28%;
  opacity: 0;
  background: radial-gradient(circle at 100% 0, rgba(217, 187, 117, .2), transparent 66%);
  transition: opacity .3s;
  pointer-events: none;
}
.profile-card:hover::after { opacity: 1; }
.profile-card__avatar { box-shadow: inset 0 0 22px rgba(196, 164, 91, .11), 0 0 0 5px rgba(45, 102, 89, .035); }
.profile-card__avatar::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(181, 140, 62, .18);
  border-radius: 50%;
  animation: avatar-pulse 3.8s ease-in-out infinite alternate;
}
.profile-card--new > span { display: grid; width: 48px; height: 48px; place-items: center; color: #7f612b; border: 1px solid rgba(139, 101, 37, .34); border-radius: 50%; box-shadow: 0 0 0 7px rgba(58, 112, 99, .05); transition: transform .3s, box-shadow .3s; }
.profile-card--new > span .ui-icon { width: 23px; height: 23px; }
.profile-card--new:hover > span { transform: rotate(90deg) scale(1.06); box-shadow: 0 0 0 10px rgba(58, 112, 99, .07), 0 0 24px rgba(192, 157, 79, .14); }

.creation-header .icon-button .ui-icon,
.side-panel > header .icon-button .ui-icon,
.status-card .icon-button .ui-icon { width: 18px; height: 18px; }
.status-card .icon-button .ui-icon { width: 16px; height: 16px; }
.creation-header .icon-button:hover .ui-icon { transform: translateX(-2px); }
.side-panel > header .icon-button:hover .ui-icon { transform: rotate(90deg); }
.creation-header .icon-button .ui-icon,
.side-panel > header .icon-button .ui-icon { transition: transform .28s; }

.creation-intro > span { animation: destiny-medallion 4s ease-in-out infinite alternate; }
.creation-shell .choice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(248, 236, 195, .3) 48%, transparent 68%);
  transform: translateX(-85%);
  transition: opacity .2s;
  pointer-events: none;
}
.creation-shell .choice-card:hover::before { opacity: 1; animation: choice-glint 1s ease-out; }
.creation-shell .choice-card.is-selected .choice-card__mark { animation: selected-mark 2.2s ease-in-out infinite alternate; }
.creation-shell .stat-editor button { transition: transform .2s, color .2s, border-color .2s, box-shadow .2s; }
.creation-shell .stat-editor button:hover { color: #7c5b27; border-color: rgba(139, 102, 41, .52); box-shadow: 0 0 0 4px rgba(59, 117, 102, .07); transform: scale(1.08); }

.top-actions > button:not(.sound-button) i { display: grid; place-items: center; }
.top-actions > button:not(.sound-button) .ui-icon { width: 17px; height: 17px; transition: transform .28s, filter .28s; }
.top-actions > button:not(.sound-button):hover .ui-icon { filter: drop-shadow(0 0 5px rgba(159, 116, 45, .4)); transform: translateY(-2px) scale(1.06); }
.sound-button { display: grid; place-items: center; }
.sound-button > .ui-icon { width: 18px; height: 18px; color: #795a28; animation: sound-breathe 2.8s ease-in-out infinite alternate; }
.sound-button > i { display: none; }

.world-stage__ornament {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .08;
  background: url("./assets/images/xianxia-ui-ornament.png") center / cover no-repeat;
  filter: drop-shadow(0 0 12px rgba(231, 208, 150, .12));
  mix-blend-mode: soft-light;
  animation: world-ornament-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.qi-ribbons,
.spirit-petals {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.qi-ribbons i {
  position: absolute;
  width: 36%;
  height: 13%;
  opacity: 0;
  border-top: 1px solid rgba(232, 211, 153, .56);
  border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(220, 198, 136, .44));
}
.qi-ribbons i:nth-child(1) { top: 25%; left: -18%; transform: rotate(-10deg); animation: qi-ribbon 12s linear infinite; }
.qi-ribbons i:nth-child(2) { top: 47%; left: -26%; width: 48%; animation: qi-ribbon 16s 4s linear infinite; }
.qi-ribbons i:nth-child(3) { top: 70%; left: -20%; width: 30%; transform: rotate(8deg); animation: qi-ribbon 14s 8s linear infinite; }

.spirit-petals i {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * .52);
  opacity: 0;
  background: linear-gradient(135deg, rgba(241, 217, 159, .86), rgba(121, 168, 150, .56));
  border-radius: 90% 10% 80% 20%;
  box-shadow: 0 0 8px rgba(228, 205, 146, .25);
  animation: petal-fall var(--duration) var(--delay) linear infinite;
}

.status-card { animation: status-unseal .65s .1s cubic-bezier(.2,.8,.2,1) both; }
.action-dock { animation: dock-unseal .65s .18s cubic-bezier(.2,.8,.2,1) both; }
.scene-card,
.combat-card { animation: scene-manifest .58s .16s cubic-bezier(.16,.8,.22,1) both; }

.action-dock button { position: relative; overflow: hidden; }
.action-dock button::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, rgba(225, 202, 145, .16), transparent 72%);
  transform: translateX(-35%);
  transition: opacity .25s, transform .35s;
  pointer-events: none;
}
.action-dock button:hover::before { opacity: 1; transform: translateX(0); }
.action-dock button > i { display: grid; place-items: center; transition: color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.action-dock button > i .ui-icon { width: 19px; height: 19px; }
.action-dock button:hover > i { color: #315f53; border-color: rgba(61, 117, 101, .48); box-shadow: 0 0 0 5px rgba(57, 111, 97, .06), 0 0 18px rgba(194, 160, 82, .12); transform: rotate(-4deg) scale(1.06); }
.action-dock button.is-ready > i { animation: breakthrough-ready 1.8s ease-in-out infinite alternate; }

.scene-card__seal { animation: scene-seal 4s ease-in-out infinite alternate; }
.scene-card__rule > span { animation: rule-gem 2.4s ease-in-out infinite alternate; }
.story-choice > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; }
.story-choice > i .ui-icon { width: 13px; height: 13px; }
.story-choice:hover > i .ui-icon { transform: translateX(2px); }
.story-choice > i .ui-icon { transition: transform .2s; }

.meter__fill { position: relative; overflow: hidden; }
.meter__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.52) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: meter-flow 3.8s ease-in-out infinite;
}

.panel-backdrop { animation: veil-in .25s ease-out both; }
.side-panel { animation: panel-unroll .36s cubic-bezier(.2,.8,.2,1), panel-glow 7s 1s ease-in-out infinite alternate; }

.mobile-tabs button i { display: grid; place-items: center; }
.mobile-tabs button .ui-icon { width: 18px; height: 18px; transition: transform .24s, filter .24s; }
.mobile-tabs button:active .ui-icon { filter: drop-shadow(0 0 5px rgba(151, 112, 46, .4)); transform: translateY(-2px) scale(1.08); }

.account-submit:active,
.creation-shell .button--primary:active,
.profile-card:active,
.story-choice:active,
.action-dock button:active,
.free-action button:active { transform: translateY(1px) scale(.985); }

@keyframes ornament-breathe { to { opacity: .18; transform: scale(1.035) translate3d(4px,-3px,0); } }
@keyframes card-aura { to { filter: drop-shadow(0 14px 22px rgba(40, 87, 75, .08)); } }
@keyframes seal-hover { to { transform: translateY(-3px); box-shadow: inset 0 0 20px rgba(220, 192, 123, .16), 0 0 28px rgba(70, 126, 112, .14); } }
@keyframes button-light-pass { 0% { left: -32%; opacity: 0; } 25% { opacity: 1; } 100% { left: 112%; opacity: 0; } }
@keyframes profile-awaken { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); } }
@keyframes avatar-pulse { to { opacity: .25; transform: scale(.82); } }
@keyframes destiny-medallion { to { box-shadow: 0 0 0 9px rgba(49, 104, 91, .07), 0 10px 26px rgba(34, 82, 70, .24), 0 0 20px rgba(203, 171, 91, .12); transform: translateY(-2px); } }
@keyframes choice-glint { to { transform: translateX(85%); } }
@keyframes selected-mark { to { box-shadow: 0 0 0 5px rgba(78, 143, 128, .1), 0 0 14px rgba(180, 142, 67, .22); } }
@keyframes sound-breathe { to { opacity: .58; transform: scale(.92); } }
@keyframes world-ornament-drift { to { opacity: .12; transform: scale(1.025) translate3d(5px,-4px,0); } }
@keyframes qi-ribbon { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(-8deg) scaleX(.7); } 14% { opacity: .58; } 70% { opacity: .12; } 100% { opacity: 0; transform: translate3d(150vw,-24vh,0) rotate(-8deg) scaleX(1.35); } }
@keyframes petal-fall { 0% { opacity: 0; transform: translate3d(0,-5vh,0) rotate(0deg); } 12% { opacity: .7; } 82% { opacity: .34; } 100% { opacity: 0; transform: translate3d(var(--drift),112vh,0) rotate(520deg); } }
@keyframes status-unseal { from { opacity: 0; transform: translate3d(-18px,0,0); filter: blur(4px); } }
@keyframes dock-unseal { from { opacity: 0; transform: translate3d(18px,0,0); filter: blur(4px); } }
@keyframes scene-manifest { from { opacity: 0; transform: translateY(20px) scale(.975); filter: blur(7px); } }
@keyframes scene-seal { to { transform: translateY(-3px) rotate(2deg); box-shadow: 0 0 22px rgba(179, 136, 56, .22); } }
@keyframes rule-gem { to { color: #b78839; text-shadow: 0 0 10px rgba(183, 139, 58, .4); transform: rotate(45deg) scale(1.08); } }
@keyframes breakthrough-ready { to { color: #f0d896; box-shadow: 0 0 0 6px rgba(192, 151, 69, .1), 0 0 22px rgba(206, 168, 88, .3); transform: scale(1.07); } }
@keyframes meter-flow { 0%,55% { transform: translateX(-110%); } 100% { transform: translateX(115%); } }
@keyframes veil-in { from { opacity: 0; } }
@keyframes panel-glow { to { box-shadow: -34px 0 92px rgba(7, 30, 24, .46), inset 1px 0 rgba(222, 198, 139, .12); } }

@media (max-width: 760px) {
  .xianxia-ornament { inset: 66px 0 0; opacity: .08; background-size: auto 100%; }
  .xianxia-ornament--creation { inset: 68px 0 0; }
  .world-stage__ornament { opacity: .05; background-size: auto 100%; }
  .qi-ribbons { opacity: .6; }
  .spirit-petals i:nth-child(2n) { display: none; }
  .scene-card,
  .combat-card { animation-delay: .08s; }
}

@media (pointer: coarse) {
  .account-card:hover,
  .profile-card:hover { filter: none; }
}

/* Celestial clarity pass: moon-white, cool jade and sky-blue replace the sepia veil. */
:root {
  --celestial-ink: #123c43;
  --celestial-ink-soft: #4e7176;
  --celestial-jade: #21867f;
  --celestial-jade-bright: #56bcb5;
  --celestial-sky: #78aec8;
  --celestial-line: rgba(48, 119, 120, .25);
  --celestial-paper: rgba(243, 251, 250, .91);
  --celestial-shadow: rgba(24, 78, 81, .18);
}

.xianxia-ornament {
  opacity: .045;
  filter: saturate(.5) hue-rotate(34deg) drop-shadow(0 0 18px rgba(91, 177, 180, .12));
  mix-blend-mode: soft-light;
}
.xianxia-ornament--profiles { opacity: .035; }
.xianxia-ornament--creation { opacity: .03; }

.account-shell,
.profiles-shell {
  color: var(--celestial-ink);
  background: #dbecea;
}
.account-shell__scene,
.profiles-shell__scene {
  background:
    linear-gradient(90deg, rgba(221, 240, 238, .12), rgba(220, 239, 240, .2)),
    url("./assets/images/style-baseline.png") center / cover no-repeat;
  filter: saturate(.92) brightness(1.06) contrast(1.01);
}
.account-shell::before,
.profiles-shell::before,
.profiles-shell::before {
  background:
    radial-gradient(circle at 76% 18%, rgba(183, 229, 237, .28), transparent 29%),
    linear-gradient(90deg, rgba(237, 248, 246, .88) 0 31%, rgba(219, 237, 234, .48) 56%, rgba(184, 218, 217, .13) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(64, 126, 126, .05));
}
.account-shell::after,
.profiles-shell::after,
.creation-shell::after {
  opacity: .1;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(39, 116, 119, .012) 4px),
    radial-gradient(circle at 50% 48%, transparent 62%, rgba(47, 113, 114, .055));
}
.account-shell__cloud,
.profiles-shell__mist {
  opacity: .14;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(247, 255, 255, .82), transparent 35%),
    radial-gradient(ellipse at 58% 62%, rgba(222, 246, 246, .65), transparent 37%),
    radial-gradient(ellipse at 84% 44%, rgba(233, 251, 252, .72), transparent 34%);
}
.account-shell__cloud--two { opacity: .08; }
.account-shell__runes { border-color: rgba(57, 137, 140, .2); box-shadow: 0 0 90px rgba(128, 205, 211, .13), inset 0 0 90px rgba(63, 142, 144, .045); }
.account-shell__runes::before,
.account-shell__runes::after { border-color: rgba(76, 155, 159, .22); }
.account-shell__runes i { color: rgba(42, 116, 119, .34); }

.account-header,
.profiles-header,
.creation-header,
.topbar {
  background: rgba(233, 247, 245, .92);
  border-color: rgba(41, 111, 113, .2);
  box-shadow: 0 8px 28px rgba(29, 83, 84, .1);
  backdrop-filter: blur(18px) saturate(1.08);
}
.account-card {
  background: linear-gradient(145deg, rgba(248, 253, 252, .96), rgba(226, 243, 241, .93));
  border-color: rgba(49, 123, 123, .28);
  box-shadow: 0 30px 78px rgba(27, 82, 83, .19), inset 0 0 0 1px rgba(255, 255, 255, .7);
  backdrop-filter: blur(17px) saturate(1.06);
}
.account-card::before,
.account-card::after { border-color: rgba(66, 147, 151, .48); }
.account-card__seal { color: #236f74; border-color: rgba(56, 137, 140, .48); background: rgba(223, 247, 246, .55); }
.account-card__heading p,
.profiles-heading p,
.creation-header .eyebrow,
.creation-intro small { color: #397f86; }
.account-card__heading h1,
.profiles-heading h1,
.creation-header h1,
.creation-intro,
.account-brand b,
.profiles-header .brand b { color: var(--celestial-ink); }
.account-brand > i,
.profiles-header .brand > i {
  color: #145f66;
  background: linear-gradient(145deg, #e1f7f4, #91cfcc);
  border-color: rgba(47, 133, 134, .32);
  box-shadow: 0 6px 20px rgba(34, 113, 114, .13);
}
.account-card__heading > span,
.account-local-note,
.profiles-heading > span,
.profiles-footer,
.profiles-header > div small,
.profiles-header > div span { color: var(--celestial-ink-soft); }
.account-tabs { border-bottom-color: rgba(47, 117, 119, .2); }
.account-tabs button { color: #6c8789; }
.account-tabs button.is-active { color: #145059; }
.account-tabs button::after { background: linear-gradient(90deg, #24908a, #70bdcf); }
.account-form label > span { color: #315f66; }
.account-form input,
.creation-shell .field input {
  color: #123c43;
  background: rgba(247, 253, 252, .88);
  border-color: rgba(49, 119, 120, .24);
}
.account-form input::placeholder,
.creation-shell .field input::placeholder { color: #789093; }
.account-form input:focus,
.creation-shell .field input:focus { border-color: #4aa7a3; box-shadow: 0 0 0 4px rgba(71, 173, 168, .11), 0 8px 24px rgba(35, 107, 109, .08); }
.account-submit,
.creation-shell .button--primary {
  color: #f6ffff;
  background: linear-gradient(112deg, #176c6b, #349b96 60%, #63afc1);
  border-color: rgba(130, 213, 216, .72);
  box-shadow: 0 13px 30px rgba(22, 103, 104, .23), inset 0 1px rgba(255, 255, 255, .2);
}
.account-submit:hover,
.creation-shell .button--primary:hover { background: linear-gradient(112deg, #135e61, #278c88 58%, #4c9fb5); box-shadow: 0 16px 36px rgba(22, 103, 104, .28), 0 0 24px rgba(91, 191, 195, .14); }
.account-local-note i { color: #27757a; border-color: rgba(53, 137, 140, .35); background: rgba(224, 247, 247, .56); }
.account-shell__quote { color: rgba(35, 92, 96, .46); }

.profile-logout { color: #28646a; background: rgba(239, 250, 248, .68); border-color: rgba(48, 118, 119, .28); }
.profile-logout:hover { background: rgba(247, 254, 253, .94); border-color: rgba(61, 154, 156, .52); }
.profile-card {
  color: #19474e;
  background: linear-gradient(120deg, rgba(242, 251, 249, .95), rgba(211, 235, 232, .92));
  border-color: rgba(48, 119, 119, .28);
  box-shadow: 0 16px 42px rgba(31, 85, 86, .14), inset 0 1px rgba(255, 255, 255, .7);
}
.profile-card::before { border-color: rgba(76, 155, 159, .22); }
.profile-card:hover { border-color: rgba(46, 151, 150, .62); box-shadow: 0 24px 58px rgba(27, 91, 92, .2), 0 0 28px rgba(83, 179, 182, .1); }
.profile-card__identity small,
.profile-card__where small,
.profile-card__enter { color: #2b777c; }
.profile-card__identity em,
.profile-card__where em,
.profile-card--new small { color: #648085; }
.profile-card--new,
.profile-empty { color: #245c63; background: rgba(222, 241, 238, .84); border-color: rgba(43, 119, 119, .34); }
.profile-card__avatar { color: #1f7378; border-color: rgba(49, 139, 139, .42); background: rgba(229, 248, 245, .52); }

.creation-shell { color: var(--celestial-ink); background: #d8e9e7; }
.creation-sky {
  background:
    linear-gradient(180deg, rgba(226, 242, 240, .56), rgba(215, 235, 233, .62)),
    url("./assets/images/style-baseline.png") center 28% / cover no-repeat;
  filter: saturate(.92) brightness(1.08) contrast(1.01);
}
.creation-cloud { opacity: .13; }
.creation-orbit { opacity: .17; border-color: #4b9999; }
.creation-orbit::before,
.creation-orbit::after { border-color: #66aeb2; }
.creation-intro {
  background: linear-gradient(90deg, rgba(245, 252, 251, .95), rgba(218, 239, 237, .91));
  border-color: rgba(49, 123, 123, .25);
  box-shadow: 0 14px 36px rgba(30, 89, 90, .12);
}
.creation-intro > span,
.creation-shell .section-heading > span { background: linear-gradient(145deg, #227c78, #55aaa7); box-shadow: 0 0 0 6px rgba(75, 169, 166, .09), 0 8px 20px rgba(30, 105, 104, .17); }
.creation-account > i { color: #1e7075; border-color: rgba(47, 134, 135, .35); background: rgba(231, 248, 246, .58); }
.creation-header .stepper span { background: rgba(49, 124, 126, .13); }
.creation-header .stepper span.is-active { background: rgba(65, 169, 168, .22); }
.creation-header .stepper span.is-active::after { background: linear-gradient(90deg, #26918e, #7dc9d2); }
.creation-shell .form-section {
  background: linear-gradient(135deg, rgba(242, 250, 248, .94), rgba(215, 236, 232, .92));
  border-color: rgba(46, 117, 117, .27);
  box-shadow: 0 18px 48px rgba(29, 83, 84, .13), inset 0 0 0 1px rgba(255, 255, 255, .66);
  backdrop-filter: blur(12px) saturate(1.03);
}
.creation-shell .form-section::before { border-color: rgba(73, 157, 159, .38); }
.creation-shell .form-section::after { background: linear-gradient(90deg, transparent, #74c7c7, transparent); }
.creation-shell .section-heading h2,
.creation-shell .choice-card__title { color: #153f46; }
.creation-shell .section-heading p,
.creation-shell .choice-card__desc { color: #58767a; }
.creation-shell .choice-card,
.creation-shell .stat-row,
.creation-shell .stat-editor {
  background: rgba(244, 251, 249, .82);
  border-color: rgba(47, 118, 119, .23);
}
.creation-shell .choice-card {
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(33, 91, 92, .04);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s, box-shadow .25s;
}
.creation-shell .choice-card:hover { background: rgba(250, 255, 254, .96); border-color: rgba(58, 157, 156, .5); box-shadow: 0 16px 36px rgba(27, 100, 100, .12), 0 0 0 3px rgba(82, 180, 177, .05); }
.creation-shell .choice-card.is-selected {
  background: linear-gradient(140deg, rgba(249, 255, 254, .98), rgba(211, 242, 238, .97));
  border-color: #43aaa5;
  box-shadow: inset 3px 0 #42aaa6, 0 16px 38px rgba(30, 116, 114, .16), 0 0 0 3px rgba(83, 188, 183, .08);
}
.creation-shell .choice-card.is-selected::after {
  content: "";
  right: 16px;
  bottom: 0;
  left: 16px;
  width: auto;
  height: 2px;
  padding: 0;
  background: linear-gradient(90deg, transparent, #55c3bf, transparent);
  transform: none;
  animation: selected-underline .55s cubic-bezier(.2,.8,.2,1) both;
}
.creation-shell .choice-card::before { z-index: -1; background: linear-gradient(115deg, transparent 25%, rgba(151, 226, 225, .34) 49%, transparent 73%); }
.creation-shell .choice-card__effect { color: #287b81; }
.choice-card__mark { z-index: 3; border-color: rgba(41, 111, 114, .35); transition: opacity .2s, transform .32s; }
.choice-card.is-selected .choice-card__mark { opacity: 0; transform: scale(.4); }
.choice-card__seal {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: grid;
  width: 25px;
  height: 25px;
  color: #efffff;
  background: linear-gradient(145deg, #247f7d, #55b6b0);
  border: 1px solid rgba(213, 253, 250, .8);
  border-radius: 50%;
  place-items: center;
  font: 12px "STKaiti", "KaiTi", serif;
  opacity: 0;
  transform: scale(.35) rotate(-35deg);
  box-shadow: 0 0 0 0 rgba(65, 179, 175, .18);
  transition: opacity .2s, transform .35s cubic-bezier(.18,.9,.25,1.35);
}
.choice-card.is-selected .choice-card__seal { opacity: 1; transform: scale(1) rotate(0); }
.choice-card__energy { position: absolute; z-index: 2; top: 13px; right: 13px; width: 19px; height: 19px; opacity: 0; pointer-events: none; }
.choice-card__energy i { position: absolute; inset: 0; border: 1px solid rgba(76, 202, 198, .7); border-radius: 50%; }
.choice-card.is-activating { animation: spirit-bind .68s cubic-bezier(.2,.75,.2,1) both; }
.choice-card.is-activating .choice-card__energy { opacity: 1; }
.choice-card.is-activating .choice-card__energy i:nth-child(1) { animation: spirit-ring .62s ease-out both; }
.choice-card.is-activating .choice-card__energy i:nth-child(2) { animation: spirit-ring .62s .08s ease-out both; }
.choice-card.is-activating .choice-card__energy i:nth-child(3) { animation: spirit-ring .62s .16s ease-out both; }
.choice-card.is-activating .choice-card__seal { animation: seal-settle .62s cubic-bezier(.18,.9,.25,1.35) both; }

.creation-shell .form-footer { color: #557278; background: rgba(227, 242, 239, .92); border-color: rgba(47, 117, 119, .23); }
.creation-shell .button--ghost { color: #3d686e; background: rgba(233, 246, 244, .75); border-color: rgba(48, 117, 119, .24); }
.creation-shell .stat-editor { position: relative; overflow: hidden; transition: border-color .25s, background .25s, box-shadow .25s; }
.creation-shell .stat-editor button { position: relative; color: #286e75; background: rgba(250, 255, 254, .94); border-color: rgba(49, 125, 126, .27); }
.creation-shell .stat-editor button:hover { color: #12666d; border-color: rgba(54, 156, 155, .58); box-shadow: 0 0 0 5px rgba(66, 181, 177, .09); }
.creation-shell .stat-editor output { color: #153f46; }
.creation-shell .stat-editor.is-adjusting { animation: stat-awaken .5s ease-out; }
.creation-shell .stat-editor button.is-invoked::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(65, 190, 186, .7); border-radius: 50%; animation: stat-ring .48s ease-out both; }
.creation-shell .points { color: #1f8786; text-shadow: 0 0 12px rgba(78, 188, 184, .24); }

.game-shell { background: #c9dedb; }
.topbar { color: var(--celestial-ink); background: linear-gradient(90deg, rgba(237, 248, 246, .97), rgba(218, 238, 235, .96) 50%, rgba(237, 248, 246, .97)); }
.topbar::after { opacity: .52; background: linear-gradient(90deg, transparent 4%, #55b5b1 27%, transparent 49%, #78aec8 73%, transparent 96%); }
.topbar .brand > i { color: #155e65; background: linear-gradient(145deg, #d9f4f1, #8bcac8); border-color: rgba(47, 129, 130, .31); }
.topbar .brand b,
.time b { color: #153f46; }
.topbar .brand small,
.time small,
.top-actions button,
.top-actions button span { color: #477078; }
.top-actions .sound-button { background: rgba(239, 250, 248, .74); border-color: rgba(47, 119, 120, .24); }
.top-actions button i { color: #34787e; }
.sound-button > .ui-icon { color: #34777e; }

.world-stage { background: #bcd7d4; }
.world-stage__art { filter: saturate(.94) brightness(1.07) contrast(1.02); }
.world-stage__shade {
  background:
    linear-gradient(180deg, rgba(228, 248, 248, .05), transparent 43%, rgba(17, 64, 66, .12) 76%, rgba(7, 42, 43, .34) 100%),
    linear-gradient(90deg, rgba(20, 72, 73, .1), transparent 28% 72%, rgba(17, 66, 68, .08));
}
.world-stage__light { opacity: .5; mix-blend-mode: screen; }
.world-stage__mist { opacity: .12; }
.world-stage__ornament { opacity: .025; filter: saturate(.42) hue-rotate(34deg) drop-shadow(0 0 12px rgba(106, 207, 208, .1)); }
.world-stage__location { color: #f2ffff; text-shadow: 0 2px 14px rgba(4, 42, 44, .8); }
.world-stage__location > span { color: rgba(226, 250, 250, .82); }
.world-stage__location > b { color: #f3ffff; }
.world-stage__location::before { background: linear-gradient(#72d4d0, rgba(185, 231, 230, .56)); box-shadow: 0 0 14px rgba(112, 216, 213, .48); }

.status-card,
.action-dock {
  color: var(--celestial-ink);
  background: linear-gradient(145deg, rgba(240, 250, 248, .93), rgba(205, 231, 227, .91));
  border-color: rgba(45, 118, 118, .34);
  box-shadow: 0 24px 58px rgba(13, 65, 66, .22), inset 0 0 0 1px rgba(255, 255, 255, .58);
  backdrop-filter: blur(17px) saturate(1.04);
}
.status-card::before,
.action-dock::before { background: linear-gradient(90deg, rgba(75, 184, 180, .75), rgba(118, 174, 201, .22), transparent); }
.status-card__head p,
.status-card__head h2,
.action-dock__head h2,
.action-dock__head h3,
.realm-line span,
.realm-line b,
.resource b,
.currency-row b { color: #16434a; }
.status-card__divider span,
.action-dock__head span,
.realm-line small,
.resource span,
.currency-row small { color: #55777b; }
.avatar-sigil { color: #1f7176; background: rgba(222, 245, 242, .78); border-color: rgba(48, 136, 136, .46); }
.status-card .icon-button { color: #27757b; background: rgba(241, 252, 250, .68); border-color: rgba(45, 120, 121, .27); }
.realm-line,
.location-chip { color: #194b51; background: rgba(232, 246, 243, .62); border-color: rgba(43, 116, 117, .22); }
.location-chip:hover { background: rgba(244, 253, 252, .88); border-color: rgba(49, 153, 153, .48); }
.location-chip b { color: #17464d; }
.location-chip span,
.location-chip small { color: #56777c; }
.action-dock button { color: #17464d; background: rgba(228, 243, 240, .32); border-bottom-color: rgba(43, 116, 117, .17); }
.action-dock button b { color: #17464d; }
.action-dock button small,
.action-dock small,
.action-dock em { color: #607e82; }
.action-dock button:hover { background: rgba(242, 252, 250, .75); }
.action-dock button > i { color: #24747a; background: rgba(226, 246, 244, .82); border-color: rgba(53, 143, 143, .4); }
.action-dock button:hover > i { color: #17676e; border-color: rgba(54, 161, 158, .58); box-shadow: 0 0 0 5px rgba(65, 179, 175, .08), 0 0 20px rgba(85, 191, 190, .16); }

.scene-card,
.combat-card {
  color: #173f46;
  background: linear-gradient(145deg, rgba(243, 252, 250, .95), rgba(205, 233, 229, .93));
  border-color: rgba(45, 120, 120, .38);
  box-shadow: 0 24px 62px rgba(9, 54, 55, .25), inset 0 0 0 1px rgba(255, 255, 255, .68);
  backdrop-filter: blur(16px) saturate(1.03);
}
.scene-card::after { border-color: rgba(75, 169, 169, .26); }
.scene-card h1,
.combat-card h2 { color: #123d44; }
.scene-card__eyebrow,
.scene-card__kicker { color: #2d7f85; }
.scene-card__text,
.combat-message { color: #3f656a; }
.scene-card__seal { color: #efffff; background: linear-gradient(145deg, #336f8d, #705a9a); border-color: rgba(186, 221, 235, .75); }
.scene-card__rule { background: linear-gradient(90deg, rgba(61, 157, 157, .48), rgba(113, 172, 197, .42), transparent); }
.scene-card__rule i { background: linear-gradient(90deg, rgba(79, 171, 172, .42), transparent); }
.story-choice { color: #17474e; background: rgba(235, 247, 244, .68); border-color: rgba(44, 118, 118, .28); }
.story-choice:hover { background: rgba(247, 254, 253, .93); border-color: rgba(52, 157, 155, .56); box-shadow: 0 9px 24px rgba(27, 99, 100, .14), 0 0 0 3px rgba(70, 180, 176, .06); }
.story-choice b { color: #153f46; }
.story-choice small { color: #617e82; }
.story-choice > span { color: #176f75; background: linear-gradient(145deg, #dcf6f3, #9ed8d6); }
.story-choice > i { color: #176c71; background: linear-gradient(145deg, #dff7f4, #a8dcda); }
.story-choice:active { box-shadow: inset 0 0 28px rgba(64, 181, 177, .18), 0 0 0 5px rgba(73, 190, 186, .08); }

.free-action { color: #e9ffff; }
.free-action label { color: rgba(232, 253, 252, .88); }
.free-action label span { color: #8ee0dc; }
.free-action > div { background: rgba(224, 241, 238, .96); border-color: rgba(39, 113, 114, .38); box-shadow: 0 14px 36px rgba(8, 57, 58, .22); }
.free-action > div > i { color: #286e74; border-right-color: rgba(43, 116, 117, .22); }
.free-action input { color: #153f46; }
.free-action input::placeholder { color: rgba(60, 94, 98, .62); }
.free-action button { color: #f4ffff; background: linear-gradient(110deg, #176d6d, #349b96 58%, #579eb4); border-color: rgba(120, 210, 210, .62); }
.mobile-tabs { background: rgba(237, 249, 247, .97); border-top-color: rgba(42, 111, 113, .22); box-shadow: 0 -8px 28px rgba(14, 66, 67, .13); }
.mobile-tabs button { color: #52777c; }
.mobile-tabs button i { color: #29777c; }
.mobile-tabs button:active { color: #176c72; background: rgba(209, 239, 236, .72); }

.side-panel { color: #173f46; background: linear-gradient(180deg, #eef8f6, #dcecea); border-left-color: rgba(56, 139, 140, .34); box-shadow: -30px 0 82px rgba(8, 57, 58, .3); }
.side-panel > header { color: #173f46; background: linear-gradient(115deg, #d8efec, #edf8f6); border-bottom-color: rgba(59, 148, 149, .38); }
.side-panel > header p { color: #2b7d82; }
.side-panel > header h2 { color: #133d44; }
.side-panel > header .icon-button { color: #276e74; background: rgba(245, 253, 252, .7); border-color: rgba(48, 126, 127, .27); }
.detail-hero { color: #f1ffff; background: linear-gradient(135deg, #246f73, #285d75); box-shadow: 0 14px 32px rgba(19, 80, 83, .18); }
.detail-hero > span {
  width: 64px;
  height: 64px;
  padding: 10px;
  color: #eaffff;
  background: rgba(222, 250, 248, .08);
  border-color: rgba(181, 235, 235, .64);
  border-radius: 50%;
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  word-break: break-all;
  overflow: hidden;
  box-sizing: border-box;
}
.detail-hero > span.is-long { padding: 7px; font-size: 13px; line-height: 1.08; }
.detail-hero > span.is-extended { padding: 5px; font-size: 10px; line-height: 1.08; }
.detail-hero p { color: rgba(226, 249, 248, .76); }
.detail-grid > div { background: rgba(239, 249, 247, .75); border-color: rgba(48, 119, 120, .16); }
.detail-grid small,
.detail-list dt { color: #638084; }
.detail-grid b,
.detail-list dd { color: #1d6268; }
.detail-list > div { border-bottom-color: rgba(46, 117, 118, .14); }

@keyframes selected-underline { from { opacity: 0; transform: scaleX(.15); } to { opacity: 1; transform: scaleX(1); } }
@keyframes spirit-bind { 0% { transform: translateY(-2px) scale(.992); } 42% { transform: translateY(-5px) scale(1.012); box-shadow: inset 3px 0 #42aaa6, 0 20px 46px rgba(31, 142, 138, .2), 0 0 0 6px rgba(87, 205, 200, .09); } 100% { transform: translateY(0) scale(1); } }
@keyframes spirit-ring { from { opacity: .9; transform: scale(.55); } to { opacity: 0; transform: scale(4.3); } }
@keyframes seal-settle { 0% { opacity: 0; transform: scale(.25) rotate(-42deg); } 58% { opacity: 1; transform: scale(1.24) rotate(7deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes stat-awaken { 0% { background: rgba(244, 251, 249, .82); } 38% { background: rgba(214, 244, 240, .98); border-color: rgba(55, 169, 165, .52); box-shadow: 0 0 0 4px rgba(72, 187, 183, .07); } 100% { background: rgba(244, 251, 249, .82); } }
@keyframes stat-ring { from { opacity: .9; transform: scale(.65); } to { opacity: 0; transform: scale(1.8); } }
@keyframes scene-manifest { 0% { opacity: 0; transform: translateY(9px) scale(.995); clip-path: inset(0 48% 0 48% round 18px); } 58% { opacity: 1; clip-path: inset(0 0 0 0 round 18px); } 100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 18px); } }
@keyframes status-unseal { from { opacity: 0; transform: translate3d(-13px,0,0); } }
@keyframes dock-unseal { from { opacity: 0; transform: translate3d(13px,0,0); } }
@keyframes rule-gem { to { color: #59b9bc; text-shadow: 0 0 12px rgba(69, 176, 181, .48); transform: rotate(45deg) scale(1.08); } }
@keyframes scene-seal { to { transform: translateY(-3px) rotate(2deg); box-shadow: 0 0 24px rgba(100, 153, 199, .28); } }
@keyframes ornament-breathe { to { opacity: .06; transform: scale(1.025) translate3d(3px,-2px,0); } }
@keyframes world-ornament-drift { to { opacity: .04; transform: scale(1.018) translate3d(4px,-3px,0); } }

@media (prefers-reduced-motion: reduce) {
  .xianxia-ornament,
  .account-card,
  .account-card__seal,
  .profile-card,
  .profile-card__avatar::after,
  .creation-intro > span,
  .creation-shell .choice-card.is-selected .choice-card__mark,
  .sound-button > .ui-icon,
  .world-stage__ornament,
  .qi-ribbons i,
  .spirit-petals i,
  .status-card,
  .action-dock,
  .scene-card,
  .combat-card,
  .scene-card__seal,
  .scene-card__rule > span,
  .meter__fill::after,
  .side-panel,
  .action-dock button.is-ready > i,
  .choice-card.is-activating,
  .choice-card.is-activating .choice-card__energy i,
  .choice-card.is-activating .choice-card__seal,
  .creation-shell .stat-editor.is-adjusting,
  .creation-shell .stat-editor button.is-invoked::after { animation: none !important; }
}