/* Original pack "imperial" (Dragon Dynasty). Imperial red, jade, burnished
   gold, black lacquer and lantern light; Noto Serif Display for the titles,
   Noto Sans to read. */

html[data-theme-pack='imperial'] body {
  margin: 0;
  background: #1a0705;
  color: #f3e3cf;
  font: 400 16px/1.65 'Noto Sans', 'Segoe UI', sans-serif;
}

.im {
  --im-red: #c8241b;
  --im-red-deep: #6d0d08;
  --im-gold: #e8b84a;
  --im-gold-hi: #ffe6a6;
  --im-jade: #2fa37a;
  --im-jade-hi: #8fe0bd;
  --im-lacquer: #140504;
  --im-panel: rgb(22 6 4 / .9);
  --im-line: rgb(232 184 74 / .32);
  --im-muted: #c7a88c;
  background: radial-gradient(1100px 600px at 50% 0, rgb(255 170 60 / .12), transparent 70%), linear-gradient(180deg, rgb(20 5 4 / .3), rgb(20 5 4 / .85) 35%, #140504);
}
.im a { color: var(--im-gold); transition: color .2s ease; }
.im a:hover { color: var(--im-gold-hi); }

/* Red lacquer beam with gold studs; its lanterns hang over the top of the scene */
.im-beam { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 clamp(1rem, 3vw, 2.5rem); background: linear-gradient(180deg, #b8231a, #7a0f09); border-top: 3px solid var(--im-gold); border-bottom: 3px solid var(--im-gold); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 200 150 / .35); }
.im-beam::before, .im-beam::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; background: radial-gradient(circle, var(--im-gold-hi) 0 2px, #b8872c 2.5px 3px, transparent 3.5px) 0 50% / 26px 6px repeat-x; }
.im-beam::before { top: 3px; }
.im-beam::after { bottom: 3px; }
.im-nav { display: flex; gap: clamp(.4rem, 1.8vw, 1.8rem); }
.im-nav a { position: relative; padding: .35rem .6rem; color: #ffeccc; font: 700 .98rem 'Noto Serif Display', serif; letter-spacing: .08em; text-shadow: 0 1px 2px #3a0402; transition: color .2s ease; }
.im-nav a::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 10px; height: 10px; margin-left: -5px; rotate: 45deg; background: var(--im-gold); box-shadow: 0 0 10px var(--im-gold); scale: 0; transition: scale .25s ease; }
.im-nav a:hover, .im-nav a.is-current { color: var(--im-gold-hi); }
.im-nav a:hover::after, .im-nav a.is-current::after { scale: 1; }
.im-tools { position: absolute; right: clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; gap: .8rem; }
.im .pk-lang { background: rgb(40 5 3 / .6); border: 1px solid var(--im-gold); }
.im .pk-lang button { color: #f0cfa5; }
.im .pk-lang button.is-active { background: var(--im-gold); color: #3a1604; }
.im-account { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.2rem; color: #2a1204 !important; background: linear-gradient(180deg, var(--im-gold-hi), var(--im-gold) 55%, #b8872c); font: 700 .88rem 'Noto Serif Display', serif; letter-spacing: .06em; border-radius: 3px; }
.im-lanterns { position: absolute; z-index: 1; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 5%; pointer-events: none; }
.im-lanterns img { width: 44px; height: auto; aspect-ratio: 138 / 320; margin-top: -6px; transform-origin: 50% 0; filter: drop-shadow(0 0 18px rgb(255 120 40 / .7)); animation: im-swing 4s ease-in-out infinite; }
.im-lanterns img:nth-child(2) { animation-delay: -1.3s; width: 36px; }
.im-lanterns img:nth-child(3) { animation-delay: -2.1s; width: 36px; }
.im-lanterns img:nth-child(4) { animation-delay: -.7s; }

/* Hero with fireworks */
.im-hero { position: relative; height: clamp(580px, 78vh, 780px); overflow: hidden; isolation: isolate; }
.im-hero-art { position: absolute; inset: 0; z-index: -3; background: url(https://assets.aetunga.com/themes/imperial/images/hero.jpg?v=0ac0adc260) center 35% / cover no-repeat; animation: im-drift 36s ease-in-out infinite alternate; }
.im-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 38% 50% at 50% 46%, rgb(18 4 2 / .5), transparent 72%), linear-gradient(180deg, rgb(20 5 4 / .2), transparent 30%, transparent 60%, #140504 100%); }
.im-fireworks { position: absolute; inset: 0 0 45%; z-index: -2; pointer-events: none; }
.im-fireworks i { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(255 230 160 / .9) 0 2px, transparent 3px) 50% 50% / 18px 18px, radial-gradient(circle, rgb(255 120 60 / .6), transparent 60%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); opacity: 0; animation: im-burst 6s ease-out infinite; }
.im-fireworks i:nth-child(1) { left: 12%; top: 18%; }
.im-fireworks i:nth-child(2) { left: 72%; top: 8%; animation-delay: 1.6s; filter: hue-rotate(80deg); }
.im-fireworks i:nth-child(3) { left: 30%; top: 4%; animation-delay: 3.2s; width: 130px; height: 130px; }
.im-fireworks i:nth-child(4) { left: 84%; top: 30%; animation-delay: 4.4s; width: 150px; height: 150px; filter: hue-rotate(-30deg); }
.im-general { position: absolute; right: clamp(-40px, 3vw, 90px); bottom: -10px; height: 92%; width: auto; max-width: none; filter: drop-shadow(0 0 30px rgb(0 0 0 / .85)) drop-shadow(0 0 24px rgb(255 140 50 / .25)); animation: im-enter 1.3s ease-out both; pointer-events: none; }
.im-hero-center { position: absolute; inset: 64px 0 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 2rem 1rem; text-align: center; }
.im-seal { aspect-ratio: 460 / 459; position: absolute; top: 50%; left: 50%; width: min(400px, 64vw); translate: -50% -56%; opacity: .28; z-index: -1; filter: drop-shadow(0 0 30px rgb(143 224 189 / .5)); animation: im-turn 80s linear infinite; pointer-events: none; }
.im-logo { display: block; filter: drop-shadow(0 4px 16px #000) drop-shadow(0 0 30px rgb(255 170 60 / .45)); transition: transform .3s ease; }
.im-logo:hover { transform: scale(1.02); }
.im-logo .site-name { background: linear-gradient(180deg, #fff6d8, #ffd77a 45%, #d99a2b 80%, #9a5e12); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; letter-spacing: .04em; }
.im-tagline { margin: 0; color: #fff1d6; font: 700 clamp(1rem, 1.7vw, 1.25rem) 'Noto Serif Display', serif; letter-spacing: .24em; text-shadow: 0 2px 10px #000; }
.im-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .4rem; }
.im-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; min-width: 210px; padding: 0 2rem; font: 700 1rem 'Noto Serif Display', serif; letter-spacing: .12em; border-radius: 4px; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.im-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.im-btn--gold { color: #2a1204 !important; background: linear-gradient(180deg, var(--im-gold-hi), var(--im-gold) 50%, #b8872c); box-shadow: 0 14px 30px -12px rgb(232 184 74 / .9), inset 0 0 0 2px rgb(255 250 220 / .45); }
.im-btn--jade { color: #eafff5 !important; background: linear-gradient(180deg, #3fc08f, #1b6e50); box-shadow: 0 14px 30px -12px rgb(47 163 122 / .8), inset 0 0 0 2px rgb(200 255 230 / .3); }
.im-online { display: inline-flex; align-items: center; gap: .55rem; margin: .3rem 0 0; padding: .35rem 1.1rem; border-radius: 999px; background: rgb(0 0 0 / .5); border: 1px solid var(--im-line); }
.im-online strong { color: var(--im-gold-hi); }
.im-pearl { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--im-jade-hi) 50%, var(--im-jade)); box-shadow: 0 0 10px rgb(143 224 189 / .9); animation: im-glow 2.2s ease-in-out infinite; }
.im-online.is-offline .im-pearl { background: #8a6a5a; box-shadow: none; animation: none; }
.im-divider { aspect-ratio: 1100 / 190; position: relative; z-index: 2; display: block; width: min(860px, 90vw); margin: -3.2rem auto 0; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .7)); }

/* Columns and lacquer panels */
.im-main { display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px; gap: 1.6rem; width: min(1320px, calc(100% - 2rem)); margin: 1.5rem auto 0; align-items: start; }
.im-side { display: grid; gap: 1.4rem; }
.im-content { display: grid; gap: 1.6rem; min-width: 0; }
.im-panel { position: relative; padding: 1.7rem 1.3rem 1.3rem; background: linear-gradient(180deg, rgb(60 10 6 / .6), var(--im-panel)); border: 2px solid transparent; border-image: linear-gradient(180deg, var(--im-gold-hi), var(--im-gold) 30%, #7a5212) 1; box-shadow: 0 20px 44px -24px #000; }
.im-panel::before, .im-panel::after { content: ''; position: absolute; width: 58px; height: 58px; background: 0 0 / contain no-repeat; pointer-events: none; }
.im[data-ready] .im-panel[data-seen]::before, .im[data-ready] .im-panel[data-seen]::after { background-image: url(https://assets.aetunga.com/themes/imperial/images/corner.webp?v=7e73bdbec6); }
.im-panel::before { top: -4px; left: -4px; }
.im-panel::after { right: -4px; bottom: -4px; transform: rotate(180deg); }
.im-panel-title { margin: -2.35rem auto 1.1rem; width: fit-content; max-width: 100%; padding: .35rem 1.4rem; color: #2a1204; background: linear-gradient(180deg, var(--im-gold-hi), var(--im-gold) 55%, #b8872c); font: 800 .98rem 'Noto Serif Display', serif; letter-spacing: .08em; text-align: center; border-radius: 3px; box-shadow: 0 6px 14px -6px #000; }

.im .pk-field-label { color: var(--im-muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.im .pk-input { color: #fff; background: rgb(0 0 0 / .45); border: 1px solid rgb(232 184 74 / .3); border-radius: 3px; transition: border-color .2s ease, box-shadow .2s ease; }
.im .pk-input:focus { outline: none; border-color: var(--im-gold); box-shadow: 0 0 0 3px rgb(232 184 74 / .2); }
.im .pk-button--primary { color: #fff; background: linear-gradient(180deg, #e0392d, var(--im-red) 55%, var(--im-red-deep)); border: 1px solid var(--im-gold); border-radius: 3px; font: 700 .95rem 'Noto Serif Display', serif; letter-spacing: .1em; box-shadow: 0 10px 22px -12px rgb(200 36 27 / .9); }
.im .pk-button--ghost { color: var(--im-gold-hi); background: transparent; border: 1px solid var(--im-line); font: 700 .9rem 'Noto Serif Display', serif; }
.im .pk-button--ghost:hover { background: rgb(232 184 74 / .1); }
.im .pk-error { color: #ffb09e; }
.im .pk-login-links a { color: var(--im-muted); }
.im .pk-welcome { color: var(--im-muted); }
.im .pk-welcome strong { color: var(--im-gold-hi); }
.im .pk-account-links a { color: #f6e6d0; background: rgb(0 0 0 / .3); border-left: 3px solid transparent; }
.im .pk-account-links a:hover { border-left-color: var(--im-jade); background: rgb(47 163 122 / .12); }
.im .pk-event { background: rgb(0 0 0 / .32); border-left: 3px solid var(--im-jade); }
.im .pk-event-title { color: #fff4e2; font-weight: 700; }
.im .pk-event-day { color: var(--im-muted); }
.im .pk-event-time { color: var(--im-jade-hi); font-weight: 700; }
.im .pk-rank-row { background: rgb(0 0 0 / .32); transition: background-color .2s ease; }
.im .pk-rank-row:hover { background: rgb(200 36 27 / .2); }
.im .pk-rank-pos { color: var(--im-muted); font-family: 'Noto Serif Display', serif; border: 1px solid var(--im-line); border-radius: 50%; }
.im .pk-rank-row[data-rank='1'] .pk-rank-pos { color: #2a1204; border: 0; background: radial-gradient(circle at 35% 30%, #fff3c8, var(--im-gold) 60%, #9a6a1c); box-shadow: 0 0 14px rgb(232 184 74 / .7); }
.im .pk-rank-row[data-rank='2'] .pk-rank-pos { color: #06291d; border: 0; background: radial-gradient(circle at 35% 30%, #d7fff0, var(--im-jade)); }
.im .pk-rank-row[data-rank='3'] .pk-rank-pos { color: #fff; border: 0; background: radial-gradient(circle at 35% 30%, #ff8a7c, var(--im-red)); }
.im .pk-rank-name { color: #fff2dd; font-weight: 700; }
.im .pk-rank-meta { color: var(--im-muted); }
.im .pk-more { color: var(--im-gold); font-weight: 700; }
.im .pk-empty { color: var(--im-muted); font-style: italic; }

.im-gate { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 1.4rem; overflow: hidden; border: 2px solid var(--im-gold); background: #200604 center / cover no-repeat; box-shadow: inset 0 -110px 70px -40px #140504, 0 20px 44px -22px rgb(232 184 74 / .4); transition: transform .3s ease, box-shadow .3s ease; }
.im[data-ready] .im-gate[data-seen] { background-image: url(https://assets.aetunga.com/themes/imperial/images/gate.jpg?v=100e6fe11e); }
.im-gate-light { position: absolute; left: 50%; top: 0; bottom: 0; width: 18%; translate: -50% 0; background: linear-gradient(90deg, transparent, rgb(255 220 150 / .55), transparent); mix-blend-mode: screen; transition: width .6s ease; }
.im-gate:hover { transform: translateY(-3px); box-shadow: inset 0 -110px 70px -40px #140504, 0 26px 54px -18px rgb(232 184 74 / .7); }
.im-gate:hover .im-gate-light { width: 60%; }
.im-gate-title { position: relative; color: var(--im-gold-hi); font: 800 1.5rem 'Noto Serif Display', serif; text-shadow: 0 2px 10px #000; }
.im-gate-note { position: relative; color: var(--im-jade-hi); font-size: .85rem; font-weight: 700; letter-spacing: .06em; }

.im:not([data-ready]) .pk-slide-img { display: none; }
.im .pk-slider { background: #200604; border: 2px solid var(--im-gold); box-shadow: 0 24px 50px -24px #000; }
.im .pk-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(20 5 4 / .92), transparent 60%); pointer-events: none; }
.im .pk-slide-copy { z-index: 1; }
.im .pk-slide-title { color: var(--im-gold-hi); font: 800 clamp(1.4rem, 2.6vw, 2.2rem) 'Noto Serif Display', serif; text-shadow: 0 2px 12px #000; }
.im .pk-slide-text { color: #f1ddc4; max-width: 60ch; }
.im .pk-slider-arrow { color: var(--im-gold-hi); background: rgb(20 5 4 / .6); border: 1px solid var(--im-gold); }
.im .pk-slider-arrow:hover { background: var(--im-red); }
.im .pk-slider-dot { background: rgb(255 255 255 / .3); }
.im .pk-slider-dot.is-active { background: var(--im-gold); }

.im-section { padding: 1.8rem 1.7rem 1.7rem; background: var(--im-panel); border: 2px solid transparent; border-image: linear-gradient(180deg, var(--im-gold-hi), var(--im-gold) 30%, #7a5212) 1; }
.im-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.im-section-head h2 { margin: 0; color: var(--im-gold-hi); font: 800 1.8rem 'Noto Serif Display', serif; }
.im-section-head a { white-space: nowrap; font-weight: 700; }
.im .pk-news-card { color: #e2cdb3; background: linear-gradient(165deg, rgb(110 20 12 / .55), rgb(20 6 4 / .92)); border: 1px solid var(--im-line); }
.im .pk-news-card::before { content: ''; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #d7fff0, var(--im-jade)); box-shadow: 0 0 12px rgb(143 224 189 / .6); opacity: .85; }
.im .pk-news-card:hover { border-color: var(--im-gold); box-shadow: 0 18px 36px -18px rgb(232 184 74 / .5); }
.im .pk-news-date { color: var(--im-jade-hi); font-size: .82rem; font-weight: 700; letter-spacing: .06em; }
.im .pk-news-title { color: var(--im-gold-hi); font: 800 1.25rem/1.3 'Noto Serif Display', serif; }
.im .pk-news-more { color: var(--im-gold); font-weight: 700; }
.im .pk-news-empty { color: var(--im-muted); border: 1px dashed var(--im-line); }

.im-footer { display: grid; justify-items: center; gap: 1rem; margin-top: 4rem; padding: 2.5rem 1rem; text-align: center; background: linear-gradient(180deg, transparent, rgb(10 2 1 / .9) 60%); border-top: 3px solid var(--im-gold); }
.im-footer-seal { aspect-ratio: 460 / 459; width: 80px; filter: drop-shadow(0 0 12px rgb(143 224 189 / .5)); }
.im-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.8rem; }
.im-footer-links a { color: var(--im-muted); font: 700 .95rem 'Noto Serif Display', serif; }
.im-footer-note { margin: 0; color: #8d7462; font-size: .85rem; }

@keyframes im-swing { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes im-drift { from { transform: scale(1.02); } to { transform: scale(1.07) translateY(-1%); } }
@keyframes im-burst { 0% { opacity: 0; scale: .2; } 8% { opacity: 1; } 40% { opacity: .75; scale: 1; } 60%, 100% { opacity: 0; scale: 1.15; } }
@keyframes im-enter { from { opacity: 0; transform: translateX(40px); } }
@keyframes im-turn { to { rotate: 360deg; } }
@keyframes im-glow { 0%, 100% { box-shadow: 0 0 6px rgb(143 224 189 / .6); } 50% { box-shadow: 0 0 16px rgb(143 224 189 / 1); } }

@media (max-width: 1180px) {
  .im-main { grid-template-columns: minmax(0, 1fr) 290px; }
  .im-content { grid-column: 1; grid-row: 1 / span 3; }
  .im-general { opacity: .45; right: -140px; }
  .im-nav a { padding: .35rem .3rem; font-size: .88rem; letter-spacing: .03em; }
}
@media (max-width: 900px) {
  .im-main { grid-template-columns: minmax(0, 1fr); }
  .im-content { grid-row: auto; order: -1; }
}
@media (max-width: 768px) {
  .im-beam, .im-general { display: none; }
  .im-hero { height: 480px; }
  .im-hero-art { background-image: url(https://assets.aetunga.com/themes/imperial/images/hero-m.webp?v=ed3eaf1f9d); }
  .im-hero-center { inset: 0; }
  .im-btn { min-width: 0; width: min(280px, 80vw); }
  .im-main { width: calc(100% - 1.5rem); }
  .im-side { margin-top: .6rem; }
}
@media (max-width: 520px) { .im-hero-art { background-image: url(https://assets.aetunga.com/themes/imperial/images/hero-s.webp?v=187171dd39); } }
@media (prefers-reduced-motion: reduce) {
  .im-lanterns img, .im-hero-art, .im-fireworks i, .im-general, .im-seal, .im-pearl { animation: none; }
}

/* ------------------------------------------------------------ performance
   Every animation here runs on the compositor (transform, translate, scale,
   opacity, filter). One that animates box-shadow or background-position runs
   on the main thread, and then the browser restyles every other running
   animation on each frame it draws, which is where the stutter came from. */
html[data-theme-pack='imperial'] body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: #1a0705 var(--tex, none) center top / 520px repeat; pointer-events: none; }
html[data-theme-pack='imperial'] body:has(.im[data-ready])::before { --tex: url(https://assets.aetunga.com/themes/imperial/images/silk.jpg?v=8425b34587); }
.im-pearl { position: relative; animation: none; }
.im-pearl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 16px rgb(143 224 189); opacity: 0; animation: im-breathe 2.2s ease-in-out infinite; pointer-events: none; }
.im-online.is-offline .im-pearl::after { display: none; }
@keyframes im-breathe { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .im-pearl::after { display: none; } }