/*
 * それ俺の肉！ Official Site
 * Visual direction: a charcoal-grill battle poster bound like a yakiniku menu.
 */

:root {
  --ink: #17100d;
  --ink-soft: #2b1a14;
  --charcoal: #0c0908;
  --paper: #f2ead8;
  --paper-deep: #e1d2b3;
  --white: #fff9ec;
  --muted: #a69784;
  --line: rgba(91, 57, 35, 0.23);
  --red: #d83928;
  --red-bright: #f14b31;
  --orange: #f28b24;
  --gold: #d8a34b;
  --gold-pale: #f2d38a;
  --green: #586a3d;
  --sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --display: Impact, "Arial Narrow", var(--sans);
  --shell: min(1160px, calc(100vw - 64px));
  --header-h: 86px;
  --ease: cubic-bezier(.2, .72, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 22px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body::selection { color: var(--white); background: var(--red); }
body.is-menu-open, body.is-dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { min-width: 24px; min-height: 24px; border: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin-top: 0; }

.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 10px 18px;
  color: #fff;
  background: #111;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
:focus { scroll-margin-top: calc(var(--header-h) + 20px); scroll-margin-bottom: 50px; }
:focus-visible { outline: 3px solid #ffd76a; outline-offset: 4px; }
main:focus { outline: none; }

.site-header {
  position: fixed;
  z-index: 200;
  inset: 0 0 auto;
  height: var(--header-h);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(8,5,4,.72), transparent);
  transition: height .35s var(--ease), background .35s, border-color .35s;
}
.site-header.is-scrolled,
.site-header--solid {
  height: 72px;
  border-bottom-color: rgba(218,166,80,.28);
  background: rgba(15,9,7,.94);
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.site-header__inner {
  display: flex;
  width: min(1400px, calc(100vw - 48px));
  height: 100%;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}
.site-brand { display: flex; align-items: center; gap: 11px; }
.site-brand img { width: 152px; height: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.site-brand > span {
  padding-left: 11px;
  color: var(--gold-pale);
  border-left: 1px solid rgba(255,255,255,.3);
  font: 700 9px/1 var(--sans);
  letter-spacing: .24em;
}
.primary-nav { display: flex; height: 100%; align-items: center; gap: 28px; }
.primary-nav > a:not(.nav-play) {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  gap: 6px;
  color: rgba(255,249,236,.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.primary-nav > a:not(.nav-play)::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--red-bright);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s var(--ease);
}
.primary-nav > a:not(.nav-play):hover::after,
.primary-nav > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.primary-nav > a > span { color: var(--gold); font: 700 8px/1 var(--sans); }
.nav-play {
  display: flex;
  min-height: 42px;
  padding: 0 17px 0 19px;
  align-items: center;
  gap: 16px;
  color: #1a0c07;
  background: var(--gold-pale);
  font-size: 12px;
  font-weight: 900;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background .2s, transform .2s;
}
.nav-play:hover { background: #fff2bf; transform: translateY(-2px); }
.nav-play span { font-size: 18px; }
.nav-toggle { display: none; color: #fff; background: none; }

.button {
  position: relative;
  display: inline-flex;
  min-height: 62px;
  padding: 10px 24px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform .25s var(--ease), filter .25s;
}
.button::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22), transparent 70%);
  content: "";
  transform: translateX(-120%);
  transition: transform .55s var(--ease);
}
.button:hover { transform: translateY(-3px); filter: saturate(1.15); }
.button:hover::before { transform: translateX(120%); }
.button > * { position: relative; z-index: 1; }
.button__kicker { font: 800 8px/1 var(--sans); letter-spacing: .18em; opacity: .72; }
.button--fire {
  min-width: 250px;
  color: #fff9e9;
  background: linear-gradient(130deg, #a91f19, var(--red-bright) 55%, #e87522);
  box-shadow: 0 12px 34px rgba(206,48,32,.32), inset 0 1px rgba(255,255,255,.25);
}
.button--fire b { margin-left: auto; font-size: 21px; }
.button--ghost { min-width: 190px; color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(7,5,4,.35); backdrop-filter: blur(7px); }
.button--large { min-height: 76px; min-width: 320px; padding-inline: 28px; }
.text-link {
  display: inline-flex;
  padding-bottom: 7px;
  align-items: center;
  gap: 36px;
  color: var(--red);
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  font-weight: 900;
}
.text-link span { font-size: 21px; transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }
.text-link--light { color: var(--gold-pale); }

.section { position: relative; padding-block: 128px; }
.section-heading__index {
  margin-bottom: 28px;
  color: var(--red);
  font: 900 11px/1 var(--sans);
  letter-spacing: .2em;
}
.section-heading__index::before { display: inline-block; width: 34px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; content: ""; }
.section-heading h2 {
  margin-bottom: 28px;
  font: 700 clamp(42px, 5vw, 74px)/1.24 var(--serif);
  letter-spacing: -.05em;
}
.section-heading h2 em { color: var(--red); font-style: normal; }
.section-heading > p:last-child { max-width: 40em; color: #5b5049; font-size: 14px; }
.section-heading--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.section-heading--row > p { margin-bottom: 36px; }
.section-heading--light { color: var(--white); }
.section-heading--light .section-heading__index { color: var(--gold-pale); }
.section-heading--light h2 em { color: var(--gold-pale); }
.section-heading--light > p:last-child { color: rgba(255,249,236,.73); }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Hero */
.hero {
  position: relative;
  display: grid;
  min-height: 760px;
  height: min(1000px, 100svh);
  overflow: hidden;
  align-items: center;
  color: var(--white);
  background: #100908;
}
.hero__media, .hero__image, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { overflow: hidden; }
.hero__image {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.15s var(--ease), transform 7s linear;
}
.hero__image.is-active { opacity: 1; transform: scale(1.09); }
.hero__shade {
  background:
    linear-gradient(90deg, rgba(6,4,3,.84) 0%, rgba(10,5,3,.42) 44%, rgba(5,3,2,.1) 69%, rgba(5,3,2,.52) 100%),
    linear-gradient(180deg, rgba(7,4,3,.42), transparent 34%, rgba(6,4,3,.7));
}
.hero__frame { position: absolute; inset: 104px 28px 26px; pointer-events: none; }
.hero__frame span { position: absolute; width: 44px; height: 44px; border-color: rgba(239,197,112,.5); }
.hero__frame span:nth-child(1) { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.hero__frame span:nth-child(2) { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.hero__frame span:nth-child(3) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
.hero__frame span:nth-child(4) { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.hero__content { position: relative; z-index: 2; padding-top: 72px; }
.hero__eyebrow { display: flex; margin-bottom: 20px; align-items: center; gap: 13px; color: var(--gold-pale); font: 800 10px/1 var(--sans); letter-spacing: .28em; }
.hero__eyebrow span { padding: 6px 8px; color: #1a0a05; background: var(--gold-pale); letter-spacing: .15em; }
.hero__logo-wrap { width: clamp(390px, 46vw, 670px); margin: 0 0 3px -20px; }
.hero__logo { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.hero__catch { margin-bottom: 16px; font: 700 clamp(30px, 3.6vw, 54px)/1.2 var(--serif); letter-spacing: .06em; text-shadow: 0 3px 14px #000; }
.hero__catch em { color: #ffb23f; font-style: normal; }
.hero__lead { margin-bottom: 31px; color: rgba(255,249,236,.82); font: 600 14px/1.9 var(--serif); letter-spacing: .04em; text-shadow: 0 2px 8px #000; }
.hero__actions { display: flex; align-items: stretch; gap: 12px; }
.hero__facts {
  position: absolute;
  z-index: 3;
  right: 55px;
  bottom: 44px;
  display: flex;
  margin: 0;
  color: rgba(255,255,255,.9);
  background: rgba(10,6,4,.63);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(10px);
}
.hero__facts div { min-width: 118px; padding: 13px 18px; border-right: 1px solid rgba(255,255,255,.14); }
.hero__facts div:last-child { border-right: 0; }
.hero__facts dt { margin-bottom: 5px; color: var(--gold); font: 800 8px/1 var(--sans); letter-spacing: .16em; }
.hero__facts dd { margin: 0; font: 800 13px/1 var(--sans); }
.hero__slide-control { position: absolute; z-index: 3; top: 47%; right: 42px; color: #fff; transform: translateY(-50%); }
.hero__slide-control > p { display: flex; margin-bottom: 12px; align-items: center; gap: 8px; font: 700 9px/1 var(--sans); }
.hero__slide-control > p i { width: 23px; height: 1px; background: rgba(255,255,255,.55); }
.hero__slide-control > div { display: grid; gap: 8px; }
.hero__slide-control button { position: relative; width: 36px; height: 24px; padding: 0; background: transparent; transition: width .2s; }
.hero__slide-control button::after { position: absolute; top: 50%; right: 0; left: 0; height: 3px; background: rgba(255,255,255,.35); content: ""; transform: translateY(-50%); transition: background .2s; }
.hero__slide-control button.is-active { width: 52px; }
.hero__slide-control button.is-active::after { background: var(--orange); }
.hero__scroll { position: absolute; z-index: 4; bottom: 29px; left: 36px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); font: 700 8px/1 var(--sans); letter-spacing: .18em; transform: rotate(-90deg); transform-origin: left center; }
.hero__scroll i { position: relative; width: 50px; height: 1px; overflow: hidden; background: rgba(255,255,255,.3); }
.hero__scroll i::after { position: absolute; inset: 0; background: var(--orange); content: ""; animation: scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line { from { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* World */
.world-section {
  overflow: hidden;
  background:
    linear-gradient(rgba(99,66,39,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,66,39,.055) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
}
.world-section::before {
  position: absolute;
  top: -140px;
  left: -130px;
  width: 410px;
  aspect-ratio: 1;
  border: 1px solid rgba(176,39,28,.16);
  border-radius: 50%;
  box-shadow: inset 0 0 0 44px var(--paper), inset 0 0 0 45px rgba(176,39,28,.13), inset 0 0 0 105px var(--paper), inset 0 0 0 106px rgba(176,39,28,.1);
  content: "";
}
.world-section__smoke { position: absolute; top: 15%; right: -10%; width: 40%; height: 60%; opacity: .18; filter: blur(35px); background: radial-gradient(ellipse, #fff 0 12%, transparent 65%); transform: rotate(-16deg); }
.world-grid { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: 68px 72px; }
.world-heading { position: relative; z-index: 1; padding-top: 20px; }
.world-visual {
  position: relative;
  width: calc(100% + ((100vw - var(--shell)) / 2));
  min-height: 450px;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.world-visual::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.17); content: ""; pointer-events: none; }
.world-visual img { width: 100%; height: 510px; object-fit: cover; object-position: 53% 45%; transition: transform 1.2s var(--ease); }
.world-visual:hover img { transform: scale(1.025); }
.world-visual figcaption { position: absolute; inset: auto 0 0; display: flex; padding: 42px 44px 26px; align-items: flex-end; justify-content: space-between; gap: 30px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.world-visual figcaption span { color: var(--gold-pale); font: 800 9px/1 var(--sans); letter-spacing: .18em; }
.world-visual figcaption b { font: 700 21px/1.2 var(--serif); }
.world-law { position: relative; grid-column: 1 / -1; display: grid; margin-top: -17px; padding: 30px 38px; grid-template-columns: 150px 1fr; gap: 11px 34px; color: #fff9ec; background: linear-gradient(115deg, #37140f, #731f16 62%, #31110d); border: 1px solid rgba(219,160,70,.44); box-shadow: 0 18px 38px rgba(66,27,15,.18); clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.world-law::before { position: absolute; inset: 7px; border: 1px solid rgba(255,226,157,.11); content: ""; pointer-events: none; }
.world-law > p { grid-row: 1 / 3; margin: 0; padding-right: 25px; border-right: 1px solid rgba(255,255,255,.16); }
.world-law > p span { display: block; margin-bottom: 8px; color: var(--gold-pale); font: 900 8px/1 var(--sans); letter-spacing: .2em; }
.world-law > p b { font: 700 23px/1.35 var(--serif); }
.world-law blockquote { margin: 0; font: 700 clamp(16px, 1.55vw, 21px)/1.7 var(--serif); }
.world-law blockquote em { color: #ffd57f; font-style: normal; text-decoration: underline; text-decoration-color: rgba(255,171,59,.55); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.world-law small { color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.6; }
.world-copy { grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; }
.world-copy > div { max-width: 660px; }
.world-copy h3 { margin-bottom: 26px; font: 700 clamp(28px, 3vw, 46px)/1.45 var(--serif); letter-spacing: .02em; }
.world-copy p { color: #5c514b; font-size: 14px; }
.vertical-word { justify-self: center; margin: 0; color: rgba(172,48,34,.18) !important; font: 700 34px/1 var(--serif) !important; letter-spacing: .22em; writing-mode: vertical-rl; }
.world-copy .brush-note { margin: 30px 0 0; color: var(--red); font: 700 20px/1.5 var(--serif); transform: rotate(-1.5deg); }

/* Game system */
.features-section { background: #e8dcc4; }
.features-section::before { position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(55,30,17,.25) .55px, transparent .55px); background-size: 6px 6px; content: ""; pointer-events: none; }
.features-section .shell { position: relative; }
.system-board {
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  min-height: 540px;
  margin: 34px 0 58px;
  color: #fff;
  background: #120c09;
  border: 7px solid #342017;
  box-shadow: 0 24px 60px rgba(43,27,17,.25), inset 0 0 0 1px rgba(231,183,89,.25);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.grill-demo { position: relative; display: grid; place-items: center; min-height: 540px; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(182,52,24,.2), transparent 46%), linear-gradient(125deg, rgba(255,255,255,.025), transparent); }
.grill-demo::before { position: absolute; width: min(62%, 430px); aspect-ratio: 1; border: 16px solid #1c1b1a; box-shadow: 0 0 0 5px #5b3a26, 0 0 0 8px #17100c, 0 18px 38px #000, inset 0 0 25px #000; content: ""; }
.grill-demo__grid { z-index: 1; display: grid; width: min(52%, 360px); aspect-ratio: 1; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px; background: repeating-linear-gradient(90deg, #79634a 0 2px, transparent 2px 13px), repeating-linear-gradient(#79634a 0 2px, #100c0a 2px 13px); border: 4px solid #604633; }
.grill-demo__grid i { position: relative; background: rgba(13,10,8,.68); border: 1px solid rgba(198,159,102,.23); }
.grill-demo__grid i.is-hot { background: radial-gradient(circle, #802619, #30100d 72%); box-shadow: inset 0 0 16px rgba(255,83,22,.5); }
.grill-demo__grid i.is-hot::after { position: absolute; inset: 20%; border-radius: 50%; background: #f36c25; filter: blur(8px); content: ""; animation: coal-pulse 2.8s ease-in-out infinite alternate; }
@keyframes coal-pulse { to { opacity: .42; transform: scale(.76); } }
.grill-demo__label { position: absolute; z-index: 2; display: grid; gap: 4px; color: rgba(255,255,255,.8); }
.grill-demo__label b { font: 700 13px/1 var(--serif); }
.grill-demo__label span { color: var(--gold); font: 800 8px/1 var(--sans); letter-spacing: .16em; }
.grill-demo__label::after { position: absolute; top: 50%; width: 85px; height: 1px; background: rgba(225,191,122,.46); content: ""; }
.grill-demo__label--normal { top: 17%; left: 9%; }
.grill-demo__label--normal::after { left: calc(100% + 12px); }
.grill-demo__label--hot { right: 8%; bottom: 17%; text-align: right; }
.grill-demo__label--hot::after { right: calc(100% + 12px); }
.grill-demo__ember { position: absolute; z-index: 2; width: 3px; height: 3px; border-radius: 50%; background: #ff9f3c; box-shadow: 0 0 9px #ff5a16; animation: ember 3.8s ease-out infinite; }
.ember-a { bottom: 19%; left: 34%; }
.ember-b { bottom: 28%; right: 27%; animation-delay: -1.8s; }
@keyframes ember { from { opacity: 0; transform: translate(0,0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(18px,-100px); } }
.ap-demo { position: relative; padding: 58px 38px; background: linear-gradient(160deg, #3b1911, #1b0d09); border-left: 1px solid rgba(230,182,95,.25); }
.ap-demo::after { position: absolute; inset: 14px; border: 1px solid rgba(239,193,105,.14); content: ""; pointer-events: none; }
.ap-demo > p { position: relative; z-index: 1; margin-bottom: 25px; color: var(--gold); font: 900 9px/1 var(--sans); letter-spacing: .22em; }
.ap-demo > strong { position: relative; z-index: 1; display: block; margin-bottom: 38px; font: 800 30px/.95 var(--display); letter-spacing: .02em; }
.ap-demo > strong i { color: var(--red-bright); font: 900 90px/.7 var(--display); font-style: normal; }
.ap-demo ul { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.ap-demo li { display: flex; padding: 14px 0; align-items: center; gap: 14px; color: rgba(255,255,255,.78); border-top: 1px solid rgba(255,255,255,.1); font: 700 12px/1 var(--sans); }
.ap-demo li span { color: var(--gold); font-size: 8px; }
.system-board--actual { grid-template-columns: minmax(0, 1.6fr) minmax(270px, .55fr); min-height: 0; }
.gameplay-demo {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  flex-direction: column;
  background: radial-gradient(circle at 50% 32%, rgba(165,55,27,.16), transparent 52%), #090605;
}
.gameplay-demo::after { position: absolute; inset: 0; border: 1px solid rgba(245,203,121,.13); content: ""; pointer-events: none; }
.gameplay-demo__eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 46px;
  padding: 12px 17px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.58);
  background: linear-gradient(90deg, rgba(91,29,18,.72), rgba(19,10,7,.96));
  border-bottom: 1px solid rgba(236,185,92,.22);
}
.gameplay-demo__eyebrow span { display: flex; align-items: center; gap: 8px; color: var(--gold-pale); font: 900 8px/1 var(--sans); letter-spacing: .18em; }
.gameplay-demo__eyebrow span i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 4px rgba(241,75,49,.13), 0 0 12px rgba(241,75,49,.78); animation: actual-screen-pulse 1.9s ease-in-out infinite alternate; }
.gameplay-demo__eyebrow b { font: 700 9px/1.4 var(--serif); letter-spacing: .08em; }
@keyframes actual-screen-pulse { to { opacity: .55; transform: scale(.78); } }
.gameplay-demo img {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 1600 / 848;
  object-fit: contain;
  object-position: center;
  background: #050403;
  border-bottom: 1px solid rgba(236,185,92,.18);
}
.gameplay-demo figcaption {
  display: grid;
  min-height: 104px;
  padding: 21px 24px 23px;
  flex: 1;
  grid-template-columns: minmax(155px, .62fr) 1fr;
  align-items: center;
  gap: 22px;
  background: linear-gradient(112deg, #21110c, #110906 72%);
}
.gameplay-demo figcaption b { color: var(--gold-pale); font: 700 17px/1.5 var(--serif); letter-spacing: .03em; }
.gameplay-demo figcaption span { color: rgba(255,255,255,.66); font-size: 11px; line-height: 1.8; }
.system-board--actual .ap-demo { min-width: 0; padding: 43px 31px 34px; }
.system-board--actual .ap-demo > p:first-child { margin-bottom: 21px; }
.system-board--actual .ap-demo > strong { margin-bottom: 30px; font-size: 26px; }
.system-board--actual .ap-demo > strong i { font-size: 78px; }
.ap-demo > .ap-demo__note { margin: 22px 0 0; color: rgba(255,255,255,.58); font: 500 10px/1.8 var(--sans); letter-spacing: .02em; }
.system-rules-link {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 72px;
  margin-top: 22px;
  padding: 13px 14px;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  color: #fff8e9;
  background: rgba(218,57,39,.1);
  border: 1px solid rgba(239,193,105,.43);
  transition: color .22s, background .22s, border-color .22s, transform .22s;
}
.system-rules-link span { align-self: end; color: var(--gold); font: 900 7px/1 var(--sans); letter-spacing: .18em; }
.system-rules-link b { align-self: start; font: 700 13px/1.45 var(--serif); }
.system-rules-link i { grid-column: 2; grid-row: 1 / span 2; color: var(--gold-pale); font: 400 21px/1 var(--sans); font-style: normal; transition: transform .22s; }
.system-rules-link:hover { color: #fff; background: rgba(218,57,39,.25); border-color: var(--gold-pale); transform: translateY(-2px); }
.system-rules-link:hover i { transform: translateX(4px); }
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(76,48,29,.27); }
.feature-card { position: relative; min-height: 310px; padding: 38px 34px 25px; border-right: 1px solid rgba(76,48,29,.27); }
.feature-card:last-child { border-right: 0; }
.feature-card__top { display: flex; margin-bottom: 42px; align-items: center; justify-content: space-between; }
.feature-card__top b { color: var(--red); font: 900 29px/1 var(--display); }
.feature-card__top span { color: #887969; font: 800 8px/1 var(--sans); letter-spacing: .18em; }
.feature-card h3 { margin-bottom: 16px; font: 700 21px/1.55 var(--serif); }
.feature-card__lead { color: var(--red); font-size: 12px; font-weight: 800; line-height: 1.7; }
.feature-card__body { color: #5b5047; font-size: 12px; }

/* Official campaign gallery */
.promotion-section {
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 7% 18%, rgba(223,67,29,.22), transparent 31%),
    repeating-linear-gradient(105deg, rgba(240,199,116,.025) 0 1px, transparent 1px 70px),
    #170b08;
}
.promotion-section::before { position: absolute; z-index: -1; inset: 0; opacity: .18; background: linear-gradient(135deg, transparent 62%, rgba(223,89,31,.3)); content: ""; }
.promotion-section__flare { position: absolute; z-index: -1; right: -180px; bottom: -240px; width: 620px; aspect-ratio: 1; background: radial-gradient(circle, rgba(219,63,23,.42), transparent 67%); filter: blur(18px); }
.promotion-heading { margin-bottom: 44px; }
.promotion-heading .section-heading__index { color: var(--gold-pale); }
.promotion-heading h2 em { color: var(--orange); }
.promotion-heading > p { color: rgba(255,255,255,.59); }
.promotion-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-width: 0; overflow: hidden; background: #0d0806; border: 1px solid rgba(238,193,108,.34); box-shadow: 0 34px 75px rgba(0,0,0,.34); }
.promotion-stage { display: grid; min-width: 0; color: #fff; background: #120a07; border-right: 1px solid rgba(238,193,108,.25); }
.promotion-stage__visual { position: relative; display: grid; min-height: 490px; overflow: hidden; place-items: center; background: #090605; }
.promotion-stage__visual::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(0deg, rgba(7,4,3,.68), transparent 24%), repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.12) 4px 5px); content: ""; pointer-events: none; }
.promotion-stage__blur { position: absolute; inset: -38px; opacity: .22; background: center / cover no-repeat; filter: blur(34px) saturate(.75); transform: scale(1.08); }
.promotion-stage__visual img { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 620px; object-fit: contain; filter: drop-shadow(0 17px 34px rgba(0,0,0,.46)); transition: opacity .2s, transform .6s var(--ease); }
.promotion-stage:hover .promotion-stage__visual img { transform: scale(1.012); }
.promotion-gallery.is-portrait .promotion-stage__visual { min-height: 680px; }
.promotion-stage__counter { position: absolute; z-index: 3; top: 18px; left: 19px; padding: 8px 10px; color: rgba(255,255,255,.54); background: rgba(12,7,5,.82); border: 1px solid rgba(255,255,255,.21); font: 900 8px/1 var(--sans); letter-spacing: .13em; backdrop-filter: blur(7px); }
.promotion-stage__counter b { color: var(--gold-pale); font: 900 15px/1 var(--display); }
.promotion-stage__copy { display: grid; min-height: 178px; padding: 27px 31px 28px; grid-template-columns: minmax(0,1fr) max-content; align-content: center; column-gap: 28px; background: radial-gradient(circle at 90% 0, rgba(203,57,24,.17), transparent 40%), #15100c; }
.promotion-stage__copy p { grid-column: 1 / -1; margin: 0 0 10px; color: var(--orange); font: 900 8px/1 var(--sans); letter-spacing: .2em; }
.promotion-stage__copy h3 { margin: 0 0 9px; font: 700 clamp(24px, 2.7vw, 38px)/1.28 var(--serif); letter-spacing: -.035em; }
.promotion-stage__copy > span { grid-column: 1; color: rgba(255,255,255,.57); font-size: 10px; line-height: 1.75; }
.promotion-stage__copy > b { grid-column: 2; grid-row: 2 / 4; align-self: center; padding: 13px 15px; color: var(--gold-pale); border: 1px solid rgba(235,189,104,.38); font: 800 9px/1.4 var(--sans); transition: color .2s, background .2s, border-color .2s; }
.promotion-stage__copy > b i { margin-left: 12px; font-size: 15px; font-style: normal; }
.promotion-stage:hover .promotion-stage__copy > b { color: #1b0c07; background: var(--gold-pale); border-color: var(--gold-pale); }
.promotion-selector { min-width: 0; padding: 25px 20px 18px; background: linear-gradient(155deg, rgba(255,255,255,.03), transparent 48%), #0c0806; }
.promotion-selector > p { margin: 0 0 17px; color: var(--gold); font: 900 7px/1 var(--sans); letter-spacing: .19em; }
.promotion-selector__item button { position: relative; display: grid; width: 100%; min-height: 102px; padding: 14px 9px 14px 13px; grid-template-columns: 28px minmax(0,1fr) 14px; align-items: center; gap: 9px; color: rgba(255,255,255,.54); background: transparent; border-top: 1px solid rgba(255,255,255,.11); text-align: left; transition: color .2s, background .2s; }
.promotion-selector__item:last-child button { border-bottom: 1px solid rgba(255,255,255,.11); }
.promotion-selector__item button::before { position: absolute; inset: 9px auto 9px 0; width: 2px; background: var(--orange); content: ""; transform: scaleY(0); transition: transform .2s; }
.promotion-selector__item button:hover, .promotion-selector__item button.is-active { color: #fff; background: linear-gradient(90deg, rgba(208,57,26,.24), transparent); }
.promotion-selector__item button.is-active::before { transform: scaleY(1); }
.promotion-selector__item button > span:first-child { color: #9e7540; font: 900 18px/1 var(--display); }
.promotion-selector__item button > span:nth-child(2) { min-width: 0; }
.promotion-selector__item b, .promotion-selector__item strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.promotion-selector__item b { margin-bottom: 8px; color: rgba(233,188,101,.58); font: 900 6px/1 var(--sans); letter-spacing: .12em; white-space: nowrap; }
.promotion-selector__item strong { font: 700 12px/1.55 var(--serif); }
.promotion-selector__item i { color: var(--gold-pale); font-size: 13px; font-style: normal; opacity: .38; }
.promotion-selector__item button.is-active i { opacity: 1; }
.promotion-selector > span { display: block; margin-top: 17px; color: rgba(255,255,255,.27); font-size: 8px; line-height: 1.6; }

/* Characters */
.characters-section { overflow: hidden; color: var(--white); background: #120b09; }
.characters-section::before { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(30deg, rgba(233,184,91,.3) 1px, transparent 1px), linear-gradient(150deg, rgba(233,184,91,.3) 1px, transparent 1px); background-size: 70px 40px; content: ""; }
.characters-section__flare { position: absolute; top: -20%; right: -10%; width: 620px; aspect-ratio: 1; opacity: .28; background: radial-gradient(circle, rgba(226,64,28,.58), transparent 65%); filter: blur(12px); }
.characters-section .shell { position: relative; }
.characters-heading .section-heading__index { color: var(--gold-pale); }
.characters-heading h2 em { color: var(--orange); }
.characters-heading > p { color: rgba(255,255,255,.64); }
.character-toolbar { display: flex; margin: 23px 0 27px; padding-bottom: 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.13); }
.character-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.character-filters button { padding: 8px 14px; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.14); background: transparent; font: 800 10px/1 var(--sans); letter-spacing: .1em; transition: color .2s, background .2s, border-color .2s; }
.character-filters button:hover, .character-filters button.is-active { color: #160b07; border-color: var(--gold-pale); background: var(--gold-pale); }
.character-filters button span { margin-left: 7px; opacity: .55; }
.character-toolbar > p { margin: 0; color: var(--gold); font: 800 8px/1 var(--sans); letter-spacing: .2em; }
.character-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.character-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #24140e;
  text-align: left;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: transform .35s var(--ease), filter .35s;
}
.character-card[hidden] { display: none; }
.character-card:hover { z-index: 2; transform: translateY(-8px); }
.character-card__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; color: inherit; background: transparent; border: 0; text-align: left; }
.character-card__open:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: -3px; }
.character-card__images { position: absolute; inset: 0; }
.character-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: opacity .32s var(--ease), transform .65s var(--ease), filter .3s; }
.character-card__image--k2 { opacity: 0; }
.character-card:hover .character-card__image--k1,
.character-card.is-k2-preview .character-card__image--k1,
.character-card__open:focus-visible .character-card__image--k1 { opacity: 0; transform: scale(1.025); }
.character-card:hover .character-card__image--k2,
.character-card.is-k2-preview .character-card__image--k2,
.character-card__open:focus-visible .character-card__image--k2 { opacity: 1; transform: scale(1.045); }
.character-card::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(10,5,3,.95)); content: ""; pointer-events: none; }
.character-card__number { position: absolute; z-index: 2; top: 14px; left: 14px; display: grid; width: 38px; height: 38px; place-items: center; color: #180d08; background: var(--gold-pale); font: 900 13px/1 var(--display); clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.character-card__type { position: absolute; z-index: 2; top: 17px; right: 14px; padding: 5px 8px; color: #fff; background: rgba(20,10,7,.72); border: 1px solid rgba(255,255,255,.25); font: 800 8px/1 var(--sans); letter-spacing: .08em; backdrop-filter: blur(5px); }
.character-card__variant { position: absolute; z-index: 3; top: 60px; left: 14px; display: flex; overflow: hidden; padding: 0; color: rgba(255,255,255,.72); background: rgba(12,7,5,.72); border: 1px solid rgba(255,255,255,.18); font: 900 7px/1 var(--sans); letter-spacing: .08em; }
.character-card__variant i { padding: 5px 7px; font-style: normal; transition: color .25s, background .25s; }
.character-card__variant i:first-child { color: #1a0b06; background: var(--gold-pale); }
.character-card:hover .character-card__variant i:first-child,
.character-card.is-k2-preview .character-card__variant i:first-child,
.character-card:has(.character-card__open:focus-visible) .character-card__variant i:first-child { color: rgba(255,255,255,.55); background: transparent; }
.character-card:hover .character-card__variant i:last-child,
.character-card.is-k2-preview .character-card__variant i:last-child,
.character-card:has(.character-card__open:focus-visible) .character-card__variant i:last-child { color: #1a0b06; background: var(--gold-pale); }
.character-card__copy { position: absolute; z-index: 2; inset: auto 18px 18px; }
.character-card__copy span { color: var(--gold-pale); font: 800 8px/1 var(--sans); letter-spacing: .16em; }
.character-card__copy h3 { margin: 5px 0 4px; font: 700 24px/1.25 var(--serif); letter-spacing: .02em; }
.character-card__copy p { margin: 0; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; line-height: 1.5; }
.character-card__arrow { position: absolute; z-index: 2; right: 15px; bottom: 18px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.35); font-size: 17px; transition: color .2s, background .2s; }
.character-card:hover .character-card__arrow { color: #1a0b06; background: var(--gold-pale); border-color: var(--gold-pale); }
.character-card--buff .character-card__type { border-color: rgba(238,190,82,.7); }
.character-card--attack .character-card__type { border-color: rgba(241,70,43,.75); }
.character-card--defense .character-card__type { border-color: rgba(93,159,173,.75); }
.character-card--unique .character-card__type { border-color: rgba(167,101,192,.75); }
.tactics-link { display: grid; grid-template-columns: 1.25fr .7fr 1.25fr; margin-top: 74px; border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.tactics-link__heading { padding: 35px 35px 34px 0; }
.tactics-link__heading > p { margin-bottom: 17px; color: var(--gold); font: 900 8px/1 var(--sans); letter-spacing: .22em; }
.tactics-link__heading h3 { margin-bottom: 11px; font: 700 25px/1.35 var(--serif); }
.tactics-link__heading span { color: rgba(255,255,255,.46); font-size: 10px; }
.tactics-selected { display: flex; padding: 20px; align-items: center; gap: 15px; background: rgba(255,255,255,.055); border-inline: 1px solid rgba(255,255,255,.14); }
.tactics-selected img { width: 72px; height: 100px; object-fit: cover; object-position: 50% 20%; }
.tactics-selected span { color: var(--gold); font: 800 8px/1 var(--sans); letter-spacing: .12em; }
.tactics-selected b { display: block; margin-top: 6px; font: 700 17px/1.25 var(--serif); }
.tactics-related { display: grid; grid-template-columns: repeat(3, 1fr); }
.tactics-related button { position: relative; min-width: 0; padding: 16px 8px; overflow: hidden; color: #fff; background: transparent; border-right: 1px solid rgba(255,255,255,.1); }
.tactics-related button:last-child { border-right: 0; }
.tactics-related img { width: 68px; height: 94px; margin: 0 auto 7px; object-fit: cover; object-position: top; filter: saturate(.75); transition: transform .25s, filter .25s; }
.tactics-related button:hover img { filter: none; transform: translateY(-4px); }
.tactics-related span { display: block; overflow: hidden; font: 700 10px/1.2 var(--sans); text-overflow: ellipsis; white-space: nowrap; }

/* Character soundtrack */
.soundtrack-section {
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(115deg, rgba(114,32,18,.2), transparent 42%),
    repeating-linear-gradient(90deg, rgba(230,179,91,.026) 0 1px, transparent 1px 82px),
    #0b0807;
}
.soundtrack-section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .3;
  background-image: radial-gradient(rgba(244,218,167,.24) .55px, transparent .8px);
  background-size: 7px 7px;
  content: "";
  mask-image: linear-gradient(90deg, #000, transparent 68%);
}
.soundtrack-section__glow {
  position: absolute;
  z-index: -1;
  top: -240px;
  right: -110px;
  width: 720px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(218,55,28,.25), transparent 66%);
  filter: blur(8px);
}
.soundtrack-section__smoke {
  position: absolute;
  z-index: -1;
  bottom: -190px;
  left: -130px;
  width: 760px;
  aspect-ratio: 1;
  opacity: .42;
  background: radial-gradient(ellipse at center, rgba(223,196,161,.12), transparent 64%);
  filter: blur(38px);
  transform: rotate(-13deg);
}
.soundtrack-section .shell { position: relative; }
.soundtrack-heading { margin-bottom: 52px; }
.soundtrack-heading > p { max-width: 37em; }
.soundtrack-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr);
  overflow: hidden;
  border: 1px solid rgba(232,183,94,.38);
  background: #15100d;
  box-shadow: 0 42px 95px rgba(0,0,0,.42), inset 0 0 0 5px #0d0907;
}
.soundtrack-console::before,
.soundtrack-console::after {
  position: absolute;
  z-index: 4;
  top: 9px;
  width: 5px;
  height: 5px;
  background: #8a704c;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #17100b, 0 662px 0 #8a704c;
  content: "";
  pointer-events: none;
}
.soundtrack-console::before { left: 9px; }
.soundtrack-console::after { right: 9px; }
.soundtrack-now { min-width: 0; border-right: 1px solid rgba(232,183,94,.22); }
.soundtrack-now__visual { position: relative; height: 375px; overflow: hidden; background: #24110b; }
.soundtrack-now__visual::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
  content: "";
  pointer-events: none;
}
.soundtrack-now__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.84) contrast(1.04);
  transform: scale(1.015);
  transition: filter .45s, transform 1.6s var(--ease);
}
.soundtrack-console.is-playing .soundtrack-now__visual > img { filter: saturate(1.04) contrast(1.07); transform: scale(1.045); }
.soundtrack-now__shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,6,4,.18), transparent 54%, rgba(10,6,4,.46)), linear-gradient(0deg, #15100d 0, rgba(21,16,13,.12) 48%, rgba(11,7,5,.12));
  pointer-events: none;
}
.soundtrack-now__stamp {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 25px;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  color: #211008;
  background: rgba(244,207,131,.92);
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transform: rotate(-3deg);
}
.soundtrack-now__stamp span { position: absolute; top: 14px; font: 900 6px/1 var(--sans); letter-spacing: .14em; }
.soundtrack-now__stamp b { position: absolute; bottom: 11px; font: 900 40px/.8 var(--display); }
.soundtrack-equalizer { position: absolute; z-index: 3; right: 24px; bottom: 23px; display: flex; height: 46px; align-items: end; gap: 4px; }
.soundtrack-equalizer i { display: block; width: 3px; height: 18%; background: linear-gradient(#ffd786, #df4b24); transform-origin: bottom; }
.soundtrack-equalizer i:nth-child(2n) { height: 45%; }
.soundtrack-equalizer i:nth-child(3n) { height: 70%; }
.soundtrack-equalizer i:nth-child(4n) { height: 28%; }
.soundtrack-equalizer.is-playing i { animation: soundtrack-eq .72s ease-in-out infinite alternate; }
.soundtrack-equalizer.is-playing i:nth-child(2n) { animation-delay: -.46s; animation-duration: .58s; }
.soundtrack-equalizer.is-playing i:nth-child(3n) { animation-delay: -.21s; animation-duration: .86s; }
@keyframes soundtrack-eq { from { transform: scaleY(.3); } to { transform: scaleY(1.12); } }
.soundtrack-now__body { padding: 32px 38px 35px; }
.soundtrack-now__eyebrow { display: flex; margin-bottom: 17px; align-items: center; gap: 13px; color: rgba(255,255,255,.35); font: 900 7px/1 var(--sans); letter-spacing: .18em; }
.soundtrack-now__eyebrow span { padding: 6px 8px; color: #1d0e08; background: var(--gold-pale); letter-spacing: .1em; }
.soundtrack-now__eyebrow b { font: inherit; }
.soundtrack-now__title-row { display: flex; margin-bottom: 19px; align-items: end; justify-content: space-between; gap: 24px; }
.soundtrack-now__title-row > div > span { color: var(--orange); font: 800 10px/1 var(--sans); letter-spacing: .12em; }
.soundtrack-now__title-row h3 { margin: 6px 0 0; font: 700 clamp(29px, 3vw, 42px)/1.18 var(--serif); letter-spacing: -.035em; }
.soundtrack-now__duration { flex: none; padding-bottom: 5px; color: var(--gold-pale); font: 800 12px/1 var(--sans); letter-spacing: .08em; }
.soundtrack-now blockquote { position: relative; margin: 0 0 14px; padding: 0 0 0 19px; color: #f2cf8b; border-left: 2px solid var(--red-bright); font: 700 14px/1.7 var(--serif); }
.soundtrack-now__concept { min-height: 47px; margin-bottom: 24px; color: rgba(255,255,255,.57); font-size: 10px; line-height: 1.75; }
.soundtrack-controls { display: grid; grid-template-columns: 77px 1fr; align-items: center; gap: 19px; }
.soundtrack-play { display: grid; width: 72px; height: 72px; padding: 0; place-items: center; color: #241007; background: linear-gradient(145deg, #ffe2a3, #d99536); border: 4px solid #24130c; border-radius: 50%; box-shadow: 0 0 0 1px rgba(245,207,134,.58), 0 8px 17px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.56); }
.soundtrack-play span { margin: 6px 0 -2px 3px; font-size: 18px; line-height: 1; }
.soundtrack-play b { font: 900 7px/1 var(--sans); letter-spacing: .12em; }
.soundtrack-play:hover { filter: brightness(1.08); transform: translateY(-2px); }
.soundtrack-play[aria-pressed="true"] span { margin-left: 0; }
.soundtrack-timeline { min-width: 0; }
.soundtrack-timeline > div { display: flex; margin-bottom: 7px; justify-content: space-between; color: rgba(255,255,255,.52); font: 800 8px/1 var(--sans); letter-spacing: .08em; }
.soundtrack-timeline input { width: 100%; height: 20px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.soundtrack-timeline input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--orange) var(--song-progress), rgba(255,255,255,.18) var(--song-progress)); }
.soundtrack-timeline input::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--orange) var(--song-progress), rgba(255,255,255,.18) var(--song-progress)); }
.soundtrack-timeline input::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5px; appearance: none; background: var(--gold-pale); border: 2px solid #2b160e; border-radius: 50%; box-shadow: 0 0 0 1px var(--gold-pale); }
.soundtrack-timeline input::-moz-range-thumb { width: 11px; height: 11px; background: var(--gold-pale); border: 2px solid #2b160e; border-radius: 50%; box-shadow: 0 0 0 1px var(--gold-pale); }
.soundtrack-now__note { margin: 10px 0 0 96px; color: rgba(255,255,255,.3); font-size: 8px; }
.soundtrack-library { min-width: 0; background: linear-gradient(150deg, rgba(255,255,255,.025), transparent 48%), #100c0a; }
.soundtrack-library__head { display: flex; height: 58px; padding: 0 22px; align-items: center; justify-content: space-between; color: var(--gold-pale); border-bottom: 1px solid rgba(232,183,94,.22); font: 900 8px/1 var(--sans); letter-spacing: .17em; }
.soundtrack-library__head b { color: rgba(255,255,255,.34); font: inherit; }
.soundtrack-tracklist { height: 675px; overflow: auto; scrollbar-color: #876135 #18100d; scrollbar-width: thin; }
.soundtrack-track button { position: relative; display: grid; width: 100%; min-width: 0; height: 56px; padding: 6px 15px 6px 9px; grid-template-columns: 44px 25px minmax(0,1fr) 38px 12px; align-items: center; gap: 8px; color: rgba(255,255,255,.61); background: transparent; border-bottom: 1px solid rgba(255,255,255,.075); text-align: left; transition: color .2s, background .2s; }
.soundtrack-track button::before { position: absolute; inset: 8px auto 8px 0; width: 2px; background: var(--orange); content: ""; transform: scaleY(0); transition: transform .2s; }
.soundtrack-track button:is(:hover,.is-active) { color: #fff; background: linear-gradient(90deg, rgba(214,61,32,.23), rgba(218,163,75,.055)); }
.soundtrack-track button.is-active::before { transform: scaleY(1); }
.soundtrack-track__portrait { width: 41px; height: 41px; overflow: hidden; background: #2b1710; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.soundtrack-track__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.72); }
.soundtrack-track button:is(:hover,.is-active) .soundtrack-track__portrait img { filter: none; }
.soundtrack-track__number { color: #a77c43; font: 900 9px/1 var(--display); }
.soundtrack-track__copy { min-width: 0; }
.soundtrack-track__copy b,
.soundtrack-track__copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soundtrack-track__copy b { margin-bottom: 4px; font: 700 11px/1 var(--serif); }
.soundtrack-track__copy span { color: rgba(255,255,255,.37); font: 600 8px/1 var(--sans); }
.soundtrack-track time { color: rgba(255,255,255,.32); font: 700 7px/1 var(--sans); }
.soundtrack-track i { color: var(--gold); font-size: 8px; font-style: normal; opacity: .35; }
.soundtrack-track button.is-active i { opacity: 1; }
.soundtrack-track button.is-playing i { animation: soundtrack-pulse .8s ease-in-out infinite alternate; }
@keyframes soundtrack-pulse { to { color: #ff672f; filter: drop-shadow(0 0 4px #f24a28); transform: scale(1.35); } }

/* Rules teaser and final CTA */
.rules-teaser { min-height: 760px; padding-block: 116px; overflow: hidden; color: #fff; background: #522017; }
.rules-teaser__art { position: absolute; inset: 0; }
.rules-teaser__art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 45%; }
.rules-teaser__art::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,12,8,.96) 0%, rgba(53,16,9,.86) 48%, rgba(29,8,5,.26) 82%), linear-gradient(0deg, rgba(20,7,5,.7), transparent 55%); content: ""; }
.rules-teaser__inner { position: relative; z-index: 1; }
.rules-teaser .section-heading { max-width: 570px; }
.round-flow { display: grid; max-width: 720px; margin: 50px 0 38px; padding: 0; grid-template-columns: repeat(4, 1fr); list-style: none; border-top: 1px solid rgba(255,255,255,.28); }
.round-flow li { position: relative; padding: 28px 22px 19px 0; border-right: 1px solid rgba(255,255,255,.16); }
.round-flow li:last-child { border-right: 0; }
.round-flow span { position: absolute; top: -7px; display: grid; width: 26px; height: 14px; place-items: center; color: #2b100b; background: var(--gold-pale); font: 900 8px/1 var(--sans); }
.round-flow h3 { margin-bottom: 8px; font: 700 15px/1.4 var(--serif); }
.round-flow p { margin: 0; color: rgba(255,255,255,.59); font-size: 10px; line-height: 1.6; }
.final-cta { position: relative; display: grid; min-height: 690px; overflow: hidden; place-items: center; color: #fff; background: #100907; text-align: center; }
.final-cta__image { position: absolute; inset: 0; }
.final-cta__image img { width: 100%; height: 100%; object-fit: cover; }
.final-cta__image::after { position: absolute; inset: 0; background: radial-gradient(circle, rgba(10,5,2,.3), rgba(7,4,3,.86)), linear-gradient(180deg, rgba(10,5,3,.4), rgba(10,5,3,.72)); content: ""; }
.final-cta__content { position: relative; z-index: 1; display: grid; place-items: center; }
.final-cta__content > p { color: var(--gold-pale); font: 900 10px/1 var(--sans); letter-spacing: .28em; }
.final-cta h2 { margin-bottom: 40px; font: 700 clamp(48px, 6.5vw, 96px)/1.18 var(--serif); letter-spacing: -.04em; text-shadow: 0 5px 30px #000; }
.final-cta h2 em { color: #ff9e32; font-style: normal; }

/* Footer */
.site-footer { padding-block: 55px 26px; color: rgba(255,255,255,.68); background: #0b0706; border-top: 1px solid rgba(226,171,76,.25); }
.site-footer__inner { display: grid; grid-template-columns: 1fr 1.8fr; align-items: center; gap: 38px; }
.site-footer__logo img { width: 190px; height: auto; filter: grayscale(.15); }
.site-footer nav { display: flex; justify-content: flex-end; gap: 24px; font-size: 11px; font-weight: 700; }
.site-footer nav a { transition: color .2s; }
.site-footer nav a:hover { color: var(--gold-pale); }
.site-footer__meta { grid-column: 1 / -1; display: flex; padding-top: 22px; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__meta p { margin: 0; font-size: 9px; letter-spacing: .08em; }
.deerflow-credit { color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .12em; transition: color .2s; }
.deerflow-credit:hover { color: var(--gold-pale); }

/* Character dialog */
.character-dialog {
  width: min(1060px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100svh - 40px);
  padding: 0;
  overflow: visible;
  color: var(--white);
  background: #130b08;
  border: 1px solid rgba(224,172,79,.42);
  box-shadow: 0 32px 90px rgba(0,0,0,.65);
  overscroll-behavior: contain;
}
.character-dialog.is-sheet-mode { width: min(1240px, calc(100vw - 40px)); }
.character-dialog.is-sheet-mode .character-dialog__shell { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.character-dialog::backdrop { background: rgba(8,5,4,.86); backdrop-filter: blur(8px); }
.character-dialog__shell { display: grid; max-height: calc(100svh - 42px); grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); overflow: auto; }
.dialog-close { position: fixed; z-index: 5; top: max(28px, calc((100vh - min(820px, 100vh - 40px)) / 2 + 16px)); right: max(28px, calc((100vw - min(1060px, 100vw - 40px)) / 2 + 16px)); width: 42px; height: 42px; background: rgba(19,11,8,.82); border: 1px solid rgba(255,255,255,.3); }
.dialog-close span::before, .dialog-close span::after { position: absolute; top: 20px; left: 10px; width: 20px; height: 1px; background: #fff; content: ""; transform: rotate(45deg); }
.dialog-close span::after { transform: rotate(-45deg); }
.dialog-arrow { position: fixed; z-index: 5; top: 50%; display: grid; width: 46px; height: 64px; place-items: center; color: #fff; background: rgba(19,11,8,.86); border: 1px solid rgba(255,255,255,.25); font: 300 38px/1 var(--serif); transform: translateY(-50%); transition: color .2s, background .2s; }
.dialog-arrow:hover { color: #1b0b07; background: var(--gold-pale); }
.dialog-arrow--prev { left: max(7px, calc((100vw - min(1060px, 100vw - 40px)) / 2 - 60px)); }
.dialog-arrow--next { right: max(7px, calc((100vw - min(1060px, 100vw - 40px)) / 2 - 60px)); }
.character-dialog__art { --art-tabs-h: 48px; position: sticky; top: 0; align-self: start; min-height: min(780px, calc(100svh - 42px)); overflow: hidden; background: #060403; }
.character-dialog__art [role="tabpanel"] { position: absolute; inset: var(--art-tabs-h) 0 0; }
.character-dialog__art [role="tabpanel"]::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,4,3,.88), transparent 40%), linear-gradient(90deg, transparent 78%, rgba(8,4,3,.5)); content: ""; pointer-events: none; }
.character-dialog__art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 10px 28px rgba(0,0,0,.48)); }
.character-dialog__art.is-cg [role="tabpanel"] { background-position: center; background-size: cover; }
.character-dialog__art.is-cg [role="tabpanel"]::before { position: absolute; z-index: 0; inset: -20px; background: rgba(7,4,3,.28); backdrop-filter: blur(18px); content: ""; }
.character-dialog__art.is-cg img { object-fit: contain; }
.character-dialog__art.is-sheet [role="tabpanel"] { display: flex; min-width: 0; min-height: 0; overflow: hidden; align-items: center; justify-content: center; background: #080504; }
.character-dialog__art.is-sheet img { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain; }
.character-dialog__tabs { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; min-height: var(--art-tabs-h); padding: 8px 10px; align-items: center; justify-content: flex-start; flex-wrap: wrap; background: rgba(12,7,5,.96); border-bottom: 1px solid rgba(255,255,255,.14); }
.character-dialog__tabs button { padding: 8px 10px; color: rgba(255,255,255,.62); background: transparent; border: 1px solid rgba(255,255,255,.2); font: 800 7px/1 var(--sans); letter-spacing: .1em; }
.character-dialog__tabs button[aria-selected="true"] { color: #160b07; background: var(--gold-pale); border-color: var(--gold-pale); }
.character-dialog__art > p { position: absolute; z-index: 2; bottom: 14px; left: 20px; margin: 0; color: rgba(255,255,255,.55); font: 800 8px/1 var(--sans); letter-spacing: .18em; }
.character-dialog__body { min-width: 0; padding: 62px 54px 48px; background: radial-gradient(circle at 100% 0, rgba(202,66,28,.15), transparent 34%), #17100c; }
.character-dialog__number { margin-bottom: 18px; color: var(--gold); font: 900 9px/1 var(--sans); letter-spacing: .23em; }
.character-dialog__name-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.character-dialog__name-row h2 { margin: 0; font: 700 46px/1.18 var(--serif); letter-spacing: .02em; }
.character-dialog__name-row span { flex: none; padding: 7px 10px; color: var(--gold-pale); border: 1px solid rgba(226,174,81,.45); font: 800 9px/1 var(--sans); }
.character-dialog__ruby { margin-bottom: 26px; color: rgba(255,255,255,.35); font: 900 10px/1 var(--sans); letter-spacing: .25em; }
.character-dialog blockquote { position: relative; margin: 0 0 30px; padding-left: 29px; color: #ffd792; font: 700 18px/1.55 var(--serif); }
.character-dialog blockquote::before { position: absolute; top: 0; left: 0; color: var(--red-bright); content: "“"; font: 700 38px/.9 var(--serif); }
.character-dialog__anthem { margin-top: 28px; padding: 19px 20px 18px; background: linear-gradient(135deg, rgba(200,54,25,.24), rgba(218,163,75,.055)), #100b09; border: 1px solid rgba(232,183,94,.29); }
.character-dialog__anthem-head { display: flex; margin-bottom: 12px; align-items: end; justify-content: space-between; gap: 18px; }
.character-dialog__anthem-head span { display: block; margin-bottom: 7px; color: var(--gold); font: 900 7px/1 var(--sans); letter-spacing: .19em; }
.character-dialog__anthem-head h3 { margin: 0; font: 700 18px/1.3 var(--serif); }
.character-dialog__anthem-head time { flex: none; color: var(--gold-pale); font: 800 9px/1 var(--sans); letter-spacing: .08em; }
.character-dialog__anthem > p { margin: 0 0 16px; color: rgba(255,255,255,.53); font-size: 9px; line-height: 1.65; }
.character-dialog__anthem-controls { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 15px; }
.character-dialog__anthem-controls > button { display: grid; width: 48px; height: 48px; padding: 0; place-items: center; align-content: center; color: #241007; background: linear-gradient(145deg, #ffe2a3, #d99536); border: 3px solid #24130c; border-radius: 50%; box-shadow: 0 0 0 1px rgba(245,207,134,.52), 0 7px 14px rgba(0,0,0,.3); }
.character-dialog__anthem-controls > button span { margin: 2px 0 1px 2px; font-size: 11px; line-height: 1; }
.character-dialog__anthem-controls > button b { font: 900 5px/1 var(--sans); letter-spacing: .09em; }
.character-dialog__anthem-controls > button[aria-pressed="true"] span { margin-left: 0; }
.character-dialog__anthem-controls > div { min-width: 0; }
.character-dialog__anthem-controls p { display: flex; margin: 0 0 4px; justify-content: space-between; color: rgba(255,255,255,.48); font: 800 7px/1 var(--sans); letter-spacing: .08em; }
.character-dialog__anthem-controls input { width: 100%; height: 20px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.character-dialog__anthem-controls input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--orange) var(--anthem-progress), rgba(255,255,255,.18) var(--anthem-progress)); }
.character-dialog__anthem-controls input::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--orange) var(--anthem-progress), rgba(255,255,255,.18) var(--anthem-progress)); }
.character-dialog__anthem-controls input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; appearance: none; background: var(--gold-pale); border: 2px solid #2b160e; border-radius: 50%; }
.character-dialog__anthem-controls input::-moz-range-thumb { width: 10px; height: 10px; background: var(--gold-pale); border: 2px solid #2b160e; border-radius: 50%; }
.character-dialog.is-anthem-playing .character-dialog__anthem { border-color: rgba(245,206,129,.57); box-shadow: inset 3px 0 var(--orange); }
.sheet-jump { display: flex; width: 100%; margin: -8px 0 24px; padding: 12px 14px; align-items: center; gap: 12px; color: var(--gold-pale); background: rgba(218,163,75,.06); border: 1px solid rgba(218,163,75,.32); font-size: 11px; font-weight: 800; text-align: left; transition: background .2s, border-color .2s; }
.sheet-jump:hover { background: rgba(218,163,75,.13); border-color: var(--gold); }
.sheet-jump span { color: rgba(255,255,255,.38); font: 900 7px/1 var(--sans); letter-spacing: .17em; }
.sheet-jump b { margin-left: auto; font-size: 17px; }
.skill-panel { margin-bottom: 29px; padding: 22px 24px; background: linear-gradient(135deg, rgba(121,34,21,.48), rgba(57,23,16,.55)); border-left: 3px solid var(--red-bright); }
.skill-panel > p:first-child { margin-bottom: 9px; color: var(--orange); font: 900 8px/1 var(--sans); letter-spacing: .22em; }
.skill-panel h3 { margin-bottom: 12px; font: 700 19px/1.4 var(--serif); }
.skill-panel > p:nth-of-type(2) { margin-bottom: 18px; color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.75; }
.skill-panel dl { display: flex; margin-bottom: 0; border-top: 1px solid rgba(255,255,255,.12); }
.skill-panel dl > div { display: flex; padding: 12px 18px 0 0; gap: 10px; }
.skill-panel dt { color: rgba(255,255,255,.38); font-size: 9px; }
.skill-panel dd { color: var(--gold-pale); font-size: 9px; font-weight: 800; }
.character-dialog__profile { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.character-dialog__profile h3, .character-dialog__relations h3 { margin-bottom: 8px; color: var(--gold); font: 900 8px/1 var(--sans); letter-spacing: .18em; }
.character-dialog__profile p { margin-bottom: 0; color: rgba(255,255,255,.61); font-size: 11px; line-height: 1.75; }
.character-dialog__relations { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); }
.character-dialog__relations > p { margin-bottom: 12px; color: rgba(255,255,255,.42); font-size: 9px; }
.character-dialog__relations > div { display: flex; gap: 8px; }
.character-dialog__relations button { display: flex; padding: 6px 11px 6px 6px; align-items: center; gap: 8px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); font-size: 10px; font-weight: 700; }
.character-dialog__relations button:hover { border-color: var(--gold); }
.character-dialog__relations img { width: 26px; height: 26px; object-fit: cover; object-position: top; border-radius: 50%; }

/* Rules page */
.page-rules { background: #eee4cf; }
.rules-hero { position: relative; display: flex; min-height: 600px; padding-top: var(--header-h); align-items: center; overflow: hidden; color: #fff; background: #140b08; }
.rules-hero__art, .rules-hero__shade { position: absolute; inset: 0; }
.rules-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; }
.rules-hero__shade { background: linear-gradient(90deg, rgba(11,6,4,.91), rgba(20,8,5,.64) 48%, rgba(9,5,3,.15) 76%), linear-gradient(0deg, rgba(10,5,4,.83), transparent 65%); }
.rules-hero__content { position: relative; z-index: 1; }
.rules-hero__content > p:first-child { color: var(--gold-pale); font: 900 9px/1 var(--sans); letter-spacing: .25em; }
.rules-hero h1 { margin-bottom: 24px; font: 700 clamp(56px, 7vw, 96px)/1.13 var(--serif); letter-spacing: -.04em; }
.rules-hero h1 em { color: #ff9c2e; font-style: normal; }
.rules-hero__content > p:nth-of-type(2) { color: rgba(255,255,255,.73); font: 600 14px/1.9 var(--serif); }
.rules-hero__facts { display: flex; margin-top: 32px; gap: 9px; }
.rules-hero__facts span { min-width: 105px; padding: 10px 14px; color: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.2); background: rgba(10,6,4,.32); font: 800 8px/1.2 var(--sans); letter-spacing: .1em; }
.rules-hero__facts b { margin-right: 5px; color: #fff; font-size: 16px; }
.rules-hero__stamp { position: absolute; z-index: 1; right: max(5vw, calc((100vw - 1160px) / 2)); bottom: 55px; display: grid; width: 100px; height: 100px; place-items: center; color: rgba(255,225,161,.72); border: 2px solid currentColor; border-radius: 50%; transform: rotate(-10deg); }
.rules-hero__stamp::before { position: absolute; inset: 7px; border: 1px solid currentColor; border-radius: inherit; content: ""; }
.rules-hero__stamp span, .rules-hero__stamp b { position: absolute; font-family: var(--serif); }
.rules-hero__stamp span { top: 19px; font-size: 11px; letter-spacing: .2em; }
.rules-hero__stamp b { bottom: 19px; font-size: 27px; letter-spacing: .15em; }
.rules-progress { position: fixed; z-index: 220; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; }
.rules-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--red), var(--orange)); box-shadow: 0 0 7px #ff7c22; }
.rules-layout { display: grid; padding-block: 90px 120px; grid-template-columns: 220px 1fr; align-items: start; gap: 80px; }
.rules-toc { position: sticky; top: 105px; padding: 23px 0 0; border-top: 2px solid var(--ink); }
.rules-toc > p { margin-bottom: 16px; color: var(--red); font: 900 8px/1 var(--sans); letter-spacing: .18em; }
.rules-toc ol { margin: 0 0 24px; padding: 0; list-style: none; }
.rules-toc a:not(.toc-play) { position: relative; display: flex; padding: 8px 8px 8px 0; gap: 10px; color: #71665b; font-size: 11px; font-weight: 700; transition: color .2s, padding .2s; }
.rules-toc a:not(.toc-play)::before { position: absolute; top: 50%; left: -12px; width: 3px; height: 0; background: var(--red); content: ""; transform: translateY(-50%); transition: height .2s; }
.rules-toc a:hover, .rules-toc a.is-active { padding-left: 6px !important; color: var(--red) !important; }
.rules-toc a.is-active::before { height: 17px !important; }
.rules-toc a span { color: #b1a18f; font: 800 8px/1.8 var(--sans); }
.toc-play { display: flex; padding: 11px 14px; justify-content: space-between; color: #fff; background: var(--red); font-size: 11px; font-weight: 900; }
.manual-intro { position: relative; padding: 0 0 100px; }
.manual-intro::after { position: absolute; inset: auto 0 46px; height: 1px; background: var(--line); content: ""; }
.manual-intro h2 { margin-bottom: 26px; font: 700 clamp(48px, 5.5vw, 76px)/1.24 var(--serif); letter-spacing: -.05em; }
.manual-intro h2 em { color: var(--red); font-style: normal; }
.manual-intro > p:nth-of-type(2) { max-width: 620px; color: #5d5149; font-size: 14px; }
.manual-intro .quick-flow { max-width: none; margin: 46px 0 0; color: var(--ink); border-top-color: var(--line); }
.manual-intro .quick-flow li { border-right-color: var(--line); }
.manual-intro .quick-flow h3 { color: var(--ink); }
.manual-intro .quick-flow p { color: #77695e; }
.rule-chapter { position: relative; display: grid; padding: 64px 0 92px; grid-template-columns: 82px 1fr; gap: 34px; border-bottom: 1px solid var(--line); }
.chapter-number { position: sticky; top: 105px; align-self: start; display: grid; text-align: center; }
.chapter-number span { margin-bottom: 4px; color: var(--red); font: 900 8px/1 var(--sans); letter-spacing: .12em; }
.chapter-number b { color: rgba(72,42,25,.15); font: 900 63px/.9 var(--display); }
.chapter-kicker { margin-bottom: 16px; color: var(--red); font: 900 9px/1 var(--sans); letter-spacing: .22em; }
.chapter-body > h2 { margin-bottom: 25px; font: 700 clamp(32px, 4vw, 51px)/1.35 var(--serif); letter-spacing: -.03em; }
.chapter-body > p:not(.chapter-kicker):not(.fine-note) { max-width: 650px; color: #5d5149; font-size: 13px; }
.rule-callout { display: grid; margin-top: 34px; padding: 28px 30px; grid-template-columns: 80px 1fr; align-items: center; gap: 24px; color: #fff; background: var(--ink-soft); }
.rule-callout > span { color: var(--orange); font: 900 48px/1 var(--display); }
.rule-callout b { color: var(--gold-pale); font: 900 9px/1 var(--sans); letter-spacing: .17em; }
.rule-callout p { margin: 7px 0 0; color: rgba(255,255,255,.7); font-size: 11px; }
.setup-grid { display: grid; margin-top: 37px; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.setup-grid > div { min-height: 185px; padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.setup-grid strong { display: block; margin-bottom: 19px; color: rgba(176,49,35,.45); font: 900 29px/1 var(--display); }
.setup-grid h3 { margin-bottom: 8px; font: 700 16px/1.4 var(--serif); }
.setup-grid p { margin: 0; color: #716359; font-size: 11px; }
.fine-note { margin-top: 17px; color: #8c7b6c; font-size: 10px; }
.manual-grill { display: grid; margin-top: 38px; grid-template-columns: minmax(280px, 1.05fr) .95fr; align-items: center; gap: 38px; }
.manual-grill__board { display: grid; aspect-ratio: 1.14; place-items: center; background: #17100d; border: 10px solid #563622; box-shadow: inset 0 0 0 3px #19100c, inset 0 0 30px #000, 0 14px 28px rgba(47,26,15,.18); }
.manual-grill__grid { display: grid; width: 79%; aspect-ratio: 1; padding: 4px; grid-template-columns: repeat(4, 1fr); gap: 3px; background: repeating-linear-gradient(90deg, #876f50 0 2px, transparent 2px 12px), repeating-linear-gradient(#876f50 0 2px, #100c09 2px 12px); border: 3px solid #76583d; }
.manual-grill__grid i { display: grid; place-items: center; background: rgba(13,10,8,.75); border: 1px solid rgba(217,178,113,.25); }
.manual-grill__grid i::after { color: rgba(255,255,255,.3); content: attr(data-n); font: 700 8px/1 var(--sans); }
.manual-grill__grid .is-hot { background: radial-gradient(circle, #7f2819, #2b0f0b 72%); box-shadow: inset 0 0 13px rgba(255,97,29,.55); }
.manual-grill__legend { display: grid; gap: 14px; }
.heat-card { padding: 24px; background: rgba(255,255,255,.35); border: 1px solid var(--line); }
.heat-card span { color: var(--red); font: 900 9px/1 var(--sans); letter-spacing: .16em; }
.heat-card b { display: block; margin: 9px 0 7px; font: 900 27px/1 var(--display); }
.heat-card p { margin: 0; color: #6c5e54; font-size: 10px; }
.heat-card.is-hot { color: #fff; background: linear-gradient(130deg, #75251b, #30120d); }
.heat-card.is-hot span { color: var(--gold-pale); }
.heat-card.is-hot p { color: rgba(255,255,255,.68); }
.rule-tip { display: flex; margin-top: 27px; padding: 17px 20px; gap: 18px; background: rgba(214,162,76,.14); border-left: 3px solid var(--gold); }
.rule-tip b { color: #9f6a1e; font: 900 9px/1.8 var(--sans); letter-spacing: .15em; }
.rule-tip p { margin: 0; color: #6f6156; font-size: 11px; }
.action-table { margin-top: 35px; border-top: 1px solid var(--line); }
.action-row { display: grid; padding: 18px 12px; grid-template-columns: 1.1fr 64px 2fr; align-items: center; gap: 17px; border-bottom: 1px solid var(--line); }
.action-row h3 { margin: 0; font: 700 14px/1.4 var(--serif); }
.action-row b { color: var(--red); font: 900 11px/1 var(--sans); }
.action-row p { margin: 0; color: #716359; font-size: 10px; }
.turn-end-flow { display: flex; margin-top: 33px; align-items: center; justify-content: space-between; }
.turn-end-flow > div { flex: 1; padding: 17px; background: rgba(255,255,255,.3); border: 1px solid var(--line); }
.turn-end-flow span { display: block; margin-bottom: 5px; color: #9a7961; font-size: 8px; font-weight: 800; }
.turn-end-flow b { font: 700 12px/1.3 var(--serif); }
.turn-end-flow > i { margin: 0 8px; color: var(--red); font-style: normal; }
.cook-stage-track { display: grid; margin: 34px 0; padding: 0; grid-template-columns: repeat(6,1fr); list-style: none; }
.cook-stage { position: relative; min-height: 128px; padding: 18px 10px; color: #fff; background: var(--stage-color); border-right: 1px solid rgba(255,255,255,.24); }
.cook-stage:last-child { border-right: 0; }
.cook-stage::before { position: absolute; inset: 0; opacity: .25; background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 55%); content: ""; }
.cook-stage span, .cook-stage b, .cook-stage small { position: relative; }
.cook-stage span { display: block; color: rgba(255,255,255,.6); font: 900 8px/1 var(--sans); }
.cook-stage b { display: block; margin: 14px 0 7px; font: 700 14px/1.2 var(--serif); }
.cook-stage small { font-size: 8px; line-height: 1.4; }
.cook-stage--raw { --stage-color: #aa6253; }
.cook-stage--rare { --stage-color: #bd3f30; }
.cook-stage--medium { --stage-color: #8a2b22; }
.cook-stage--well { --stage-color: #57231b; }
.cook-stage--burnt { --stage-color: #1c1512; }
.score-table-wrap { overflow-x: auto; }
.score-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.28); font-size: 11px; }
.score-table caption { padding-bottom: 11px; text-align: left; font: 800 10px/1 var(--sans); }
.score-table th, .score-table td { min-width: 80px; padding: 13px 12px; text-align: center; border: 1px solid var(--line); }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table th { color: #6a5142; background: rgba(93,49,29,.08); font-size: 9px; }
.score-table td { font-weight: 800; }
.score-table td.is-best { color: #fff; background: var(--red); }
.card-rule-grid { display: grid; margin: 35px 0 27px; grid-template-columns: 1fr 1fr; gap: 14px; }
.card-rule-grid > div { position: relative; min-height: 390px; padding: 30px; overflow: hidden; background: rgba(255,255,255,.32); border: 1px solid var(--line); }
.card-rule-grid > div > p:first-child { margin-bottom: 8px; color: var(--red); font: 900 8px/1 var(--sans); letter-spacing: .17em; }
.card-rule-grid h3 { margin-bottom: 20px; font: 700 19px/1.4 var(--serif); }
.card-rule-grid > div > p:last-child { position: relative; z-index: 2; margin: 22px 0 0; color: #6b5e54; font-size: 10px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud span { padding: 5px 8px; color: #fff; background: #513026; font-size: 9px; font-weight: 700; }
.mini-character-stack { position: relative; height: 190px; margin: 0 5px; }
.mini-character-stack img { position: absolute; top: 0; left: 50%; width: 110px; height: 165px; object-fit: cover; object-position: top; box-shadow: 0 8px 20px rgba(44,22,12,.25); }
.mini-character-stack img:nth-child(1) { transform: translateX(-115%) rotate(-7deg); }
.mini-character-stack img:nth-child(2) { z-index: 2; transform: translateX(-50%) translateY(-8px); }
.mini-character-stack img:nth-child(3) { transform: translateX(15%) rotate(7deg); }
.happening-marquee { display: flex; margin-top: 34px; padding-block: 18px; flex-wrap: wrap; gap: 7px; border-block: 1px solid var(--line); }
.happening-marquee span { padding: 8px 11px; color: #fff; background: linear-gradient(130deg, #9d2d21, #542019); font-size: 9px; font-weight: 800; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.denmoku-rule { display: grid; margin-top: 35px; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 48px; }
.denmoku-device { position: relative; padding: 19px 19px 40px; background: linear-gradient(145deg,#333,#0e0e0e); border: 4px solid #090909; border-radius: 19px; box-shadow: 0 18px 32px rgba(43,23,13,.3), inset 0 1px 2px #777; transform: perspective(500px) rotateY(8deg) rotateX(3deg); }
.denmoku-device__screen { display: grid; aspect-ratio: 1.42; padding: 18px; place-items: center; color: #31160e; background: linear-gradient(160deg,#fff4cf,#e8b45e); border: 3px solid #080808; border-radius: 5px; box-shadow: inset 0 0 16px rgba(121,58,20,.28); }
.denmoku-device__screen span { font-size: 10px; font-weight: 800; }
.denmoku-device__screen b { font: 900 23px/1 var(--serif); }
.denmoku-device__screen i { padding: 5px 14px; color: #fff; background: var(--red); border-radius: 3px; font: 900 8px/1 var(--sans); font-style: normal; }
.denmoku-device__button { position: absolute; bottom: 13px; left: 50%; width: 35px; height: 8px; border-radius: 10px; background: #080808; transform: translateX(-50%); }
.denmoku-rule ol { margin: 0; padding: 0; list-style: none; }
.denmoku-rule li { display: grid; padding: 16px 0; grid-template-columns: 35px 1fr; gap: 14px; border-bottom: 1px solid var(--line); }
.denmoku-rule li span { color: var(--red); font: 900 13px/1.7 var(--display); }
.denmoku-rule li p { margin: 0; color: #65584f; font-size: 11px; }
.finish-sequence { display: flex; margin-top: 38px; padding: 25px; align-items: center; gap: 13px; background: rgba(255,255,255,.28); border: 1px solid var(--line); }
.finish-sequence > div { flex: 1; padding: 13px 7px; text-align: center; }
.finish-sequence span { display: block; color: #887568; font-size: 8px; font-weight: 800; }
.finish-sequence b { display: block; margin-top: 4px; font: 900 24px/1 var(--display); }
.finish-sequence > i { color: var(--red); font-style: normal; }
.finish-sequence .is-final { color: #fff; background: #64231a; }
.finish-sequence .is-final span { color: rgba(255,255,255,.55); }
.finish-sequence .is-win b { color: var(--red); }
.manual-cta { margin-top: 44px; padding: 52px; color: #fff; background: radial-gradient(circle at 80% 30%, rgba(231,85,30,.28), transparent 40%), #1a0e0a; text-align: center; }
.manual-cta p { margin-bottom: 8px; color: var(--gold-pale); font: 900 9px/1 var(--sans); letter-spacing: .13em; }
.manual-cta h3 { margin-bottom: 28px; font: 700 42px/1.25 var(--serif); }

/* Actual game screenshots */
.actual-screen { padding: 64px 0 92px; border-bottom: 1px solid var(--line); }
.actual-screen__heading { display: grid; margin-bottom: 34px; grid-template-columns: 1fr .9fr; gap: 10px 46px; align-items: end; }
.actual-screen__heading .chapter-kicker { grid-column: 1 / -1; }
.actual-screen__heading h2 { margin: 0; font: 700 clamp(32px, 4vw, 51px)/1.35 var(--serif); letter-spacing: -.03em; }
.actual-screen__heading > p:last-child { margin: 0 0 7px; color: #68594f; font-size: 12px; line-height: 1.9; }
.actual-shot { position: relative; margin: 0; overflow: hidden; color: #fff; background: #160d09; border: 1px solid rgba(113,72,43,.42); box-shadow: 0 15px 35px rgba(69,35,20,.13); }
.actual-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 848; object-fit: cover; }
.actual-shot figcaption { display: grid; min-height: 80px; padding: 17px 20px; grid-template-columns: max-content 1fr; align-items: center; gap: 18px; background: #1b100c; }
.actual-shot figcaption b { color: var(--gold-pale); font: 700 14px/1.3 var(--serif); }
.actual-shot figcaption span { color: rgba(255,255,255,.57); font-size: 9px; line-height: 1.6; }
.actual-shot--wide { margin-bottom: 13px; }
.actual-screen__details { display: grid; margin-bottom: 27px; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.actual-screen__details .actual-shot:last-child { grid-column: 1 / -1; }
.actual-screen__details .actual-shot figcaption { display: block; }
.actual-screen__details .actual-shot figcaption b { display: block; margin-bottom: 6px; }

/* Catalog */
.page-catalog { color: var(--ink); background: #f1eadf; }
.catalog-hero { position: relative; display: grid; min-height: 510px; overflow: hidden; align-items: end; color: #fff; background: #100806; }
.catalog-hero__art { position: absolute; inset: 0; }
.catalog-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 53%; }
.catalog-hero__art::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,6,4,.94), rgba(12,6,4,.58) 53%, rgba(12,6,4,.24)), linear-gradient(0deg, rgba(12,6,4,.78), transparent 55%); content: ""; }
.catalog-hero__content { position: relative; z-index: 1; padding-bottom: 65px; }
.catalog-hero__content > p { color: var(--gold-pale); font: 900 9px/1 var(--sans); letter-spacing: .25em; }
.catalog-hero h1 { margin: 14px 0 16px; font: 700 clamp(52px, 7vw, 94px)/1.05 var(--serif); letter-spacing: -.04em; }
.catalog-hero h1 em { color: var(--orange); font-style: normal; }
.catalog-hero__content > span { display: block; max-width: 580px; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.9; }
.catalog-nav-wrap { position: sticky; z-index: 4; top: var(--header-h); color: #fff; background: rgba(20,11,8,.97); border-bottom: 1px solid rgba(221,171,81,.28); backdrop-filter: blur(12px); }
.catalog-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
.catalog-tabs button { display: grid; min-height: 82px; padding: 13px 17px; place-items: center; color: rgba(255,255,255,.57); background: transparent; border-right: 1px solid rgba(255,255,255,.11); font: 800 11px/1.2 var(--sans); letter-spacing: .07em; transition: color .2s, background .2s; }
.catalog-tabs button:last-child { border-right: 0; }
.catalog-tabs button span { display: block; margin-top: 5px; color: rgba(255,255,255,.28); font-size: 7px; letter-spacing: .16em; }
.catalog-tabs button:is(:hover, [aria-selected="true"]) { color: #1a0b06; background: var(--gold-pale); }
.catalog-tabs button:is(:hover, [aria-selected="true"]) span { color: rgba(26,11,6,.5); }
.catalog-main { min-height: 900px; padding: 88px 0 110px; }
.catalog-panel:focus { outline: none; }
.catalog-intro { display: grid; margin-bottom: 48px; grid-template-columns: 1fr .8fr; gap: 10px 65px; align-items: end; }
.catalog-intro > p { grid-column: 1 / -1; margin: 0; color: var(--red); font: 900 9px/1 var(--sans); letter-spacing: .22em; }
.catalog-intro h2 { margin: 0; font: 700 clamp(35px, 4.8vw, 64px)/1.25 var(--serif); letter-spacing: -.04em; }
.catalog-intro > span { margin-bottom: 8px; color: #6d5e53; font-size: 12px; line-height: 1.9; }
.meat-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.meat-catalog-card { position: relative; display: grid; min-width: 0; grid-template-columns: .78fr 1.22fr; overflow: hidden; background: rgba(255,255,255,.5); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(76,42,25,.08); }
.meat-catalog-card__head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; padding: 13px 15px; justify-content: space-between; color: rgba(255,255,255,.66); background: linear-gradient(rgba(16,8,6,.94), rgba(16,8,6,.64), transparent); font: 800 7px/1 var(--sans); letter-spacing: .1em; }
.meat-catalog-card__head b { color: var(--gold-pale); }
.meat-catalog-card__visual { position: relative; display: grid; min-height: 360px; overflow: hidden; place-items: center; background: radial-gradient(circle, #5e251b, #170c08 72%); }
.meat-catalog-card__visual img { width: 100%; height: 100%; padding: 44px 10px 55px; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(0,0,0,.38)); }
.meat-catalog-card__visual > p { position: absolute; right: 13px; bottom: 12px; left: 13px; display: flex; margin: 0; padding-top: 9px; align-items: center; justify-content: space-between; color: #fff; border-top: 1px solid rgba(255,255,255,.2); }
.meat-catalog-card__visual span { font: 700 11px/1 var(--serif); }
.meat-catalog-card__visual b { color: var(--gold-pale); font: 900 15px/1 var(--display); }
.meat-catalog-card__body { padding: 48px 23px 22px; }
.meat-catalog-card__body h3 { margin: 0 0 6px; font: 700 25px/1.3 var(--serif); }
.meat-catalog-card__body > p { margin: 0 0 23px; color: #8a7465; font-size: 9px; }
.meat-stage-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.meat-stage-buttons button { display: flex; min-width: 0; padding: 9px 8px; align-items: center; justify-content: space-between; color: #67564b; background: rgba(90,52,31,.045); border: 1px solid rgba(93,54,32,.16); font-size: 8px; transition: background .18s, color .18s, border-color .18s; }
.meat-stage-buttons button b { margin-left: 5px; font-size: 7px; }
.meat-stage-buttons button:is(:hover, [aria-pressed="true"]) { color: #fff; background: var(--red); border-color: var(--red); }
.catalog-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-item-card { min-width: 0; overflow: hidden; background: rgba(255,255,255,.5); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(76,42,25,.07); }
.catalog-item-card__image { position: relative; aspect-ratio: 2 / 2.35; overflow: hidden; background: #1b0e0a; }
.catalog-card-grid--action .catalog-item-card__image { aspect-ratio: 10 / 7; }
.catalog-card-grid--happening .catalog-item-card__image { aspect-ratio: 5 / 7; }
.catalog-item-card__image::after { position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(12,6,4,.65)); content: ""; pointer-events: none; }
.catalog-item-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s var(--ease); }
.catalog-item-card:hover .catalog-item-card__image img { transform: scale(1.025); }
.catalog-item-card__body { padding: 20px 21px 23px; }
.catalog-item-card__body > p { margin: 0 0 9px; color: var(--red); font: 900 8px/1 var(--sans); letter-spacing: .17em; }
.catalog-item-card__body h3 { margin: 0 0 15px; font: 700 22px/1.3 var(--serif); }
.catalog-item-card__body dl { display: flex; margin: 0 0 15px; gap: 7px; }
.catalog-item-card__body dl > div { display: flex; padding: 7px 9px; gap: 7px; background: rgba(85,50,31,.07); }
.catalog-item-card__body dt { color: #9b806e; font: 800 7px/1 var(--sans); }
.catalog-item-card__body dd { margin: 0; color: #5b3323; font: 900 8px/1 var(--sans); }
.catalog-item-card__body > span { display: block; min-height: 54px; color: #695a50; font-size: 10px; line-height: 1.75; }
.title-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.title-catalog-card { position: relative; min-width: 0; padding: 13px 13px 23px; text-align: center; background: rgba(255,255,255,.5); border: 1px solid var(--line); }
.title-catalog-card > div { display: grid; aspect-ratio: 1; margin-bottom: 17px; overflow: hidden; place-items: center; background: radial-gradient(circle, #492116, #140b08 72%); }
.title-catalog-card img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 10px 17px rgba(0,0,0,.43)); }
.title-catalog-card > p { margin: 0 0 7px; color: var(--red); font: 900 7px/1 var(--sans); letter-spacing: .18em; }
.title-catalog-card h3 { margin: 0 0 10px; font: 700 18px/1.35 var(--serif); }
.title-catalog-card > span { display: block; min-height: 48px; color: #76645a; font-size: 9px; line-height: 1.65; }
.title-catalog-card > b { display: inline-block; margin-top: 10px; padding: 7px 12px; color: #fff; background: var(--red); font: 900 13px/1 var(--display); }
.title-catalog-card > b.is-minus { background: #25201d; }

/* Responsive */
@media (max-width: 1080px) {
  :root { --shell: min(100% - 48px, 940px); }
  .primary-nav { gap: 17px; }
  .primary-nav > a:not(.nav-play) { font-size: 10px; }
  .world-grid { grid-template-columns: .82fr 1.18fr; gap: 58px 44px; }
  .world-copy { grid-template-columns: .82fr 1.18fr; gap: 44px; }
  .character-grid { grid-template-columns: repeat(3, 1fr); }
  .character-card:nth-child(10), .character-card:nth-child(11), .character-card:nth-child(12) { aspect-ratio: 2 / 3; }
  .promotion-gallery { grid-template-columns: minmax(0,1fr) 280px; }
  .tactics-link { grid-template-columns: 1fr .8fr 1.2fr; }
  .soundtrack-console { grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); }
  .soundtrack-now__body { padding-inline: 30px; }
  .soundtrack-track button { padding-right: 10px; grid-template-columns: 42px 22px minmax(0,1fr) 34px 10px; gap: 6px; }
  .rules-layout { grid-template-columns: 190px 1fr; gap: 45px; }
}

@media (max-width: 900px) {
  .system-board--actual { grid-template-columns: 1fr; }
  .system-board--actual .ap-demo { border-top: 1px solid rgba(230,182,95,.25); border-left: 0; }
  .system-board--actual .ap-demo ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
}

@media (max-width: 820px) {
  :root { --header-h: 68px; --shell: calc(100% - 36px); }
  .site-header, .site-header.is-scrolled, .site-header--solid { height: var(--header-h); }
  .site-header__inner { width: calc(100% - 28px); }
  .site-brand img { width: 133px; }
  .site-brand > span { display: none; }
  .nav-toggle { position: relative; z-index: 3; display: flex; padding: 10px 3px 10px 12px; align-items: center; gap: 10px; }
  .nav-toggle__label { font: 800 9px/1 var(--sans); letter-spacing: .14em; }
  .nav-toggle__bars { display: grid; gap: 6px; }
  .nav-toggle__bars i { display: block; width: 22px; height: 1px; background: currentColor; transition: transform .25s, width .25s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .primary-nav { position: fixed; inset: 0; display: grid; height: 100svh; padding: 110px 34px 38px; align-content: center; gap: 0; visibility: hidden; opacity: 0; background: radial-gradient(circle at 100% 0, rgba(207,58,24,.22), transparent 40%), #100907; transform: translateY(-12px); transition: visibility .3s, opacity .3s, transform .3s; }
  .primary-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .primary-nav > a:not(.nav-play) { height: auto; padding: 17px 8px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.13); font: 700 22px/1 var(--serif); }
  .primary-nav > a:not(.nav-play)::after { display: none; }
  .primary-nav > a > span { width: 25px; font-size: 9px; }
  .primary-nav .nav-play { min-height: 55px; margin-top: 26px; justify-content: center; font-size: 14px; }
  .section { padding-block: 92px; }
  .section-heading--row { display: block; }
  .section-heading--row > p { margin-bottom: 28px; }
  .section-heading h2 { font-size: clamp(38px, 9vw, 61px); }
  .hero { height: max(700px, 100svh); min-height: 700px; }
  .hero__shade { background: linear-gradient(90deg, rgba(6,4,3,.78), rgba(6,4,3,.25)), linear-gradient(0deg, rgba(6,4,3,.86), transparent 65%), linear-gradient(180deg, rgba(6,4,3,.42), transparent 35%); }
  .hero__frame { inset: 84px 14px 14px; }
  .hero__content { padding-top: 14px; }
  .hero__logo-wrap { width: min(520px, 75vw); margin-left: -12px; }
  .hero__facts { right: 18px; bottom: 24px; }
  .hero__facts div { min-width: 95px; padding-inline: 13px; }
  .hero__slide-control { top: auto; right: 20px; bottom: 115px; transform: none; }
  .hero__scroll { display: none; }
  .world-grid { display: block; }
  .world-heading { max-width: 560px; margin-bottom: 42px; }
  .world-visual { width: calc(100% + 18px); min-height: 360px; margin-bottom: 55px; }
  .world-visual img { height: 430px; }
  .world-copy { display: grid; grid-template-columns: 70px 1fr; gap: 25px; }
  .world-law { margin: -18px 0 55px; grid-template-columns: 120px 1fr; }
  .vertical-word { justify-self: start; font-size: 26px !important; }
  .system-board { grid-template-columns: 1fr; }
  .ap-demo { min-height: auto; border-top: 1px solid rgba(230,182,95,.25); border-left: 0; }
  .ap-demo ul { display: grid; grid-template-columns: 1fr 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(76,48,29,.27); }
  .feature-card__top { margin-bottom: 25px; }
  .promotion-gallery { grid-template-columns: 1fr; }
  .promotion-stage { border-right: 0; border-bottom: 1px solid rgba(238,193,108,.25); }
  .promotion-stage__visual { min-height: 440px; }
  .promotion-gallery.is-portrait .promotion-stage__visual { min-height: 610px; }
  .promotion-selector { padding: 22px; }
  .promotion-selector > div { display: grid; grid-template-columns: 1fr 1fr; }
  .promotion-selector__item:nth-child(odd) button { border-right: 1px solid rgba(255,255,255,.11); }
  .promotion-selector__item button { min-height: 91px; }
  .promotion-selector__item:nth-last-child(2) button { border-bottom: 1px solid rgba(255,255,255,.11); }
  .character-grid { grid-template-columns: repeat(2, 1fr); }
  .character-card, .character-card:nth-child(n) { aspect-ratio: 2 / 3; }
  .tactics-link { grid-template-columns: 1fr 1fr; }
  .tactics-link__heading { grid-column: 1 / -1; padding-right: 0; }
  .tactics-selected { border-left: 0; }
  .soundtrack-heading { margin-bottom: 36px; }
  .soundtrack-console { grid-template-columns: 1fr; }
  .soundtrack-now { border-right: 0; border-bottom: 1px solid rgba(232,183,94,.22); }
  .soundtrack-now__visual { height: min(52vw, 400px); }
  .soundtrack-tracklist { display: grid; height: auto; max-height: 520px; grid-template-columns: 1fr 1fr; }
  .soundtrack-track:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.075); }
  .round-flow { grid-template-columns: 1fr 1fr; }
  .round-flow li:nth-child(2) { border-right: 0; }
  .round-flow li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; flex-wrap: wrap; }
  .site-footer__meta { grid-column: 1; }
  .character-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100svh - 24px); }
  .character-dialog.is-sheet-mode { width: min(760px, calc(100vw - 24px)); }
  .character-dialog__shell { max-height: calc(100svh - 26px); grid-template-columns: .8fr 1.2fr; }
  .character-dialog.is-sheet-mode .character-dialog__shell { grid-template-columns: .92fr 1.08fr; }
  .character-dialog__body { padding: 56px 32px 35px; }
  .character-dialog__name-row h2 { font-size: 35px; }
  .dialog-close { top: 20px; right: 20px; }
  .dialog-arrow { top: auto; bottom: 16px; width: 43px; height: 43px; transform: none; }
  .dialog-arrow--prev { left: 19px; }
  .dialog-arrow--next { right: 19px; }

  .rules-hero { min-height: 540px; }
  .rules-layout { display: block; padding-top: 60px; }
  .rules-toc { position: relative; top: auto; margin-bottom: 75px; }
  .rules-toc ol { display: grid; grid-template-columns: repeat(3, 1fr); }
  .rules-toc a:not(.toc-play) { border-bottom: 1px solid var(--line); }
  .toc-play { width: 180px; }
  .manual-grill { grid-template-columns: 1fr; }
  .cook-stage-track { grid-template-columns: repeat(3,1fr); }
  .cook-stage { border-bottom: 1px solid rgba(255,255,255,.24); }
  .actual-screen__heading { grid-template-columns: 1fr; }
  .actual-screen__details { grid-template-columns: 1fr; }
  .actual-screen__details .actual-shot:last-child { grid-column: auto; }
  .catalog-hero { min-height: 470px; }
  .catalog-intro { grid-template-columns: 1fr; }
  .meat-catalog-grid { grid-template-columns: 1fr; }
  .catalog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); }
  .section { padding-block: 78px; }
  .section-heading__index { margin-bottom: 21px; }
  .section-heading h2 { font-size: 39px; }
  .promotion-heading { margin-bottom: 32px; }
  .promotion-stage__visual, .promotion-gallery.is-portrait .promotion-stage__visual { min-height: 0; }
  .promotion-stage__visual img { width: 100%; height: auto; max-height: none; }
  .promotion-stage__copy { min-height: 0; padding: 23px 19px 25px; grid-template-columns: 1fr; }
  .promotion-stage__copy h3 { font-size: 24px; }
  .promotion-stage__copy > span { grid-column: 1; }
  .promotion-stage__copy > b { grid-column: 1; grid-row: auto; margin-top: 18px; justify-self: start; }
  .promotion-selector { padding: 20px 15px; }
  .promotion-selector > div { display: block; }
  .promotion-selector__item:nth-child(odd) button { border-right: 0; }
  .promotion-selector__item button { min-height: 83px; }
  .soundtrack-section { padding-block: 84px; }
  .soundtrack-now__visual { height: 310px; }
  .soundtrack-now__stamp { top: 17px; left: 17px; width: 65px; height: 65px; }
  .soundtrack-now__stamp span { top: 11px; }
  .soundtrack-now__stamp b { bottom: 9px; font-size: 34px; }
  .soundtrack-equalizer { right: 16px; bottom: 16px; }
  .soundtrack-now__body { padding: 25px 20px 28px; }
  .soundtrack-now__title-row { align-items: start; gap: 13px; }
  .soundtrack-now__title-row h3 { font-size: 28px; }
  .soundtrack-now__duration { padding-top: 4px; font-size: 9px; }
  .soundtrack-now blockquote { font-size: 13px; }
  .soundtrack-now__concept { min-height: 0; }
  .soundtrack-controls { grid-template-columns: 62px 1fr; gap: 13px; }
  .soundtrack-play { width: 59px; height: 59px; border-width: 3px; }
  .soundtrack-play span { font-size: 15px; }
  .soundtrack-now__note { margin-left: 75px; }
  .soundtrack-tracklist { display: block; height: auto; max-height: none; overflow: visible; }
  .soundtrack-track:nth-child(odd) { border-right: 0; }
  .soundtrack-track button { height: 56px; padding-inline: 9px 13px; grid-template-columns: 41px 23px minmax(0,1fr) 34px 10px; }
  .soundtrack-library__head { padding-inline: 17px; }
  .hero { min-height: 760px; }
  .hero__media { inset: 0 -38%; width: 176%; }
  .hero__image { object-position: 50% center !important; }
  .hero__shade { background: linear-gradient(180deg, rgba(5,3,2,.4), rgba(6,4,3,.13) 35%, rgba(6,4,3,.91) 76%), linear-gradient(90deg, rgba(6,4,3,.6), transparent); }
  .hero__content { align-self: end; padding: 0 0 190px; }
  .hero__eyebrow { font-size: 8px; }
  .hero__logo-wrap { width: calc(100% + 15px); margin-left: -8px; }
  .hero__catch { font-size: 31px; }
  .hero__lead { font-size: 12px; }
  .hero__actions { align-items: stretch; }
  .hero__actions .button--fire { flex: 1; min-width: 0; }
  .hero__actions .button--ghost { display: none; }
  .hero__facts { bottom: 23px; left: 14px; right: 14px; }
  .hero__facts div { flex: 1; min-width: 0; padding: 11px 9px; }
  .hero__facts dd { font-size: 11px; }
  .hero__slide-control { right: 19px; bottom: 102px; }
  .world-section::before { width: 300px; }
  .world-visual { width: calc(100% + 14px); min-height: 310px; }
  .world-visual img { height: 360px; object-position: 55% 50%; }
  .world-visual figcaption { padding: 38px 20px 18px; }
  .world-visual figcaption b { font-size: 16px; }
  .world-visual figcaption span { display: none; }
  .world-law { display: block; padding: 26px 22px; }
  .world-law > p { margin-bottom: 17px; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .world-law > p b { font-size: 20px; }
  .world-law blockquote { margin-bottom: 15px; font-size: 15px; }
  .world-copy { grid-template-columns: 40px 1fr; gap: 10px; }
  .world-copy h3 { font-size: 27px; }
  .vertical-word { font-size: 20px !important; }
  .system-board { min-height: auto; margin-top: 20px; border-width: 4px; }
  .gameplay-demo__eyebrow { min-height: 42px; padding-inline: 14px; }
  .gameplay-demo figcaption { min-height: 0; padding: 19px 17px 21px; grid-template-columns: 1fr; gap: 7px; }
  .gameplay-demo figcaption b { display: block; font-size: 16px; }
  .gameplay-demo figcaption span { font-size: 10px; }
  .grill-demo { min-height: 380px; }
  .grill-demo::before { width: 68%; border-width: 10px; }
  .grill-demo__grid { width: 58%; }
  .grill-demo__label::after { width: 36px; }
  .grill-demo__label--normal { left: 5%; }
  .grill-demo__label--hot { right: 4%; }
  .ap-demo { padding: 40px 27px; }
  .system-board--actual .ap-demo { padding: 36px 24px 27px; }
  .system-board--actual .ap-demo ul { column-gap: 15px; }
  .system-rules-link { min-height: 68px; margin-top: 20px; }
  .ap-demo > strong i { font-size: 70px; }
  .character-toolbar { display: block; }
  .character-toolbar > p { display: none; }
  .character-grid { gap: 7px; }
  .character-card__copy { inset: auto 10px 12px; }
  .character-card__copy h3 { font-size: 18px; }
  .character-card__copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .character-card__number { top: 9px; left: 9px; width: 30px; height: 30px; }
  .character-card__type { top: 10px; right: 8px; font-size: 7px; }
  .character-card__arrow { display: none; }
  .tactics-link { grid-template-columns: 1fr; }
  .tactics-selected { border: 1px solid rgba(255,255,255,.14); }
  .tactics-related { min-height: 140px; }
  .rules-teaser { min-height: 850px; padding-block: 80px; }
  .rules-teaser__art img { object-position: 68% center; }
  .rules-teaser__art::after { background: linear-gradient(180deg, rgba(36,12,8,.89) 0%, rgba(39,12,8,.72) 68%, rgba(20,7,5,.9)); }
  .round-flow { grid-template-columns: 1fr; }
  .round-flow li { padding-left: 42px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .round-flow span { top: 26px; left: 0; }
  .final-cta { min-height: 580px; }
  .final-cta h2 { font-size: 51px; }
  .button--large { min-width: min(320px, 100%); }
  .site-footer nav { gap: 15px 19px; }
  .site-footer__meta { align-items: flex-start; gap: 20px; }
  .character-dialog { width: calc(100vw - 12px); max-height: calc(100svh - 12px); }
  .character-dialog.is-sheet-mode { width: calc(100vw - 12px); }
  .character-dialog__shell { display: block; max-height: calc(100svh - 14px); }
  .character-dialog.is-sheet-mode .character-dialog__shell { display: block; }
  .character-dialog__art { --art-tabs-h: 76px; position: relative; min-height: min(77svh, 620px); }
  .character-dialog__body { padding: 42px 21px 78px; }
  .character-dialog__name-row { align-items: flex-end; }
  .character-dialog__name-row h2 { font-size: 32px; }
  .character-dialog__profile { grid-template-columns: 1fr; }
  .character-dialog__anthem { padding-inline: 16px; }
  .character-dialog__anthem-head h3 { font-size: 16px; }
  .character-dialog__relations > div { flex-wrap: wrap; }
  .dialog-close { top: 13px; right: 13px; background: rgba(12,7,5,.84); }
  .dialog-arrow { position: fixed; bottom: 10px; }
  .dialog-arrow--prev { left: 10px; }
  .dialog-arrow--next { right: 10px; }

  .rules-hero { min-height: 610px; align-items: flex-end; padding-bottom: 70px; }
  .rules-hero__art { inset: 0 -45%; }
  .rules-hero__shade { background: linear-gradient(0deg, rgba(8,4,3,.94) 0%, rgba(10,5,3,.38) 68%), linear-gradient(90deg, rgba(10,5,3,.5), transparent); }
  .rules-hero h1 { font-size: 53px; }
  .rules-hero__stamp { right: 18px; bottom: 26px; width: 75px; height: 75px; opacity: .7; }
  .rules-hero__stamp b { bottom: 15px; font-size: 20px; }
  .rules-hero__stamp span { top: 14px; }
  .rules-toc ol { grid-template-columns: 1fr 1fr; }
  .manual-intro .quick-flow { grid-template-columns: 1fr; }
  .manual-intro .quick-flow li { padding-left: 42px; border-right: 0; border-bottom: 1px solid var(--line); }
  .manual-intro .quick-flow span { top: 26px; left: 0; }
  .rule-chapter { display: block; padding-block: 56px 70px; }
  .chapter-number { position: static; display: flex; margin-bottom: 20px; align-items: center; gap: 9px; text-align: left; }
  .chapter-number b { font-size: 39px; }
  .chapter-body > h2 { font-size: 31px; }
  .rule-callout { grid-template-columns: 55px 1fr; padding: 22px 18px; }
  .rule-callout > span { font-size: 35px; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-grid > div { min-height: auto; }
  .manual-grill__board { border-width: 7px; }
  .action-row { grid-template-columns: 1fr 55px; }
  .action-row p { grid-column: 1 / -1; }
  .turn-end-flow { display: grid; grid-template-columns: 1fr; }
  .turn-end-flow > i { text-align: center; transform: rotate(90deg); }
  .cook-stage-track { grid-template-columns: 1fr 1fr; }
  .cook-stage { min-height: 105px; }
  .card-rule-grid { grid-template-columns: 1fr; }
  .denmoku-rule { grid-template-columns: 1fr; gap: 27px; }
  .denmoku-device { width: min(300px, 88%); margin: auto; }
  .finish-sequence { display: grid; grid-template-columns: 1fr 20px 1fr; }
  .finish-sequence > i:nth-of-type(2), .finish-sequence > i:nth-of-type(3) { transform: rotate(90deg); }
  .finish-sequence .is-final, .finish-sequence .is-win { grid-column: 1 / -1; }
  .manual-cta { padding: 43px 18px; }
  .actual-screen { padding-block: 52px 68px; }
  .actual-shot figcaption { display: block; }
  .actual-shot figcaption b { display: block; margin-bottom: 6px; }
  .catalog-hero { min-height: 570px; align-items: end; }
  .catalog-hero__art { inset: 0 -38%; }
  .catalog-hero__content { padding-bottom: 55px; }
  .catalog-hero h1 { font-size: 54px; }
  .catalog-nav-wrap { overflow: visible; }
  .catalog-tabs { width: 100%; grid-template-columns: repeat(2, 1fr); }
  .catalog-tabs button { min-height: 68px; font-size: 10px; }
  .catalog-main { padding-block: 64px 85px; }
  .catalog-intro { margin-bottom: 34px; }
  .catalog-intro h2 { font-size: 36px; }
  .meat-catalog-card { display: block; }
  .meat-catalog-card__visual { min-height: 320px; }
  .meat-catalog-card__body { padding-top: 27px; }
  .catalog-card-grid { grid-template-columns: 1fr; }
  .catalog-item-card { display: grid; grid-template-columns: .78fr 1.22fr; }
  .catalog-item-card__image { aspect-ratio: auto; min-height: 280px; }
  .catalog-item-card__body { align-self: center; }
  .catalog-card-grid--action .catalog-item-card { display: block; }
  .catalog-card-grid--action .catalog-item-card__image { min-height: 0; aspect-ratio: 10 / 7; }
  .catalog-card-grid--happening .catalog-item-card { display: block; }
  .catalog-card-grid--happening .catalog-item-card__image { min-height: 0; aspect-ratio: 5 / 7; }
  .title-catalog-grid { grid-template-columns: 1fr 1fr; }
  .title-catalog-card { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .hero__image.is-active { transform: scale(1.02); }
  .reveal { opacity: 1; transform: none; }
}