/* the website reuses the game's notice-board look: cork, paper, tape, marker lettering */
:root {
  color-scheme: light;
  --cork: #b98a55; --cork-dot: #9c6f3f; --paper: #f7f1e3; --paper-2: #ece3cd;
  --ink: #2b2622; --ink-2: #6f6353; --tape: rgba(236, 222, 170, .9); --red: #e2412e; --blue: #2f62d8; --green: #1f9e5a;
  --display: "Yusei Magic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font-family: var(--body); font-weight: 700; line-height: 1.75;
  background-color: var(--cork);
  background-image: radial-gradient(var(--cork-dot) 1px, transparent 1.6px), radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.4px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
  padding: 16px;
}
main, header, footer { max-width: 980px; margin: 0 auto; }
a { color: var(--blue); }
img { max-width: 100%; height: auto; display: block; }
.top { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 8px; }
.top a, .top button { font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 0; padding: 4px 12px; box-shadow: 1px 2px 0 rgba(0,0,0,.2); text-decoration: none; cursor: pointer; }
.paper { position: relative; background: var(--paper); padding: 26px 28px; box-shadow: 2px 4px 0 rgba(0,0,0,.2); margin: 26px 0; }
.paper::before { content: ''; position: absolute; top: -10px; left: 50%; width: 72px; height: 20px; margin-left: -36px; background: var(--tape); transform: rotate(-3deg); }
.paper:nth-of-type(even) { transform: rotate(.3deg); }
.paper:nth-of-type(odd) { transform: rotate(-.3deg); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.3; }
h2 { font-size: 26px; margin: 0 0 12px; display: inline-block; border-bottom: 3px solid rgba(226,65,46,.55); }
h3 { font-size: 19px; margin: 18px 0 4px; }
.hero { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: center; border-top: 8px solid var(--red); }
.hero h1 { font-size: clamp(52px, 9vw, 92px); margin: 0; letter-spacing: .04em; }
.hero .en-name { font-size: 15px; letter-spacing: .5em; color: var(--ink-2); margin: -4px 0 12px; }
.hero .lead { font-size: 18px; margin: 0 0 16px; }
.hero img { outline: 7px solid #fff; box-shadow: 2px 5px 0 7px rgba(0,0,0,.2); }
.mark { background: linear-gradient(transparent 58%, rgba(242,183,5,.5) 0); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-block; font-family: var(--display); font-size: 22px; text-decoration: none; color: #fff; background: var(--red); padding: 8px 26px; box-shadow: 2px 3px 0 rgba(0,0,0,.3); }
.soon { font-size: 13px; color: var(--ink-2); border: 2px dashed var(--ink-2); padding: 4px 10px; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
.feats li { background: #fff; padding: 14px 16px; border-left: 6px solid var(--c, var(--red)); box-shadow: 1px 2px 0 rgba(0,0,0,.15); }
.feats b { font-family: var(--display); font-weight: 400; font-size: 18px; display: block; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shots img { outline: 5px solid #fff; box-shadow: 1px 3px 0 5px rgba(0,0,0,.18); }
.doc { max-width: 760px; margin-inline: auto; }
.doc p, .doc li { font-weight: 400; }
footer { text-align: center; font-size: 13px; color: var(--paper); padding: 10px 0 20px; }
footer a { color: var(--paper); }
[data-l]:not([data-l="ja"]) { display: none; }
:root[lang="en"] [data-l="ja"] { display: none; }
:root[lang="en"] [data-l="en"] { display: revert; }
@media (max-width: 720px) {
  .hero, .feats, .shots { grid-template-columns: 1fr; }
  .paper { padding: 20px 16px; }
}
:root[lang="ja"] .feats b[data-l="ja"], :root[lang="en"] .feats b[data-l="en"] { display: block; }