/* ================= Battlefield ================= */
.battle-stage {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--gold-700);
    box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(241,200,53,.15) inset;
    background: #0d0a06;
    aspect-ratio: 3 / 2;
    /* Fit the whole battlefield (and the HP panel at its bottom edge) on screen with the controls just below. */
    width: var(--stage-w);
}
:root { --stage-w: min(100%, max(640px, calc((100vh - 300px) * 1.5))); }
.battle-ui, .battle-head { width: var(--stage-w); max-width: 1500px; margin-inline: auto; }
.battle-stage canvas { display: block; width: 100%; height: 100%; }

.bt-panel { margin-top: 18px; position: relative; }
.bt-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.bt-spacer { flex: 1; }
.bt-btn {
    font-family: var(--font-display);
    font-weight: 700; letter-spacing: .03em;
    background: linear-gradient(#3a2a16, #24190c);
    color: var(--parchment-100);
    border: 1px solid var(--gold-700);
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 15px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .2s ease, filter .2s;
    display: inline-flex; gap: 8px; align-items: center;
}
.bt-btn small { font-family: var(--font-body); font-weight: 600; opacity: .8; }
.bt-btn:hover:not(:disabled) { box-shadow: 0 0 18px rgba(241,200,53,.45); transform: translateY(-1px); }
.bt-btn:active:not(:disabled) { transform: translateY(1px); }
.bt-btn:disabled { opacity: .45; cursor: not-allowed; }
.bt-btn-primary { background: linear-gradient(#f7d866, #c9961f); color: #1d1405; border-color: #fbe08a; }
.bt-btn-ghost { background: transparent; }
.bt-btn-spell { padding: 7px 14px; font-size: 14px; background: linear-gradient(color-mix(in srgb, var(--spell) 55%, #2a1c0d), #20160b); border-color: var(--spell); }
.bt-ico { font-size: 18px; line-height: 1; }

.bt-grid { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 16px; }
.bt-card {
    background: linear-gradient(180deg, rgba(40,28,14,.92), rgba(18,12,6,.95));
    border: 1px solid rgba(241,200,53,.35);
    border-radius: 12px; padding: 14px 16px;
}
.bt-card h3 { font-family: var(--font-display); color: var(--gold-400); margin: 0 0 10px; font-size: 18px; letter-spacing: .05em; }
.bt-card h3 small { font-family: var(--font-body); color: var(--ink-400); font-size: 12px; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

.bt-stat { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink-300); font-size: 14px; }
.bt-stat b { color: var(--parchment-100); font-variant-numeric: tabular-nums; }
.bt-stat.big b { font-size: 22px; color: #fff; font-family: var(--font-display); }
.bt-stat.heal b { color: #d7a6ff; }
.bt-stat.gold b { color: var(--gold-400); font-family: var(--font-display); font-size: 17px; }
.bt-meter { position: relative; height: 22px; border-radius: 11px; background: #2a1c0d; border: 1px solid #6e5122; overflow: hidden; margin: 6px 0 8px; }
.bt-meter i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b8441b, #f1c835); transition: width .6s ease; }
.bt-meter em { position: relative; display: block; text-align: center; font-style: normal; font-size: 12px; font-weight: 700; line-height: 20px; color: #fff; text-shadow: 0 1px 2px #000; }
.bt-sep { height: 1px; background: rgba(241,200,53,.25); margin: 8px 0; }
.bt-note { color: var(--ink-400); font-size: 12px; text-align: right; }
.bt-callout { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(88,240,138,.08); border: 1px solid rgba(88,240,138,.35); color: #cfeedd; font-size: 13px; }
.bt-callout b { color: #8ff5b4; }
.bt-source { margin-top: 10px; font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; }

.bt-spells { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; } /* one column when the card is too narrow for two */
/* Spell card: picture + name/tagline on top, the amount box and Cast button on their own full-width row
   so the dollar amount stays readable even when the Spellbook column is narrow. */
.bt-spell { display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; align-items: start; background: rgba(0,0,0,.25); border: 1px solid color-mix(in srgb, var(--spell) 45%, transparent); border-radius: 10px; padding: 8px; min-width: 0; }
.bt-spell img { grid-row: 1 / span 2; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); }
.bt-spell-body { display: contents; }
.bt-spell-name { grid-column: 2; font-family: var(--font-display); font-weight: 700; color: var(--spell); line-height: 1.2; }
.bt-spell-tag { grid-column: 2; font-size: 11px; color: var(--ink-400); line-height: 1.3; margin: 2px 0 0; }
.bt-spell-cast { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; }
.bt-dollar { color: var(--ink-300); font-weight: 700; }
.bt-spell-cast input { flex: 1 1 auto; width: auto; min-width: 64px; background: #120c06; color: #fff; border: 1px solid #5a4320; border-radius: 6px; padding: 6px 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.bt-spell-cast .bt-btn-spell { flex: none; }

.bt-log { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; font-size: 13px; }
.bt-log li { display: grid; grid-template-columns: 66px 1fr auto; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.06); animation: btIn .35s ease; }
.bt-log li .d { color: var(--ink-500); font-size: 11px; padding-top: 1px; }
.bt-log li .l { color: var(--ink-200); }
.bt-log li .a { font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-log li.hit .a { color: #ffb35c; }
.bt-log li.heal .a { color: #d7a6ff; }
.bt-log li.sum { background: rgba(241,200,53,.06); }
.bt-log-empty { color: var(--ink-500); font-style: italic; display: block !important; }
@keyframes btIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.bt-victory { display: none; margin-top: 16px; gap: 20px; align-items: center; padding: 18px; border-radius: 14px; border: 1px solid var(--gold-500);
    background: radial-gradient(ellipse at top, rgba(241,200,53,.18), rgba(20,12,4,.95)); }
.bt-victory.show { display: flex; animation: btIn .6s ease; }
.bt-victory img { width: 210px; flex: none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.bt-victory h3 { font-family: var(--font-deco); color: var(--gold-400); font-size: 28px; margin: 0 0 8px; }
.bt-victory p { color: var(--parchment-100); font-size: 16px; line-height: 1.6; }

@media (max-width: 1100px) { .bt-grid { grid-template-columns: 1fr 1fr; } .bt-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 700px) {
    .bt-grid { grid-template-columns: 1fr; }
    .bt-spells { grid-template-columns: 1fr; }
    .bt-btn { padding: 9px 12px; font-size: 14px; }
    .bt-victory.show { flex-direction: column; text-align: center; }
}

/* ================= Introduction video (wwwroot/js/intro.js) =================
   Chris's 8-scene workflow (Oct 26, 2026). Sizes use cqw/cqh (percent of the 16:9 frame) so the same
   layout works on the page and in the 1920x1080 MP4 export. Each scene's steps are classes s1, s2… */
.intro { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 82vh; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #000;
    border: 1px solid var(--gold-700); box-shadow: var(--shadow); container-type: size; }
.intro.recording { position: fixed; inset: 0; width: 100vw; height: 100vh; max-height: none; border: 0; border-radius: 0; z-index: 9999; }
.intro.recording .intro-skip, .intro.recording .title-actions { display: none; }
.intro-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.intro-scene.on { opacity: 1; pointer-events: auto; }
.intro-scene img { user-select: none; }
.kb { position: absolute; inset: -8%; background-size: cover; background-position: center; }

/* gate (click to start: browsers only play sound after a click) */
.intro-scene[data-scene=gate] { background: radial-gradient(ellipse at center, #2a1c0d 0%, #000 70%); text-align: center; align-content: center; gap: 1.2cqh; }
.gate-crest { width: 26cqh; filter: drop-shadow(0 0 30px rgba(241,200,53,.35)); animation: introFloat 4s ease-in-out infinite; }
.intro-scene[data-scene=gate] h1 { font-family: var(--font-deco); color: var(--gold-400); margin: 6px 0 0; font-size: clamp(22px, 3.4cqw, 52px); }
.intro-scene[data-scene=gate] p { color: var(--ink-400); margin: 0 0 8px; }

/* 1 · welcome: the burning crest and the tagline */
.intro-scene[data-scene=welcome] { background: radial-gradient(ellipse at 50% 45%, #4a1a06 0%, #160703 45%, #000 75%); }
.embers { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 80%, #ffb347, transparent), radial-gradient(2px 2px at 70% 90%, #ff7a1a, transparent), radial-gradient(3px 3px at 40% 95%, #ffd27a, transparent), radial-gradient(2px 2px at 85% 85%, #ff9a3a, transparent), radial-gradient(2px 2px at 55% 75%, #ffcf6a, transparent);
    background-size: 100% 100%; animation: introEmbers 4s linear infinite; opacity: .8; }
.iw-logo { position: absolute; left: 50%; top: 5cqh; height: 66cqh; aspect-ratio: 900 / 1067; translate: -50% 0; opacity: 0; transform: scale(.8); }
.intro-scene[data-scene=welcome]:is(.on, .leaving) .iw-logo { animation: iwLogo 1.6s ease forwards; }
.iw-logo .burning-logo { height: 100%; width: 100%; }
.iw-tag { position: absolute; left: 0; right: 0; top: 72cqh; text-align: center; font-family: var(--font-deco); font-weight: 900; font-size: 4.2cqw; letter-spacing: .04em;
    color: #ffe9a8; text-shadow: 0 0 1.5cqw rgba(255,140,40,.7), 0 .3cqw .4cqw #000; opacity: 0; transform: translateY(2cqh); transition: opacity 1s ease, transform 1s ease; }
.iw-tag em { font-style: normal; color: #ffb347; }
.intro-scene[data-scene=welcome].s1 .iw-tag { opacity: 1; transform: none; }
@keyframes iwLogo { 0% { opacity: 0; transform: scale(.75); filter: brightness(2.2); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); filter: none; } }

/* 2 · map */
.intro-scene:is(.on, .leaving) .kb-map { animation: kbMap 9s ease-out forwards; }

/* 3 · create your character: the real Character page board (styles generated at the end of this file from Profile.razor.css),
   filled in by an on-screen pointer: the carousel turns, each menu drops open and the choice is picked. */
.intro-scene[data-scene=character] { background: #1b140c; place-items: start center; }
.intro-scene[data-scene=character]::before { content: ''; position: absolute; inset: -4%; background: url('/images/character/bg.webp') center / cover; filter: blur(18px) brightness(.45); }
.intro .cc-board.icb { position: relative; width: 117.6cqh; max-width: none; margin-top: 2cqh; box-shadow: 0 2cqh 5cqh rgba(0,0,0,.6); border-radius: 1cqh; }
.intro .icb .cc-select.icb-sel { display: flex; align-items: center; color: #9aa4b1; cursor: default; }
.intro .icb .icb-sel span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro .icb .cc-select.icb-sel.set { color: #f4f1ea; animation: icbSet .5s ease; }
.intro .icb .cc-input.icb-type { display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.intro .icb .icb-ph { color: #9aa4b1; }
.intro .icb .typing::after { content: ''; display: inline-block; width: .12cqw; height: 1.3cqw; margin-left: .1cqw; background: #f4f1ea; vertical-align: middle; animation: icbCaret .8s steps(1) infinite; }
.intro .icb .cc-textarea.icb-notes { white-space: normal; overflow: hidden; }
.intro .icb .cc-textarea.icb-notes.typing::after { height: 1.1cqw; }
.intro .icb .cc-list { overflow: hidden; scroll-behavior: smooth; }
.intro .icb .cc-panel.icb-open { z-index: 20; }
/* the open menu: the page's option list, drawn below the slot */
.intro .icb .icb-dd { position: absolute; top: 50%; left: 9.5%; right: 15%; z-index: 30; padding: .3cqw 0; background: #1d2127; border: .1cqw solid #6c7480; border-radius: .3cqw;
    box-shadow: 0 .8cqw 1.6cqw rgba(0,0,0,.7); opacity: 0; transform: scaleY(.6); transform-origin: top; transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.intro .icb .cc-guild .icb-dd { left: 15%; right: 13%; }
.intro .icb .icb-dd.on { opacity: 1; transform: none; }
.intro .icb .icb-dd div { height: 2.1cqw; display: flex; align-items: center; padding: 0 .7cqw; font-family: 'Open Sans', sans-serif; font-size: 1.05cqw; color: #f4f1ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro .icb .icb-dd div.hl { background: #2f6fd0; color: #fff; }
/* the pointer */
.intro .icb .icb-cursor { position: absolute; z-index: 40; left: 50%; top: 60%; width: 1.9cqw; aspect-ratio: 12 / 19; opacity: 0; translate: -12% -6%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 19'%3E%3Cpath d='M1 1v15l3.6-3.4 2.6 5.6 2.3-1-2.6-5.5H12z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.6)); transition: left .38s cubic-bezier(.4,.1,.3,1), top .38s cubic-bezier(.4,.1,.3,1), opacity .3s ease; }
.intro .icb .icb-cursor.on { opacity: 1; }
.intro .icb .icb-cursor.fast { transition-duration: .1s, .1s, .3s; }
.intro .icb .icb-cursor.click { animation: icbClick .22s ease; }
.intro .icb .cc-arrow.press { transform: scale(.92); filter: brightness(1.35); }
.intro-scene[data-scene=character].s1 .icb .cc-card.pos-c { filter: drop-shadow(0 0 2.4cqw rgba(255,214,110,.9)); }
@keyframes icbClick { 50% { scale: .82; } }
@keyframes icbCaret { 50% { opacity: 0; } }
@keyframes icbSet { from { text-shadow: 0 0 1cqw rgba(120,190,255,1); } to { text-shadow: none; } }

/* 3b · the completed character profile (Dr. Crystal Nhieu, from TPG's concept art) */
.intro-scene[data-scene=profile] { background: #120c06; }
.intro-scene[data-scene=profile]::before { content: ''; position: absolute; inset: -4%; background: url('/game/ui/parchment.webp') center / cover; filter: blur(10px) brightness(.35) sepia(.4); }
.ipf-page { position: relative; height: 94cqh; aspect-ratio: 1400 / 1812; box-shadow: 0 0 4cqh rgba(241,200,53,.25), 0 2cqh 6cqh rgba(0,0,0,.8); }
.ipf-page img { width: 100%; height: 100%; display: block; }
.intro-scene[data-scene=profile]:is(.on, .leaving) .ipf-page { animation: ipfTour 7.6s ease-in-out forwards; }
/* full page, then up close on the header and portrait, then across to the stronghold and its HP, then back out */
@keyframes ipfTour {
    0%, 14% { transform: scale(1) translate(0, 0); }
    40% { transform: scale(1.75) translate(10%, 23%); }
    52% { transform: scale(1.75) translate(10%, 23%); }
    80% { transform: scale(1.75) translate(-20%, -24%); }
    100% { transform: scale(1.08) translate(0, 0); }
}

/* 4 · choose your path */
.intro-scene[data-scene=path] { background: #120c06; }
.ip-bg { position: absolute; inset: 0; background: linear-gradient(rgba(10,6,2,.55), rgba(10,6,2,.85)), url('/game/ui/map.jpg') center / cover; filter: saturate(.8); }
.ip-title { position: absolute; top: 8cqh; left: 0; right: 0; text-align: center; font-family: var(--font-deco); font-weight: 900; font-size: 4.6cqw; color: #f6dc8a; text-shadow: 0 .3cqw .5cqw #000; }
.ip-choices { position: absolute; left: 50%; top: 27cqh; translate: -50% 0; display: flex; align-items: center; gap: 3cqw; transition: transform .9s ease, opacity .9s ease; }
.ip-choice { width: 26cqw; height: 46cqh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh; border-radius: 1.4cqw;
    background: linear-gradient(160deg, #2b2014, #15100a); border: .25cqw solid #8a6a3a; box-shadow: 0 2cqh 4cqh rgba(0,0,0,.6);
    opacity: 0; transform: translateY(6cqh); transition: opacity .7s ease, transform .7s ease, box-shadow .5s ease, filter .5s ease, border-color .5s ease; }
.ip-choice img { height: 18cqh; filter: drop-shadow(0 0 1.4cqw rgba(241,200,53,.35)); }
.ip-priv img { filter: hue-rotate(160deg) saturate(.8) drop-shadow(0 0 1.4cqw rgba(120,190,255,.35)); }
.ip-choice b { font-family: var(--font-deco); font-size: 3.4cqw; color: #f6dc8a; }
.ip-choice span { font-family: var(--font-display); font-size: 1.5cqw; letter-spacing: .08em; color: #e9dcc0; }
.ip-or { font-family: var(--font-display); font-size: 2cqw; color: #b9a27a; opacity: 0; transition: opacity .7s ease .3s; }
.intro-scene[data-scene=path].s1 .ip-choice { opacity: 1; transform: none; }
.intro-scene[data-scene=path].s1 .ip-priv { transition-delay: .2s; }
.intro-scene[data-scene=path].s1 .ip-or { opacity: 1; }
.intro-scene[data-scene=path].s2 .ip-fed { border-color: #f1c835; box-shadow: 0 0 4cqw rgba(241,200,53,.55), 0 2cqh 4cqh rgba(0,0,0,.6); transform: scale(1.06); }
.intro-scene[data-scene=path].s2 .ip-priv, .intro-scene[data-scene=path].s2 .ip-or { filter: brightness(.45) saturate(.5); }
.intro-scene[data-scene=path].s3 .ip-choices { transform: translateX(-24cqw) scale(.78); }
.intro-scene[data-scene=path].s3 .ip-priv, .intro-scene[data-scene=path].s3 .ip-or { opacity: 0; }
.ip-partner { position: absolute; right: 9cqw; top: 26cqh; width: 38cqw; padding: 3.4cqh 2.6cqw; border-radius: 1.2cqw; color: #3a2a14;
    background: url('/game/ui/parchment.webp') center / cover; border: .25cqw solid #b58d3d; box-shadow: 0 2cqh 6cqh rgba(0,0,0,.7);
    opacity: 0; transform: translateX(10cqw); transition: opacity .8s ease, transform .8s ease; }
.intro-scene[data-scene=path].s3 .ip-partner { opacity: 1; transform: none; }
.ip-p-eyebrow { font-family: var(--font-display); letter-spacing: .22em; text-transform: uppercase; font-size: 1.05cqw; color: #8a5a12; }
.ip-p-title { font-family: var(--font-deco); font-weight: 900; font-size: 2.4cqw; color: #4a1e0b; line-height: 1.15; margin: .6cqh 0 1.4cqh; }
.ip-partner ul { margin: 0; padding-left: 1.6cqw; font-size: 1.5cqw; line-height: 1.6; }
.ip-p-seal { display: inline-block; margin-top: 1.8cqh; font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 1.1cqw; color: #2f6a3a;
    border: .2cqw solid #2f6a3a; padding: .4cqh 1cqw; border-radius: .4cqw; transform: rotate(-4deg); }

/* 5 · build your stronghold */
.intro-scene:is(.on, .leaving) .kb-attack { animation: kbWraith 12s ease-out forwards; filter: saturate(.9) brightness(.9); }
.is-castle { position: absolute; right: 10cqw; bottom: 14cqh; width: 46cqw; aspect-ratio: 900 / 812; overflow: hidden; }
.is-castle img, .ib-castle img { scale: -1 1; }   /* mirrored so the gate faces the hero, as on the battlefield */
.is-castle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: translateY(100%); transition: transform 2.6s cubic-bezier(.2,.7,.3,1); }
.intro-scene[data-scene=stronghold].s1 .is-castle img { transform: none; }
.intro-scene[data-scene=stronghold].s1 .is-castle { animation: isRumble 2.6s linear; }
.is-dust { position: absolute; right: 8cqw; bottom: 10cqh; width: 50cqw; height: 20cqh; display: flex; justify-content: space-around; align-items: flex-end; pointer-events: none; }
.is-dust img { width: 30%; opacity: 0; }
.intro-scene[data-scene=stronghold].s1 .is-dust img { animation: isDust 3.2s ease-out forwards; }
.intro-scene[data-scene=stronghold].s1 .is-dust img:nth-child(2) { animation-delay: .3s; }
.intro-scene[data-scene=stronghold].s1 .is-dust img:nth-child(3) { animation-delay: .6s; }
.is-spikes { position: absolute; width: 22cqw; opacity: 0; transform: translateY(3cqh) scale(.9); transition: opacity .5s ease, transform .5s cubic-bezier(.3,1.6,.5,1); }
.is-spikes1 { left: 20cqw; bottom: 26cqh; } .is-spikes2 { left: 13cqw; bottom: 14cqh; transition-delay: .2s; }
.is-barricade { position: absolute; right: 42cqw; bottom: 10cqh; width: 14cqw; opacity: 0; transform: translateY(3cqh); transition: opacity .5s ease, transform .5s cubic-bezier(.3,1.6,.5,1); }
.is-infantry { position: absolute; right: 31cqw; bottom: 8cqh; width: 10cqw; opacity: 0; transform: translateY(3cqh); transition: opacity .5s ease .15s, transform .5s cubic-bezier(.3,1.6,.5,1) .15s; }
.intro-scene[data-scene=stronghold].s2 .is-spikes, .intro-scene[data-scene=stronghold].s3 .is-barricade, .intro-scene[data-scene=stronghold].s3 .is-infantry { opacity: 1; transform: none; }
.is-wraith { position: absolute; width: 17cqw; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 1.4cqw rgba(140,200,255,.6)); }
.intro-scene[data-scene=stronghold].s4 .is-wraith1 { animation: isWraith1 6s ease-in-out infinite; }
.intro-scene[data-scene=stronghold].s4 .is-wraith2 { animation: isWraith2 7s ease-in-out .8s infinite; }
.is-hp { position: absolute; right: 22cqw; bottom: 3cqh; display: grid; justify-items: center; padding: 1cqh 2cqw; border-radius: 1cqw; background: url('/game/ui/parchment.webp') center / cover;
    border: .2cqw solid #b58d3d; box-shadow: 0 1cqh 3cqh rgba(0,0,0,.6); opacity: 0; transform: translateY(2cqh); transition: opacity .6s ease, transform .6s ease; }
.is-hp span { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 1cqw; color: #3d1c06; }
.is-hp b { font-family: var(--font-deco); font-weight: 900; font-size: 2.6cqw; color: #7a1410; line-height: 1.1; }
.intro-scene[data-scene=stronghold].s5 .is-hp { opacity: 1; transform: none; }
.is-attack { position: absolute; left: 0; right: 0; top: 36cqh; text-align: center; font-family: var(--font-deco); font-weight: 900; font-size: 11cqw; letter-spacing: .04em;
    color: #ffe08a; -webkit-text-stroke: .25cqw #5a1206; text-shadow: 0 0 3cqw rgba(255,90,20,.9), 0 .6cqw 0 #3a0c04; opacity: 0; transform: scale(2.4); pointer-events: none; }
.intro-scene[data-scene=stronghold].finale .is-attack { animation: isAttack .7s cubic-bezier(.2,1.4,.4,1) forwards; }
.intro-scene[data-scene=stronghold].finale .kb-attack { animation: kbWraith 12s ease-out forwards, isShake .5s .1s; }
@keyframes isRumble { 0%, 100% { translate: 0 0; } 10% { translate: -.3cqw 0; } 20% { translate: .3cqw 0; } 30% { translate: -.25cqw 0; } 40% { translate: .25cqw 0; } 50% { translate: -.2cqw 0; } 60% { translate: .2cqw 0; } 70% { translate: -.15cqw 0; } 80% { translate: .1cqw 0; } }
@keyframes isDust { 0% { opacity: 0; transform: translateY(2cqh) scale(.6); } 25% { opacity: .85; } 100% { opacity: 0; transform: translateY(-8cqh) scale(1.5); } }
@keyframes isWraith1 { 0% { opacity: 0; left: 104cqw; top: 24cqh; transform: scaleX(1); } 10% { opacity: .95; } 45% { left: 40cqw; top: 30cqh; transform: scaleX(1); } 50% { transform: scaleX(-1); } 90% { opacity: .95; left: 80cqw; top: 22cqh; transform: scaleX(-1); } 100% { opacity: 0; left: 104cqw; top: 24cqh; transform: scaleX(-1); } }
@keyframes isWraith2 { 0% { opacity: 0; left: -20cqw; top: 40cqh; transform: scaleX(-1); } 12% { opacity: .9; } 50% { left: 58cqw; top: 32cqh; transform: scaleX(-1); } 55% { transform: scaleX(1); } 90% { opacity: .9; left: 30cqw; top: 42cqh; transform: scaleX(1); } 100% { opacity: 0; left: -20cqw; top: 40cqh; transform: scaleX(1); } }
@keyframes isAttack { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes isShake { 0%, 100% { translate: 0 0; } 20% { translate: -1cqw .4cqh; } 40% { translate: .9cqw -.3cqh; } 60% { translate: -.6cqw .3cqh; } 80% { translate: .3cqw -.1cqh; } }

/* 6 · weapons and spells, then the attack */
.intro-scene[data-scene=battle] { background: radial-gradient(ellipse at center, #2a1c0d, #000 75%); }
.ib-armory { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 3cqw; transition: opacity .7s ease, transform .7s ease; }
.ib-card { position: relative; width: 22cqw; aspect-ratio: 608 / 805; opacity: 0; transform: translateY(20cqh) rotate(6deg); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1.1), filter .4s ease; }
.ib-c2 { transition-delay: .15s; } .ib-c3 { transition-delay: .3s; }
.intro-scene[data-scene=battle].s1 .ib-card { opacity: 1; transform: none; }
.ib-cname { position: absolute; left: 10%; right: 10%; top: 7.5%; height: 10%; display: grid; place-items: center; font-family: Cambria, Georgia, serif; font-size: 1.7cqw; color: #fff; text-shadow: 0 .2cqw .3cqw #000; white-space: nowrap; }
.ib-art { position: absolute; left: 14%; width: 72%; top: 22%; height: 52%; object-fit: contain; filter: drop-shadow(0 0 1.2cqw rgba(110,190,255,.55)); }
.ib-spellart { border-radius: .8cqw; filter: drop-shadow(0 0 1.2cqw rgba(200,120,255,.6)); }
.ib-dmg { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font-family: var(--font-deco); font-weight: 900; font-size: 1.7cqw; color: #f1c835; text-shadow: 0 .2cqw .5cqw #000; }
.intro-scene[data-scene=battle].s2 .ib-c1, .intro-scene[data-scene=battle].s3 .ib-c3 { filter: drop-shadow(0 0 2.4cqw rgba(255,214,110,.95)); transform: translateY(-2cqh) scale(1.05); }
.intro-scene[data-scene=battle].s4 .ib-armory { opacity: 0; transform: scale(1.15); pointer-events: none; }
.ib-field { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .8s ease; }
.intro-scene[data-scene=battle].s4 .ib-field { opacity: 1; }
.ib-castle { position: absolute; right: 8cqw; bottom: 12cqh; width: 46cqw; aspect-ratio: 900 / 812; }
.ib-castle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: opacity .6s ease; }
.ib-c-b { opacity: 0; }
.intro-scene[data-scene=battle].s9 .ib-c-b { opacity: 1; } .intro-scene[data-scene=battle].s9 .ib-c-a { opacity: 0; }
.intro-scene[data-scene=battle].s9 .ib-castle, .intro-scene[data-scene=battle].s7 .ib-castle { animation: introShake .5s ease-out; }
.ib-hero { position: absolute; left: 4cqw; bottom: 5cqh; height: 54cqh; aspect-ratio: 468 / 520; filter: drop-shadow(0 0 1.6cqw rgba(110,190,255,.45)); transition: translate .2s ease-out; }
.ib-hero.lunge { translate: 2.4cqw 0; }
.ib-hf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; }
.ib-hf.on { opacity: 1; }
.ib-wraith { position: absolute; width: 17cqw; left: 44cqw; top: 25cqh; opacity: .95; filter: drop-shadow(0 0 1.4cqw rgba(140,200,255,.6)); animation: ibHover 2.4s ease-in-out infinite; transform-origin: 60% 30%; }
.intro-scene[data-scene=battle].s6 .ib-wraith { animation: ibFall 1.3s cubic-bezier(.5,0,.9,.5) forwards; }
/* The arrow art points up-right (about 56 degrees above level); turned 36 degrees clockwise it lies along its flight line
   (about 20 degrees above level, from the Mage to the Wraith). left/top place the arrow's center; the tip leads it. */
.ib-arrow { position: absolute; width: 12cqw; left: 19.6cqw; top: 53.5cqh; opacity: 0; transform: translate(-50%, -50%) rotate(36deg); filter: drop-shadow(0 0 1cqw #58f08a); }
.ib-hit { position: absolute; left: 52cqw; top: 33cqh; width: 14cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(150,255,190,.85) 25%, rgba(88,240,138,.35) 50%, transparent 70%); }
.intro-scene[data-scene=battle].s6 .ib-hit { animation: introBoom .6s ease-out forwards; }
.intro-scene[data-scene=battle].s5 .ib-arrow { animation: ibArrow .6s cubic-bezier(.3,0,.7,1) forwards; }
.ib-slash { position: absolute; right: 26cqw; top: 46cqh; width: 18cqw; height: 1.2cqh; border-radius: 999px; opacity: 0; transform: rotate(-32deg) scaleX(0);
    background: linear-gradient(90deg, transparent, #e8f6ff 30%, #7fd3ff 60%, transparent); box-shadow: 0 0 2cqw #7fd3ff; }
.intro-scene[data-scene=battle].s7 .ib-slash { animation: ibSlash .45s ease-out forwards; }
.ib-meteor { position: absolute; width: 13cqw; top: -40cqh; left: 86cqw; opacity: 0; filter: drop-shadow(0 0 2cqw #a86bff); }
.intro-scene[data-scene=battle].s8 .ib-meteor { animation: ibMeteor 1.1s cubic-bezier(.45,0,.9,.6) forwards; }
.ib-boom { position: absolute; left: 70cqw; top: 54cqh; width: 32cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(214,160,255,.85) 22%, rgba(140,80,255,.45) 45%, rgba(90,40,200,0) 70%); }
.intro-scene[data-scene=battle].s9 .ib-boom { animation: introBoom .9s ease-out forwards; }
.ib-num { position: absolute; font-family: var(--font-deco); font-weight: 900; font-size: 3.6cqw; color: #ffe08a; -webkit-text-stroke: .15cqw #4a1206; text-shadow: 0 0 1.4cqw rgba(255,120,40,.8); opacity: 0; pointer-events: none; }
.ib-n1 { left: 50cqw; top: 22cqh; color: #b8ffcf; text-shadow: 0 0 1.4cqw rgba(88,240,138,.8); }
.ib-n2 { right: 26cqw; top: 34cqh; color: #d8f2ff; text-shadow: 0 0 1.4cqw rgba(127,211,255,.8); }
.ib-n3 { right: 22cqw; top: 30cqh; font-size: 4.8cqw; }
.intro-scene[data-scene=battle].s6 .ib-n1, .intro-scene[data-scene=battle].s7 .ib-n2, .intro-scene[data-scene=battle].s9 .ib-n3 { animation: ibNum 1.6s ease-out forwards; }
/* Total HP panel, bottom right as on the battlefield (bar boxes match engine.js _drawHud) */
.ib-hpp { position: absolute; right: 1.6cqw; bottom: 2.2cqh; width: 31cqw; aspect-ratio: 760 / 273; filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.6)); }
.ib-hpp > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ib-bar { position: absolute; left: 37.37%; width: 40.26%; height: 8.79%; }
.ib-bfed { top: 54.21%; } .ib-bprv { top: 69.96%; }
.ib-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7fe05a, #2fa52c 50%, #1d6b1a); transition: width .7s cubic-bezier(.2,.7,.3,1); }
.ib-bar i::after { content: ''; position: absolute; right: -.2cqw; top: 0; bottom: 0; width: .4cqw; background: #d6352b; }
.ib-bar b { position: absolute; left: .5cqw; top: 50%; translate: 0 -50%; font: 700 1cqw Georgia, serif; color: #fff; text-shadow: 0 0 .25cqw #000, 0 0 .25cqw #000; white-space: nowrap; }
.ib-bar.hit { animation: ibBarHit .7s ease-out; }
@keyframes ibBarHit { 0%, 30% { filter: brightness(1.9) drop-shadow(0 0 .8cqw #ff5a3c); } 100% { filter: none; } }
@keyframes ibHover { 0%, 100% { translate: 0 0; } 50% { translate: -1cqw -2cqh; } }
@keyframes ibFall { 0% { transform: none; opacity: 1; filter: brightness(2.2) drop-shadow(0 0 2cqw #58f08a); } 100% { transform: translate(-4cqw, 70cqh) rotate(-70deg) scale(.7); opacity: 0; } }
@keyframes ibArrow { 0% { opacity: 0; left: 19.6cqw; top: 53.5cqh; } 8% { opacity: 1; } 90% { opacity: 1; left: 45.1cqw; top: 37.3cqh; } 100% { opacity: 0; left: 45.6cqw; top: 37.1cqh; } } /* gone on impact */
@keyframes ibSlash { 0% { opacity: 0; transform: rotate(-32deg) scaleX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(-32deg) scaleX(1.2); } }
@keyframes ibMeteor { 0% { opacity: 1; top: -40cqh; left: 86cqw; } 92% { opacity: 1; } 100% { opacity: 0; top: 40cqh; left: 64cqw; } }
@keyframes ibNum { 0% { opacity: 0; transform: translateY(1cqh) scale(.7); } 20% { opacity: 1; transform: scale(1.1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6cqh) scale(1); } }

/* 7 · side quests: up the mountain toward the grail, with two notifications */
.intro-scene[data-scene=quests] { background: #0f1620; }
.iq-pan { position: absolute; left: 0; top: 0; width: 100cqw; aspect-ratio: 1; transform: translateY(calc(100cqh - 100cqw)); }
.intro-scene[data-scene=quests].s1 .iq-pan { transform: translateY(0); transition: transform 10.5s cubic-bezier(.45,.05,.4,1); }
.iq-pan > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.iq-layer { position: absolute; left: 0; top: 0; width: 1024px; height: 1024px; transform-origin: 0 0; transform: scale(var(--iq-s, 1)); pointer-events: none; }
/* Each scroll's text is set in a 160x120 box, then tilted and skewed onto that scroll's parchment (corners measured from the art). */
.iq-scroll { position: absolute; left: 0; top: 0; width: 160px; height: 120px; transform-origin: 0 0; box-sizing: border-box; padding: 6px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    font-family: Cambria, Georgia, serif; font-size: 21px; line-height: 1.15; color: #3a2a14; }
.iq-scroll b { font-family: var(--font-display); font-size: 22px; line-height: 1.05; color: #5a1a0c; }
.iq-scroll i { font-style: normal; font-family: var(--font-deco); font-weight: 900; font-size: 30px; color: #2f6a3a; margin-top: 4px; }
.iq-grail { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,170,.75), rgba(255,210,90,.25) 45%, transparent 70%); mix-blend-mode: screen; animation: iqGlow 2s ease-in-out infinite; }
.iq-note { position: absolute; top: 10cqh; height: 66cqh; opacity: 0; filter: drop-shadow(0 2cqh 4cqh rgba(0,0,0,.7)); transition: opacity .6s ease, transform .7s cubic-bezier(.2,1.2,.4,1); }
.iq-note1 { left: 6cqw; transform: translateX(-30cqw) rotate(-10deg); }
.iq-note2 { right: 6cqw; transform: translateX(30cqw) rotate(10deg); }
.intro-scene[data-scene=quests].s2 .iq-note1 { opacity: 1; transform: rotate(-4deg); }
.intro-scene[data-scene=quests].s3 .iq-note1 { opacity: 0; transform: translateX(-30cqw) rotate(-10deg); }
.intro-scene[data-scene=quests].s4 .iq-note2 { opacity: 1; transform: rotate(4deg); }
@keyframes iqGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

/* 8 · title */
.intro-scene[data-scene=title] { background: radial-gradient(ellipse at center, #1f1408, #000 70%); text-align: center; align-content: center; gap: 1.6cqh; }
.title-logo { height: 46cqh; filter: drop-shadow(0 0 30px rgba(241,200,53,.35)); }
.intro-scene[data-scene=title].on .title-logo { animation: iwLogo 1.4s ease forwards; }
.title-sub { font-family: var(--font-display); color: var(--parchment-100); font-size: 2.6cqw; }
.title-sub b { font-family: var(--font-deco); color: var(--gold-400); }
.title-sub2 { font-family: var(--font-display); color: #e9dcc0; font-size: 1.8cqw; }
.title-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* captions */
.intro-caption { position: absolute; left: 50%; bottom: 4cqh; transform: translate(-50%, 10px); width: 88cqw; text-align: center; opacity: 0; z-index: 4;
    font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1.6cqw, 36px); line-height: 1.35; color: #fff8e0; text-shadow: 0 2px 8px #000, 0 0 2px #000;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.7) 12%, rgba(0,0,0,.7) 88%, transparent); padding: 1.4cqh 6cqw; transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.intro-caption.on { opacity: 1; transform: translate(-50%, 0); }
.intro-caption.top { bottom: auto; top: 3cqh; }
.intro-skip { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.55); color: var(--ink-200); border: 1px solid rgba(241,200,53,.35); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13px; z-index: 5; }
.intro-skip:hover { color: var(--gold-400); }
@keyframes introEmbers { from { background-position: 0 0; } to { background-position: 0 -100%; } }
@keyframes introFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kbMap { from { transform: scale(1.05) translate(2%, 1%); } to { transform: scale(1.25) translate(-4%, -3%); } }
@keyframes introShake { 0%, 100% { translate: 0 0; } 20% { translate: -8px 3px; } 40% { translate: 7px -2px; } 60% { translate: -5px 2px; } 80% { translate: 3px -1px; } }
@keyframes kbWraith { from { transform: scale(1.0); } to { transform: scale(1.1); } }
@keyframes introBoom { 0% { opacity: 0; scale: .2; } 25% { opacity: 1; scale: .8; } 100% { opacity: 0; scale: 1.6; } }
@media (prefers-reduced-motion: reduce) { .is-wraith, .ib-wraith, .iq-grail { animation: none !important; } }
/* Phones: keep 16:9 so every scene lines up; the captions grow a little to stay readable. */
@media (max-width: 700px) { .intro { border-radius: 10px; } .intro-caption { font-size: 12px; padding: 6px 12px; width: 96cqw; } }

/* ---- BEGIN generated: Character page board for the intro (tools/intro_board_css.py from Profile.razor.css) ---- */
.intro .cc-board { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; aspect-ratio: 2100 / 1500; container-type: inline-size; background: #1b140c url('/images/character/bg.webp') center / 100% 100% no-repeat; border-radius: 12px; overflow: hidden; color: #e9edf2; font-family: 'Open Sans', system-ui, sans-serif; --cc-serif: Cambria, Georgia, 'Times New Roman', serif; }
.intro .cc-board > * { position: absolute; }
.intro .cc-panel { z-index: 5; background: center / 100% 100% no-repeat; }
.intro .cc-gender { background-image: url('/images/character/box_gender.webp'); }
.intro .cc-guild { background-image: url('/images/character/box_guild.webp'); }
.intro .cc-name { background-image: url('/images/character/box_name.webp'); }
.intro .cc-field { background-image: url('/images/character/box_field.webp'); }
.intro .cc-title { position: absolute; top: 8.5%; height: 14%; display: flex; align-items: center; font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 1.12cqw; color: #f4f1ea; text-shadow: 0 2px 2px #000, 0 0 6px rgba(0,0,0,.6); white-space: nowrap; }
.intro .cc-name .cc-title { left: 17%; }
.intro .cc-field .cc-title { left: 10.5%; }
.intro .cc-slot { position: absolute; top: 31%; height: 19.5%; display: flex; align-items: center; }
.intro .cc-guild .cc-slot, .intro .cc-name .cc-slot { left: 15%; right: 13%; }
.intro .cc-field .cc-slot { left: 9.5%; right: 15%; }
.intro .cc-select, .intro .cc-input { width: 100%; height: 100%; border: 0; outline: none; background: transparent; color: #f4f1ea; font-family: var(--cc-serif); font-weight: 400; font-size: 1.22cqw; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; cursor: pointer; padding-right: 8%; }
.intro .cc-input { cursor: text; padding-right: 0; }
.intro .cc-input::placeholder { color: #9aa4b1; font-weight: 400; }
.intro .cc-select option { background: #1d2127; color: #f4f1ea; font-family: 'Open Sans', sans-serif; }
.intro .cc-select:focus-visible, .intro .cc-input:focus-visible { text-shadow: 0 0 8px rgba(120,190,255,.8); }
.intro .cc-list { position: absolute; top: 55%; bottom: 7%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6c7480 transparent; padding-right: 2%; }
.intro .cc-guild .cc-list, .intro .cc-name .cc-list { left: 11%; right: 6%; }
.intro .cc-field .cc-list { left: 5.5%; right: 6%; }
.intro .cc-hint { color: #b9c2cc; font-size: .98cqw; line-height: 1.45; padding-top: 1%; overflow: hidden; }
.intro .cc-opt { display: flex; align-items: center; gap: .55cqw; padding: .12cqw 0; cursor: pointer; font-family: var(--cc-serif); font-size: 1.16cqw; color: #e2e6ea; line-height: 1.22; text-shadow: 0 1px 2px #000; }
.intro .cc-opt:hover { color: #fff; }
.intro .cc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.intro .cc-opt img { width: 1.05cqw; height: 1.05cqw; object-fit: contain; flex: none; }
.intro .cc-opt span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro .cc-opt input:focus-visible + .cc-box { box-shadow: 0 0 0 2px rgba(120,190,255,.8); }
.intro .cc-box { flex: none; width: 1.2cqw; height: 1.2cqw; border-radius: .22cqw; position: relative; border: .12cqw solid #aab1ba; background: linear-gradient(#3a3f46, #2a2e33); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.intro .cc-opt input:checked + .cc-box::after, .intro .cc-gender-row.on .cc-box::after { content: ''; position: absolute; left: 30%; top: 6%; width: 32%; height: 58%; border: solid #f1c835; border-width: 0 .2cqw .2cqw 0; transform: rotate(42deg); filter: drop-shadow(0 0 3px rgba(241,200,53,.8)); }
.intro .cc-opt input:checked ~ span:last-child { color: #f1c835; }
.intro .cc-gender-row { position: absolute; left: 13%; right: 7%; height: 21%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; padding: 0 0 0 2.6%; border-radius: 6px; }
.intro .cc-gender-row .cc-box { width: 1.42cqw; height: 1.42cqw; }
.intro .cc-gender-row:hover { background: rgba(255,255,255,.04); }
.intro .cc-gender-row:focus-visible { outline: 2px solid rgba(120,190,255,.8); }
.intro .cc-class-label { z-index: 4; text-align: center; font-family: var(--cc-serif); font-weight: 400; font-size: 2.45cqw; color: #241606; text-decoration: underline; text-underline-offset: .35cqw; text-decoration-thickness: .14cqw; text-shadow: 0 0 10px rgba(255,240,200,.75); }
.intro .cc-carousel { z-index: 3; }
.intro .cc-card { position: absolute; top: 0; left: 19.3%; width: 61.4%; height: 100%; transition: transform .5s cubic-bezier(.3,.7,.25,1), opacity .5s ease, filter .5s ease; will-change: transform, opacity; }
.intro .cc-card.pos-c { transform: none; opacity: 1; z-index: 3; }
.intro .cc-card.pos-l { transform: translateX(-60%) scale(.68); opacity: .5; z-index: 2; filter: saturate(.65) brightness(.8); }
.intro .cc-card.pos-r { transform: translateX(60%) scale(.68); opacity: .5; z-index: 2; filter: saturate(.65) brightness(.8); }
.intro .cc-card.pos-hl { transform: translateX(-95%) scale(.45); opacity: 0; z-index: 1; pointer-events: none; }
.intro .cc-card.pos-hr { transform: translateX(95%) scale(.45); opacity: 0; z-index: 1; pointer-events: none; }
.intro .cc-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro .cc-card-name { position: absolute; left: 12%; right: 12%; top: 7.5%; height: 10%; display: flex; align-items: center; justify-content: center; font-family: var(--cc-serif); font-weight: 400; font-size: 3.35cqw; color: #fff; text-shadow: 0 3px 4px #000; }
.intro .cc-portrait { position: absolute; left: 10%; right: 10%; bottom: 4.5%; height: 78%; width: 80%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 1.2cqw rgba(110,190,255,.35)); }
.intro .cc-card.pos-c .cc-portrait { animation: icbIn .5s ease; }
.intro .cc-card-empty { position: absolute; left: 16%; right: 16%; top: 38%; text-align: center; font-family: var(--cc-serif); font-size: 1.5cqw; color: #d8dde3; line-height: 1.4; }
.intro .cc-arrow { z-index: 6; border: 0; padding: 0; background: transparent; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.intro .cc-arrow img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.intro .cc-arrow:hover { transform: scale(1.06); filter: brightness(1.15); }
.intro .cc-arrow:active { transform: scale(.96); }
.intro .cc-arrow:focus-visible { outline: 2px solid rgba(255,200,120,.9); border-radius: 50%; }
.intro .cc-notes-label { z-index: 4; text-align: center; white-space: nowrap; font-family: var(--cc-serif); font-weight: 400; font-size: 2.1cqw; color: #fff; text-shadow: 0 2px 3px #000, 0 0 8px rgba(0,0,0,.7); }
.intro .cc-notes { z-index: 4; background: url('/images/character/box_notes.webp') center / 100% 100% no-repeat; padding: 2cqw 1.7cqw 1.3cqw; }
.intro .cc-textarea { width: 100%; height: 100%; border: 0; outline: none; resize: none; background: transparent; color: #f1e6c8; font-family: var(--cc-serif); font-size: 1.2cqw; line-height: 1.4; }
.intro .cc-actions { text-align: center; margin: 16px 0 4px; }
.intro .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes icbIn { from { transform: scale(.96); } to { transform: none; } }
/* ---- END generated ---- */