/* =============================================================
   KiryuMakoto — partner page theme (views/creators/kiryumakoto.php)

   "Half Wolf. Half Dragon." Colours read off his art:
     obsidian #08090B · pitch #0E1013 · stone #15181D · iron #222630
     ember    #F59E2B (his shirt) · flame #E2701A · gold #D4A537
     pale     #F2D98B (the logo's highlight) · bone #EDE7DC · ash #9A9589
     blood    #7E2B22 (the coat lining) · dusk #B9A6D6 (his hair tips)
   Fonts (self-hosted, SIL Open Font License): Cinzel for the carved
   dark-fantasy headings, Barlow Condensed for card and meta type, Nunito
   to read.
   Motion: forge light that follows the pointer, embers rising, a sheen
   sweeping the logo like hot metal, a turning seal behind his art, and the
   pack opening. Loops stop for reduced motion and .perf-lite; the pack
   still opens.
   ============================================================= */

@font-face { font-family: 'Cinzel'; src: url('/assets/fonts/cinzel-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/assets/fonts/cinzel-900-latin.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body.cp-theme-kiryumakoto { background: #08090B; }

.km {
  --k-void: #08090B; --k-pitch: #0E1013; --k-stone: #15181D; --k-iron: #222630;
  --k-ember: #F59E2B; --k-flame: #E2701A; --k-gold: #D4A537; --k-pale: #F2D98B;
  --k-bone: #EDE7DC; --k-ash: #9A9589; --k-blood: #7E2B22; --k-dusk: #B9A6D6;
  --k-line: rgba(212, 165, 55, .18); --k-line2: rgba(212, 165, 55, .38);
  --k-card: rgba(18, 20, 25, .82);
  --k-display: 'Cinzel', 'Times New Roman', serif;
  --k-cond: 'Barlow Condensed', 'Nunito', system-ui, sans-serif;
  --k-ease: cubic-bezier(.22, 1, .36, 1);
  --k-spring: cubic-bezier(.34, 1.4, .64, 1);
  /* creator.css tokens, pointed at his palette for the shared join block */
  --pink: var(--k-flame); --purple: var(--k-iron); --ink: var(--k-bone); --ink2: #C9C3B6; --ink3: var(--k-ash);
  isolation: isolate;
  padding-top: 0;
  color: var(--k-bone);
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--k-void);
}
.km ::selection { background: var(--k-flame); color: #0B0B0D; }

/* ---------------- the forge ----------------
   One fixed layer: ember light that drifts with the pointer (--ax/--ay,
   kiryumakoto.js) over a faint rune grid, with three embers rising. */
.km-forge {
  --x: calc(var(--ax, 0) * 1px);
  --y: calc(var(--ay, 0) * 1px);
  position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  background-image:
    radial-gradient(48% 52% at calc(72% + var(--x)) calc(16% + var(--y)), rgba(245, 158, 43, .2), transparent 72%),
    radial-gradient(40% 44% at calc(14% - var(--x)) calc(62% - var(--y)), rgba(226, 112, 26, .13), transparent 72%),
    radial-gradient(60% 60% at calc(50% + var(--x)) 104%, rgba(126, 43, 34, .35), transparent 70%),
    linear-gradient(180deg, #0A0B0E 0%, #0E1013 50%, #08090B 100%);
}
.km-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212, 165, 55, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 165, 55, .05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.km-ember {
  position: absolute; bottom: -10vh; width: 3px; height: 3px; border-radius: 50%;
  background: var(--k-ember); box-shadow: 0 0 10px 2px rgba(245, 158, 43, .8);
  opacity: 0; animation: km-rise 11s linear infinite;
}
.km-ember--1 { left: 18%; animation-delay: -1s; }
.km-ember--2 { left: 54%; animation-duration: 15s; animation-delay: -6s; }
.km-ember--3 { left: 81%; animation-duration: 13s; animation-delay: -9s; }
@keyframes km-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
  10% { opacity: .9; }
  70% { opacity: .6; }
  100% { opacity: 0; transform: translate3d(28px, -108vh, 0) scale(1.1); }
}

/* ---------------- shared bits ---------------- */
.km-kick { display: flex; align-items: center; gap: 9px; font-family: var(--k-cond); font-weight: 700; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--k-gold); }
.km-title { margin-top: 8px; font-family: var(--k-display); font-weight: 900; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; letter-spacing: .01em; color: var(--k-bone); text-transform: uppercase; }
.km-title span { background: linear-gradient(100deg, var(--k-pale), var(--k-gold) 40%, var(--k-flame)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.km-panel { position: relative; border: 1px solid var(--k-line); background: var(--k-card); box-shadow: 0 30px 60px -44px #000, inset 0 1px 0 rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Cut corners, like a plate of armour. */
.km-panel, .km-village-card, .km-pack-panel { clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.km-sec { position: relative; padding-top: 96px; }
.km-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 30px; }
.km-sec-links { display: flex; gap: 10px; flex-wrap: wrap; }
.km-note { max-width: 46ch; font-size: 15px; font-weight: 600; color: var(--k-ash); }
.km-empty { padding: 28px; border: 1px dashed var(--k-line2); text-align: center; color: var(--k-ash); }
.km-link { padding: 9px 18px; border: 1px solid var(--k-line2); background: rgba(14, 16, 19, .8); font-family: var(--k-cond); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--k-gold) !important; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--k-spring); }
.km-link:hover { background: var(--k-gold); border-color: var(--k-gold); color: #0B0B0D !important; transform: translateY(-2px); }
.km-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.km-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border: 0; font-family: var(--k-cond); font-weight: 700; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: transform .35s var(--k-spring), box-shadow .35s var(--k-ease), background-color .3s, color .3s; }
.km-btn svg { width: 18px; height: 18px; fill: currentColor; }
.km-btn:hover { transform: translateY(-3px); }
.km-btn--ember { background: linear-gradient(135deg, #FFC46B, #F59E2B 45%, #D2650F); color: #14100A !important; box-shadow: 0 14px 30px -14px rgba(245, 158, 43, .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
.km-btn--ember:hover { box-shadow: 0 20px 36px -14px rgba(245, 158, 43, 1), 0 0 0 3px rgba(245, 158, 43, .18); }
.km-btn--ghost { background: rgba(237, 231, 220, .05); color: var(--k-bone) !important; box-shadow: inset 0 0 0 1.5px var(--k-line2); }
.km-btn--ghost:hover { background: rgba(212, 165, 55, .18); box-shadow: inset 0 0 0 1.5px var(--k-gold); }
.km-share { display: flex; gap: 8px; }
.km-share button { width: 48px; height: 48px; border: 0; background: rgba(237, 231, 220, .05); color: var(--k-gold); font-size: 17px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--k-line2); transition: transform .35s var(--k-spring), background-color .3s, color .3s; }
.km-share button:hover { background: var(--k-flame); color: #0B0B0D; transform: translateY(-2px); }
.km-btn:focus-visible, .km-link:focus-visible, .km-soc:focus-visible, .km-share button:focus-visible, .km-thumb:focus-visible,
.km-code-copy:focus-visible, .km-pack:focus-visible, .km-card:focus-visible { outline: 3px solid var(--k-ember); outline-offset: 3px; }

.cp-js .km [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(30px); }
.km [data-reveal] { transition: opacity 1s var(--k-ease), transform 1s var(--k-ease); }

/* ---------------- hero ---------------- */
.km-hero { position: relative; overflow: hidden; min-height: min(100svh, 920px); padding: 132px 0 64px; display: flex; align-items: center; }
.km-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px 40px; align-items: center; width: 100%; }
.km-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--k-line); background: rgba(14, 16, 19, .7); font-family: var(--k-cond); font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--k-ash); animation: km-rise-in .9s var(--k-ease) .05s both; }
.km-kicker span { color: var(--k-ember); }

/* The logo: a blurred copy burns behind it, a sheen sweeps across the front. */
.km-logo { position: relative; margin: 18px 0 0 -6px; line-height: 0; font-family: var(--k-display); font-size: 54px; color: var(--k-bone); }
.km-logo.has-art { isolation: isolate; }
.km-logo-art { position: relative; z-index: 2; width: min(620px, 100%); height: auto; animation: km-logo-in 1.1s var(--k-ease) .1s both; }
.km-logo-glow { position: absolute; z-index: 1; left: 0; top: 0; width: min(620px, 100%); pointer-events: none; }
.km-logo-glow img { width: 100%; height: auto; filter: blur(16px) saturate(1.6) brightness(1.5); opacity: .55; animation: km-forge-pulse 4.5s ease-in-out infinite; }
.km-logo-sheen {
  position: absolute; z-index: 3; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 233, 176, .55) 47%, rgba(255, 255, 255, .8) 50%, rgba(255, 233, 176, .45) 53%, transparent 62%);
  background-size: 260% 100%; background-position: 200% 0;
  animation: km-sheen 6.5s ease-in-out 1.4s infinite;
  /* Masked by the logo art itself (set inline in the template, since the
     processed filename is only known at render), so the sheen runs through
     the letterforms instead of over a rectangle. */
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
@keyframes km-sheen { 0% { background-position: 210% 0; } 45%, 100% { background-position: -60% 0; } }
@keyframes km-forge-pulse { 0%, 100% { opacity: .38; filter: blur(16px) saturate(1.5) brightness(1.35); } 50% { opacity: .68; filter: blur(22px) saturate(1.8) brightness(1.7); } }
@keyframes km-logo-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes km-rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.km-tagline { margin-top: 16px; font-family: var(--k-display); font-weight: 700; font-size: clamp(20px, 2.3vw, 30px); letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(100deg, var(--k-pale), var(--k-gold) 45%, var(--k-flame)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: km-rise-in .9s var(--k-ease) .35s both; }
.km-lede { max-width: 52ch; margin-top: 14px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 600; line-height: 1.7; color: #C9C3B6; animation: km-rise-in .9s var(--k-ease) .5s both; }
.km-hero .km-actions { margin-top: 26px; animation: km-rise-in .9s var(--k-ease) .62s both; }
.km-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; animation: km-rise-in .9s var(--k-ease) .74s both; }
.km-stat { min-width: 132px; padding: 12px 18px; border: 1px solid var(--k-line); background: rgba(14, 16, 19, .66); }
.km-stat b { display: block; font-family: var(--k-display); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--k-pale); }
.km-stat span { display: block; margin-top: 5px; font-family: var(--k-cond); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--k-ash); }

.km-hero-art { position: relative; justify-self: center; width: min(420px, 100%); animation: km-rise-in 1.2s var(--k-ease) .3s both; }
.km-hero-figure { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(245, 158, 43, .18)); }
/* The seal: a turning ring of gold behind him. */
.km-seal {
  position: absolute; z-index: 0; left: 50%; top: 46%; width: min(150%, 560px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 8%, rgba(212, 165, 55, .5) 9%, transparent 10% 24%, rgba(212, 165, 55, .5) 25%, transparent 26% 48%, rgba(212, 165, 55, .35) 49%, transparent 50% 74%, rgba(212, 165, 55, .5) 75%, transparent 76%),
    radial-gradient(closest-side, rgba(245, 158, 43, .16), transparent 72%);
  mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 72%, transparent 74%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 72%, transparent 74%);
  animation: km-turn 48s linear infinite;
}
@keyframes km-turn { to { rotate: 360deg; } }

/* ---------------- band ---------------- */
.km-band { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--k-line2); border-bottom: 1px solid var(--k-line2); background: linear-gradient(90deg, #0C0D10, #1A1206 50%, #0C0D10); }
.km-band-track { display: flex; align-items: center; width: max-content; animation: km-marquee 42s linear infinite; }
.km-band span { padding: 12px 14px; font-family: var(--k-display); font-weight: 700; font-size: 15px; letter-spacing: .2em; color: var(--k-bone); white-space: nowrap; }
.km-band i { font-style: normal; color: var(--k-ember); }
@keyframes km-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------------- about ---------------- */
.km-about { display: grid; grid-template-columns: .78fr 1.3fr .82fr; gap: 26px; align-items: start; }
.km-model { position: relative; }
.km-model img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
.km-model-floor { position: absolute; left: 8%; right: 8%; bottom: -6px; height: 30px; background: radial-gradient(closest-side, rgba(245, 158, 43, .4), transparent 70%); filter: blur(8px); }
.km-about-copy { padding: 34px 32px; }
.km-about-copy .km-title { margin-bottom: 18px; font-size: clamp(26px, 3.2vw, 40px); }
.km-about-copy p:not(.km-kick) { font-size: 16px; font-weight: 600; line-height: 1.8; color: #C3BDB1; }
.km-about-copy p.km-first { font-size: 18px; font-weight: 700; line-height: 1.65; color: var(--k-bone); }
.km-about-copy p + p { margin-top: 12px; }
.km-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.km-tag { padding: 6px 13px; background: rgba(212, 165, 55, .1); box-shadow: inset 0 0 0 1px var(--k-line2); font-family: var(--k-cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--k-pale); }
.km-tag:nth-child(3n) { background: rgba(226, 112, 26, .12); }
.km-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; margin-top: 24px; }
.km-soc { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--k-line); background: rgba(237, 231, 220, .03); font-weight: 700; font-size: 14px; color: var(--k-bone) !important; transition: transform .35s var(--k-spring), background-color .3s, border-color .3s; }
.km-soc:hover { transform: translateY(-3px); background: rgba(245, 158, 43, .14); border-color: var(--k-gold); }
.km-soc .i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--c, var(--k-iron)); color: var(--k-bone); font-size: 14px; }
.km-soc .i svg { width: 15px; height: 15px; fill: currentColor; }
.km-soc.twitch { --c: #6441A5; } .km-soc.youtube { --c: #8E2116; } .km-soc.tiktok { --c: #17555C; } .km-soc.x { --c: #2A2E38; }
.km-soc.link { --c: #7A5A16; }
.km-facts { margin: 0; padding: 16px 24px; }
.km-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--k-line); }
.km-fact:last-child { border-bottom: 0; }
.km-fact dt { font-family: var(--k-cond); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--k-ash); white-space: nowrap; }
.km-fact dd { margin: 0; font-weight: 700; font-size: 14.5px; color: var(--k-bone); text-align: right; }

/* ---------------- media ---------------- */
.km-vods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.km-media { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--k-card); border: 1px solid var(--k-line); transition: transform .5s var(--k-ease), box-shadow .5s var(--k-ease), border-color .4s; }
.km-media:hover { transform: translateY(-5px); border-color: var(--k-line2); box-shadow: 0 30px 50px -32px rgba(245, 158, 43, .6); }
.km-player { position: relative; aspect-ratio: 16 / 9; background: var(--k-stone); }
.km-media--tall .km-player { aspect-ratio: 9 / 16; }
.km-thumb { position: absolute; inset: 0; display: block; overflow: hidden; }
.km-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform .9s var(--k-ease), filter .5s; }
.km-media:hover .km-thumb img { transform: scale(1.05); filter: none; }
.km-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 9, 11, .75)); }
.km-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; background: rgba(8, 9, 11, .6); color: var(--k-bone); box-shadow: inset 0 0 0 2px rgba(237, 231, 220, .6); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform .45s var(--k-spring), background-color .3s, color .3s; }
.km-play svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.km-media:hover .km-play { transform: scale(1.12); background: var(--k-ember); color: #14100A; }
.km-len { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 9px; background: rgba(8, 9, 11, .85); font-family: var(--k-cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; color: var(--k-bone); }
.km-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.km-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; color: var(--k-gold); background: radial-gradient(circle, var(--k-iron), var(--k-pitch)); }
.km-media-meta { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.km-chip { align-self: flex-start; padding: 3px 10px; font-family: var(--k-cond); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: rgba(100, 65, 165, .3); color: #C6B3F0; }
.km-chip.highlight { background: rgba(212, 165, 55, .18); color: var(--k-pale); }
.km-chip.clip { background: rgba(226, 112, 26, .2); color: #F6BE7E; }
.km-chip.yt { background: rgba(142, 33, 22, .3); color: #F0A79A; }
.km-chip.tiktok { background: rgba(23, 85, 92, .35); color: #8FD8E0; }
.km-media-title { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 15px; line-height: 1.4; letter-spacing: 0; color: var(--k-bone); text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.km-media-sub { font-family: var(--k-cond); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--k-ash); }
.km-sub { margin: 52px 0 18px; font-family: var(--k-display); font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-bone); }
.km-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; margin: 0 -12px; padding: 8px 12px 26px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(212, 165, 55, .5) transparent; }
.km-row > * { scroll-snap-align: start; }
.km-row--tall { grid-auto-columns: 226px; }

/* ---------------- the pack ---------------- */
.km-pack-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.km-pack-panel { position: relative; display: grid; place-items: center; padding: 40px 22px; border: 1px solid var(--k-line); background:
    radial-gradient(70% 60% at 50% 0%, rgba(245, 158, 43, .1), transparent 70%),
    repeating-linear-gradient(135deg, rgba(212, 165, 55, .035) 0 3px, transparent 3px 9px),
    var(--k-card); }

/* The unopened booster. */
.km-pack { position: relative; width: min(290px, 74vw); aspect-ratio: 5 / 7; padding: 0; border: 0; cursor: pointer; background:
    linear-gradient(160deg, #1B1206 0%, #2A1B08 32%, #120D08 60%, #291A07 100%);
  box-shadow: 0 30px 60px -30px #000, inset 0 0 0 2px rgba(212, 165, 55, .5), inset 0 0 60px rgba(245, 158, 43, .12);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: transform .5s var(--k-spring), box-shadow .5s var(--k-ease);
  animation: km-pack-idle 5s ease-in-out infinite;
}
.km-pack:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 40px 70px -30px #000, inset 0 0 0 2px var(--k-gold), inset 0 0 80px rgba(245, 158, 43, .22); }
@keyframes km-pack-idle { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
.km-pack-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, rgba(245, 158, 43, .5) 45%, rgba(255, 245, 220, .8) 50%, rgba(212, 165, 55, .5) 56%, transparent 72%);
  background-size: 250% 100%; animation: km-foil 5s linear infinite; }
@keyframes km-foil { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.km-pack-mark { position: absolute; left: 50%; top: 42%; width: 74%; translate: -50% -50%; font-size: 40px; color: var(--k-gold); }
.km-pack-mark img { width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(245, 158, 43, .6)); }
.km-pack-label { position: absolute; left: 0; right: 0; bottom: 54px; font-family: var(--k-display); font-weight: 700; font-size: 17px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-pale); }
.km-pack-hint { position: absolute; left: 0; right: 0; bottom: 24px; font-family: var(--k-cond); font-weight: 600; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--k-ash); }
.km-pack-tear { position: absolute; left: 0; right: 0; top: 12%; height: 2px; background: repeating-linear-gradient(90deg, rgba(212, 165, 55, .8) 0 8px, transparent 8px 16px); }
.km-pack.is-ripping { animation: km-pack-rip .55s var(--k-ease) forwards; }
@keyframes km-pack-rip {
  35% { transform: scale(1.06) rotate(1.5deg); box-shadow: 0 0 90px 10px rgba(245, 158, 43, .55), inset 0 0 0 2px var(--k-gold); }
  100% { opacity: 0; transform: scale(.9) translateY(-14px); }
}

/* The five cards. */
.km-pull { width: 100%; }
.km-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 940px; margin: 0 auto; }
.km-card {
  position: relative; aspect-ratio: 5 / 7.4; padding: 0; border: 0; background: transparent; cursor: pointer;
  perspective: 900px; transform-style: preserve-3d;
  animation: km-card-in .5s var(--k-spring) both;
}
.km-card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--k-ease); }
.km-card.is-flipped .km-card-in { transform: rotateY(180deg); }
.km-card-back, .km-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.km-card-back {
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(245, 158, 43, .25), transparent 70%),
    repeating-linear-gradient(45deg, rgba(212, 165, 55, .08) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #1A1207, #0C0D10);
  box-shadow: inset 0 0 0 2px rgba(212, 165, 55, .45);
  display: grid; place-items: center;
}
.km-card-back::after { content: '✦'; font-size: 30px; color: var(--k-gold); text-shadow: 0 0 16px rgba(245, 158, 43, .8); }
.km-card-face { transform: rotateY(180deg); background: var(--k-pitch); box-shadow: inset 0 0 0 2px var(--r-edge, rgba(154, 149, 137, .5)); display: flex; flex-direction: column; padding: 8px; gap: 7px; }
.km-card-art { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.km-card-art img { width: 100%; height: 100%; object-fit: cover; }
.km-card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(8, 9, 11, .5)); }
.km-card-meta { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 0 3px 2px; }
.km-card-kind { font-family: var(--k-cond); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--r-ink, var(--k-gold)); }
.km-card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--k-display); font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--k-bone); }
.km-card-stat { margin-top: auto; font-family: var(--k-cond); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--k-ash); }
.km-card-rarity { position: absolute; z-index: 2; top: 7px; left: 7px; padding: 2px 7px; font-family: var(--k-cond); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--r-edge, #333); color: #0B0B0D; }
/* Rarities: common iron, rare silver-blue, holo gold foil, legendary ember. */
.km-card[data-rarity="common"]    { --r-edge: rgba(154, 149, 137, .55); --r-ink: #C9C3B6; }
.km-card[data-rarity="rare"]      { --r-edge: #7F9BC4; --r-ink: #A9C3E6; }
.km-card[data-rarity="holo"]      { --r-edge: var(--k-gold); --r-ink: var(--k-pale); }
.km-card[data-rarity="legendary"] { --r-edge: var(--k-ember); --r-ink: #FFD79A; }
.km-card[data-rarity="holo"] .km-card-face,
.km-card[data-rarity="legendary"] .km-card-face { box-shadow: inset 0 0 0 2px var(--r-edge), 0 0 26px -4px var(--r-edge); }
/* The foil sheen only the good pulls get. */
.km-card[data-rarity="holo"] .km-card-art::before,
.km-card[data-rarity="legendary"] .km-card-art::before {
  content: ''; position: absolute; inset: -30%; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge;
  background: conic-gradient(from 0deg, #4b2f00, #7a5a00, #2a3a5e, #6a2a4a, #7a5a00, #4b2f00);
  opacity: .5; animation: km-holo 7s linear infinite;
}
@keyframes km-holo { to { rotate: 360deg; } }
.km-card.is-new .km-card-face::after {
  content: 'NEW'; position: absolute; z-index: 3; right: 7px; top: 7px; padding: 2px 6px;
  font-family: var(--k-cond); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; background: var(--k-bone); color: #0B0B0D;
}
@keyframes km-card-in { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
.km-pull-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.km-pull-line { font-family: var(--k-cond); font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--k-pale); }

/* The binder. */
.km-binder { padding: 26px 24px; }
.km-binder h3 { margin: 6px 0 10px; font-family: var(--k-display); font-weight: 700; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-bone); }
.km-binder-count { font-family: var(--k-cond); font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--k-ash); }
.km-binder-count b { color: var(--k-pale); font-size: 20px; }
.km-binder-bar { height: 6px; margin: 10px 0 16px; background: rgba(237, 231, 220, .08); overflow: hidden; }
.km-binder-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--k-flame), var(--k-gold)); transition: width .6s var(--k-ease); }
.km-binder-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.km-binder-list li { padding: 4px 9px; background: rgba(237, 231, 220, .05); box-shadow: inset 0 0 0 1px var(--k-line); font-family: var(--k-cond); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #C3BDB1; }
.km-binder-list li[data-rarity="holo"] { box-shadow: inset 0 0 0 1px var(--k-gold); color: var(--k-pale); }
.km-binder-list li[data-rarity="legendary"] { box-shadow: inset 0 0 0 1px var(--k-ember); color: #FFD79A; }
.km-binder-empty { color: var(--k-ash) !important; }
.km-binder-note { margin-top: 14px; font-size: 12.5px; color: var(--k-ash); }
.km-binder-reset { display: inline-block; margin-top: 12px; padding: 7px 14px; border: 1px solid var(--k-line); background: none; font-size: 13px; cursor: pointer; }

/* ---------------- shop ---------------- */
.km .km-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.km .km-gal .gl-card { min-width: 0; }
.km .km-gal .gl-media img { width: 100%; height: 100%; object-fit: cover; }
.km .gal-glass::before { background: radial-gradient(38% 30% at 18% 22%, rgba(245, 158, 43, .22), transparent 70%), radial-gradient(34% 28% at 82% 48%, rgba(212, 165, 55, .12), transparent 70%); }
.km .gl-card::before { background: linear-gradient(140deg, #D4A537, #F59E2B 45%, #7E2B22 80%, #D4A537); }
.km .gl-name { font-family: var(--k-display); font-weight: 700; letter-spacing: .04em; }
.km .gl-price { font-family: var(--k-cond); font-size: 1.1em; }
.km .gal-glass .gl-by { color: var(--k-gold); }
.km .gal-glass .gl-buy { background: linear-gradient(135deg, #FFC46B, #F59E2B 50%, #D2650F); color: #14100A; font-family: var(--k-cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.km .gal-glass .gl-buy:hover { background: var(--k-gold); color: #14100A; }
.km .gl-chip i { background: var(--k-flame); color: #14100A; }
.km-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; padding: 18px 24px; border: 1px solid var(--k-line2); background: linear-gradient(135deg, rgba(245, 158, 43, .12), rgba(126, 43, 34, .12)); }
.km-codes-title { font-family: var(--k-display); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-bone); }
.km-codes-title span { display: block; font-family: 'Nunito', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--k-ash); }
.km-code { display: flex; align-items: center; gap: 14px; }
.km-code-label { display: block; font-weight: 800; font-size: 15px; color: var(--k-bone) !important; white-space: nowrap; }
a.km-code-label:hover { color: var(--k-ember) !important; }
.km-code-note { display: block; font-size: 12.5px; font-weight: 600; color: var(--k-ash); }
.km-code-copy { display: inline-flex; align-items: center; gap: 8px; padding: 7px 7px 7px 12px; border: 1px dashed var(--k-gold); background: rgba(8, 9, 11, .6); color: var(--k-pale); font: 700 14px/1 var(--k-cond); letter-spacing: .14em; cursor: pointer; transition: transform .35s var(--k-spring), background-color .3s, border-style .3s; }
.km-code-copy i { padding: 4px 8px; background: var(--k-gold); color: #14100A; font: 700 11px/1 var(--k-cond); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.km-code-copy:hover { transform: scale(1.03); background: rgba(245, 158, 43, .18); border-style: solid; }
.km-code-copy.is-copied i { background: var(--k-ember); }

/* ---------------- village ---------------- */
.km-village { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch; }
.km-village-card { position: relative; overflow: hidden; padding: 44px 40px 36px; border: 1px solid var(--k-line2); background: radial-gradient(70% 70% at 100% 0%, rgba(245, 158, 43, .16), transparent 62%), linear-gradient(150deg, #191108, #101215 60%, #0B0C0F); }
.km-village-card h2 { margin: 8px 0 12px; max-width: 14ch; font-family: var(--k-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--k-bone); }
.km-village-text { max-width: 46ch; font-size: 16px; font-weight: 600; line-height: 1.75; color: #C3BDB1; }
.km-village-card .km-actions { margin-top: 22px; }
.km-rules-title { margin: 28px 0 10px; font-family: var(--k-cond); font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--k-ash); }
.km-rules { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.km-rules li { padding: 7px 13px; border: 1px solid var(--k-line); background: rgba(237, 231, 220, .04); font-size: 13.5px; font-weight: 700; color: var(--k-bone); }
.km-rules li::before { content: '✦ '; color: var(--k-ember); }
.km-credits { padding: 28px 26px; }
.km-credits h3 { font-family: var(--k-display); font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-bone); }
.km-credits .lead { margin: 6px 0 14px; font-size: 14.5px; font-weight: 600; color: var(--k-ash); }
.km-credit { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--k-line); }
.km-credit > span:first-child { font-family: var(--k-cond); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--k-ash); }
.km-credit-names { display: flex; flex-wrap: wrap; gap: 6px; }
.km-credit-names a, .km-credit-names b { font-weight: 800; font-size: 14px; color: var(--k-gold) !important; }
.km-credit-names a:hover { color: var(--k-ember) !important; }

/* ---------------- join DRXP (shared markup, his colours) ---------------- */
.km .cp-join { margin-top: 96px; }
.km .cp-join-card { background: linear-gradient(135deg, #2A1B08, #171A20 60%, #0E1013); box-shadow: inset 0 0 0 1px var(--k-line2), 0 30px 70px -30px rgba(245, 158, 43, .4); }
.km .cp-join-card::before { content: '✦'; color: rgba(245, 158, 43, .12); }
.km .cp-join-card h2 { font-family: var(--k-display); font-weight: 900; letter-spacing: .02em; }
.km .cp-kick { font-family: var(--k-cond); font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--k-ember); }
.km .cp-btn { font-family: var(--k-cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.km .cp-btn-white { background: linear-gradient(135deg, #FFC46B, #F59E2B); color: #14100A; }
.km .cp-num b { font-family: var(--k-display); color: var(--k-pale); }

.km-toast { position: fixed; z-index: 95; left: 50%; bottom: 28px; padding: 12px 22px; background: linear-gradient(135deg, #FFC46B, #F59E2B); color: #14100A; font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); opacity: 0; transform: translate(-50%, 20px); transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.34, 1.4, .64, 1); pointer-events: none; }
.km-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- header: forged glass ---------------- */
body.cp-theme-kiryumakoto .cpnav { font-family: 'Barlow Condensed', 'Nunito', system-ui, sans-serif; }
body.cp-theme-kiryumakoto .cpnav-in { background: rgba(8, 9, 11, .68); border-color: rgba(212, 165, 55, .22); box-shadow: 0 14px 34px -20px rgba(245, 158, 43, .5), inset 0 1px 0 rgba(255, 255, 255, .05); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-kiryumakoto .cpnav-in { background: rgba(8, 9, 11, .96); } }
.perf-lite body.cp-theme-kiryumakoto .cpnav-in { background: rgba(8, 9, 11, .96); }
body.cp-theme-kiryumakoto .cpnav-who { color: var(--k-bone, #EDE7DC); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-left-color: rgba(212, 165, 55, .25); }
body.cp-theme-kiryumakoto .cpnav-av { border-color: #D4A537; box-shadow: 0 0 12px -4px #F59E2B; }
body.cp-theme-kiryumakoto .cpnav-av img { object-position: 50% 10%; transform-origin: 50% 10%; transform: scale(1.7); }
body.cp-theme-kiryumakoto .cpnav-links a { color: #C3BDB1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
body.cp-theme-kiryumakoto .cpnav-links a:hover { color: #F59E2B; background: rgba(237, 231, 220, .05); }
body.cp-theme-kiryumakoto .cpnav-links a[aria-current="true"] { background: linear-gradient(135deg, #F59E2B, #D2650F); color: #14100A; box-shadow: 0 6px 16px -8px #F59E2B; }
body.cp-theme-kiryumakoto .cpnav-cart { background: linear-gradient(135deg, #FFC46B, #F59E2B); color: #14100A; box-shadow: 0 8px 18px -10px #F59E2B; }
body.cp-theme-kiryumakoto .cpnav-cart:hover { background: #D4A537; }
body.cp-theme-kiryumakoto .cpnav-account { background: rgba(237, 231, 220, .06); color: #F59E2B; }
body.cp-theme-kiryumakoto .cpnav-account:hover { background: #F59E2B; color: #14100A; }
body.cp-theme-kiryumakoto .cpnav-burger { background: rgba(237, 231, 220, .06); }
body.cp-theme-kiryumakoto .cpnav-burger span { background: #F59E2B; }
body.cp-theme-kiryumakoto .srch { --srch-acc: #F59E2B; --srch-acc-soft: rgba(245, 158, 43, .16); --srch-bg: rgba(14, 16, 19, .95); }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .km-about { grid-template-columns: .9fr 1.1fr; }
  .km-facts { grid-column: 1 / -1; }
  .km-row { grid-auto-columns: minmax(280px, calc((100% - 40px) / 3)); }
  .km-pack-stage { grid-template-columns: 1fr; }
  .km-cards { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1024px) {
  .km-hero-grid { grid-template-columns: 1fr 1fr; }
  .km-village { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .km .km-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .km-hero { min-height: 0; padding: 150px 0 52px; }
  .km-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .km-hero-art { width: min(330px, 78%); }
  .km-about { grid-template-columns: 1fr; }
  .km-model { max-width: 330px; margin: 0 auto; }
  .km-sec { padding-top: 76px; }
  .km-vods { grid-template-columns: 1fr; }
  .km-pack-panel { min-height: 0; padding: 26px 18px; }
  .km-village-card { padding: 34px 22px 30px; }
}
@media (max-width: 560px) {
  .km .km-gal { grid-template-columns: 1fr; }
  .km-about-copy, .km-credits, .km-binder { padding: 24px 20px; }
  .km-actions .km-btn { flex: 1 1 auto; justify-content: center; }
  .km-stat { flex: 1 1 42%; min-width: 0; }
  .km-row { grid-auto-columns: 84%; }
  .km-row--tall { grid-auto-columns: 62%; }
  .km-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .km-codes { padding: 16px 18px; }
  .km-logo { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .km-ember, .km-seal, .km-logo-sheen, .km-logo-glow img, .km-band-track, .km-pack, .km-pack-foil,
  .km-card, .km-card-in, .km-card-art::before, .km-hero * { animation: none !important; transition: none !important; }
  .cp-js .km [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .km-ember { display: none; }
}
.perf-lite .km-ember, .perf-lite .km-seal, .perf-lite .km-logo-sheen, .perf-lite .km-logo-glow img,
.perf-lite .km-band-track, .perf-lite .km-pack-foil, .perf-lite .km-card-art::before { animation: none; }
.perf-lite .km-ember { display: none; }
.perf-lite .km-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The page's scrollbars in this palette (site.css reads --scroll-acc off
   <html>, which only the literal colour can reach from here). */
html:has(> body.cp-theme-kiryumakoto) { --scroll-acc: #F59E2B; }