:root {
  --shell-width: 430px;
  --shell-height: 932px;
  --paper: #eeeae1;
  --paper-light: #f8f5ee;
  --ink: #0a0a0b;
  --ink-soft: #292729;
  --red: #d7192d;
  --red-dark: #7c0715;
  --gray: #817d78;
  --line: rgba(10, 10, 11, .18);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: #0a0a0b;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0a0a0b;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button, a { touch-action: manipulation; }
[hidden] { display: none !important; }

.desktop-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 3vw;
  color: rgba(255,255,255,.055);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(40px, 8vw, 140px);
  letter-spacing: -.05em;
  writing-mode: vertical-rl;
  pointer-events: none;
}

.desktop-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 46%, rgba(215,25,45,.14) 46.1% 47%, transparent 47.1%),
    repeating-linear-gradient(90deg, transparent 0 99px, rgba(255,255,255,.018) 100px);
}

.game-shell {
  position: relative;
  z-index: 1;
  width: min(100vw, var(--shell-width));
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.paper-grain {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: .27;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 18% 23%, rgba(0,0,0,.07) 0 .35px, transparent .45px 3px),
    repeating-radial-gradient(circle at 72% 63%, rgba(255,255,255,.18) 0 .4px, transparent .5px 4px);
  background-size: 11px 13px, 17px 19px;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 580px;
  overflow: hidden;
  background: var(--paper);
}

.screen.is-active { animation: screen-enter 420ms cubic-bezier(.18,.8,.2,1) both; }
.screen.is-leaving { animation: screen-leave 210ms ease-in both; pointer-events: none; }

.portal-splash {
  z-index: 30;
  display: none;
  place-items: center;
  background: #fff;
}
.portal-splash.is-active {
  display: grid;
  animation: none;
}
.portal-splash img {
  display: block;
  width: min(68%, 290px);
  height: auto;
  animation: none;
}

.game-select-screen {
  z-index: 30;
  display: none;
  color: #fff;
  background: #090b0e;
}
.game-select-screen.is-active { display: block; }
.game-select-header {
  position: absolute;
  z-index: 5;
  top: max(19px, env(safe-area-inset-top));
  left: 18px;
  right: 18px;
  min-height: 102px;
  padding: 17px 68px 15px 17px;
  border: 1px solid rgba(255,255,255,.66);
  color: #111216;
  background: #f8f7f3;
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
}
.game-select-kicker {
  margin: 0 0 8px;
  color: #ce1328;
  font: 900 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .24em;
}
.game-select-header h2 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(20px, 6vw, 27px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
}
.game-select-back {
  position: absolute;
  top: 14px;
  right: 12px;
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 34px;
  border: 1px solid #111216;
  color: #111216;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.game-select-back:hover, .game-select-back:focus-visible { color: #fff; background: #111216; outline: none; }
.game-choice-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.game-choice {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #fff;
  background: #111216;
  cursor: pointer;
}
.game-choice video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  filter: saturate(.96) contrast(1.05) brightness(.76);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 300ms ease;
}
.game-choice-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,6,10,.17) 0 48%, rgba(4,6,10,.82) 100%);
}
.game-choice-number {
  position: absolute;
  z-index: 2;
  top: 146px;
  left: 14px;
  color: rgba(255,255,255,.92);
  font: 900 42px/1 Impact, "Arial Narrow", sans-serif;
  letter-spacing: -.03em;
  text-shadow: 0 2px 10px rgba(0,0,0,.42);
}
.game-choice-card .game-choice-number { color: #ef2639; }
.game-choice-label {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 12px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.58);
  text-align: left;
}
.game-choice-label small { display: block; margin-bottom: 8px; color: #f1394b; font: 900 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; }
.game-choice-label strong { display: block; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 17px; line-height: 1.35; }
.game-choice:hover video, .game-choice:focus-visible video { transform: scale(1.055); filter: saturate(1.08) contrast(1.06) brightness(.92); }
.game-choice:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.game-choice-divider {
  position: absolute;
  z-index: 4;
  top: 132px;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: #2b75ef;
  box-shadow: 0 0 16px rgba(43,117,239,.68);
  pointer-events: none;
}

.notice-screen {
  z-index: 30;
  display: none;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  color: #fff;
  background: #050506;
  cursor: pointer;
}
.notice-screen.is-active { display: grid; }
.notice-card {
  position: relative;
  width: 100%;
  padding: 30px 24px 26px;
  border-radius: 13px;
  color: #111216;
  background: #f7f5ef;
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
}
.notice-mark {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 auto 13px;
  border-right: 31px solid transparent;
  border-bottom: 54px solid #f0c520;
  border-left: 31px solid transparent;
  filter: drop-shadow(0 3px 0 #111216);
}
.notice-mark span { position: absolute; top: 20px; left: 0; transform: translateX(-50%); font: 900 27px/1 sans-serif; }
.notice-card h2 { margin: 0 0 25px; text-align: center; font: 900 29px/1 Impact, "Arial Narrow", sans-serif; letter-spacing: .16em; }
.notice-copy { font-size: 11px; font-weight: 600; line-height: 1.75; }
.notice-copy p { margin: 0 0 13px; }
.notice-skip { margin: 23px 0 0; color: #77716a; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .08em; }

.title-screen {
  display: none;
  padding:
    max(20px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
  background:
    linear-gradient(90deg, transparent 0 91%, var(--ink) 91% 92%, transparent 92%),
    linear-gradient(180deg, var(--paper-light), var(--paper));
}
.title-screen.is-active { display: block; }
.title-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  height: 100%;
  border-left: 1px solid rgba(10,10,11,.1);
}

.title-index {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  padding-left: 16px;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .22em;
}

.device-note {
  position: absolute;
  z-index: 4;
  top: max(44px, calc(env(safe-area-inset-top) + 30px));
  left: 38px;
  margin: 0;
  color: #5e5955;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .13em;
}

.moon-composition {
  position: absolute;
  z-index: 1;
  top: 48px;
  right: -62px;
  width: min(95vw, 410px);
  aspect-ratio: 1;
  animation: composition-arrive 900ms cubic-bezier(.17,.84,.27,1) both;
}
.moon-composition svg { display: block; width: 100%; height: 100%; overflow: visible; }
.moon-rings { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 8; opacity: .45; transform-origin: center; animation: spin 34s linear infinite; }
.moon-rings circle:last-child { stroke: var(--red); stroke-dasharray: 1 15; stroke-width: 2; }
.moon-disc { transform-origin: center; animation: moon-breathe 7s ease-in-out infinite; }
.moon-cuts { fill: var(--paper-light); }
.moon-cuts path { animation: cut-slide 1s cubic-bezier(.16,.86,.28,1) both; }
.moon-cuts path:nth-child(2) { animation-delay: 90ms; }
.moon-cuts path:nth-child(3) { animation-delay: 160ms; }
.moon-orbits { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .65; }
.moon-orbits path:last-child { stroke: var(--red); stroke-width: 2; stroke-dasharray: 110 400; animation: orbit-dash 6s ease-in-out infinite; }
.title-lockup {
  position: absolute;
  z-index: 3;
  top: 42%;
  left: 26px;
  width: calc(100% - 52px);
  padding: 16px 0 13px 12px;
  background: rgba(248,245,238,.83);
  border-block: 1px solid var(--ink);
  backdrop-filter: blur(3px);
  animation: title-lockup-in 780ms 170ms cubic-bezier(.17,.84,.27,1) both;
}
.title-overline {
  margin: 0;
  font: 800 7px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .28em;
}
.title-overline { margin-bottom: 7px; color: var(--ink); }
.title-logo {
  display: block;
  width: 108%;
  max-width: none;
  height: auto;
  margin-left: -4%;
  filter: contrast(1.08) saturate(1.12);
}

.title-actions {
  position: absolute;
  z-index: 4;
  left: 38px;
  right: 38px;
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 34px));
  display: grid;
  justify-items: start;
  gap: 19px;
}
.title-sub-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 17px; }
.title-sub-actions .text-link { margin-left: 18px; }
.title-sub-actions .text-link + .text-link { margin-left: 0; }
.credit-link, .sound-toggle, .title-game-select-link { border-width: 0 0 1px; background: transparent; cursor: pointer; }
.sound-toggle[aria-pressed="false"] { color: #77716a; border-bottom-style: dashed; }

.slash-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 62px;
  padding: 11px 29px 11px 25px;
  overflow: hidden;
  border: 0;
  color: var(--paper-light);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 6% 50%);
  transition: transform 160ms ease, filter 160ms ease;
}
.slash-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-104%);
  background: var(--red);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.slash-button:hover::before, .slash-button:focus-visible::before { transform: translateX(0); }
.slash-button:hover, .slash-button:focus-visible { outline: none; transform: translateX(4px); }
.slash-button:active { transform: translateX(1px) scale(.99); }
.slash-button-dark { background: var(--ink); }
.slash-button-red { background: var(--red); }
.slash-button-red::before { background: var(--ink); }
.slash-button span { font: 900 17px/1 Impact, "Arial Narrow", "Yu Gothic", sans-serif; letter-spacing: .12em; }
.slash-button small { font-size: 9px; font-weight: 700; letter-spacing: .12em; opacity: .72; }
.text-link {
  margin-left: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
}
.text-link:hover, .text-link:focus-visible { color: var(--red); border-color: var(--red); outline: none; }
.title-footer {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  bottom: max(12px, env(safe-area-inset-bottom));
  margin: 0;
  color: rgba(10,10,11,.52);
  text-align: center;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}

.screen-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 38px auto 1fr;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: max(14px, env(safe-area-inset-top)) 20px 10px;
  border-bottom: 1px solid var(--ink);
}
.screen-header p { margin: 0; font: 900 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.screen-header p span { margin-right: 6px; color: var(--red); }
.icon-button {
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.icon-button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--ink); font-size: 20px; }
.icon-button:hover, .icon-button:focus-visible { color: var(--paper-light); background: var(--ink); outline: none; }
.header-rule { height: 1px; background: var(--line); }
.eyebrow { margin: 0; color: var(--red); font: 900 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; }

.guide-screen { display: none; background: var(--paper-light); }
.guide-screen.is-active { display: block; }
.guide-screen::before {
  content: "00";
  position: absolute;
  top: 80px;
  right: -10px;
  color: rgba(10,10,11,.055);
  font: 900 190px/.8 Impact, "Arial Narrow", sans-serif;
}
.guide-hero { position: relative; z-index: 1; padding: 49px 28px 16px; }
.guide-hero h2 { margin: 13px 0 18px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(30px, 8.5vw, 36px); font-weight: 700; line-height: 1.22; letter-spacing: -.08em; white-space: nowrap; }
.guide-hero h2 em { color: var(--paper-light); font-style: normal; background: var(--red); }
.guide-lead { width: 85%; margin: 0; color: #514d49; font-size: 12px; line-height: 1.9; }
.tutorial-player {
  position: relative;
  z-index: 2;
  margin: 3px 20px 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  color: var(--paper-light);
  background: #101115;
  box-shadow: 7px 7px 0 rgba(215,25,45,.95);
}
.tutorial-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; height: 31px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.22); font: 800 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.tutorial-status p { margin: 0; }
.tutorial-status p span:first-child, .tutorial-status > span { color: #f02a3d; }
.tutorial-progress { display: flex; gap: 3px; }
.tutorial-progress span { flex: 1; height: 2px; background: rgba(255,255,255,.18); }
.tutorial-progress span.is-past { background: rgba(255,255,255,.62); }
.tutorial-progress span.is-current { background: #ef2035; }
.tutorial-board { position: relative; height: 274px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(215,25,45,.09), transparent 43%), repeating-linear-gradient(125deg, transparent 0 34px, rgba(255,255,255,.025) 35px 36px), #16181d; }
.tutorial-board::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px rgba(0,0,0,.55); }
.tutorial-resource { position: absolute; z-index: 3; left: 9px; right: 9px; display: flex; align-items: center; gap: 7px; color: #ccc7be; font: 700 6px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.tutorial-resource > span { margin-right: auto; color: #fff; font-size: 7px; }
.tutorial-resource b { font-weight: 700; }
.tutorial-resource em { color: #fff; font: 900 10px/1 Impact, sans-serif; font-style: normal; }
.tutorial-resource-enemy { top: 7px; }
.tutorial-resource-player { bottom: 72px; }
.tutorial-row { position: absolute; z-index: 2; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); }
.tutorial-row-enemy { top: 25px; flex-direction: row-reverse; }
.tutorial-row-player { top: 139px; }
.tutorial-slot { position: relative; display: grid; place-items: center; width: 65px; height: 79px; border: 1px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.46); }
.tutorial-slot-main { width: 72px; height: 88px; border-style: solid; border-color: rgba(255,255,255,.38); }
.tutorial-slot > small { width: 100%; padding: 4px; font-size: 6px; line-height: 1.25; text-align: center; }
.tutorial-divider { position: absolute; z-index: 1; left: 16px; right: 16px; top: 124px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; color: rgba(255,255,255,.32); font: 800 6px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.tutorial-divider::before, .tutorial-divider::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(215,25,45,.66); }
.tutorial-divider span { position: relative; z-index: 1; padding-inline: 5px; background: #16181d; }
.tutorial-divider span:last-child { text-align: right; }
.tutorial-divider strong { position: relative; z-index: 1; padding: 4px 6px; color: #fff; background: #c2172a; font: 900 9px/1 Impact, sans-serif; }
.tutorial-card { position: relative; z-index: 2; width: 55px; height: 76px; padding: 3px; overflow: hidden; border: 2px solid #eee9df; color: #111; background: #eee9df; box-shadow: 2px 2px 0 rgba(215,25,45,.62); }
.tutorial-card.is-main { width: 63px; height: 86px; }
.tutorial-card > span { display: block; height: 11px; padding-right: 11px; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,.3); font-family: "Yu Mincho", serif; font-size: 5px; font-weight: 800; line-height: 10px; white-space: nowrap; text-overflow: ellipsis; }
.tutorial-card > b { position: absolute; z-index: 3; top: 2px; right: 2px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; color: #fff; background: #bd1728; font: 900 7px/1 Impact, sans-serif; }
.tutorial-card img { display: block; width: 100%; height: calc(100% - 24px); margin-top: 2px; object-fit: contain; background: #fff; }
.tutorial-card > small { position: absolute; left: 3px; right: 3px; bottom: 2px; display: flex; justify-content: space-between; font: 700 5px/1 ui-monospace, Consolas, monospace; }
.tutorial-card > small em { font-style: normal; }
.tutorial-hand { position: absolute; z-index: 4; left: 9px; bottom: 5px; display: flex; align-items: end; width: 215px; height: 61px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.36); }
.tutorial-hand .tutorial-card { width: 45px; height: 58px; margin-left: -7px; }
.tutorial-hand .tutorial-card:first-child { margin-left: 0; }
.tutorial-hand[data-count="6"] .tutorial-card { margin-left: -13px; }
.tutorial-hand[data-count="7"] .tutorial-card { margin-left: -17px; }
.tutorial-hand[data-count="6"] .tutorial-card:first-child,
.tutorial-hand[data-count="7"] .tutorial-card:first-child { margin-left: 0; }
.tutorial-hand .tutorial-card:nth-child(1) { z-index: 1; }
.tutorial-hand .tutorial-card:nth-child(2) { z-index: 2; }
.tutorial-hand .tutorial-card:nth-child(3) { z-index: 3; }
.tutorial-hand .tutorial-card:nth-child(4) { z-index: 4; }
.tutorial-hand .tutorial-card:nth-child(5) { z-index: 5; }
.tutorial-hand .tutorial-card:nth-child(6) { z-index: 6; }
.tutorial-hand .tutorial-card:nth-child(7) { z-index: 7; }
.tutorial-hand .tutorial-card img { height: calc(100% - 22px); }
.tutorial-actions-demo { position: absolute; z-index: 4; right: 9px; bottom: 7px; display: grid; gap: 4px; width: 94px; }
.tutorial-actions-demo span { display: grid; place-items: center; min-height: 24px; border: 1px solid #eee9df; color: #fff; font-size: 7px; font-weight: 900; }
.tutorial-actions-demo span:first-child { background: #b91425; font: 900 10px/1 Impact, sans-serif; letter-spacing: .08em; }
.tutorial-caption { min-height: 85px; padding: 10px 13px 9px; border-top: 1px solid rgba(255,255,255,.18); background: #0c0d10; }
.tutorial-caption p { margin: 0; }
.tutorial-caption-label { color: #ed2135; font: 800 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.tutorial-caption #tutorial-caption-text { margin-top: 7px; color: #f0ece4; font-size: 10px; font-weight: 600; line-height: 1.65; }
.tutorial-controls { display: grid; grid-template-columns: 1fr 1.15fr 1fr; border-top: 1px solid rgba(255,255,255,.2); }
.tutorial-controls button { min-height: 34px; border: 0; border-right: 1px solid rgba(255,255,255,.18); color: #ddd8cf; background: #17191d; font-size: 8px; font-weight: 800; cursor: pointer; }
.tutorial-controls button:last-child { border-right: 0; }
.tutorial-controls button:hover, .tutorial-controls button:focus-visible { color: #fff; outline: none; background: #c2172a; }
.tutorial-controls button:disabled { color: #5f5f61; cursor: default; background: #111216; }
.tutorial-board .is-explained { outline: 2px solid #ff3348; outline-offset: 2px; animation: tutorial-focus 1.2s ease-in-out infinite; }
.tutorial-board.is-hit [data-tutorial-slot="enemy-main"] { animation: tutorial-hit 520ms ease-in-out infinite alternate; }
.tutorial-board.is-danger [data-tutorial-target="enemy-resource"] { color: #fff; background: rgba(215,25,45,.42); }
.guide-screen .screen-actions { left: 20px; right: 20px; }
.screen-actions { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); }

.selection-screen { display: none; background: var(--paper); }
.selection-screen.is-active { display: block; }
.selection-heading { position: relative; z-index: 2; padding: 33px 24px 20px; }
.selection-heading h2 { margin: 8px 0 9px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 31px; line-height: 1.2; letter-spacing: -.04em; }
.selection-heading > p:last-child { margin: 0; color: #645f5b; font-size: 11px; }

.npc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px 20px 0; }
.npc-card { position: relative; min-width: 0; padding: 0; border: 0; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }
.portrait-frame {
  position: relative;
  display: block;
  height: min(43vh, 358px);
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #d9d5cd;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 86% 100%, 0 100%);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.portrait-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 7px rgba(248,245,238,.45); pointer-events: none; }
.portrait-frame img, .deck-image img, .dialog-portrait img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: none; }
.npc-card:hover .portrait-frame, .npc-card:focus-visible .portrait-frame { transform: translateY(-5px); box-shadow: 7px 7px 0 var(--red); }
.npc-card:focus-visible { outline: none; }
.card-number { position: absolute; z-index: 2; right: 7px; top: 7px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--paper-light); background: var(--red); font: 900 19px/1 Impact, sans-serif; }
.portrait-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #88837d; text-align: center; font: 900 11px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .14em; background: repeating-linear-gradient(135deg, #d9d5cd 0 14px, #d2cec6 15px 16px); }
.portrait-frame img:not(.image-missing) ~ .portrait-fallback,
.deck-image img:not(.image-missing) ~ .portrait-fallback,
.dialog-portrait img:not(.image-missing) ~ .portrait-fallback { display: none; }
img.image-missing { display: none; }
.npc-meta { display: block; padding: 12px 3px 0; border-top: 5px solid var(--ink); }
.npc-card:first-child .npc-meta { border-color: var(--red); }
.npc-meta small, .npc-meta strong, .npc-meta em { display: block; }
.npc-meta small { margin-bottom: 6px; color: var(--red); font: 800 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.npc-meta strong { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 19px; letter-spacing: .04em; }
.npc-meta em { margin-top: 3px; color: #67625e; font-size: 8px; font-style: normal; letter-spacing: .12em; }
.temporary-note { position: absolute; left: 20px; right: 20px; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; color: #6c6762; font-size: 9px; line-height: 1.6; }

.deck-heading { padding-bottom: 13px; }
.deck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 17px 14px 0; }
.deck-box {
  position: relative;
  min-width: 0;
  height: min(52vh, 426px);
  min-height: 318px;
  padding: 7px 7px 14px;
  overflow: hidden;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-align: left;
  background: var(--paper-light);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.deck-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--red); }
.deck-assault::after { background: var(--ink); }
.deck-balance::after { background: linear-gradient(90deg, var(--red) 50%, var(--ink) 50%); }
.deck-box:hover, .deck-box:focus-visible { z-index: 2; outline: none; transform: translateY(-6px) scale(1.015); box-shadow: 7px 8px 0 rgba(10,10,11,.16); }
.deck-index { display: block; margin-bottom: 7px; color: var(--red); font: 900 21px/1 Impact, sans-serif; }
.deck-image { position: relative; display: block; height: 61%; overflow: hidden; background: #d9d5cd; }
.deck-image img { object-position: center top; transform: scale(1.85); transform-origin: center top; }
.deck-type { display: block; margin-top: 11px; color: var(--red); font: 800 6px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.deck-box strong { display: block; margin-top: 6px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 17px; }
.deck-box small { display: block; margin-top: 5px; color: #716c67; font-size: 8px; }
.deck-screen .temporary-note { bottom: max(52px, calc(env(safe-area-inset-bottom) + 42px)); }
.deck-screen { overflow-y: auto; padding-bottom: max(18px, env(safe-area-inset-bottom)); scrollbar-width: thin; }
.custom-deck-entry {
  position: relative;
  display: block;
  width: 158px;
  aspect-ratio: 1 / 1;
  margin: 14px auto 4px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: 5px 6px 0 rgba(10,10,11,.18);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.custom-deck-entry::after { content: "04 / CUSTOM"; position: absolute; left: 7px; top: 7px; z-index: 2; padding: 4px 6px; color: #fff; background: var(--red); font: 900 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.custom-deck-entry img { display: block; width: 100%; height: 100%; object-fit: contain; }
.custom-deck-entry:hover, .custom-deck-entry:focus-visible { outline: none; transform: translateY(-4px); box-shadow: 7px 8px 0 var(--red); }
.card-catalog-link {
  position: relative;
  z-index: 4;
  display: block;
  margin: 13px 17px 0 auto;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-family: "Yu Mincho", serif;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.card-catalog-link small { margin-left: 5px; color: var(--red); font: 800 6px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.card-catalog-link:hover, .card-catalog-link:focus-visible { color: var(--red); outline: none; }

.catalog-screen { display: none; overflow-y: auto; background: var(--paper); scrollbar-width: thin; }
.catalog-screen.is-active { display: block; }
.catalog-header { position: sticky; top: 0; z-index: 8; background: rgba(248,245,238,.94); backdrop-filter: blur(7px); }
.catalog-heading { padding: 28px 20px 15px; border-bottom: 1px solid rgba(10,10,11,.18); }
.catalog-heading h2 { margin: 8px 0 7px; font-family: "Yu Mincho", serif; font-size: 27px; }
.catalog-heading > p:last-child { margin: 0; color: #68635e; font-size: 9px; line-height: 1.65; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px 14px 34px; }
.catalog-card {
  position: relative;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-align: left;
  background: var(--paper-light);
  box-shadow: 4px 4px 0 rgba(10,10,11,.12);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.catalog-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--card-accent, var(--red)); }
.catalog-card-id { display: flex; justify-content: space-between; color: var(--red); font: 800 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.catalog-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; margin: 7px 0; overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--card-accent, #555), #151619); font: 900 36px/1 "Yu Mincho", serif; }
.catalog-card-art.has-art { aspect-ratio: 3 / 4; background: #fff; }
.catalog-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.catalog-card-art.has-art img { position: absolute; inset: 0; height: 100%; }
.catalog-card-name { display: block; height: 35px; overflow: hidden; font-family: "Yu Mincho", serif; font-size: 13px; line-height: 1.35; }
.catalog-card-stats { display: flex; justify-content: space-between; padding: 7px 0 5px; border-top: 1px solid rgba(10,10,11,.2); font: 600 9px/1.1 ui-monospace, Consolas, monospace; }
.catalog-card-count { position: absolute; right: 6px; bottom: 30px; display: grid; place-items: center; min-width: 25px; height: 21px; padding: 0 5px; color: #fff; background: var(--red); font: 900 10px/1 Impact, sans-serif; }
.catalog-card.is-pressing { outline: 3px solid var(--red); outline-offset: 2px; transform: translateY(-2px); }

.deck-builder-screen { padding-bottom: 0; }
.deck-builder-heading { padding-bottom: 12px; }
.deck-builder-status {
  position: sticky;
  top: 70px;
  z-index: 7;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink);
  background: rgba(248,245,238,.96);
  backdrop-filter: blur(8px);
}
.deck-builder-total { display: flex; align-items: baseline; gap: 7px; }
.deck-builder-total small { color: var(--red); font: 900 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.deck-builder-total strong { font: 900 20px/1 Impact, sans-serif; letter-spacing: .04em; }
.deck-builder-curve { justify-self: end; color: #4e4a46; font: 700 8px/1.3 ui-monospace, Consolas, monospace; }
.deck-builder-status p { grid-column: 1 / -1; margin: 0; color: #665f5a; font-size: 8px; line-height: 1.5; }
.deck-builder-status.is-valid { border-bottom-color: #1d6945; }
.deck-builder-status.is-valid p { color: #1d6945; font-weight: 800; }
.deck-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 14px; }
.deck-builder-card { position: relative; min-width: 0; transition: transform 150ms ease; }
.deck-builder-card.is-selected { transform: translateY(-2px); }
.deck-builder-card.is-selected .catalog-card { outline: 3px solid var(--red); outline-offset: 1px; }
.deck-builder-card .catalog-card { width: 100%; box-shadow: 4px 2px 0 rgba(10,10,11,.12); }
.deck-builder-card .catalog-card:disabled { opacity: .62; cursor: not-allowed; }
.deck-builder-card-controls { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; margin-top: 6px; border: 1px solid var(--ink); background: var(--paper-light); }
.deck-builder-card-controls button { min-height: 36px; padding: 0; border: 0; color: #fff; background: var(--ink); font: 900 20px/1 Impact, sans-serif; cursor: pointer; }
.deck-builder-card-controls button:last-child { background: var(--red); }
.deck-builder-card-controls button:disabled { color: #aaa6a1; background: #ddd8d0; cursor: not-allowed; }
.deck-builder-card-controls output { text-align: center; font: 900 12px/1 ui-monospace, Consolas, monospace; }
.deck-builder-actions { position: sticky; z-index: 7; bottom: 0; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); background: rgba(248,245,238,.97); backdrop-filter: blur(8px); }
.deck-builder-actions p { margin: 0 0 8px; color: #69635e; text-align: center; font-size: 8px; line-height: 1.45; }
.deck-builder-actions .slash-button { width: 100%; min-height: 54px; }
.deck-builder-actions .slash-button:disabled { color: #8a8580; background: #d8d3cb; cursor: not-allowed; clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%); }

.order-screen { display: none; color: var(--paper-light); background: var(--ink); }
.order-screen.is-active { display: block; }
.order-background { position: absolute; inset: 0; overflow: hidden; }
.order-background::before { content: ""; position: absolute; width: 440px; height: 440px; left: 50%; top: 45%; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 34px rgba(255,255,255,.018), 0 0 0 100px rgba(215,25,45,.05); }
.order-giant { position: absolute; left: -18px; bottom: 13%; color: rgba(255,255,255,.04); font: 900 116px/.8 Impact, sans-serif; letter-spacing: -.05em; transform: rotate(-90deg); transform-origin: left bottom; }
.order-stroke { position: absolute; left: -20%; width: 145%; height: 16px; background: var(--red); transform: rotate(-14deg); }
.order-stroke-one { top: 27%; }
.order-stroke-two { top: 31%; height: 3px; background: var(--paper-light); }
.order-header { color: var(--paper-light); border-color: rgba(255,255,255,.65); }
.order-header .icon-button { color: var(--paper-light); border-color: var(--paper-light); }
.order-header .icon-button:hover, .order-header .icon-button:focus-visible { color: var(--ink); background: var(--paper-light); }
.order-header .header-rule { background: rgba(255,255,255,.2); }
.order-result { position: relative; z-index: 2; padding: 130px 24px 0; text-align: center; }
.order-result h2 { margin: 21px 0 4px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; font-weight: 400; letter-spacing: .16em; }
.order-word { margin: 0; color: var(--paper-light); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 104px; font-weight: 900; line-height: 1; letter-spacing: -.12em; text-shadow: 6px 6px 0 var(--red); opacity: 0; transform: scale(1.3); }
.order-word.is-revealed { animation: order-reveal 700ms cubic-bezier(.13,.86,.24,1.12) both; }
.order-reading { margin: 12px 0 0; color: var(--red); font: 900 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .3em; }
.match-summary { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; margin: 64px 28px 0; border-block: 1px solid rgba(255,255,255,.3); }
.match-summary div { padding: 14px 10px; }
.match-summary div + div { border-left: 1px solid rgba(255,255,255,.3); }
.match-summary dt { color: var(--red); font: 900 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; }
.match-summary dd { margin: 8px 0 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 15px; font-weight: 700; }
.order-actions > p { margin: 0 0 13px; color: rgba(255,255,255,.55); text-align: center; font-size: 10px; }
.order-actions .slash-button-dark { color: var(--ink); background: var(--paper-light); }
.order-actions .slash-button-dark::before { background: var(--red); }
.order-actions .slash-button-dark:hover, .order-actions .slash-button-dark:focus-visible { color: var(--paper-light); }

.confirm-dialog {
  width: min(calc(100% - 34px), 378px);
  max-height: min(780px, calc(100svh - 36px));
  padding: 16px;
  overflow: auto;
  border: 0;
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
}
.confirm-dialog::backdrop { background: rgba(10,10,11,.74); backdrop-filter: blur(2px); }
.confirm-dialog[open] { animation: dialog-enter 240ms cubic-bezier(.2,.8,.2,1) both; }
.dialog-x { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ink); color: var(--ink); background: var(--paper-light); cursor: pointer; }
.dialog-index { margin: 0 0 13px; color: var(--red); font: 900 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; }
.dialog-portrait { position: relative; height: 255px; overflow: hidden; background: #d9d5cd; }
.dialog-portrait.is-deck { height: 174px; }
.dialog-portrait.is-deck img { object-position: center top; transform: none; }
.dialog-portrait img { object-position: center 17%; }
.confirm-dialog h2 { margin: 20px 3px 8px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 23px; line-height: 1.45; }
.confirm-dialog > p:not(.dialog-index) { margin: 0 3px 22px; color: #5f5a56; font-size: 11px; line-height: 1.7; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.dialog-actions button { min-height: 50px; border: 1px solid var(--ink); font-family: "Yu Gothic", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; cursor: pointer; }
.dialog-no { color: var(--ink); background: transparent; }
.dialog-yes { color: var(--paper-light); background: var(--ink); }
.dialog-deck-detail { grid-column: 1 / -1; grid-row: 1; color: var(--ink); background: #e7e0d5; font-family: "Yu Gothic", sans-serif !important; font-size: 11px !important; letter-spacing: .03em !important; }
.dialog-deck-detail:not([hidden]) ~ .dialog-no, .dialog-deck-detail:not([hidden]) ~ .dialog-yes { grid-row: 2; }
.confirm-dialog.is-deck-confirmation .dialog-no { grid-row: 2; grid-column: 1; }
.confirm-dialog.is-deck-confirmation .dialog-yes { grid-row: 2; grid-column: 2; }
.dialog-actions button:hover, .dialog-actions button:focus-visible { color: var(--paper-light); border-color: var(--red); outline: none; background: var(--red); }

.game-entry-dialog, .credit-dialog {
  width: min(calc(100% - 34px), 378px);
  max-height: min(820px, calc(100svh - 36px));
  padding: 19px;
  overflow: auto;
  border: 0;
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: 0 28px 80px rgba(0,0,0,.58);
}
.game-entry-dialog::backdrop, .credit-dialog::backdrop { background: rgba(5,6,8,.78); backdrop-filter: blur(3px); }
.game-entry-dialog[open], .credit-dialog[open] { animation: dialog-enter 240ms cubic-bezier(.2,.8,.2,1) both; }
.game-entry-logo {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-top: 21px;
  padding: 25px 19px;
  border: 1px solid rgba(10,10,11,.16);
  background: #fff;
}
.game-entry-logo img { display: block; width: 100%; max-width: 290px; max-height: 145px; object-fit: contain; }
.game-entry-dialog h2 { margin: 23px 2px 22px; text-align: center; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 23px; line-height: 1.45; }
.game-entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.game-entry-actions button { min-height: 52px; border: 1px solid var(--ink); font: 900 16px/1 Impact, "Arial Narrow", "Yu Gothic", sans-serif; letter-spacing: .1em; cursor: pointer; }
.game-entry-no { color: var(--ink); background: transparent; }
.game-entry-yes { color: var(--paper-light); background: var(--ink); }
.game-entry-actions button:hover, .game-entry-actions button:focus-visible { color: #fff; border-color: var(--red); background: var(--red); outline: none; }

.credit-dialog { padding: 22px 20px 19px; }
.credit-dialog h2 { margin: 27px 0 25px; font: 900 40px/1 Impact, "Arial Narrow", sans-serif; letter-spacing: .12em; }
.credit-list { margin: 0; border-top: 1px solid var(--ink); }
.credit-list div { display: grid; grid-template-columns: 41% 59%; padding: 12px 2px; border-bottom: 1px solid rgba(10,10,11,.2); }
.credit-list dt { color: var(--red); font: 900 8px/1.45 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.credit-list dt small { display: block; color: #746f69; font-size: 6px; }
.credit-list dd { margin: 0; font-size: 10px; font-weight: 700; line-height: 1.7; }
.credit-copyright { margin: 22px 0 0; color: #6d6862; text-align: center; font: 700 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .11em; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@keyframes screen-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes screen-leave { to { opacity: 0; transform: translateX(-14px); } }
@keyframes portal-logo-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes composition-arrive { from { opacity: 0; transform: translate(42px,-22px) rotate(8deg); } to { opacity: 1; transform: translate(0) rotate(0); } }
@keyframes title-lockup-in { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes moon-breathe { 0%,100% { transform: scale(.985); } 50% { transform: scale(1.015); } }
@keyframes cut-slide { from { transform: translateX(110px); } to { transform: translateX(0); } }
@keyframes orbit-dash { 0%,100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -210px; } }
@keyframes order-reveal { 0% { opacity: 0; transform: scale(1.5) skewX(-8deg); filter: blur(8px); } 55% { opacity: 1; transform: scale(.94) skewX(1deg); filter: blur(0); } 100% { opacity: 1; transform: scale(1) skewX(0); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tutorial-focus { 50% { outline-color: #fff; box-shadow: 0 0 16px rgba(215,25,45,.7); } }
@keyframes tutorial-hit { to { transform: translateX(5px); filter: brightness(1.6); } }

@media (min-width: 600px) {
  .game-shell { height: min(100svh, var(--shell-height)); border-inline: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 0 10px #111, 0 30px 100px rgba(0,0,0,.75); }
}

@media (max-height: 760px) {
  .guide-hero { padding-top: 27px; padding-bottom: 12px; }
  .guide-hero h2 { font-size: 32px; margin-block: 9px 12px; }
  .guide-lead { line-height: 1.55; }
  .tutorial-player { margin-top: 0; }
  .tutorial-board { height: 228px; }
  .tutorial-row-enemy { top: 22px; }
  .tutorial-row-player { top: 112px; }
  .tutorial-divider { top: 103px; }
  .tutorial-slot { height: 68px; }
  .tutorial-slot-main { height: 76px; }
  .tutorial-card { height: 65px; }
  .tutorial-card.is-main { height: 74px; }
  .tutorial-resource-player { bottom: 60px; }
  .tutorial-hand { height: 52px; }
  .tutorial-hand .tutorial-card { height: 50px; }
  .tutorial-caption { min-height: 72px; padding-block: 8px; }
  .tutorial-caption #tutorial-caption-text { margin-top: 5px; font-size: 9px; line-height: 1.5; }
  .tutorial-controls button { min-height: 29px; }
}

@media (max-height: 700px) {
  .game-select-header { min-height: 88px; padding-top: 12px; padding-bottom: 10px; }
  .game-select-header h2 { font-size: 20px; }
  .game-choice-number { top: 125px; font-size: 34px; }
  .notice-card { padding-top: 18px; padding-bottom: 17px; }
  .notice-mark { margin-bottom: 9px; transform: scale(.75); }
  .notice-card h2 { margin-bottom: 15px; font-size: 25px; }
  .notice-copy { font-size: 9px; line-height: 1.55; }
  .notice-copy p { margin-bottom: 8px; }
  .notice-skip { margin-top: 12px; }
  .game-entry-logo { min-height: 135px; margin-top: 12px; padding: 15px; }
  .game-entry-logo img { max-height: 105px; }
  .game-entry-dialog h2 { margin-block: 15px; font-size: 20px; }
  .moon-composition { top: 26px; right: -31px; width: 330px; }
  .title-lockup { top: 38%; }
  .title-actions { bottom: max(25px, calc(env(safe-area-inset-bottom) + 15px)); gap: 12px; }
  .title-sub-actions { gap: 8px 11px; }
  .title-sub-actions .text-link { font-size: 9px; }
  .slash-button { min-height: 52px; }
  .title-footer { bottom: max(7px, env(safe-area-inset-bottom)); font-size: 6px; }
  .guide-hero { padding-top: 27px; }
  .guide-hero h2 { font-size: 32px; margin-block: 9px 12px; }
  .selection-heading { padding-top: 20px; padding-bottom: 12px; }
  .selection-heading h2 { font-size: 26px; }
  .portrait-frame { height: 330px; min-height: 0; }
  .deck-box { height: 355px; min-height: 0; }
  .order-result { padding-top: 72px; }
  .order-word { font-size: 84px; }
  .match-summary { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}