/* 夕焼けアーケード — layout: a dusk-sky band under a sticky header, content on a single night ground, gold "stage line" rules borrowed from the games */
:root{
  --night:#1a1433;
  --deep:#120d27;
  --surface:#231a45;
  --raised:#2c2257;
  --dusk:#ff9a62;
  --dusk-deep:#b9583a;
  --gold:#f6c85f;
  --cream:#fff4e2;
  --mist:#b9add9;
  --line:rgba(255,244,226,.14);
  --display:"Dela Gothic One","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--cream);font:500 16px/1.85 var(--body);-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--cream)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:752px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:8px;z-index:50;background:var(--cream);color:var(--night);padding:6px 12px;border-radius:8px}

/* header */
header.site{position:sticky;top:0;z-index:20;background:rgba(26,20,51,.94);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
header.site .bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-block:11px}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--cream);text-decoration:none;font:400 19px/1 var(--display);letter-spacing:.02em}
.logo svg{width:30px;height:30px;flex:none}
nav.main{display:flex;flex-wrap:wrap;gap:2px;margin-inline:-8px}
nav.main a{color:var(--mist);text-decoration:none;font-weight:700;font-size:14px;line-height:1;padding:9px 10px;border-radius:999px}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--cream);background:rgba(255,244,226,.08)}

/* dusk band */
.sky{position:relative;border-bottom:3px solid var(--gold);
  background:radial-gradient(ellipse 34% 70% at 76% 100%,rgba(255,213,140,.6),rgba(255,154,98,.18) 55%,transparent 75%),
             linear-gradient(var(--deep) 0%,#2b1f55 42%,#6a3a6c 74%,#c9645c 100%)}
.sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;
  background:linear-gradient(transparent,rgba(26,20,51,.35));clip-path:polygon(0 60%,9% 30%,19% 55%,31% 18%,44% 50%,57% 26%,69% 52%,80% 20%,91% 44%,100% 28%,100% 100%,0 100%)}
.hero{position:relative;z-index:1;padding-block:52px 70px}
.eyebrow{margin:0 0 12px;font:800 12px/1 var(--body);letter-spacing:.2em;color:var(--gold)}
.display{margin:0;font:400 clamp(38px,8vw,66px)/1.08 var(--display);text-wrap:balance;text-shadow:3px 3px 0 var(--dusk-deep)}
.lead{max-width:30em;margin:16px 0 0;font-weight:700;font-size:17px;line-height:1.8}

/* sections */
main{display:block}
.section{padding-block:52px 4px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:18px}
.sec-head h2{margin:0;font:400 25px/1.3 var(--display)}
.sec-head a{font-weight:700;font-size:14px}

/* featured game */
.feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px}
.feature-img{display:block;border-radius:14px;overflow:hidden}
.feature-img img{width:100%;transition:transform .35s ease}
.feature-img:hover img{transform:scale(1.03)}
.feature h3{margin:0;font:400 30px/1.25 var(--display)}
.feature h3 small{display:block;margin-top:4px;font:800 12px/1 var(--body);letter-spacing:.22em;color:var(--mist)}
.feature p{margin:12px 0 0}
.tag-new{display:inline-block;margin-bottom:10px;padding:4px 9px;border-radius:6px;background:var(--gold);color:var(--night);font:800 11px/1.2 var(--body);letter-spacing:.14em}
@media (max-width:760px){.feature{grid-template-columns:1fr;gap:16px;padding:12px 12px 18px}.feature-body{padding-inline:6px}}

/* spec plate: reads like the label on an arcade cabinet */
.specs{list-style:none;margin:16px 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.specs li{padding:9px 12px;font-weight:800;font-size:14px;line-height:1.35;border-left:1px solid var(--line)}
.specs li:first-child{border-left:0}
.specs span{display:block;margin-bottom:3px;font-size:10px;letter-spacing:.16em;color:var(--mist)}
.feature .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature .specs li:nth-child(odd){border-left:0}
.feature .specs li:nth-child(n+3){border-top:1px solid var(--line)}
@media (max-width:620px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.specs li:nth-child(odd){border-left:0}.specs li:nth-child(n+3){border-top:1px solid var(--line)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border:0;border-radius:14px;background:var(--dusk);color:var(--night);text-decoration:none;font:400 19px/1 var(--display);letter-spacing:.04em;box-shadow:0 5px 0 var(--dusk-deep);cursor:pointer}
.btn:hover{color:var(--night);filter:brightness(1.06)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--dusk-deep)}
.btn.sub{background:transparent;color:var(--cream);border:2px solid var(--line);box-shadow:none;font:700 15px/1 var(--body);padding:12px 18px}
.btn.sub:hover{color:var(--cream);border-color:var(--mist)}

/* post list */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:grid;grid-template-columns:8em minmax(0,1fr);gap:2px 18px;padding:16px 4px;color:var(--cream);text-decoration:none}
.posts a:hover strong{color:var(--gold)}
.posts time{padding-top:3px;color:var(--mist);font-size:13px;font-variant-numeric:tabular-nums}
.posts strong{font-size:17px;line-height:1.55}
.posts p{grid-column:2;margin:2px 0 0;color:var(--mist);font-size:14px;line-height:1.7}
@media (max-width:560px){.posts a{grid-template-columns:1fr}.posts p{grid-column:1}}

.about-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,var(--surface),var(--raised))}
.about-strip p{margin:0}
@media (max-width:620px){.about-strip{grid-template-columns:1fr}}

/* article + game page */
.crumbs{padding-top:22px;font-size:13px;color:var(--mist)}
.crumbs a{color:var(--mist)}
.crumbs span[aria-hidden]{margin-inline:6px}
.page-title{margin:10px 0 4px;font:400 clamp(26px,5.4vw,40px)/1.35 var(--display);text-wrap:balance}
.page-title small{display:block;margin-top:6px;font:800 12px/1 var(--body);letter-spacing:.24em;color:var(--mist)}
.meta{margin:6px 0 0;color:var(--mist);font-size:13px}
.prose{margin-top:26px}
.prose h2{margin:46px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);font:400 22px/1.45 var(--display)}
.prose h3{margin:30px 0 8px;font-size:17px;font-weight:800;color:var(--gold)}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.4em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--gold)}
.prose figure{margin:26px 0}
.prose figure img{border-radius:12px;border:1px solid var(--line)}
.prose figcaption{margin-top:8px;color:var(--mist);font-size:13px}
.tablewrap{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--line);border-radius:12px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose tr:last-child td{border-bottom:0}
.prose th{background:rgba(255,244,226,.04);color:var(--mist);font-size:12px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.prose td.num{text-align:right;white-space:nowrap}
.prose td:first-child{white-space:nowrap;font-weight:700}
kbd{display:inline-block;min-width:1.7em;margin:0 1px;padding:0 6px;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:rgba(255,244,226,.08);font:800 13px/1.6 var(--body);text-align:center}
.note{margin:0 0 1.4em;padding:14px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:15px}
.note p:last-child{margin-bottom:0}
.next{margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.next h2{margin:0 0 6px;font:800 13px/1 var(--body);letter-spacing:.16em;color:var(--mist);border:0;padding:0}

/* game page */
.player{max-width:960px;margin:22px auto 0}
.frame{position:relative;width:100%;aspect-ratio:3/2;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--deep)}
.frame iframe{display:block;width:100%;height:100%;border:0}
.player-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:12px;color:var(--mist);font-size:13px}
.mobile-play{display:none}
.mobile-play a{position:relative;display:block;border-radius:14px;overflow:hidden;text-decoration:none}
.mobile-play .btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap}
.mobile-play .btn:active{transform:translate(-50%,3px)}
@media (max-width:720px){.frame{display:none}.mobile-play{display:block}.player-foot .wide{display:none}}
.fighters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 1.4em}
.fighter{margin:0;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.fighter .pic{display:flex;justify-content:center;padding:18px 18px 0;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(255,154,98,.32),transparent 70%),linear-gradient(var(--raised),var(--deep))}
.fighter .pic img{height:190px;width:auto}
.fighter .txt{padding:12px 16px 16px}
.fighter h3{margin:0;color:var(--cream);font:400 22px/1.3 var(--display)}
.fighter p{margin:6px 0 0;font-size:14px;line-height:1.7}
.fighter .role{color:var(--mist);font-weight:800;font-size:12px;letter-spacing:.08em;margin:0}
@media (max-width:620px){.fighters{grid-template-columns:1fr}}

/* contact */
.mailbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 1.4em;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mailbox code{font:800 17px/1.4 var(--body);color:var(--cream);user-select:all;word-break:break-all}
.copy{appearance:none;cursor:pointer;border:2px solid var(--line);background:transparent;color:var(--cream);font:700 13px/1 var(--body);padding:9px 14px;border-radius:999px}
.copy:hover{border-color:var(--mist)}

/* footer */
footer.site{margin-top:80px;border-top:3px solid var(--gold);background:linear-gradient(var(--surface),var(--deep));color:var(--mist);font-size:13px;
  padding-bottom:env(safe-area-inset-bottom,0px)}
footer.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:28px 36px}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer.site a{color:var(--mist)}
footer.site a:hover{color:var(--cream)}
.foot-logo{font:400 15px/1 var(--display);color:var(--cream)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.btn:active{transform:none}}
.prose table.wide{min-width:560px}