.cr-root {
    --cr-ink: #f7f0dc;
    --cr-muted: #a9adbb;
    --cr-night: #080d1b;
    --cr-panel: rgba(14, 22, 39, .93);
    --cr-panel-2: rgba(21, 31, 51, .94);
    --cr-line: rgba(231, 198, 124, .2);
    --cr-gold: #f0bc59;
    --cr-gold-soft: #ffe2a0;
    --cr-blue: #75a8d5;
    position: relative;
    width: 100%;
    max-width: 1180px;
    min-height: 720px;
    margin: 0 auto;
    overflow: hidden;
    color: var(--cr-ink);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    background:
        radial-gradient(circle at 72% 14%, rgba(67, 97, 147, .27), transparent 32%),
        radial-gradient(circle at 18% 82%, rgba(110, 74, 126, .19), transparent 34%),
        linear-gradient(145deg, #0b1224 0%, #080d19 62%, #101127 100%);
    border: 1px solid rgba(240, 188, 89, .28);
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .5), inset 0 0 80px rgba(9, 15, 29, .55);
    isolation: isolate;
}

.cr-root *, .cr-root *::before, .cr-root *::after { box-sizing: border-box; }
.cr-root button { font: inherit; }
.cr-root button:focus-visible { outline: 3px solid #fff0b4; outline-offset: 3px; }
.cr-root [hidden] { display: none !important; }

.cr-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.cr-sky::before, .cr-sky::after {
    content: ""; position: absolute; inset: -20%; opacity: .2;
    background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px);
    background-size: 54px 54px;
    transform: rotate(8deg);
}
.cr-sky::after { background-size: 91px 91px; opacity: .11; transform: rotate(-11deg) translate(8%, 4%); }
.cr-sky i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff2c9; box-shadow: 0 0 12px 3px rgba(255, 226, 160, .4); animation: cr-twinkle 3.2s ease-in-out infinite; }
.cr-sky i:nth-child(1) { left: 9%; top: 18%; }.cr-sky i:nth-child(2) { left: 61%; top: 10%; animation-delay: .9s; }.cr-sky i:nth-child(3) { left: 87%; top: 38%; animation-delay: 1.6s; }.cr-sky i:nth-child(4) { left: 39%; top: 86%; animation-delay: 2.2s; }
@keyframes cr-twinkle { 50% { opacity: .25; transform: scale(.5); } }

.cr-frame { min-height: 720px; display: flex; flex-direction: column; }
.cr-topbar {
    min-height: 76px; padding: 12px 18px; display: flex; align-items: center; gap: 20px;
    background: linear-gradient(180deg, rgba(7, 12, 24, .96), rgba(10, 16, 30, .84));
    border-bottom: 1px solid var(--cr-line); backdrop-filter: blur(14px); z-index: 20;
}
.cr-brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--cr-ink); cursor: pointer; padding: 4px; text-align: left; }
.cr-brand-mark { width: 40px; height: 40px; display: grid; place-items: center; color: var(--cr-gold); font-size: 1.45rem; border: 1px solid rgba(240, 188, 89, .45); border-radius: 50%; box-shadow: inset 0 0 16px rgba(240, 188, 89, .12), 0 0 20px rgba(240, 188, 89, .08); }
.cr-brand b { display: block; font-family: var(--font-display, serif); font-size: 1.04rem; letter-spacing: .08em; }
.cr-brand small { display: block; color: #82899a; font-size: .52rem; letter-spacing: .14em; margin-top: 2px; }
.cr-journey-meta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cr-journey-meta > span { min-width: 82px; padding: 6px 10px; border-left: 1px solid var(--cr-line); }
.cr-journey-meta small { display: block; color: #7f879a; font-size: .55rem; letter-spacing: .16em; }
.cr-journey-meta b { font-family: var(--font-pixel, monospace); color: var(--cr-gold-soft); font-size: .88rem; }
.cr-quick { display: flex; gap: 5px; }
.cr-quick button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.045); color: var(--cr-ink); cursor: pointer; font-size: 1.05rem; transition: .16s ease; }
.cr-quick button span { display: block; font-size: .52rem; color: #969eae; margin-top: -1px; }
.cr-quick button:hover { transform: translateY(-2px); border-color: rgba(240,188,89,.4); background: rgba(240,188,89,.09); }
.cr-quick button.is-muted { opacity: .45; }

.cr-stage { position: relative; flex: 1; min-height: 644px; }
.cr-screen { position: relative; width: 100%; min-height: 644px; animation: cr-screen-in .35s ease both; }
@keyframes cr-screen-in { from { opacity: 0; transform: translateY(8px); } }
.cr-kicker { margin: 0 0 7px; color: var(--cr-gold); font-size: .62rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.cr-primary, .cr-secondary {
    border: 1px solid transparent; border-radius: 10px; min-height: 50px; padding: 10px 20px; cursor: pointer; color: #17150f; font-weight: 800; letter-spacing: .03em; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cr-primary { background: linear-gradient(135deg, #f6d27a, #d99c37); box-shadow: 0 10px 24px rgba(217, 156, 55, .21), inset 0 1px rgba(255,255,255,.5); }
.cr-secondary { color: var(--cr-ink); border-color: rgba(255,255,255,.17); background: linear-gradient(145deg, rgba(40,53,76,.95), rgba(23,33,52,.95)); }
.cr-primary:hover:not(:disabled), .cr-secondary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.cr-primary:active:not(:disabled), .cr-secondary:active:not(:disabled) { transform: translateY(0) scale(.98); }
.cr-primary:disabled, .cr-secondary:disabled { cursor: not-allowed; opacity: .38; filter: grayscale(.5); }
.cr-primary span, .cr-secondary span { display: block; }.cr-primary small, .cr-secondary small { display: block; margin-top: 2px; font-size: .56rem; font-weight: 800; letter-spacing: .16em; opacity: .64; }
.cr-link { border: 0; background: none; color: #aab1bf; padding: 7px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-size: .8rem; }
.cr-link:hover { color: #fff; }

/* Title */
.cr-title { display: grid; grid-template-columns: minmax(390px, 1.08fr) minmax(360px, .92fr); overflow: hidden; }
.cr-title-art { position: relative; min-height: 644px; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(240,188,89,.2), transparent 37%), linear-gradient(125deg, rgba(21,39,69,.78), rgba(12,18,35,.08)); }
.cr-title-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #0a101e 100%), linear-gradient(0deg, rgba(8,13,27,.85), transparent 32%); z-index: 2; }
.cr-title-art img { position: absolute; z-index: 1; width: min(620px, 108%); max-width: none; left: 50%; bottom: -4%; transform: translateX(-52%); filter: drop-shadow(0 28px 35px rgba(0,0,0,.44)); mask-image: linear-gradient(#000 78%, transparent 99%); }
.cr-orbit { position: absolute; border: 1px solid rgba(240,188,89,.28); border-radius: 50%; z-index: 0; }
.cr-orbit::before, .cr-orbit::after { content: "✦"; position: absolute; color: var(--cr-gold); font-size: 1.2rem; }
.cr-orbit-a { width: 520px; height: 520px; left: 2%; top: 7%; transform: rotate(18deg); }.cr-orbit-a::before { left: 12%; top: 7%; }.cr-orbit-a::after { right: 4%; bottom: 18%; }
.cr-orbit-b { width: 385px; height: 385px; left: 15%; top: 17%; border-style: dashed; opacity: .7; transform: rotate(-26deg); }
.cr-title-star { position: absolute; z-index: 3; left: 7%; bottom: 8%; color: var(--cr-gold); font-size: 1.7rem; }
.cr-title-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 50px 48px 60px 22px; z-index: 4; }
.cr-title-copy h2 { margin: 0; font-family: var(--font-display, serif); font-size: clamp(2.55rem, 5vw, 4.6rem); line-height: .98; letter-spacing: .04em; text-shadow: 0 6px 24px rgba(0,0,0,.6); }
.cr-title-copy h2 span { display: block; color: var(--cr-gold-soft); font-size: .45em; letter-spacing: .24em; margin: 0 0 9px 5px; }
.cr-title-lead { color: #c7c6c4; line-height: 1.9; margin: 25px 0 22px; font-size: .94rem; }
.cr-title-counts { display: flex; gap: 9px; margin-bottom: 24px; }
.cr-title-counts span { min-width: 91px; padding: 8px 10px; border-block: 1px solid var(--cr-line); color: #9098a9; font-size: .55rem; letter-spacing: .11em; }
.cr-title-counts b { color: #fff; font-family: var(--font-pixel, monospace); font-size: 1rem; margin-right: 3px; }
.cr-title-actions { width: min(390px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.cr-title-actions #crContinue { grid-column: 1 / -1; }

/* Roster */
.cr-roster { padding: 26px; }
.cr-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 18px; }
.cr-section-head h2, .cr-map-head h2 { margin: 0; font-family: var(--font-display, serif); font-size: 1.8rem; letter-spacing: .05em; }
.cr-section-head > p { width: min(390px, 44%); margin: 0; color: var(--cr-muted); font-size: .82rem; line-height: 1.75; }
.cr-roster-layout { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 18px; align-items: start; }
.cr-hero-grid { max-height: 530px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(118px, 1fr)); gap: 9px; padding: 1px 7px 12px 1px; scrollbar-color: rgba(240,188,89,.45) transparent; }
.cr-hero-card { position: relative; aspect-ratio: .84; min-height: 168px; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #121b2c; color: #fff; cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.cr-hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease, filter .2s ease; }
.cr-hero-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hero) 72%, white); box-shadow: 0 11px 22px rgba(0,0,0,.28); }.cr-hero-card:hover img { transform: scale(1.035); }
.cr-hero-card.is-chosen { border-color: var(--hero); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hero) 38%, transparent), 0 12px 28px rgba(0,0,0,.3); }
.cr-hero-card.is-inspected::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.48); border-radius: 7px; z-index: 3; pointer-events: none; }
.cr-hero-fade { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5,9,18,.96)); }
.cr-hero-number { position: absolute; top: 7px; left: 8px; z-index: 2; color: rgba(255,255,255,.72); font-family: var(--font-pixel, monospace); font-size: .58rem; text-shadow: 0 1px 3px #000; }
.cr-hero-symbol { position: absolute; top: 5px; right: 8px; z-index: 2; color: var(--hero); font-size: 1rem; text-shadow: 0 1px 5px #000; }
.cr-hero-card-copy { position: absolute; z-index: 2; left: 10px; right: 8px; bottom: 9px; }.cr-hero-card-copy b { display: block; font-size: .88rem; }.cr-hero-card-copy small { display: block; color: #b3b7bf; font-size: .56rem; margin-top: 2px; }
.cr-check { position: absolute; z-index: 4; right: 7px; bottom: 35px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--hero); color: #07101b; font-style: normal; font-weight: 900; opacity: 0; transform: scale(.4); transition: .18s ease; }.cr-hero-card.is-chosen .cr-check { opacity: 1; transform: scale(1); }
.cr-party-builder { border: 1px solid var(--cr-line); border-radius: 14px; overflow: hidden; background: rgba(12,19,33,.86); box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.cr-selected-hero { --hero: var(--cr-gold); min-height: 286px; display: grid; grid-template-columns: 130px 1fr; background: linear-gradient(145deg, color-mix(in srgb, var(--hero) 17%, transparent), transparent 50%); border-bottom: 1px solid var(--cr-line); }
.cr-selected-portrait { position: relative; overflow: hidden; }.cr-selected-portrait img { width: 100%; height: 100%; object-fit: cover; }.cr-selected-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #141c2c), linear-gradient(0deg, rgba(20,28,44,.75), transparent); }
.cr-selected-copy { padding: 15px 12px 13px 3px; position: relative; z-index: 2; }.cr-selected-copy > p { display: flex; justify-content: space-between; gap: 7px; margin: 0 0 7px; font-size: .55rem; color: var(--hero); }.cr-selected-copy > p i { font-style: normal; color: #9fa6b5; }
.cr-selected-copy h3 { margin: 0; font-family: var(--font-display, serif); font-size: 1.55rem; }.cr-selected-copy h3 small { display: block; color: #a9adba; font-family: inherit; font-size: .59rem; margin-top: 2px; }
.cr-selected-copy blockquote { margin: 11px 0; color: #c4c4c3; font-size: .65rem; line-height: 1.55; }
.cr-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }.cr-stat-row span { padding: 4px 5px; border-radius: 4px; background: rgba(255,255,255,.055); color: #8f97a7; font-size: .48rem; }.cr-stat-row b { color: #fff; margin-left: 4px; }
.cr-skill-card { margin-top: 8px; padding: 7px 8px; border-left: 2px solid var(--hero); background: rgba(255,255,255,.045); }.cr-skill-card span, .cr-skill-card b, .cr-skill-card small { display: block; }.cr-skill-card span { color: var(--hero); font-size: .48rem; }.cr-skill-card b { font-size: .7rem; margin: 2px 0; }.cr-skill-card small { color: #a8adba; font-size: .54rem; line-height: 1.4; }
.cr-party-slots { padding: 10px 12px 5px; display: grid; gap: 6px; }.cr-party-slot { min-height: 50px; display: grid; grid-template-columns: 50px 40px 1fr 26px; align-items: center; gap: 7px; padding: 5px 6px; border: 1px dashed rgba(255,255,255,.12); border-radius: 8px; color: #747d8e; }.cr-party-slot.is-filled { border-style: solid; background: rgba(255,255,255,.035); color: #fff; }.cr-party-slot > span { color: #8e96a6; font-size: .54rem; }.cr-party-slot img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; }.cr-party-slot b { font-size: .74rem; }.cr-party-slot i { grid-column: 2 / 5; font-style: normal; font-size: .65rem; }.cr-party-slot button { border: 0; background: none; color: #7d8594; cursor: pointer; font-size: 1rem; }
.cr-party-builder > .cr-primary { width: calc(100% - 24px); margin: 7px 12px 5px; }.cr-party-builder > .cr-link { display: block; margin: 0 auto 5px; }

/* World */
.cr-world { display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.cr-party-panel { padding: 20px 16px; border-right: 1px solid var(--cr-line); background: rgba(8,14,26,.55); }
.cr-panel-title { margin-bottom: 13px; }.cr-panel-title span { display: block; color: var(--cr-gold); font-size: .55rem; letter-spacing: .2em; }.cr-panel-title b { font-family: var(--font-display, serif); font-size: 1.05rem; }
.cr-party-card { --hero: var(--cr-gold); position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; min-height: 98px; margin-bottom: 9px; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--hero) 8%, rgba(18,27,44,.95)), rgba(11,17,29,.95)); overflow: hidden; }
.cr-party-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hero); opacity: .7; }
.cr-party-card > img { width: 64px; height: 80px; border-radius: 7px; object-fit: cover; }.cr-party-card > div > span { display: block; color: #8f97a7; font-size: .51rem; }.cr-party-card > div > b { display: block; margin-bottom: 4px; font-size: .78rem; }.cr-party-card small { display: block; color: #99a1b0; font-size: .48rem; line-height: 1.25; }
.cr-mini-bar { height: 4px; margin: 3px 0 1px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); }.cr-mini-bar i { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }.cr-hp i { background: linear-gradient(90deg, #51b97d, #85d694); }.cr-mp i { background: linear-gradient(90deg, #567cd2, #7aaae5); }
.cr-party-card.is-down { filter: grayscale(.8); opacity: .52; }.cr-party-card.is-active { border-color: var(--hero); box-shadow: 0 0 20px color-mix(in srgb, var(--hero) 16%, transparent); }
.cr-party-actions { display: grid; gap: 7px; margin-top: 13px; }.cr-party-actions button { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 9px; background: rgba(255,255,255,.045); color: #d4d3d0; cursor: pointer; text-align: left; font-size: .72rem; }.cr-party-actions button small { float: right; color: #8f97a6; }
.cr-map-wrap { padding: 20px 22px 18px; min-width: 0; }
.cr-map-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }.cr-map-progress { display: flex; align-items: baseline; color: var(--cr-gold); }.cr-map-progress span { font-family: var(--font-display, serif); font-size: 2.1rem; }.cr-map-progress small { color: #8e96a5; font-size: .62rem; }
.cr-map { position: relative; height: 345px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background:
    radial-gradient(circle at 70% 70%, rgba(92,129,143,.18), transparent 24%),
    radial-gradient(circle at 25% 20%, rgba(118,95,151,.15), transparent 28%),
    linear-gradient(145deg, rgba(20,34,52,.94), rgba(10,18,33,.95));
    box-shadow: inset 0 0 55px rgba(0,0,0,.3);
}
.cr-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px); background-size: 37px 37px; }
.cr-map-lines { position: absolute; z-index: 1; left: 8%; right: 9%; top: 20%; bottom: 22%; border: 1px dashed rgba(240,188,89,.27); border-radius: 47% 53% 44% 56%; transform: rotate(-2deg); }.cr-map-lines::before { content: ""; position: absolute; inset: 18% 12%; border: 1px dashed rgba(117,168,213,.2); border-radius: 54% 46%; }
.cr-map-nodes { position: absolute; inset: 0; z-index: 3; }
.cr-map-node { --region: var(--cr-gold); position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 88px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: center; z-index: 3; }
.cr-map-node > span { width: 42px; height: 42px; margin: 0 auto 4px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--region) 64%, white); background: color-mix(in srgb, var(--region) 28%, #101a2c); box-shadow: 0 0 0 4px rgba(8,14,26,.75), 0 0 20px color-mix(in srgb, var(--region) 25%, transparent); font-size: 1.05rem; transition: .18s ease; }
.cr-map-node b, .cr-map-node small { display: block; white-space: nowrap; text-shadow: 0 2px 4px #000; }.cr-map-node b { font-size: .62rem; }.cr-map-node small { color: #9ca4b3; font-size: .46rem; }
.cr-map-node:hover > span, .cr-map-node.is-current > span { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(8,14,26,.75), 0 0 27px color-mix(in srgb, var(--region) 55%, transparent); }.cr-map-node.is-current b { color: var(--cr-gold-soft); }.cr-map-node.is-cleared > span::after { content: "✓"; position: absolute; right: 17px; top: -2px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #0b1a15; background: #7bd39a; font-size: .55rem; font-weight: 900; }.cr-map-node.is-locked { opacity: .25; cursor: not-allowed; filter: grayscale(1); }
.cr-destination { --region: var(--cr-gold); min-height: 174px; margin-top: 12px; padding: 14px; display: grid; grid-template-columns: 70px minmax(0, 1fr) 184px; align-items: center; gap: 14px; border: 1px solid color-mix(in srgb, var(--region) 35%, transparent); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--region) 10%, rgba(18,27,44,.92)), rgba(11,18,31,.95)); }
.cr-destination-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--region) 20%, #10192b); border: 1px solid color-mix(in srgb, var(--region) 55%, white); font-size: 1.7rem; }
.cr-destination-copy > span { color: var(--region); font-size: .51rem; letter-spacing: .17em; }.cr-destination-copy h3 { margin: 2px 0 5px; font-family: var(--font-display, serif); font-size: 1.15rem; }.cr-destination-copy h3 small { color: #9da4b1; font-family: inherit; font-size: .6rem; margin-left: 8px; }.cr-destination-copy > p { margin: 0; color: #aeb2ba; font-size: .63rem; line-height: 1.55; }
.cr-region-steps { margin-top: 8px; display: flex; align-items: center; gap: 4px; }.cr-region-steps i { width: 21px; height: 4px; border-radius: 5px; background: rgba(255,255,255,.1); }.cr-region-steps i.is-current { background: var(--region); box-shadow: 0 0 10px var(--region); }.cr-region-steps i.is-done { background: #7dcb91; }.cr-region-steps small { margin-left: 6px; color: #8d95a4; font-size: .5rem; }
.cr-destination-actions { display: grid; gap: 8px; }.cr-destination-actions .cr-primary, .cr-destination-actions .cr-secondary { width: 100%; padding-inline: 10px; font-size: .72rem; }

/* Battle */
.cr-battle { background: #0c1424; }
.cr-battle-field { position: relative; min-height: 420px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 12px; padding: 20px; overflow: hidden; }
.cr-battle-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 42% 68%, rgba(100,111,135,.25), transparent 34%), linear-gradient(180deg, #182942, #121d32 55%, #202334); }
.cr-battle-sky::before { content: ""; position: absolute; left: -5%; right: -5%; bottom: -35%; height: 62%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse, #354453, #192538 70%); box-shadow: inset 0 15px 40px rgba(255,255,255,.04); }
.cr-enemy-zone { position: relative; z-index: 2; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cr-enemy-meta { text-align: center; }.cr-enemy-meta span { display: block; color: var(--cr-gold); font-size: .58rem; letter-spacing: .18em; }.cr-enemy-meta b { display: block; margin-top: 2px; font-family: var(--font-display, serif); font-size: 1.45rem; }
.cr-enemy-image-wrap { --enemy: #798baa; position: relative; width: 260px; height: 260px; margin: -4px 0 -6px; display: grid; place-items: center; }
.cr-enemy-image-wrap img { position: relative; z-index: 2; width: 225px; height: 225px; object-fit: cover; border-radius: 50%; mask-image: radial-gradient(circle, #000 60%, rgba(0,0,0,.9) 75%, transparent 100%); filter: drop-shadow(0 20px 18px rgba(0,0,0,.48)); }
.cr-enemy-aura { position: absolute; inset: 21px; border: 1px solid color-mix(in srgb, var(--enemy) 65%, white); border-radius: 50%; opacity: .7; box-shadow: 0 0 55px color-mix(in srgb, var(--enemy) 32%, transparent), inset 0 0 40px color-mix(in srgb, var(--enemy) 18%, transparent); animation: cr-aura 3.5s linear infinite; }
.cr-enemy-aura::before, .cr-enemy-aura::after { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(255,255,255,.22); border-radius: 50%; }.cr-enemy-aura::after { inset: -11px; border-style: dotted; }
@keyframes cr-aura { to { transform: rotate(360deg); } }
.cr-variant-mark { position: absolute; z-index: 3; right: 24px; top: 29px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--cr-gold-soft); background: rgba(8,13,27,.82); border: 1px solid rgba(240,188,89,.4); }
.cr-enemy-image-wrap.is-hit { animation: cr-enemy-hit .38s ease; }.cr-enemy-image-wrap.is-hit img { filter: brightness(1.7) saturate(.65) drop-shadow(0 0 22px #fff); }
@keyframes cr-enemy-hit { 25% { transform: translateX(12px) rotate(2deg); } 55% { transform: translateX(-8px) rotate(-1deg); } }
.cr-enemy-hp { width: min(390px, 82%); text-align: center; }.cr-enemy-hp > span { color: #cbd0d7; font-family: var(--font-pixel, monospace); font-size: .6rem; }.cr-enemy-hp > span i { font-style: normal; }.cr-enemy-hp > div { height: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: rgba(0,0,0,.4); }.cr-enemy-hp > div i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #bc4050, #e06a67); transition: width .32s ease; }
.cr-affinities { display: flex; gap: 6px; margin-top: 7px; }.cr-affinities span { padding: 3px 7px; border-radius: 20px; background: rgba(255,255,255,.07); color: #9da5b3; font-size: .49rem; }.cr-affinities .is-weak { color: #ffd28a; background: rgba(223,142,67,.13); }.cr-affinities .is-resist { color: #8ebce3; background: rgba(82,130,181,.13); }
.cr-battle-party { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 3px; }.cr-battle-party .cr-party-card { margin: 0; min-height: 105px; grid-template-columns: 68px 1fr; }.cr-battle-party .cr-party-card > img { width: 68px; height: 86px; }.cr-battle-party.is-hit { animation: cr-party-hit .35s ease; }@keyframes cr-party-hit { 35% { transform: translateX(-8px); filter: brightness(1.5); } }
.cr-battle-console { min-height: 224px; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(440px, 1.2fr); border-top: 1px solid var(--cr-line); background: rgba(6,11,20,.97); }
.cr-battle-log { max-height: 224px; overflow-y: auto; padding: 17px 20px; border-right: 1px solid var(--cr-line); scrollbar-color: rgba(240,188,89,.35) transparent; }.cr-battle-log::before { content: "BATTLE LOG"; display: block; margin-bottom: 8px; color: #6f788a; font-size: .54rem; letter-spacing: .2em; }.cr-battle-log p { margin: 0 0 6px; color: #b7bcc5; font-size: .69rem; line-height: 1.5; }.cr-battle-log p:last-child { color: #fff; }.cr-battle-log em { color: var(--cr-gold-soft); font-style: normal; }.cr-battle-log i { color: #83a9c8; font-style: normal; }
.cr-command-panel { padding: 13px 16px; }.cr-turn-actor { height: 43px; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }.cr-turn-actor img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cr-gold); }.cr-turn-actor small, .cr-turn-actor b { display: block; }.cr-turn-actor small { color: var(--cr-gold); font-size: .5rem; letter-spacing: .13em; }.cr-turn-actor b { font-size: .8rem; }
.cr-commands { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.cr-commands button { position: relative; min-height: 64px; padding: 9px 12px 8px 43px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: linear-gradient(145deg, rgba(34,48,71,.94), rgba(19,28,45,.94)); color: #fff; cursor: pointer; text-align: left; transition: .15s ease; }.cr-commands button:hover:not(:disabled) { border-color: rgba(240,188,89,.52); transform: translateY(-2px); background: linear-gradient(145deg, rgba(52,62,81,.97), rgba(28,36,53,.97)); }.cr-commands button:disabled { opacity: .37; cursor: not-allowed; }.cr-commands kbd { position: absolute; left: 11px; top: 15px; width: 23px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: rgba(0,0,0,.22); color: var(--cr-gold); font-family: var(--font-pixel, monospace); font-size: .58rem; }.cr-commands b, .cr-commands small { display: block; }.cr-commands b { font-size: .78rem; }.cr-commands small { color: #949dab; font-size: .52rem; margin-top: 2px; }
.cr-item-commands { max-height: 138px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.cr-item-commands button { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; gap: 0 6px; align-items: center; min-height: 58px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(28,40,61,.9); color: #fff; text-align: left; cursor: pointer; }.cr-item-commands button > span { grid-row: 1 / 3; font-size: 1.2rem; text-align: center; }.cr-item-commands b { font-size: .67rem; }.cr-item-commands small { color: #929aa8; font-size: .48rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ending */
.cr-ending { display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 50% 25%, rgba(240,188,89,.18), transparent 30%); text-align: center; }
.cr-ending-card { max-width: 680px; padding: 30px 35px; border: 1px solid var(--cr-line); border-radius: 16px; background: rgba(11,18,32,.86); box-shadow: 0 25px 60px rgba(0,0,0,.35); }.cr-ending-emblem { display: block; color: var(--cr-gold); font-size: 3.5rem; text-shadow: 0 0 30px rgba(240,188,89,.55); }.cr-ending-card h2 { margin: 8px 0 14px; font-family: var(--font-display, serif); font-size: 2rem; }.cr-ending-card > p:not(.cr-kicker) { color: #b9bcc3; line-height: 1.85; font-size: .84rem; }
.cr-ending-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }.cr-ending-stats span { padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.035); }.cr-ending-stats small, .cr-ending-stats b { display: block; }.cr-ending-stats small { color: #8e96a5; font-size: .56rem; }.cr-ending-stats b { margin-top: 3px; color: var(--cr-gold-soft); font-family: var(--font-pixel, monospace); font-size: .78rem; }
.cr-save-result { margin: 15px 0; padding: 9px; border-radius: 8px; background: rgba(117,168,213,.09); color: #a9c4dc; font-size: .72rem; }.cr-ending-card > button { min-width: 190px; margin: 4px; }

/* Modal */
.cr-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .18s ease; }
.cr-modal.is-open { opacity: 1; }.cr-modal-backdrop { position: absolute; inset: 0; background: rgba(3,6,12,.78); backdrop-filter: blur(7px); }
.cr-modal-card { position: relative; width: min(980px, 96vw); max-height: min(760px, 90vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(240,188,89,.28); border-radius: 16px; background: #0d1627; color: var(--cr-ink); box-shadow: 0 35px 90px rgba(0,0,0,.65); transform: translateY(10px) scale(.99); transition: transform .18s ease; }.cr-modal.is-open .cr-modal-card { transform: none; }
.cr-modal-card > header { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px 14px; border-bottom: 1px solid var(--cr-line); background: linear-gradient(180deg, #151f34, #111a2c); }.cr-modal-card > header h2 { margin: 0; font-family: var(--font-display, serif); font-size: 1.5rem; }.cr-modal-card > header button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; font-size: 1.3rem; }
.cr-modal-tabs { display: flex; gap: 4px; padding: 8px 12px 0; background: #0c1423; }.cr-modal-tabs:empty { display: none; }.cr-modal-tabs button { min-width: 100px; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: #8f97a7; cursor: pointer; font-size: .72rem; }.cr-modal-tabs button small { margin-left: 6px; color: #657087; }.cr-modal-tabs button.is-active { color: var(--cr-gold-soft); border-color: var(--cr-gold); background: linear-gradient(0deg, rgba(240,188,89,.08), transparent); }
.cr-modal-body { min-height: 260px; overflow: auto; padding: 14px 16px 20px; scrollbar-color: rgba(240,188,89,.4) transparent; }
.cr-member-select { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }.cr-member-select > span { color: #7f8899; font-size: .58rem; margin-right: 5px; }.cr-member-select button { min-width: 110px; display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.035); color: #b9bdc5; cursor: pointer; }.cr-member-select button.is-active { border-color: var(--cr-gold); color: #fff; background: rgba(240,188,89,.09); }.cr-member-select img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }.cr-member-select b { font-size: .65rem; }
.cr-loadout { display: grid; grid-template-columns: 260px 1fr; gap: 12px; margin-bottom: 13px; padding: 10px; border: 1px solid var(--cr-line); border-radius: 10px; background: rgba(255,255,255,.025); }.cr-loadout-hero { display: flex; align-items: center; gap: 10px; }.cr-loadout-hero img { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; }.cr-loadout-hero small, .cr-loadout-hero b, .cr-loadout-hero i { display: block; }.cr-loadout-hero small { color: #929bab; font-size: .52rem; }.cr-loadout-hero b { font-size: .88rem; }.cr-loadout-hero i { color: var(--cr-gold-soft); font-style: normal; font-size: .51rem; margin-top: 4px; }
.cr-equipped { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.cr-equipped > div { position: relative; padding: 7px 8px; border-radius: 7px; background: rgba(255,255,255,.04); }.cr-equipped span { display: block; color: #7f8898; font-size: .5rem; }.cr-equipped b, .cr-equipped i { display: block; margin-top: 4px; font-size: .62rem; font-style: normal; }.cr-equipped button { position: absolute; right: 5px; bottom: 4px; border: 0; background: none; color: #858e9e; cursor: pointer; font-size: .52rem; }
.cr-item-list { display: grid; gap: 6px; }.cr-item-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px 80px; gap: 9px; align-items: center; min-height: 72px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.025); }.cr-item-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.05); font-size: 1.25rem; }.cr-item-icon.rarity-2 { border-color: #6c9ac3; }.cr-item-icon.rarity-3 { border-color: #a582c7; box-shadow: inset 0 0 14px rgba(165,130,199,.13); }.cr-item-icon.rarity-4, .cr-item-icon.rarity-5 { border-color: var(--cr-gold); box-shadow: inset 0 0 14px rgba(240,188,89,.14); }
.cr-item-row small, .cr-item-row b { display: block; }.cr-item-row small { color: #7f899b; font-size: .5rem; }.cr-item-row b { font-size: .72rem; margin: 2px 0; }.cr-item-row p { margin: 0; color: #9ca4b2; font-size: .54rem; }.cr-item-row > strong { color: var(--cr-gold-soft); font-family: var(--font-pixel, monospace); font-size: .62rem; }.cr-item-row > button { border: 1px solid rgba(240,188,89,.35); border-radius: 6px; padding: 7px; background: rgba(240,188,89,.08); color: var(--cr-gold-soft); cursor: pointer; font-size: .6rem; }
.cr-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; color: #727c8e; }.cr-empty span { font-size: 2rem; }.cr-empty b { font-size: .74rem; }
.cr-codex-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }.cr-codex-progress > span { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }.cr-codex-progress i { display: block; height: 100%; background: linear-gradient(90deg, #8b73b7, var(--cr-gold)); }.cr-codex-progress b { color: var(--cr-gold-soft); font-family: var(--font-pixel, monospace); font-size: .56rem; }
.cr-codex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.cr-codex-card { min-height: 190px; padding: 7px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.025); color: #636d7e; }.cr-codex-card > div { position: relative; height: 118px; display: grid; place-items: center; border-radius: 7px; overflow: hidden; background: #111c2d; }.cr-codex-card img { width: 100%; height: 100%; object-fit: cover; }.cr-codex-card > div span { position: absolute; right: 6px; top: 5px; color: var(--cr-gold-soft); }.cr-codex-card .is-unknown { font-family: var(--font-display, serif); font-size: 2rem; color: #485266; }.cr-codex-card small, .cr-codex-card b { display: block; }.cr-codex-card small { margin-top: 7px; color: #737e90; font-size: .47rem; }.cr-codex-card b { color: #c8cbd1; font-size: .67rem; }.cr-codex-card p { margin: 3px 0 0; font-size: .49rem; }.cr-codex-card.is-found { border-color: rgba(240,188,89,.15); }
.cr-item-codex { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.cr-item-codex article { display: grid; grid-template-columns: 45px 1fr; gap: 8px; min-height: 66px; padding: 7px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #667184; }.cr-item-codex article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 1.1rem; }.cr-item-codex small, .cr-item-codex b { display: block; }.cr-item-codex small { font-size: .47rem; }.cr-item-codex b { color: #bec2c9; font-size: .66rem; }.cr-item-codex p { margin: 2px 0; font-size: .5rem; }.cr-item-codex article.is-found { color: #929baa; border-color: rgba(255,255,255,.1); }
.cr-town-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--cr-line); border-radius: 10px; background: linear-gradient(135deg, rgba(240,188,89,.08), rgba(255,255,255,.02)); }.cr-town-hero > span { font-size: 2.5rem; }.cr-town-hero small { color: var(--cr-gold); font-size: .52rem; }.cr-town-hero h3 { margin: 1px 0; font-family: var(--font-display, serif); font-size: 1.2rem; }.cr-town-hero p { margin: 0; color: #9ca4b1; font-size: .61rem; }
.cr-inn { max-width: 620px; margin: 18px auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; }.cr-inn > div { display: grid; grid-template-columns: 52px 1fr; }.cr-inn > div > span { grid-row: 1 / 3; font-size: 2rem; }.cr-inn h3 { margin: 0; font-size: .9rem; }.cr-inn p { margin: 4px 0 0; color: #919aaa; font-size: .58rem; }.cr-inn button { min-width: 170px; }
.cr-shop-head { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-bottom: 8px; color: #8f98a8; font-size: .58rem; }.cr-shop-head b { color: var(--cr-gold-soft); font-family: var(--font-pixel, monospace); font-size: .72rem; }
.cr-shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.cr-shop-grid article { display: grid; grid-template-columns: 48px 1fr 80px; gap: 9px; align-items: center; min-height: 78px; padding: 8px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; }.cr-shop-grid small, .cr-shop-grid b { display: block; }.cr-shop-grid small { color: #7f8999; font-size: .48rem; }.cr-shop-grid b { font-size: .68rem; }.cr-shop-grid p { margin: 2px 0 0; color: #949daa; font-size: .5rem; }.cr-shop-grid article > button { border: 1px solid rgba(240,188,89,.35); border-radius: 6px; padding: 8px 5px; background: rgba(240,188,89,.08); color: var(--cr-gold-soft); cursor: pointer; font-size: .56rem; }.cr-shop-grid article > button:disabled { opacity: .3; cursor: not-allowed; }
.cr-guide { max-width: 760px; margin: 0 auto; }.cr-guide section { display: grid; grid-template-columns: 52px 1fr; gap: 12px; margin-bottom: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; }.cr-guide section > span { color: var(--cr-gold); font-family: var(--font-display, serif); font-size: 1.35rem; }.cr-guide h3 { margin: 0 0 3px; font-size: .8rem; }.cr-guide p { margin: 0; color: #9fa7b4; font-size: .61rem; line-height: 1.65; }.cr-guide blockquote { margin: 18px 0 2px; padding: 17px 20px; border-left: 2px solid var(--cr-gold); background: rgba(240,188,89,.055); color: #c0c1c1; font-family: var(--font-display, serif); font-size: .76rem; line-height: 1.9; }
.cr-reward { min-height: 330px; display: grid; grid-template-columns: 310px 1fr; align-items: center; gap: 28px; max-width: 790px; margin: 0 auto; }.cr-reward-monster { position: relative; width: 280px; height: 280px; }.cr-reward-monster img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mask-image: radial-gradient(circle, #000 62%, transparent 100%); }.cr-reward-monster span { position: absolute; right: 20px; top: 20px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(8,13,27,.8); color: var(--cr-gold); }.cr-reward > div > small { color: var(--cr-gold); font-size: .55rem; }.cr-reward h3 { margin: 4px 0 16px; font-family: var(--font-display, serif); font-size: 1.5rem; }.cr-reward-values { display: flex; gap: 8px; }.cr-reward-values span { min-width: 115px; padding: 9px; border-radius: 7px; background: rgba(255,255,255,.05); color: #8f98a8; font-size: .55rem; }.cr-reward-values b { color: var(--cr-gold-soft); font-family: var(--font-pixel, monospace); }.cr-drop, .cr-levelup, .cr-ringwon { padding: 8px 10px; border-radius: 7px; font-size: .65rem; }.cr-drop { background: rgba(117,168,213,.09); }.cr-drop.is-empty { color: #737d8e; }.cr-levelup { color: #ffe3a2; background: rgba(240,188,89,.1); }.cr-ringwon { color: #9ce2b2; background: rgba(92,185,124,.1); }.cr-reward .cr-primary { margin-top: 8px; }

.cr-toast { position: fixed; z-index: 1200; left: 50%; bottom: 28px; max-width: min(520px, 90vw); padding: 11px 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(14,22,38,.96); color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.45); transform: translate(-50%, 14px); opacity: 0; transition: .2s ease; font-size: .72rem; }.cr-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }.cr-toast.is-success { border-color: rgba(104,208,140,.4); color: #b8ebc8; }.cr-toast.is-danger { border-color: rgba(228,91,104,.4); color: #ffbac0; }

/* Account persistence and co-op */
.cr-online-button { border-color: rgba(126,153,255,.4); background: linear-gradient(145deg, #33406a, #1d2746); }
.cr-persistence-note { min-height: 1.35em; margin: 0 0 2px; color: #8e98aa; font-size: .58rem; line-height: 1.5; }
.cr-multi { padding: 24px 26px 30px; background: radial-gradient(circle at 88% 6%, rgba(95,94,177,.18), transparent 32%); }
.cr-multi-head { align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--cr-line); }
.cr-multi-head .cr-secondary { min-height: 42px; padding-block: 7px; }
.cr-multi-shell { max-width: 1080px; margin: 0 auto; }
.cr-multi-identity { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(117,168,213,.2); border-radius: 12px; background: rgba(19,30,49,.7); }
.cr-multi-avatar { --avatar: #8fa9ff; width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--avatar) 75%, white); border-radius: 50%; background: var(--avatar); color: #08101d; font-weight: 900; box-shadow: 0 0 18px color-mix(in srgb, var(--avatar) 26%, transparent); }
.cr-multi-identity small, .cr-multi-identity b { display: block; }.cr-multi-identity small { color: var(--cr-blue); font-size: .51rem; letter-spacing: .16em; }.cr-multi-identity b { font-size: .78rem; }.cr-multi-identity p { margin: 2px 0 0; color: #919aaa; font-size: .57rem; }
.cr-multi-create { display: grid; grid-template-columns: minmax(260px,1fr) minmax(170px,.55fr) 100px 150px; gap: 10px; align-items: end; padding: 15px; border: 1px solid var(--cr-line); border-radius: 13px; background: linear-gradient(135deg, rgba(240,188,89,.075), rgba(17,27,45,.78)); }
.cr-multi-create small, .cr-multi-browser header small { color: var(--cr-gold); font-size: .5rem; letter-spacing: .17em; }.cr-multi-create h3, .cr-multi-browser h3 { margin: 2px 0 3px; font-family: var(--font-display, serif); font-size: 1.02rem; }.cr-multi-create p { margin: 0; color: #929baa; font-size: .55rem; }
.cr-multi-create label { color: #929bab; font-size: .55rem; }.cr-multi-create input, .cr-multi-create select { width: 100%; height: 43px; display: block; margin-top: 5px; padding: 0 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: #101a2c; color: #fff; font: inherit; font-size: .68rem; }.cr-multi-create .cr-primary { min-height: 43px; padding: 8px 10px; font-size: .66rem; }
.cr-multi-browser { margin-top: 13px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(9,16,29,.66); }.cr-multi-browser > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }.cr-multi-browser > header button, .cr-multi-room-head > button { min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.045); color: #b6bdc8; cursor: pointer; font-size: .6rem; }
.cr-multi-room-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 320px; overflow-y: auto; }.cr-multi-room-card { display: grid; grid-template-columns: minmax(0,1fr) 55px 78px; gap: 10px; align-items: center; min-height: 82px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.025); }.cr-multi-room-card small { color: #77849a; font-size: .46rem; }.cr-multi-room-card h4 { margin: 1px 0; font-size: .72rem; }.cr-multi-room-card p { margin: 0; color: #929baa; font-size: .52rem; }.cr-multi-room-card > span { color: #8d97a8; font-size: .55rem; text-align: center; }.cr-multi-room-card > span b { color: var(--cr-gold-soft); font-size: .8rem; }.cr-multi-room-card > button { min-height: 38px; border: 1px solid rgba(240,188,89,.35); border-radius: 7px; background: rgba(240,188,89,.1); color: var(--cr-gold-soft); cursor: pointer; font-size: .58rem; }.cr-multi-room-card > button:disabled { opacity: .35; cursor: not-allowed; }
.cr-multi-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 5px; color: #798599; text-align: center; }.cr-multi-empty > span { color: var(--cr-gold); font-size: 1.7rem; }.cr-multi-empty b { font-size: .68rem; }.cr-multi-empty p { margin: 0; font-size: .55rem; }.cr-multi-empty button { margin-top: 5px; padding: 7px 12px; border: 1px solid var(--cr-line); border-radius: 7px; background: rgba(255,255,255,.04); color: #fff; }.cr-multi-empty.is-error { color: #f1a5ad; }
.cr-multi-room { padding-bottom: 20px; }.cr-multi-room-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; padding: 11px 14px; border: 1px solid var(--cr-line); border-radius: 11px; background: rgba(16,25,42,.84); }.cr-multi-room-head small { color: var(--cr-gold); font-size: .51rem; letter-spacing: .18em; }.cr-multi-room-head h3 { margin: 1px 0; font-family: var(--font-display, serif); font-size: 1.2rem; }.cr-multi-room-head p { margin: 0; color: #939cab; font-size: .57rem; }
.cr-multi-player-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }.cr-multi-player { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 9px; min-height: 82px; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.025); overflow: hidden; }.cr-multi-player::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: transparent; }.cr-multi-player.is-turn { border-color: rgba(240,188,89,.45); box-shadow: inset 0 0 20px rgba(240,188,89,.05); }.cr-multi-player.is-turn::after { background: var(--cr-gold); }.cr-multi-player.is-away { opacity: .52; }.cr-multi-player > img { width: 58px; height: 72px; object-fit: cover; border-radius: 7px; }.cr-multi-player .cr-multi-avatar { width: 50px; height: 50px; align-self: center; }.cr-multi-player small, .cr-multi-player b, .cr-multi-player em { display: block; }.cr-multi-player small { color: #7f8ba0; font-size: .43rem; }.cr-multi-player b { font-size: .68rem; }.cr-multi-player p { margin: 1px 0 4px; color: #a1a9b6; font-size: .51rem; }.cr-multi-player em { margin-top: 2px; color: #7f899a; font-size: .44rem; font-style: normal; }.cr-multi-mini-hp { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.08); }.cr-multi-mini-hp i { display: block; height: 100%; background: linear-gradient(90deg,#57a76e,#9bd16c); }
.cr-multi-setup { padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(10,17,30,.73); }.cr-multi-setup-copy { margin-bottom: 10px; }.cr-multi-setup-copy small { color: var(--cr-gold); font-size: .49rem; letter-spacing: .18em; }.cr-multi-setup-copy h3 { margin: 2px 0; font-family: var(--font-display, serif); font-size: 1.05rem; }.cr-multi-setup-copy p { margin: 0; color: #929baa; font-size: .56rem; }
.cr-multi-hero-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 6px; max-height: 330px; overflow-y: auto; padding: 1px; }.cr-multi-hero-grid button { --hero: var(--cr-gold); position: relative; min-width: 0; aspect-ratio: .78; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #111a2c; color: #fff; cursor: pointer; }.cr-multi-hero-grid button::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(5,9,18,.96)); }.cr-multi-hero-grid img { width: 100%; height: 100%; object-fit: cover; }.cr-multi-hero-grid button > span { position: absolute; z-index: 2; top: 5px; right: 6px; color: var(--hero); }.cr-multi-hero-grid button > b, .cr-multi-hero-grid button > small { position: absolute; z-index: 2; left: 7px; right: 5px; display: block; text-align: left; }.cr-multi-hero-grid button > b { bottom: 20px; font-size: .58rem; }.cr-multi-hero-grid button > small { bottom: 7px; color: #a0a8b5; font-size: .39rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.cr-multi-hero-grid button > i { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; background: rgba(7,12,22,.72); color: #b0b8c4; font-size: .54rem; font-style: normal; }.cr-multi-hero-grid button.is-selected { border-color: var(--hero); box-shadow: 0 0 0 2px color-mix(in srgb,var(--hero) 35%,transparent); }.cr-multi-hero-grid button:disabled:not(.is-selected) { cursor: not-allowed; filter: grayscale(.7); }.cr-multi-startbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }.cr-multi-startbar p { margin: 0; color: #9aa3b2; font-size: .59rem; }.cr-multi-startbar .cr-primary { min-width: 220px; }
.cr-multi-battle { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(400px,1.1fr); min-height: 410px; overflow: hidden; border: 1px solid var(--cr-line); border-radius: 14px; background: rgba(9,15,27,.8); }.cr-multi-enemy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; background: radial-gradient(circle at 50% 44%, rgba(111,96,164,.24), transparent 43%), linear-gradient(150deg,rgba(31,48,76,.72),rgba(10,16,29,.85)); }.cr-multi-enemy-copy { text-align: center; }.cr-multi-enemy-copy small { color: var(--cr-gold); font-size: .5rem; letter-spacing: .18em; }.cr-multi-enemy-copy h3 { margin: 2px 0; font-family: var(--font-display, serif); font-size: 1.35rem; }.cr-multi-enemy-copy p { margin: 0; color: #929cab; font-size: .53rem; }.cr-multi-enemy-art { position: relative; width: 245px; height: 245px; margin: -2px 0 -4px; }.cr-multi-enemy-art > span { position: absolute; inset: 11%; border: 1px solid rgba(240,188,89,.22); border-radius: 50%; box-shadow: 0 0 45px rgba(95,94,177,.25); }.cr-multi-enemy-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mask-image: radial-gradient(circle,#000 60%,transparent 97%); }.cr-multi-enemy-art i { position: absolute; z-index: 2; right: 12px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(8,13,26,.82); color: var(--cr-gold); font-style: normal; }.cr-multi-enemy-hp { width: min(350px,90%); }.cr-multi-enemy-hp > div { height: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(0,0,0,.35); }.cr-multi-enemy-hp > div i { display: block; height: 100%; background: linear-gradient(90deg,#a83f59,#e26b65,#f3a75e); transition: width .25s ease; }.cr-multi-enemy-hp > span { display: block; margin-top: 4px; color: #929aaa; font-size: .52rem; text-align: right; }.cr-multi-enemy-hp > span b { color: #fff; }
.cr-multi-console { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--cr-line); }.cr-multi-log { flex: 1; min-height: 180px; max-height: 240px; overflow-y: auto; padding: 14px 16px; background: rgba(7,12,22,.58); }.cr-multi-log::before { content: "CO-OP LOG"; display: block; margin-bottom: 6px; color: var(--cr-gold); font-size: .47rem; letter-spacing: .18em; }.cr-multi-log p { margin: 0 0 5px; color: #b5bbc5; font-size: .58rem; line-height: 1.55; }.cr-multi-turn { min-height: 55px; padding: 9px 13px; border-block: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }.cr-multi-turn b, .cr-multi-turn span { display: block; }.cr-multi-turn b { color: var(--cr-gold-soft); font-size: .7rem; }.cr-multi-turn span { margin-top: 2px; color: #929aaa; font-size: .52rem; }.cr-multi-commands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }.cr-multi-commands button { min-height: 64px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: linear-gradient(145deg,rgba(38,51,76,.92),rgba(23,33,53,.92)); color: #fff; cursor: pointer; text-align: left; }.cr-multi-commands button:hover:not(:disabled) { border-color: rgba(240,188,89,.45); transform: translateY(-1px); }.cr-multi-commands button:disabled { opacity: .35; cursor: not-allowed; }.cr-multi-commands b, .cr-multi-commands small { display: block; }.cr-multi-commands b { font-size: .7rem; }.cr-multi-commands small { margin-top: 2px; color: #949dad; font-size: .49rem; }.cr-multi-advance, .cr-multi-retry { margin: 10px; min-height: 56px; }

@media (max-width: 980px) {
    .cr-root, .cr-frame { min-height: 680px; }.cr-stage, .cr-screen { min-height: 604px; }
    .cr-title { grid-template-columns: 1fr 1fr; }.cr-title-art { min-height: 604px; }.cr-title-copy { padding-right: 26px; }.cr-title-copy h2 { font-size: 3.3rem; }
    .cr-roster-layout { grid-template-columns: minmax(0, 1fr) 320px; }.cr-hero-grid { grid-template-columns: repeat(3, 1fr); }.cr-selected-hero { grid-template-columns: 112px 1fr; }
    .cr-world { grid-template-columns: 230px minmax(0, 1fr); }.cr-party-panel { padding-inline: 11px; }.cr-map-wrap { padding-inline: 14px; }.cr-map-node { width: 73px; }.cr-map-node b { font-size: .53rem; }.cr-destination { grid-template-columns: 58px minmax(0, 1fr) 160px; }.cr-destination-icon { width: 52px; height: 52px; }
    .cr-battle-field { grid-template-columns: minmax(0,1fr) 270px; }.cr-battle-console { grid-template-columns: .7fr 1.3fr; }
    .cr-multi-create { grid-template-columns: 1fr 180px 95px; }.cr-multi-create > div { grid-column: 1 / 4; }.cr-multi-hero-grid { grid-template-columns: repeat(6,1fr); }.cr-multi-battle { grid-template-columns: minmax(310px,.8fr) minmax(360px,1.2fr); }
}

@media (max-width: 760px) {
    .cr-root { min-height: 640px; border-radius: 12px; }.cr-frame { min-height: 640px; }.cr-topbar { min-height: 66px; padding: 9px 10px; gap: 8px; flex-wrap: wrap; }.cr-brand-mark { width: 34px; height: 34px; }.cr-brand small { display: none; }.cr-brand b { font-size: .86rem; }.cr-journey-meta { order: 3; width: 100%; justify-content: center; border-top: 1px solid rgba(255,255,255,.06); }.cr-journey-meta > span { min-width: 76px; padding-block: 4px; }.cr-quick { margin-left: auto; }.cr-quick button { width: 39px; height: 39px; }.cr-quick button span { display: none; }
    .cr-stage, .cr-screen { min-height: 574px; }
    .cr-title { grid-template-columns: 1fr; }.cr-title-art { position: absolute; inset: 0; min-height: 574px; opacity: .53; }.cr-title-art::after { background: linear-gradient(90deg, rgba(8,13,27,.25), rgba(8,13,27,.92) 75%), linear-gradient(0deg, rgba(8,13,27,.94), transparent 54%); }.cr-title-art img { width: 520px; left: 31%; }.cr-title-copy { min-height: 574px; align-items: center; padding: 50px 24px 30px; text-align: center; }.cr-title-copy h2 { font-size: clamp(2.7rem, 13vw, 4rem); }.cr-title-lead { margin-block: 17px; }.cr-title-counts { gap: 4px; }.cr-title-counts span { min-width: 80px; }.cr-title-actions { max-width: 400px; }
    .cr-roster { padding: 18px 12px; }.cr-section-head { align-items: start; }.cr-section-head > p { display: none; }.cr-roster-layout { display: flex; flex-direction: column; }.cr-hero-grid { width: 100%; max-height: 430px; grid-template-columns: repeat(4, 1fr); order: 2; }.cr-hero-card { min-height: 145px; }.cr-party-builder { width: 100%; order: 1; }.cr-selected-hero { display: none; }.cr-party-slots { grid-template-columns: repeat(3, 1fr); }.cr-party-slot { min-height: 58px; grid-template-columns: 32px 1fr 20px; }.cr-party-slot > span { display: none; }.cr-party-slot img { width: 31px; height: 42px; }.cr-party-slot b { font-size: .61rem; }.cr-party-slot i { grid-column: 1 / 4; }.cr-party-builder > .cr-primary { width: calc(100% - 20px); margin: 8px 10px; }
    .cr-world { display: block; }.cr-party-panel { border: 0; border-bottom: 1px solid var(--cr-line); padding: 9px 10px; }.cr-panel-title { display: none; }.cr-party-panel > div:nth-child(2) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.cr-party-panel .cr-party-card { grid-template-columns: 42px 1fr; min-height: 66px; padding: 5px; margin: 0; }.cr-party-panel .cr-party-card > img { width: 42px; height: 54px; }.cr-party-panel .cr-party-card > div > span { display: none; }.cr-party-panel .cr-party-card small { font-size: .42rem; }.cr-party-actions { display: flex; margin-top: 6px; }.cr-party-actions button { flex: 1; text-align: center; padding: 6px; }.cr-party-actions button small { display: none; }.cr-map-wrap { padding: 12px 9px; }.cr-map { height: 330px; }.cr-map-head { margin-inline: 5px; }.cr-map-head h2 { font-size: 1.25rem; }.cr-map-node { width: 63px; }.cr-map-node > span { width: 34px; height: 34px; font-size: .86rem; }.cr-map-node small { display: none; }.cr-map-node.is-cleared > span::after { right: 10px; }.cr-destination { grid-template-columns: 48px 1fr; min-height: auto; }.cr-destination-icon { width: 44px; height: 44px; font-size: 1.2rem; }.cr-destination-copy h3 small { display: block; margin: 2px 0 0; }.cr-destination-copy > p { display: none; }.cr-destination-actions { grid-column: 1 / 3; grid-template-columns: 1fr 1fr; }.cr-region-steps small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
    .cr-battle-field { min-height: 360px; display: block; padding: 10px; }.cr-enemy-zone { min-height: 270px; }.cr-enemy-image-wrap { width: 210px; height: 200px; margin: -8px 0 -10px; }.cr-enemy-image-wrap img { width: 185px; height: 185px; }.cr-battle-party { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }.cr-battle-party .cr-party-card { grid-template-columns: 42px 1fr; min-height: 67px; padding: 4px; }.cr-battle-party .cr-party-card > img { width: 42px; height: 56px; }.cr-battle-party .cr-party-card > div > span { display: none; }.cr-battle-party .cr-party-card small { font-size: .42rem; }.cr-battle-console { display: block; }.cr-battle-log { min-height: 92px; max-height: 105px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--cr-line); }.cr-battle-log::before { margin-bottom: 3px; }.cr-battle-log p { font-size: .61rem; margin-bottom: 2px; }.cr-command-panel { padding: 8px 10px 10px; }.cr-turn-actor { height: 34px; margin-bottom: 5px; }.cr-turn-actor img { width: 32px; height: 32px; }.cr-commands button { min-height: 58px; }.cr-item-commands { max-height: 128px; }
    .cr-modal { padding: 8px; }.cr-modal-card { width: 98vw; max-height: 94vh; }.cr-modal-card > header { padding: 12px 14px; }.cr-modal-tabs { overflow-x: auto; }.cr-modal-tabs button { min-width: 88px; }.cr-member-select { overflow-x: auto; }.cr-member-select button { min-width: 98px; }.cr-loadout { display: block; }.cr-equipped { margin-top: 9px; }.cr-item-row { grid-template-columns: 42px minmax(0,1fr) 38px 67px; }.cr-codex-grid { grid-template-columns: repeat(3, 1fr); }.cr-codex-card { min-height: 160px; }.cr-codex-card > div { height: 93px; }.cr-shop-grid { grid-template-columns: 1fr; }.cr-reward { grid-template-columns: 190px 1fr; gap: 12px; }.cr-reward-monster { width: 185px; height: 185px; }.cr-ending-card { padding: 22px 15px; }.cr-ending-stats { grid-template-columns: 1fr 1fr; }
    .cr-multi { padding: 18px 12px 24px; }.cr-multi-create { grid-template-columns: 1fr 90px; }.cr-multi-create > div { grid-column: 1 / 3; }.cr-multi-create label:first-of-type { grid-column: 1 / 3; }.cr-multi-create .cr-primary { min-height: 43px; }.cr-multi-room-list { grid-template-columns: 1fr; }.cr-multi-player-list { overflow-x: auto; grid-template-columns: repeat(3,minmax(220px,1fr)); }.cr-multi-hero-grid { grid-template-columns: repeat(4,1fr); }.cr-multi-battle { display: block; }.cr-multi-enemy { min-height: 340px; }.cr-multi-enemy-art { width: 220px; height: 220px; }.cr-multi-console { border-left: 0; border-top: 1px solid var(--cr-line); }.cr-multi-log { min-height: 120px; max-height: 150px; }
}

@media (max-width: 480px) {
    .cr-title-lead br { display: none; }.cr-title-counts span { min-width: 0; padding-inline: 7px; }.cr-title-actions { grid-template-columns: 1fr; }.cr-title-copy { justify-content: flex-end; padding-bottom: 35px; }.cr-title-art img { left: 40%; bottom: 2%; }
    .cr-hero-grid { grid-template-columns: repeat(3, 1fr); }.cr-hero-card { min-height: 136px; }.cr-hero-card-copy small { display: none; }.cr-party-slot { grid-template-columns: 28px 1fr 18px; }.cr-party-slot img { width: 28px; height: 38px; }
    .cr-map { height: 300px; }.cr-map-node { width: 55px; }.cr-map-node b { font-size: .46rem; }.cr-destination-copy > span { font-size: .44rem; }.cr-region-steps small { max-width: 135px; }.cr-destination-actions .cr-primary, .cr-destination-actions .cr-secondary { font-size: .62rem; }
    .cr-battle-field { min-height: 340px; }.cr-enemy-zone { min-height: 255px; }.cr-enemy-meta b { font-size: 1.15rem; }.cr-battle-party .cr-party-card { grid-template-columns: 38px 1fr; }.cr-battle-party .cr-party-card > img { width: 38px; height: 51px; }.cr-battle-party .cr-party-card > div > b { font-size: .6rem; }.cr-commands button { padding-left: 38px; }.cr-commands kbd { left: 8px; }.cr-commands small { font-size: .45rem; }
    .cr-item-row { grid-template-columns: 38px minmax(0,1fr) 34px; }.cr-item-row > button { grid-column: 2 / 4; }.cr-item-icon { width: 36px; height: 36px; }.cr-equipped { grid-template-columns: 1fr; }.cr-codex-grid { grid-template-columns: 1fr 1fr; }.cr-item-codex { grid-template-columns: 1fr; }.cr-inn { display: block; }.cr-inn button { width: 100%; margin-top: 12px; }.cr-reward { display: block; text-align: center; }.cr-reward-monster { margin: -20px auto -5px; }.cr-reward-values { justify-content: center; }
    .cr-multi-head { display: block; }.cr-multi-head .cr-secondary { width: 100%; margin-top: 10px; }.cr-multi-create { display: block; }.cr-multi-create label, .cr-multi-create .cr-primary { display: block; width: 100%; margin-top: 10px; }.cr-multi-room-card { grid-template-columns: 1fr 48px; }.cr-multi-room-card > button { grid-column: 1 / 3; }.cr-multi-player-list { grid-template-columns: repeat(3,minmax(205px,1fr)); }.cr-multi-hero-grid { grid-template-columns: repeat(3,1fr); max-height: 380px; }.cr-multi-startbar { display: block; }.cr-multi-startbar .cr-primary { width: 100%; min-width: 0; margin-top: 9px; }.cr-multi-room-head { align-items: flex-start; }.cr-multi-enemy { min-height: 315px; padding-inline: 8px; }.cr-multi-enemy-art { width: 200px; height: 200px; }.cr-multi-commands button { min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-root *, .cr-root *::before, .cr-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}