/* Ceralia's description rules also need to win over the premium codex grid. */
.ability-desc .ability-progression.is-ceralia-details .ability-progression-step {
    grid-template-columns: 112px minmax(0, 1fr);
}
.ability-desc .ability-progression.is-ceralia-details .ability-progression-step.is-wide-label {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}
.ability-desc .ability-progression.is-ceralia-details .ability-progression-label {
    display: block;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.6;
}
.ability-desc .ability-progression.is-ceralia-details .ability-progression-label > i {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
.ability-desc .ability-progression.is-ceralia-details .ability-progression-copy { line-height: 1.65; }

.codex-ceralia-show {
    margin: 22px 0 30px;
    padding: 24px;
    border: 1px solid rgba(231, 190, 92, .4);
    background: radial-gradient(circle at 10% 0, rgba(231, 190, 92, .13), transparent 45%), linear-gradient(145deg, #201b13, #080e0c);
    box-shadow: inset 0 0 34px rgba(231, 190, 92, .06);
    color: #f4e7c8;
}
.codex-ceralia-show > header { display: flex; align-items: center; gap: 20px; }
.codex-ceralia-show__teapot { position: relative; display: grid; place-items: center; width: 126px; height: 126px; flex: 0 0 auto; }
.codex-ceralia-show__teapot > img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 0 12px #d9a84a66); }
.codex-ceralia-show__orbit { position: absolute; inset: 0; animation: ceraliaCodexOrbit 16s linear infinite; pointer-events: none; }
.codex-ceralia-show__cup { position: absolute; inset: 0; transform: rotate(var(--cup-angle)); }
.codex-ceralia-show__cup > span { position: absolute; top: 0; left: calc(50% - 15px); width: 30px; height: 30px; animation: ceraliaCodexCup 16s linear infinite; filter: drop-shadow(0 0 5px #d9a84a88); }
.codex-ceralia-show__cup svg { display: block; width: 100%; height: 100%; }
@keyframes ceraliaCodexOrbit { to { transform: rotate(360deg); } }
@keyframes ceraliaCodexCup { from { transform: rotate(calc(-1 * var(--cup-angle))); } to { transform: rotate(calc(-360deg - var(--cup-angle))); } }
@media (prefers-reduced-motion: reduce) {
    .codex-ceralia-show__orbit, .codex-ceralia-show__cup > span { animation: none; }
    .codex-ceralia-show__cup > span { transform: rotate(calc(-1 * var(--cup-angle))); }
}
.codex-ceralia-show header small { color: #e7be5c; font: 800 .6rem/1.4 Montserrat, sans-serif; letter-spacing: .15em; }
.codex-ceralia-show h3 { margin: 7px 0; font-size: 1.6rem; }
.codex-ceralia-show h4 { margin: 0 0 7px; color: #fff6da; font: 700 .85rem/1.5 Montserrat, sans-serif; }
.codex-ceralia-show p { margin: 0; color: #d9dfd8; font: 500 .85rem/1.7 Outfit, sans-serif; }
.codex-ceralia-show__quick, .codex-ceralia-show__effects { display: grid; gap: 12px; margin-top: 20px; }
.codex-ceralia-show__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.codex-ceralia-show__effects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.codex-ceralia-show article { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid #e7be5c33; background: #0004; min-width: 0; }
.codex-ceralia-show article > img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.codex-ceralia-show article > div { min-width: 0; }
.codex-ceralia-show details { margin-top: 20px; border-top: 1px solid #e7be5c33; }
.codex-ceralia-show summary { cursor: pointer; padding: 16px 0; color: #e7be5c; font: 700 .85rem/1.5 Montserrat, sans-serif; }
.codex-ceralia-show__rules { display: grid; gap: 10px; padding: 0; margin: 0 0 22px; list-style: none; }
.codex-ceralia-show__rules li { border-left: 2px solid #e7be5c; padding: 10px 14px; background: #ffffff05; }
.codex-ceralia-show__rules strong { display: block; margin-bottom: 5px; }
.codex-ceralia-show__levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.codex-ceralia-show__levels > span { display: grid; gap: 4px; padding: 12px 8px; text-align: center; border: 1px solid #e7be5c44; background: #0004; }
.codex-ceralia-show__levels strong { color: #e7be5c; font-size: 1.35rem; }
.codex-ceralia-show__levels small { font: 500 .7rem/1.4 Outfit, sans-serif; }
@media (max-width: 900px) {
    .codex-ceralia-show__quick { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ability-desc .ability-progression.is-ceralia-details .ability-progression-step { grid-template-columns: minmax(0, 1fr); }
    .codex-ceralia-show { padding: 16px; }
    .codex-ceralia-show > header { align-items: flex-start; gap: 12px; }
    .codex-ceralia-show__teapot { width: 78px; height: 78px; }
    .codex-ceralia-show__teapot > img { width: 54px; height: 54px; }
    .codex-ceralia-show__cup > span { left: calc(50% - 10px); width: 20px; height: 20px; }
    .codex-ceralia-show__effects { grid-template-columns: 1fr; }
    .codex-ceralia-show__levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.codex-ceralia-show[data-cr-theme="kristaly"] { border-color:#bcbbe8;background:radial-gradient(ellipse at 0 0,#febaf426,transparent 65%),linear-gradient(135deg,#383f6a,#20233f); }
.codex-ceralia-show[data-cr-theme="kristaly"] .codex-ceralia-show__teapot > img { filter:drop-shadow(0 0 10px #febaf490) drop-shadow(0 0 18px #8da7e755); }
.codex-ceralia-show[data-cr-theme="kristaly"] .codex-ceralia-show__cup { filter:drop-shadow(0 0 6px #febaf480); }
.codex-ceralia-show[data-cr-theme="elegans"] { border-color:#e9c779;background:radial-gradient(ellipse at 0 0,#18d39226,transparent 65%),linear-gradient(135deg,#10362a,#07130f); }
.codex-ceralia-show[data-cr-theme="elegans"] .codex-ceralia-show__teapot > img { filter:drop-shadow(0 0 10px #18d39290) drop-shadow(0 0 18px #00ffe455); }
.codex-ceralia-show[data-cr-theme="elegans"] .codex-ceralia-show__cup { filter:drop-shadow(0 0 6px #18d39280); }
.codex-ceralia-show[data-cr-theme="elegans"] .codex-ceralia-show__levels > span { border-color:#e9c77966;background:linear-gradient(135deg,#07130f,#27735d55); }
.codex-ceralia-show[data-cr-theme="elegans"] .codex-ceralia-show__levels strong { color:#18d392; }
.codex-ceralia-show[data-cr-theme="rend"] { border-color:#b1695e;background:radial-gradient(ellipse at 0 0,#b41d2636,transparent 65%),linear-gradient(135deg,#2d0000,#1c1315); }
.codex-ceralia-show[data-cr-theme="rend"] .codex-ceralia-show__teapot > img { object-fit:contain;filter:drop-shadow(0 0 10px #b41d2690) drop-shadow(0 0 18px #4f000855); }
.codex-ceralia-show[data-cr-theme="rend"] .codex-ceralia-show__cup { filter:drop-shadow(0 0 6px #b41d2680); }
.codex-ceralia-show[data-cr-theme="rend"] .codex-ceralia-show__levels > span,.codex-ceralia-show[data-cr-theme="rend"] article { border-color:#b1695e66;background:linear-gradient(135deg,#100b10,#4f000844); }
.codex-ceralia-show[data-cr-theme="rend"] header small,.codex-ceralia-show[data-cr-theme="rend"] summary,.codex-ceralia-show[data-cr-theme="rend"] .codex-ceralia-show__levels strong { color:#ee8790; }
.codex-ceralia-show[data-cr-theme="rend"] h4 { color:#e8ddeb; }
.codex-ceralia-show[data-cr-theme="rend"] details,.codex-ceralia-show[data-cr-theme="rend"] .codex-ceralia-show__rules li { border-color:#b41d26; }