/* Cold bronze, soft fog and quiet surfaces, scoped to character creation. */
#screenCreate.ritual-enabled {
  --bg: #090c12; --panel: #111720; --panel-2: #171e29; --panel-3: #222b37;
  --paper: #111720; --paper-2: #1a2330; --sunken: #0d121a; --raise: #26303d;
  --text: #e0e6ec; --text-1: #f1f4f8; --text-2: #b6c0ce; --text-3: #98a5b7;
  --gold: #c5ab85; --gold-2: #a88961; --gold-dim: #9b866a;
  --line: #394352; --line-soft: #ffffff12; --focus-ring: #d1bb96;
  --btn-bg: #1c2633; --btn-border: #515d6e; --btn-text-hover: #f1f3f7; --btn-bg-hover: #2b3747;
  --btn-primary-bg: #bca07b; --btn-primary-bg-hover: #d0b792; --btn-primary-text: #15171c;
  --btn-primary-border: #ccb592; --gold-wash: #bda17b12; --gold-wash-2: #bda17b26;
  position: relative; isolation: isolate; background: #090c12; overscroll-behavior: contain;
  color: var(--text); color-scheme: dark;
}
.ritual-backdrop, .ritual-atmosphere { position: fixed; inset: 0; pointer-events: none; }
.ritual-backdrop {
  z-index: -2;
  background:
    radial-gradient(ellipse 52% 38% at 50% 57%, #c3cfdd28, transparent 68%),
    radial-gradient(ellipse 25% 65% at 8% 46%, #a8b8c51f, transparent 70%),
    radial-gradient(ellipse 25% 65% at 92% 46%, #a8b8c51f, transparent 70%),
    linear-gradient(180deg, #05080e 0%, #080e17 48%, #03060b 100%);
  background-size: auto;
}
.ritual-backdrop::before, .ritual-backdrop::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 23%; opacity: .38;
  filter: blur(.4px); pointer-events: none;
  background:
    radial-gradient(ellipse 45% 3% at 50% 12%, #d2d8df4a 0 55%, transparent 60%),
    linear-gradient(90deg, transparent 0 13%, #9aa8b62b 15% 19%, #2f3b493d 23% 76%, #9aa8b62b 81% 85%, transparent 87%),
    linear-gradient(180deg, transparent 0 14%, #b8c2ce2a 15% 18%, transparent 20% 82%, #aeb9c527 84% 87%, transparent 89%);
}
.ritual-backdrop::before { left: -5%; transform: perspective(600px) rotateY(18deg); }
.ritual-backdrop::after { right: -5%; transform: perspective(600px) rotateY(-18deg); }
.ritual-atmosphere { z-index: -1; overflow: hidden; }
.ritual-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ritual-mist { position: absolute; width: 175%; left: -37%; height: 52%; opacity: .42; filter: blur(42px); animation: ritual-drift 42s ease-in-out infinite alternate; will-change: transform, opacity; }
.ritual-mist-one { top: 18%; background: radial-gradient(ellipse at 25% 72%, #c4d0df78, transparent 48%), radial-gradient(ellipse at 74% 38%, #93a9c36e, transparent 52%); }
.ritual-mist-two { bottom: -15%; height: 58%; opacity: .5; background: radial-gradient(ellipse at 50% 70%, #c2cedd82, transparent 58%), radial-gradient(ellipse at 14% 80%, #8196b160, transparent 45%); animation-delay: -17s; animation-direction: alternate-reverse; }
.ritual-mist-three { top: 47%; height: 31%; opacity: .28; filter: blur(28px); background: linear-gradient(90deg, transparent 0%, #aebed22e 22%, #d3d9e022 50%, #8ea4bf2e 78%, transparent 100%); animation-duration: 31s; animation-delay: -9s; }
@keyframes ritual-drift { from { transform: translate3d(-8%, 2%, 0) scaleY(.86) rotate(-1deg); opacity: .65; } to { transform: translate3d(10%, -7%, 0) scaleY(1.2) rotate(1deg); opacity: 1; } }
.ritual-enabled .create-head { display: none; }
.ritual-workspace {
  position: relative; z-index: 12; display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1.5fr);
  gap: clamp(22px, 3vw, 54px); width: min(1500px, 100%); min-height: 100%;
  margin: 0 auto; padding: 18px 28px 42px; align-items: start;
}
.ritual-stage { position: sticky; top: 18px; height: calc(100vh - 36px); min-height: 560px; width: 100%; overflow: visible; pointer-events: none; }
.ritual-title { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); text-align: center; width: 92%; pointer-events: none; z-index: 40; opacity: .7; }
.ritual-title h1 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 48px); color: #e3e7ed; font-weight: 400; letter-spacing: .3em; text-indent: .3em; margin: 10px 0; text-shadow: 0 3px 18px #03070c; }
.ritual-eyebrow { color: #b9ad9a; letter-spacing: .23em; font-size: 10px; font-weight: 500; }
.ritual-subtitle { font-size: 12px; letter-spacing: .24em; margin: 8px 0 0; color: #adb7c7; }
.ritual-controls { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 8px; z-index: 80; pointer-events: auto; }
.ritual-enabled .ritual-controls .btn { min-height: 38px; padding: 7px 12px; font-size: 12px; background: #0e1521d9; border-color: #6470846b; color: #d9e0ea; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; }
.ritual-intro .ritual-controls { left: max(24px, env(safe-area-inset-left)); }
.ritual-enabled .ritual-controls .btn:focus-visible { outline: 2px solid #d1bb96; outline-offset: 3px; }
.app-fullscreen #screenCreate { position: fixed; inset: 0; z-index: 100; height: 100vh; height: 100dvh; }
html:fullscreen, html:fullscreen body { width: 100%; height: 100%; background: #090c12; }
.ritual-card-dock { position: fixed; inset: 0; z-index: 8; perspective: 1150px; perspective-origin: 50% 50%; transform-style: preserve-3d; pointer-events: none; overflow: hidden; }
.ritual-intro .ritual-card-dock { z-index: 30; }
.ritual-card {
  position: absolute; left: calc(50% - 46px); top: calc(50% - 76px); width: 92px; height: 152px;
  border: 1px solid #9f845b; border-radius: 6px; color: #bfa889;
  background: linear-gradient(150deg, #273140, #0b1019 60%, #19202c);
  box-shadow: 0 5px 15px #0009, inset 0 0 0 4px #131a24, inset 0 0 0 5px #9f845b66;
  transform-style: preserve-3d; backface-visibility: hidden; user-select: none; will-change: transform, opacity;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 8px;
}
.ritual-card::after { content: ''; position: absolute; inset: 5px; border: 1px solid #d2b78324; border-radius: 3px; pointer-events: none; }
.ritual-card svg { width: 62px; height: 85px; fill: none; stroke: currentColor; stroke-width: .75; opacity: .9; }
.ritual-card svg text { stroke: none; fill: currentColor; font-size: 29px; font-family: Georgia, serif; }
.ritual-card-number { font: 10px Georgia, serif; letter-spacing: .12em; }
.ritual-card-name { font: 11px var(--font-serif); letter-spacing: .12em; }
.ritual-card.is-active, .ritual-card.is-arriving { border-color: #e6cda3; color: #ecd4b0; box-shadow: 0 18px 48px #000b, 0 0 35px #c9ae7247, inset 0 0 0 4px #151e2b, inset 0 0 0 5px #d7bb80a0; }
.ritual-card.is-leaving { filter: saturate(.78) brightness(.88); }
.ritual-step-out { opacity: .04 !important; transform: translateY(10px); filter: blur(3px); pointer-events: none; }
.ritual-step-in { animation: ritual-step-in .52s cubic-bezier(.2,.75,.25,1) both; }
@keyframes ritual-step-in { from { opacity: .04; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.ritual-intro .ritual-workspace { display: block; width: 100%; padding: 0; }
.ritual-intro .ritual-stage { position: relative; top: 0; height: 100vh; min-height: 520px; }
.ritual-intro .ritual-title { top: 50%; bottom: auto; transform: translate(-50%, -50%); opacity: 1; }
.ritual-intro .ritual-title h1 { font-size: clamp(36px, 5.5vw, 70px); }
.ritual-intro .create-body { display: none !important; }
.ritual-enabled .create-body {
  position: relative; z-index: 20; width: 100%; min-width: 0; max-height: calc(100vh - 36px);
  display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: auto;
  scrollbar-width: thin; scrollbar-color: #84735875 transparent;
}
.ritual-enabled .create-form {
  width: 100%; min-width: 0; gap: 16px; padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid #aab8cc3b; border-radius: 20px;
  background: linear-gradient(150deg, #101927c7, #070d17b8 72%);
  -webkit-backdrop-filter: blur(22px) saturate(.86); backdrop-filter: blur(22px) saturate(.86);
  box-shadow: 0 32px 90px #0009, inset 0 1px #ffffff0c;
}
.ritual-enabled .create-side { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; justify-content: center; }
.ritual-enabled .create-side .summary-card { display: none; }
.ritual-enabled .create-side .btn { width: auto; min-height: 36px; padding: 6px 14px; font-size: 12px; }
.ritual-enabled .create-side #createSaveLine { display: none; }
.ritual-enabled .card { background: #101a274f; border: 1px solid #8f9db52e; border-radius: 12px; padding: 24px; box-shadow: none; }
.ritual-enabled .card-t { color: #cdbb9f; border-color: #73809526; font-family: var(--font-sans); font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.ritual-enabled .hint { color: #b2bdcc; line-height: 1.8; }
.ritual-enabled .hint.dim { color: #99a6ba; }
.ritual-enabled .field > span { color: #c5cdd9; font-size: 13px; }
.ritual-enabled input[type='text'], .ritual-enabled input[type='number'], .ritual-enabled input[type='password'], .ritual-enabled input[type='date'], .ritual-enabled input[type='search'], .ritual-enabled select, .ritual-enabled textarea { background: #0b111b; color: #e5ebf4; border: 1px solid #526077; border-radius: 7px; min-height: 44px; padding: 10px 12px; font-size: 14px; }
.ritual-enabled select option, .ritual-enabled select optgroup { background: #151d2a; color: #edf1f7; }
.ritual-enabled .create-model-tools { margin: 8px 0 18px; min-width: 0; grid-column: 1 / -1; }
.ritual-enabled .create-model-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ritual-enabled .create-model-actions .btn { min-height: 36px; padding: 6px 12px; font-size: 12px; }
.ritual-enabled .create-model-picker { margin-top: 8px; border: 1px solid #52607780; border-radius: 8px; background: #0b111b; padding: 0 10px 10px; }
.ritual-enabled .create-model-picker > summary { padding: 11px 0; cursor: pointer; color: #d7c4a6; font-size: 13px; }
.ritual-enabled .create-model-picker .hint { overflow-wrap: anywhere; margin: 5px 0; font-size: 12px; }
.ritual-enabled .create-model-search { width: 100%; box-sizing: border-box; }
.ritual-enabled .create-model-choices .mdl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #52607750; }
.ritual-enabled .create-model-choices .mn { flex: 1; min-width: 0; color: #dce4ef; overflow-wrap: anywhere; white-space: normal; }
.ritual-enabled .create-model-choices .mdl-pick { flex: none; border: 1px solid #7f8da5; border-radius: 6px; padding: 6px 10px; color: #e4d4bb; background: #202c3c; min-height: 34px; cursor: pointer; }
.ritual-enabled .create-model-choices .mdl-pick:focus-visible { outline: 2px solid #d1bb96; outline-offset: 2px; }
.ritual-enabled .create-model-choices .mdl-pick:disabled { cursor: default; opacity: .6; }
.ritual-enabled input::placeholder, .ritual-enabled textarea::placeholder { color: #93a0b3; }
.ritual-enabled :where(input, select, textarea):focus { border-color: #c6ab82; outline-color: #c6ab82; }
.ritual-enabled .btn { min-height: 44px; border-radius: 7px; transition: background-color .2s, border-color .2s; }
.ritual-enabled [hidden] { display: none !important; }
.ritual-enabled .seg-btn, .ritual-enabled .pill, .ritual-enabled .chip { background: #1c2633; color: #c1ccdb; border-color: #536074; }
.ritual-enabled .seg-btn.on, .ritual-enabled .pill.on, .ritual-enabled .chip.on { background: #38404a; color: #f1dec3; border-color: #c1a57d; }
.ritual-enabled .ritual-progress { position: relative; top: auto; margin: 0; padding: 18px 24px; background: #09111d80; border: 1px solid #8795ab35; border-radius: 12px; box-shadow: none; }
.ritual-enabled .wiz-dots { margin: 0; }
.ritual-enabled .wiz-dot { width: 38px; height: 38px; background: #151e2b; color: #a9b6c9; border-color: #526178; font-size: 12px; }
.ritual-enabled .wiz-dot.on { background: #c0a681; color: #161b23; border-color: #ead3b0; }
.ritual-enabled .wiz-dot.done { color: #d6bea0; border-color: #877964; }
.ritual-enabled .wiz-line { min-width: 2px; background: #56627670; }
.ritual-chapter { padding: 14px 4px 2px; }
.ritual-chapter h2 { color: #e7ebf1; font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin: 8px 0 5px; letter-spacing: .08em; }
.ritual-chapter h2:focus { outline: none; }
.ritual-chapter p { margin: 0; color: #acb9cc; font-size: 13px; }
.ritual-nav { position: sticky; z-index: 45; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border: 1px solid #8795ab3d; border-radius: 12px; background: #0c1522e8; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -5px 22px #0005; }
.ritual-nav .btn { min-width: 116px; }
.ritual-nav { flex-wrap: wrap; }
#ritualQuickStart { margin-left: auto; }
.ritual-nav-count { font-size: 12px; color: #b3c0d2; font-variant-numeric: tabular-nums; }
.ritual-review .srow { gap: 24px; padding: 10px 0; border-color: #78879c25; }
.ritual-review .srow > span:last-child { overflow-wrap: anywhere; min-width: 0; }
.ritual-review .srow.hi > span:last-child { color: #e0c6a2; font-family: var(--font-sans); letter-spacing: 0; }
.ritual-review-extra details, .ritual-brief { padding: 12px 0; border-bottom: 1px solid #78879c25; }
.ritual-review-extra summary, .ritual-brief summary { cursor: pointer; color: #c7d1df; min-height: 30px; }
.ritual-review-extra p { white-space: pre-wrap; overflow-wrap: anywhere; }
.ritual-api-status { margin: 22px 0; border-left: 2px solid #b09975; padding: 12px 16px; background: #202b3966; color: #b9c6d8; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.ritual-review #btnStart { width: 100%; min-height: 52px; margin-top: 24px; font-size: 16px; letter-spacing: .15em; }
.ritual-enabled .briefbox { background: #0b111b; color: #b6c5d8; max-height: 340px; }
.ritual-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ritual-paused .ritual-mist, .ritual-still .ritual-mist { animation-play-state: paused; }
@media (max-width: 760px) {
  .ritual-workspace { display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; padding: 0 12px 22px; }
  /* 手机端表单优先可读：牌退到工作区后面，只在灰雾空白处漂浮，
     不再盖住输入框、下拉框和底部导航。桌面端仍保持牌在前景。 */
  .ritual-card-dock { z-index: 3; opacity: .72; }
  .ritual-workspace { z-index: 12; }
  .ritual-stage { position: relative; z-index: 0; top: 0; height: 350px; min-height: 350px; }
  .ritual-enabled .create-body { z-index: 20; }
  .ritual-enabled .create-body { max-height: none; overflow: visible; padding: 0; gap: 10px; }
  .ritual-enabled .create-form { padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #111b29dc, #070d17d2 75%); }
  .ritual-controls { top: max(10px, env(safe-area-inset-top)); left: 0; right: auto; gap: 6px; }
  .ritual-intro .ritual-controls { left: max(12px, env(safe-area-inset-left)); }
  .ritual-title { bottom: 7px; }
  .ritual-title h1 { font-size: 26px; margin: 7px 0; }
  .ritual-title .ritual-eyebrow { display: none; }
  .ritual-enabled .card { padding: 18px 16px; }
  .ritual-enabled .ritual-progress { padding: 12px 9px; }
  .ritual-enabled .wiz-dot { width: 28px; height: 36px; border-radius: 8px; font-size: 11px; }
  .ritual-enabled .create-side .card { flex: none; }
  .ritual-chapter { padding-top: 6px; }
  .ritual-chapter h2 { font-size: 25px; }
  .ritual-nav { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ritual-nav .btn { min-width: 104px; font-size: 12px; padding: 10px; }
  .ritual-review .srow { gap: 12px; }
.ritual-backdrop { background-position: 50% 35%; }
  .ritual-enabled .grid2 { grid-template-columns: 1fr; }
  .ritual-card-dock { perspective: 880px; }
  .ritual-card { width: 84px; height: 139px; left: calc(50% - 42px); top: calc(50% - 69.5px); }
  .ritual-card svg { width: 56px; height: 78px; }
}
@media (max-width: 360px) {
  .ritual-enabled .wiz-dot { width: 24px; }
  .ritual-nav .btn { min-width: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .ritual-mist { animation: none; }
  .ritual-enabled * { scroll-behavior: auto !important; transition-duration: 0s !important; }
}