/* Rank C «Три клятвы» and the Archetype (ADR-037). The dialog reuses the rank D
   skin (rank.css); this file adds the mirrors, the seal, the oath picker and the
   Archetype card. Archetype colours are the colours of their sign families. */
#game [data-archetype="warden"], #game [data-mirror="warden"] { --archetype: #e6c88a; }
#game [data-archetype="blade"], #game [data-mirror="blade"] { --archetype: #9fe3ff; }
#game [data-archetype="weaver"], #game [data-mirror="weaver"] { --archetype: #c9a8ff; }

/* ——— Archetype card in the Hall ——— */
#game .archetype-card { position: relative; display: grid; gap: 4px; }
#game .archetype-card[data-state="sworn"] { --archetype-glow: color-mix(in srgb, var(--archetype, #c081eb) 18%, transparent); border-color: color-mix(in srgb, var(--archetype, #c081eb) 45%, transparent); background: radial-gradient(circle at 88% 22%, var(--archetype-glow), transparent 38%), rgba(7, 8, 12, .92); }
#game .archetype-card[data-state="sworn"] h2 { color: var(--archetype, #d9c3e6); padding-right: 74px; }
#game .archetype-card[data-state="pending"] { border-color: #d9b36c66; }
#game .archetype-crest { position: absolute; top: 12px; right: 12px; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--archetype, #c081eb) 45%, transparent)); }
#game .archetype-card .archetype-oath { margin: 0 0 6px; padding-right: 74px; color: #eadfca; font: italic 14px/1.45 var(--ui-font-display, Georgia); }
#game .archetype-effects { display: grid; gap: 6px; margin: 6px 0 10px; padding: 0; list-style: none; }
#game .archetype-effects li { position: relative; padding-left: 16px; color: #cdd5d6; font: 12px/1.45 var(--ui-font-body); }
#game .archetype-effects li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--archetype, #c99ce1); }
#game .archetype-card > button { width: 100%; margin-top: 8px; }
#game .archetype-card > span { line-height: 1.5; }
#game .archetype-card[data-state="sworn"] > span { color: var(--archetype); }

/* ——— The gallery: crossfaded frames and three mirrors ——— */
#game .rank-c-dialog .rank-c-backdrop-next { opacity: 0; transition: opacity .65s ease; z-index: 0; }
#game .rank-c-dialog .rank-backdrop:not(.rank-c-backdrop-next) { z-index: 0; }
#game .rank-c-scene[data-fading="true"] .rank-c-backdrop-next { opacity: 1; }
#game .rank-c-mirrors { position: absolute; z-index: 3; left: 50%; bottom: 9%; display: flex; gap: clamp(10px, 4vw, 22px); transform: translateX(-50%); }
#game .rank-c-mirrors > span { position: relative; display: grid; place-items: center; width: clamp(54px, 15vw, 76px); aspect-ratio: 3 / 4; border: 1px solid color-mix(in srgb, var(--archetype) 55%, #0000); border-radius: 50% 50% 8px 8px / 36% 36% 8px 8px; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--archetype) 16%, #0000), #04080bcc 72%); box-shadow: inset 0 0 14px #000a; transition: opacity .5s, transform .5s, box-shadow .5s, filter .5s; }
#game .rank-c-mirrors > span img { width: 74%; height: 74%; object-fit: contain; opacity: .55; filter: grayscale(.5) brightness(.75); transition: opacity .5s, filter .5s; }
#game .rank-c-mirrors > span[data-state="active"] { transform: translateY(-6px) scale(1.08); box-shadow: inset 0 0 14px #000a, 0 0 22px color-mix(in srgb, var(--archetype) 50%, #0000); animation: rank-c-mirror-breath 2.8s ease-in-out infinite; }
#game .rank-c-mirrors > span[data-state="active"] img { opacity: 1; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--archetype) 70%, #0000)); }
#game .rank-c-mirrors > span[data-state="cleared"] { box-shadow: inset 0 0 14px #000a, 0 0 10px color-mix(in srgb, var(--archetype) 28%, #0000); }
#game .rank-c-mirrors > span[data-state="cleared"] img { opacity: .9; filter: none; }
#game .rank-c-mirrors > span[data-state="cleared"]::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #0b1418; border: 1px solid var(--archetype); color: var(--archetype); font: 11px/1 var(--ui-font-body); }
#game .rank-c-mirrors > span[data-state="faded"] { opacity: .3; transform: scale(.9); filter: grayscale(.8); }
#game .rank-c-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
#game .rank-c-flash.play[data-kind="right"] { background: radial-gradient(ellipse at 50% 80%, #fbe3a855, transparent 62%); animation: rank-c-flash .9s ease-out; }
#game .rank-c-flash.play[data-kind="mistake"] { background: linear-gradient(115deg, transparent 46%, #d9eef455 49%, transparent 51%), radial-gradient(ellipse, #5a1b1b44, transparent 70%); animation: rank-c-crack 1s ease-out; }
#game .rank-c-dialog[data-mirror="warden"] .rank-fog { filter: sepia(.6); }
#game .rank-c-dialog[data-mirror="weaver"] .rank-fog { filter: hue-rotate(60deg); }

/* ——— The seal: rank C crest, the letter and the sworn Archetype ——— */
#game .rank-c-seal { position: absolute; z-index: 3; left: 50%; top: 22%; width: clamp(110px, 34vw, 170px); aspect-ratio: 5 / 6; transform: translateX(-50%) scale(.82); opacity: 0; transition: opacity .9s ease, transform 1.2s ease; pointer-events: none; }
#game .rank-c-seal > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px #000b); }
#game .rank-c-seal-archetype { position: absolute; left: 50%; bottom: -8%; width: 42%; height: auto; transform: translateX(-50%); opacity: 0; transition: opacity .8s .4s; filter: drop-shadow(0 0 8px #000); }
#game .rank-c-seal > strong { position: absolute; left: 0; right: 0; top: 34%; height: 30%; display: grid; place-items: center; color: #f6ddb1; font: 500 clamp(30px, 9vw, 46px)/1 var(--ui-font-display, Georgia); text-shadow: 0 1px 1px #000, 0 0 12px #e5c69099; opacity: 0; transition: opacity .8s .6s; }
#game .rank-c-dialog[data-stage="seal"] .rank-c-seal, #game .rank-c-dialog[data-stage="award"] .rank-c-seal { opacity: 1; transform: translateX(-50%) scale(1); }
#game .rank-c-dialog:is([data-stage="seal"], [data-stage="award"]) .rank-c-seal > strong,
#game .rank-c-dialog:is([data-stage="seal"], [data-stage="award"]) .rank-c-seal-archetype { opacity: 1; }
#game .rank-c-dialog[data-stage="award"] .rank-c-seal { top: 9%; transform: translateX(-50%) scale(.72); }

/* ——— Ceremony: the hall painting stays, the mirrors and the seal play over it ——— */
#game .rank-c-dialog[data-mode="ceremony"] .rank-backdrop { display: block; }
#game .rank-c-dialog[data-mode="ceremony"] .rank-c-mirrors { bottom: auto; top: 30%; }
#game .rank-c-dialog[data-stage="dim"] .rank-backdrop { filter: brightness(.7); }
#game .rank-c-dialog:is([data-stage="seal"], [data-stage="award"]) .rank-c-mirrors { opacity: 0; transition: opacity .8s; }
#game .rank-c-dialog[data-mode="ceremony"] .rank-c-award { top: 46%; }
/* The award reads over a busy painting: the hall darkens behind the seal and the title. */
#game .rank-c-scene::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s ease; background: radial-gradient(ellipse at 50% 52%, #020507e6 0, #020507b3 38%, #02050740 75%, transparent); }
#game .rank-c-dialog[data-stage="award"] .rank-c-scene::after { opacity: 1; }
#game .rank-c-dialog[data-stage="award"] .rank-c-award { opacity: 1; transition: opacity 1s ease .3s; }
#game .rank-c-award > div strong#rankCAwardArchetype { color: #efd8b0; }
#game #rankCProgress { display: block; width: 100%; height: 2px; border: none; margin: 0 0 4px; background: #152126; accent-color: #d8bb83; }
#game #rankCProgress::-webkit-progress-bar { background: #152126; }
#game #rankCProgress::-webkit-progress-value { background: linear-gradient(90deg, #76c2c3, #d8bb83); }
#game .rank-c-dialog[data-complete="true"] .rank-ceremony-caption { opacity: .7; }

/* ——— The oath picker: free at the ceremony, 300 ✧ in the Hall ——— */
#game .rank-c-oath-choice { max-width: 460px; margin: 0 auto 14px; }
#game .rank-c-oath-choice .eyebrow { font-size: 9px; color: #b1c5c2; }
#game .rank-c-oath-choice h2 { margin: 6px 0; color: #efd8b0; font: 500 23px/1.2 var(--ui-font-display); }
#game .rank-c-oath-choice > p:not(.eyebrow) { font: 12px/1.5 var(--ui-font-body); color: #b9c7c7; margin: 8px 0 14px; }
#game .rank-c-oath-options { display: grid; gap: 8px; margin-bottom: 12px; }
#game [data-ui-screen] .rank-c-oath-options > button { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; place-items: start stretch; align-items: start; width: 100%; padding: 12px 16px 12px 14px; text-align: left; white-space: normal; border-color: color-mix(in srgb, var(--archetype) 30%, #0000); }
#game [data-ui-screen] .rank-c-oath-options > button[aria-checked="true"] { border-color: var(--archetype); box-shadow: 0 0 0 1px var(--archetype), 0 0 18px color-mix(in srgb, var(--archetype) 25%, #0000); background: color-mix(in srgb, var(--archetype) 9%, #070d11); }
#game [data-ui-screen] .rank-c-oath-options > button:disabled { opacity: .55; }
#game .rank-c-oath-options img { width: 48px; height: 48px; object-fit: contain; }
#game .rank-c-oath-options span { display: grid; gap: 4px; min-width: 0; justify-items: start; text-align: left; }
#game .rank-c-oath-options strong { color: var(--archetype); font: 500 17px/1.25 var(--ui-font-display); }
#game .rank-c-oath-options em { color: #eadfca; font: italic 13px/1.4 var(--ui-font-display); }
#game .rank-c-oath-options small { color: #b9c7c7; font: 12px/1.45 var(--ui-font-body); }
#game .rank-c-oath-options ul { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; color: #a9b8ba; font: 11px/1.4 var(--ui-font-body); text-align: left; }
#game .rank-c-oath-options li { position: relative; padding-left: 12px; }
#game .rank-c-oath-options li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--archetype); }
#game .rank-c-oath-choice > .primary-button { width: 100%; }
#game .rank-c-dialog[data-view="change"] .rank-scene { height: clamp(150px, 24dvh, 220px); }
#game .rank-c-dialog[data-mode="ceremony"] .rank-c-oath-choice { max-height: none; }
#game .rank-c-dialog[data-mode="ceremony"]:has(.rank-c-oath-choice:not([hidden])) .rank-dialog-content { max-height: 82%; }
/* While the Seeker reads the oaths the mirrors step back: their crests are on the cards. */
#game .rank-c-dialog[data-mode="ceremony"]:has(.rank-c-oath-choice:not([hidden])) .rank-c-mirrors { opacity: 0; transition: opacity .4s; }

@keyframes rank-c-mirror-breath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes rank-c-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rank-c-crack { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; transform: translateX(-6px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-2px); } 100% { opacity: 0; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { #game .rank-c-dialog *, #game .archetype-card * { animation: none !important; transition: none !important; } }
@media (max-height: 650px) {
  #game .rank-c-dialog[data-mode="ceremony"] .rank-c-mirrors { top: 24%; }
  #game .rank-c-mirrors > span { width: 48px; }
  #game .rank-c-oath-options ul { display: none; }
}

/* ——— Battle: the run's Archetype on the skill bar ——— */
#game .skill.archetype-skill { border-color: color-mix(in srgb, var(--archetype) 70%, transparent); }
#game .skill .skill-badge, #game .skill .skill-series { position: absolute; left: 50%; z-index: 3; transform: translateX(-50%); padding: 1px 6px; border-radius: 9px; font: 700 10px/1.3 var(--ui-font-body); white-space: nowrap; pointer-events: none; }
#game .skill .skill-badge { top: 8%; background: #0b1418e6; border: 1px solid #9fe3ff; color: #d5f5ff; }
#game .skill .skill-series { top: 27%; background: #9fe3ff; color: #062028; animation: rank-c-series-pop .35s ease-out; }
#game .energy-bar.has-cost-mark::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--ultimate-cost, 1) * 100% - 1px); width: 2px; background: #c9a8ff; box-shadow: 0 0 6px #c9a8ff; }
@keyframes rank-c-series-pop { from { transform: translateX(-50%) scale(1.35); } to { transform: translateX(-50%) scale(1); } }

/* ——— Guild roster: a guildmate's rank and Archetype ——— */
#game .guild-roster-seeker { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--ui-muted, #9fb0b2); font: 11px/1.4 var(--ui-font-body); }
#game .guild-roster-seeker[data-archetype] { color: var(--archetype); }
#game .guild-roster-seeker img { width: 16px; height: 16px; object-fit: contain; }