/* Scene layout is separate from the shared VEIL control skin. All text stays live. */
#game .rank-progress-panel { position: relative; padding-right: 18px; }
#game .rank-progress-panel .rank-progress-reward { color: var(--ui-gold, #d9b36c); font-size: 12px; }
#game .rank-progress-panel > small { display: block; line-height: 1.6; margin-top: 12px; color: var(--ui-muted); }
#game .rank-progress-panel > button { width: 100%; margin-top: 8px; }
#game .rank-dialog { padding: 0; width: min(100% - 16px, 500px); max-width: 500px; max-height: calc(100dvh - 16px); margin: auto; color: #eee3d2; background: #070d11; border: 1px solid #897956; border-radius: 12px; overflow: auto; overscroll-behavior: contain; box-shadow: 0 22px 90px #000c; }
#game .rank-dialog::backdrop { background: #020508e8; }
#game .rank-dialog-header { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 20px 18px 36px; background: linear-gradient(#04090df0 45%, transparent); pointer-events: none; }
#game .rank-dialog-header h1 { font: 500 clamp(19px, 5vw, 25px)/1.1 var(--ui-font-display, Georgia); margin: 5px 0 0; color: #f1dfbb; }
#game .rank-dialog-header .eyebrow { font-size: 9px; color: #91d4dd; }
#game .rank-dialog-header button { flex-shrink: 0; pointer-events: auto; }
#game .rank-scene { position: relative; height: clamp(260px, 48dvh, 450px); overflow: hidden; isolation: isolate; background: #060c11; }
#game .rank-scene::before { content: ""; position: absolute; inset: 0; z-index: 9; opacity: 0; background: #060c11; transition: opacity .45s; pointer-events: none; }
#game .rank-dialog[data-loading="true"] .rank-scene::before { opacity: 1; }
#game .rank-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; will-change: transform; transform: scale(1.04); }
#game .rank-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#03070a1a 20%, transparent 65%, #070d11), radial-gradient(ellipse at center, transparent 35%, #0008); z-index: 5; }
#game .rank-seeker { position: absolute; width: 27%; height: 62%; object-fit: contain; object-position: bottom; bottom: 10%; left: 10%; z-index: 3; filter: drop-shadow(0 8px 4px #0008); transform-origin: 50% 95%; }
#game .rank-platform { position: absolute; left: 46%; bottom: 13%; width: 33%; height: 34%; z-index: 2; transform: translateY(25px); transition: transform 1.1s ease, opacity .5s; }
#game .rank-platform::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -3px; height: 6px; border-top: 2px solid #a58653; background: #272d31; box-shadow: 0 3px 6px #000; }
#game .rank-platform img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
#game .rank-chain { position: absolute; left: 67%; top: 4%; width: 4px; height: 57%; background: repeating-linear-gradient(0deg, #514b40 0 6px, #a08864 7px 8px, #080e12 9px 11px); z-index: 2; transform-origin: top; transform: rotate(-8deg); transition: transform .6s; }
#game .rank-guardian { position: absolute; width: 41%; height: 65%; bottom: 9%; right: 8%; object-fit: contain; object-position: bottom; z-index: 3; opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; filter: drop-shadow(0 8px 7px #000b); }
#game .rank-guardian-locks { position: absolute; top: 31%; right: 18%; display: flex; gap: 5px; z-index: 4; opacity: 0; }
#game .rank-guardian-locks i { width: 7px; height: 11px; border: 1px solid #e2c28a; border-radius: 2px; box-shadow: 0 0 7px #e1a64b; background: #ae7633; }
#game .rank-guardian-locks i.broken { box-shadow: none; opacity: .25; }
#game .rank-scene[data-phase="rescue"] .rank-platform { transform: translateY(0); }
#game .rank-scene[data-step="1"] .rank-platform, #game .rank-scene[data-step="2"] .rank-platform { transform: translateY(25px); }
#game .rank-scene[data-phase="guardian"] .rank-platform, #game .rank-scene[data-phase="complete"] .rank-platform { transform: translate(-110%, -20px) scale(.72); opacity: .65; }
#game .rank-scene[data-phase="guardian"] .rank-guardian { opacity: 1; transform: translateY(0); animation: rank-guardian-idle 3.2s ease-in-out infinite; }
#game .rank-scene[data-phase="guardian"] .rank-guardian-locks { opacity: 1; }
#game .rank-scene[data-phase="complete"] .rank-guardian { opacity: .45; transform: translateY(22px) rotate(9deg); filter: grayscale(1); }
#game .rank-fog { position: absolute; height: 40%; width: 170%; bottom: -10%; left: -35%; background: radial-gradient(ellipse, #8dadbc1c, transparent 64%); pointer-events: none; animation: rank-fog-drift 13s ease-in-out infinite alternate; z-index: 1; }
#game .rank-fog-front { z-index: 4; animation-duration: 19s; animation-direction: alternate-reverse; }
#game .rank-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
#game .rank-dialog-content { position: relative; z-index: 7; padding: 0 18px 20px; background: #070d11; }
#game .rank-trial-meters { display: flex; gap: 8px; justify-content: space-between; padding: 8px 0 14px; border-bottom: 1px solid #8a775b44; font: 11px/1.5 var(--ui-font-body); color: #a5b5ba; }
#game .rank-trial-meters strong { display: block; font-size: 16px; color: #dfc79e; font-weight: 500; }
#game .rank-trial-feedback { color: #b8d8d5; font-size: 12px; line-height: 1.5; min-height: 1.5em; margin: 14px 0; }
#game .rank-trial-copy h2 { font: 500 20px/1.2 var(--ui-font-display); color: #ebd5af; margin: 8px 0; }
#game .rank-trial-copy > p:not(.eyebrow) { color: #d5d9d9; font-size: 14px; line-height: 1.65; margin: 8px 0 16px; }
#game .rank-choices { display: grid; gap: 7px; }
#game .rank-choices button { width: 100%; text-align: left; font-size: 13px; line-height: 1.35; min-height: 48px; }
#game .rank-choices button:disabled { opacity: .6; }
#game .rank-dialog-error { color: #fac0a7; font: 13px/1.5 var(--ui-font-body); margin: 12px 0; }
#game .rank-film-world, #game .rank-light-wash, #game .rank-award { display: none; }
/* Six shots, one art-space camera. The ceremony fills the theatre, not a card. */
#game .rank-dialog[data-mode="ceremony"] { position: fixed; width: min(100vw, 640px); max-width: 640px; height: min(100dvh, 960px); max-height: 100dvh; border-radius: 0; overflow: hidden; background: #04080b; }
#game .rank-dialog[data-mode="ceremony"] .rank-scene { height: 100%; background: #04080b; }
#game .rank-dialog[data-mode="ceremony"] :is(.rank-backdrop, .rank-platform, .rank-chain, .rank-guardian, .rank-guardian-locks, .rank-seeker) { display: none; }
#game .rank-dialog[data-mode="ceremony"] .rank-dialog-header { padding: max(14px, env(safe-area-inset-top)) 18px 36px; align-items: center; }
#game .rank-dialog[data-mode="ceremony"] .rank-dialog-header h1 { font-size: 15px; line-height: 1.3; opacity: .75; }
#game .rank-dialog[data-mode="ceremony"] .rank-dialog-header .eyebrow { font-size: 9px; letter-spacing: .12em; color: #cbb88f; }
#game .rank-dialog[data-mode="ceremony"] .rank-dialog-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 24px max(12px, env(safe-area-inset-bottom)); max-height: 65%; overflow-y: auto; background: linear-gradient(transparent, #04080bf5 32%); }
#game .rank-dialog[data-mode="ceremony"] .rank-film-world { display: block; position: absolute; transform-origin: center; will-change: transform; }
#game .rank-film-painting { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#game .rank-film-actor { position: absolute; left: 36%; top: 18%; width: 28%; height: 36%; object-fit: contain; object-position: bottom; filter: brightness(.82) drop-shadow(0 6px 3px #0008); opacity: 0; }
#game .rank-film-witnesses { position: absolute; left: 10%; top: 27%; width: 22%; height: 27%; object-fit: contain; object-position: bottom; filter: sepia(.5) brightness(.6); opacity: 0; }
#game .rank-lantern-light { position: absolute; width: 36%; height: 18%; background: radial-gradient(ellipse, #ffdb968c, #e8ae5830 24%, transparent 68%); opacity: 0; pointer-events: none; }
#game .rank-lantern-light > span { position: absolute; inset: auto 0 9%; text-align: center; color: #fce5b4; font: 500 12px/1.3 var(--ui-font-display); text-shadow: 0 1px 6px #000; }
#game .rank-film-hand { position: absolute; width: 95%; height: auto; opacity: 0; filter: drop-shadow(3px 6px 4px #000b); }
#game .rank-ceremony-crest { position: absolute; aspect-ratio: 5 / 6; height: auto; }
#game .rank-ceremony-crest > img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#game #rankCrestLetter { position: absolute; left: 0; right: 0; top: 36%; height: 29%; display: grid; place-items: center; font: 500 20px/1 var(--ui-font-display); color: #f6ddb1; text-shadow: 0 1px 1px #000, 0 0 9px #e5c69088; opacity: 0; }
#game .rank-seal-light { position: absolute; left: 36%; top: 31%; width: 34%; height: 30%; background: radial-gradient(ellipse, #ffe1a870, #cca66916 35%, transparent 68%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
#game .rank-dialog[data-mode="ceremony"] .rank-light-wash { display: block; position: absolute; inset: 0; background: linear-gradient(135deg, #ffdb95, transparent 72%); opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 4; }
#game .rank-dialog[data-mode="ceremony"] .rank-vignette { background: linear-gradient(#04080b66, transparent 23%, transparent 63%, #04080bee), radial-gradient(ellipse at center, transparent 58%, #0009); }
#game .rank-dialog[data-mode="ceremony"] .rank-fog { opacity: .28; }
#game .rank-scene[data-phase="guardian"][data-step="4"] .rank-chain { animation: rank-chain-sweep 2.2s ease-in-out infinite; }
#game .rank-scene[data-phase="guardian"][data-step="6"] .rank-chain { transform: rotate(24deg); box-shadow: 0 0 7px #e9be7750; }
#game .rank-scene[data-phase="guardian"][data-step="8"]::after { content: ""; position: absolute; z-index: 4; left: 22%; right: 18%; bottom: 17%; height: 4px; background: #9bcbd559; box-shadow: 0 0 18px #9bcbd555; transform: rotate(-14deg); animation: rank-aim-glow 2s ease-in-out infinite; }
@keyframes rank-chain-sweep { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(15deg); } }
@keyframes rank-aim-glow { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
#game .rank-dialog[data-mode="ceremony"] .rank-award { display: flex; flex-direction: column; align-items: center; gap: 12px; position: absolute; top: 40%; left: 20px; right: 20px; transform: translateY(-30%); z-index: 6; opacity: 0; padding: 24px 12px; text-align: center; pointer-events: none; background: radial-gradient(ellipse, #04080b99, transparent 72%); }
#game .rank-award > span { color: #d4b57d; font: 10px/1.4 var(--ui-font-body); letter-spacing: .18em; text-transform: uppercase; }
#game .rank-award > h2 { font: 500 clamp(38px, 11vw, 64px)/1.1 var(--ui-font-display); color: #f4e3bc; letter-spacing: .035em; margin: 0; text-shadow: 0 2px 12px #000; }
#game .rank-award > p { font: 500 20px/1.3 var(--ui-font-display); color: #e1c491; margin: 0; }
#game .rank-award > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; padding: 12px 4px; margin-top: 6px; border-block: 1px solid #c1aa6e55; color: #b8cac7; font: 11px/1.4 var(--ui-font-body); }
#game .rank-award > div strong { color: #b5e2d8; font-weight: 500; }
#game .rank-award > small { color: #bdc5bd; font: 11px/1.5 var(--ui-font-body); }
#game .rank-ceremony-caption { padding: 0 0 16px; min-height: 76px; max-width: 480px; margin-inline: auto; }
#game .rank-ceremony-caption > span { display: block; color: #d6be8d; font: 10px/1.4 var(--ui-font-body); letter-spacing: .10em; text-transform: uppercase; }
#game .rank-ceremony-caption > p { font: 15px/1.65 var(--ui-font-display); color: #eee3d2; margin: 7px 0 0; text-shadow: 0 1px 4px #000; }
#game .rank-oath-choice { max-width: 440px; margin: 0 auto 14px; }
#game .rank-oath-choice .eyebrow { font-size: 9px; color: #b1c5c2; }
#game .rank-oath-choice h2 { margin: 6px 0; color: #efd8b0; font: 500 25px/1.2 var(--ui-font-display); }
#game .rank-oath-choice > p:not(.eyebrow) { font: 12px/1.5 var(--ui-font-body); color: #b9c7c7; margin: 8px 0 16px; }
#game .rank-oath-options { display: grid; gap: 7px; }
#game .rank-oath-options button { width: 100%; min-height: 46px; text-align: left; padding-inline: 24px; }
#game .rank-ceremony-controls > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#game .rank-ceremony-controls > div button { width: auto; flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 8px 14px; font-size: 12px; overflow-wrap: anywhere; }
#game .rank-shot-label { flex: 1 1 80px; min-width: 0; overflow-wrap: anywhere; color: #9eaaa9; font: 11px/1.4 var(--ui-font-body); padding-right: 4px; }
#game .rank-ceremony-controls > button { width: 100%; }
#game .rank-ceremony-controls > small { display: none; color: #9eaaa9; margin: 10px 0 0; font: 10px/1.5 var(--ui-font-body); text-align: center; }
#game .rank-dialog[data-complete="true"] .rank-ceremony-controls > small { display: block; }
#game #rankCeremonyProgress { display: block; width: 100%; height: 2px; border: none; margin: 0 0 4px; background: #152126; accent-color: #d8bb83; }
#game #rankCeremonyProgress::-webkit-progress-bar { background: #152126; }
#game #rankCeremonyProgress::-webkit-progress-value { background: linear-gradient(90deg, #76c2c3, #d8bb83); }
#game .rank-dialog[data-paused="true"] *, #game .rank-dialog[data-reduced="true"] * { animation-play-state: paused !important; }
#game .rank-dialog[data-reduced="true"] * { transition-duration: 0s !important; }
@keyframes rank-fog-drift { from { transform: translateX(-7%); opacity: .5; } to { transform: translateX(7%); opacity: 1; } }
@keyframes rank-guardian-idle { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { #game .rank-dialog * { animation: none !important; transition: none !important; } }
@media (max-height: 650px) {
  #game .rank-dialog-header { padding-top: 12px; }
  #game .rank-dialog[data-mode="ceremony"] .rank-dialog-content { padding: 20px 18px 8px; max-height: 75%; }
  #game .rank-ceremony-caption { min-height: 50px; padding-bottom: 8px; }
  #game .rank-ceremony-caption > p { font-size: 13px; line-height: 1.45; }
  #game .rank-dialog[data-mode="ceremony"] .rank-award { top: 36%; gap: 7px; padding-block: 10px; }
  #game .rank-award > h2 { font-size: 38px; }
  #game .rank-award > p { font-size: 17px; }
}