:root { --ink:#0b0b0d; --paper:#f4f2ed; --white:#fff; --purple:#7047eb; --line:rgba(11,11,13,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans), "Noto Sans JP", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:88px; padding:0 4vw; position:absolute; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; color:#fff; border-bottom:1px solid rgba(255,255,255,.2); }
.brand,.footer-brand { display:grid; grid-template-columns:auto 10px; line-height:.8; letter-spacing:-.06em; }
.brand span,.footer-brand span { grid-column:1; font-size:10px; letter-spacing:.12em; font-weight:600; }
.brand strong,.footer-brand strong { grid-column:1; font-size:26px; font-weight:800; }
.brand i,.footer-brand i { grid-column:2; grid-row:2; color:var(--purple); font-size:8px; align-self:end; font-style:normal; }
.nav-menu summary { display:none; }
.nav-menu nav { display:flex; gap:38px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; }
.nav-menu nav a { transition:.25s; }.nav-menu nav a:hover { color:#bba8ff; }
.hero { min-height:780px; height:100vh; max-height:980px; padding:150px 7vw 70px; position:relative; overflow:hidden; background:#0b0b0d; color:#fff; display:flex; align-items:center; }
.hero::before { content:""; position:absolute; width:55vw; height:55vw; right:-5vw; top:8%; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 9vw rgba(112,71,235,.07),0 0 0 18vw rgba(255,255,255,.025); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 45%,rgba(112,71,235,.15)); }
.hero-grid { position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,transparent,black); }
.eyebrow { font:600 11px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; }
.hero-eyebrow { position:absolute; top:126px; left:7vw; color:#ad92ff; }
.hero-copy { position:relative; z-index:2; max-width:760px; }
.kicker { font-size:clamp(19px,2vw,28px); line-height:1.5; margin:0 0 14px; font-weight:600; }
.hero h1 { margin:0; font-size:clamp(74px,11vw,164px); letter-spacing:-.085em; line-height:.75; font-weight:850; }
.hero h1 span { color:var(--purple); }
.hero-description { margin:42px 0 28px; font-size:14px; line-height:2; color:#c9c7cd; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.button { min-width:190px; display:inline-flex; align-items:center; justify-content:space-between; gap:30px; padding:18px 22px; font:600 11px/1 var(--font-mono); letter-spacing:.12em; transition:.25s; }
.button-light { background:#fff; color:#0b0b0d; }.button-light:hover { background:var(--purple); color:#fff; }
.coming-button { opacity:.92; cursor:default; }.coming-button:hover { background:#fff; color:#0b0b0d; }
.button-dark { background:var(--ink); color:#fff; }.button-dark:hover { background:var(--purple); }
.release { font:500 10px/1 var(--font-mono); color:#8a878e; letter-spacing:.12em; }
.hero-mark { position:absolute; z-index:1; right:8vw; bottom:10%; display:grid; place-items:center; width:28vw; height:28vw; max-width:390px; max-height:390px; border:1px solid rgba(255,255,255,.2); transform:rotate(12deg); }
.hero-mark span { font-size:clamp(120px,20vw,300px); font-weight:900; line-height:1; color:rgba(255,255,255,.035); }.hero-mark b { position:absolute; right:16px; top:16px; color:#8c6cf1; font:500 11px var(--font-mono); }
.scroll-label { position:absolute; bottom:35px; right:7vw; z-index:2; font:500 9px var(--font-mono); letter-spacing:.12em; color:#77747d; }.scroll-label span { color:#fff; margin-left:16px; }
.section { padding:120px 7vw; }
.section-head { display:grid; grid-template-columns:1fr 2fr; gap:5vw; margin-bottom:70px; }
.section-head h2,.play-intro h2,.about h2 { margin:0; font-size:clamp(44px,6vw,86px); line-height:1.02; letter-spacing:-.07em; }
.news-list { border-top:1px solid var(--ink); }
.news-item { display:grid; grid-template-columns:50px 130px 1fr 100px 20px; gap:20px; align-items:center; min-height:92px; border-bottom:1px solid var(--line); transition:.2s; }
.news-item:hover { padding-left:12px; color:var(--purple); }.news-no,.news-item time,.news-tag { font:500 10px var(--font-mono); letter-spacing:.06em; }.news-no { color:#999; }.news-item strong { font-size:14px; }.news-tag { border:1px solid var(--line); border-radius:20px; padding:6px 10px; text-align:center; }
.text-link { display:inline-flex; gap:32px; margin-top:34px; padding-bottom:8px; border-bottom:1px solid; font:600 11px var(--font-mono); letter-spacing:.1em; }
.games-section { background:#fff; }
.games-heading { grid-template-columns:1fr 1.2fr .8fr; }.games-heading>p:last-child { align-self:end; font-size:13px; line-height:2; color:#69676d; }
.games-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:28px; align-items:start; margin-bottom:50px; }
.game-visual { aspect-ratio:16/11; background:#151419; color:#fff; position:relative; overflow:hidden; display:grid; place-items:center; }
.game-card-2 .game-visual { aspect-ratio:4/3; margin-top:70px; background:#e6e2dc; color:var(--ink); border:1px solid var(--line); }
.game-visual::before,.game-visual::after { content:""; position:absolute; width:70%; height:70%; border:1px solid currentColor; opacity:.18; transform:rotate(25deg); }.game-visual::after { width:45%; height:45%; transform:rotate(-15deg); border-radius:50%; background:var(--purple); opacity:.2; }
.game-symbol { font-size:clamp(100px,18vw,260px); font-weight:900; letter-spacing:-.1em; color:var(--purple); z-index:1; }.game-card-2 .game-symbol { color:#151419; }
.game-index,.game-status { position:absolute; z-index:2; top:20px; font:500 10px var(--font-mono); letter-spacing:.1em; }.game-index { left:20px; }.game-status { right:20px; padding:7px 9px; background:var(--purple); color:#fff; }
.thumbnail-soon { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-7deg); padding:12px 22px; border:2px solid currentColor; background:rgba(11,11,13,.86); color:#fff; font:700 clamp(12px,1.5vw,20px)/1 var(--font-mono); letter-spacing:.16em; white-space:nowrap; box-shadow:7px 7px 0 var(--purple); }
.game-card-2 .thumbnail-soon { background:rgba(244,242,237,.9); color:var(--ink); }
.game-meta { display:flex; justify-content:space-between; align-items:end; padding:18px 2px; border-bottom:1px solid var(--ink); }.game-meta p { margin:0 0 6px; font:500 9px var(--font-mono); color:#777; }.game-meta h3 { margin:0; font-size:22px; letter-spacing:-.04em; }.game-meta>a { font-size:22px; }
.play-section { background:var(--purple); color:#fff; padding:120px 7vw; display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; }
.play-intro>p:not(.eyebrow) { font-size:13px; line-height:2; color:#d9ceff; margin:30px 0; }
.play-intro h2 { margin-top:50px; }.browser-list { border-top:1px solid rgba(255,255,255,.4); }
.browser-game { display:grid; grid-template-columns:35px 74px 1fr auto; align-items:center; gap:18px; min-height:118px; border-bottom:1px solid rgba(255,255,255,.3); transition:.25s; }.browser-game:hover { background:#fff; color:var(--purple); padding:0 16px; }
.browser-game-soon { opacity:.78; }.browser-game-soon:hover { background:transparent; color:#fff; padding:0; }
.browser-no { font:500 10px var(--font-mono); }.browser-icon { width:58px; height:58px; background:#17151d; display:grid; place-items:center; position:relative; overflow:hidden; }.browser-icon b { font-size:30px; font-weight:800; opacity:.22; }.browser-icon small { position:absolute; inset:0; display:grid; place-items:center; margin:0!important; color:#fff; opacity:1!important; text-align:center; font-size:7px!important; line-height:1.35!important; letter-spacing:.08em; }.browser-game small { display:block; font:500 9px var(--font-mono); opacity:.65; margin-bottom:8px; }.browser-game strong { font-size:17px; }.play-cta { font:600 10px var(--font-mono); letter-spacing:.1em; }
.about { background:var(--paper); }.about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12vw; align-items:end; margin-top:65px; }.about h2 em { color:var(--purple); font-style:normal; }.about-grid>div>p:first-child { font-size:19px; font-weight:600; }.about-grid>div>p:nth-child(2) { font-size:13px; line-height:2.1; color:#666; }
.follow { background:#111014; color:#fff; padding:110px 7vw; }.follow-lead { font-size:clamp(36px,5vw,72px); font-weight:750; letter-spacing:-.06em; line-height:1.15; }.social-links { margin-top:70px; border-top:1px solid #555; }.social-links a { display:flex; justify-content:space-between; padding:24px 0; border-bottom:1px solid #555; font:600 13px var(--font-mono); letter-spacing:.1em; }.social-links a:hover { color:#aa8fff; }
footer { background:#070709; color:#aaa; min-height:250px; padding:70px 7vw 35px; display:grid; grid-template-columns:1fr auto; gap:60px; align-items:start; }footer nav { display:flex; gap:35px; font:500 10px var(--font-mono); }footer>p { grid-column:1/-1; align-self:end; margin:0; font:500 9px var(--font-mono); }.footer-brand { color:#fff; width:max-content; }
@media (max-width:760px) {
  .site-header { height:70px; padding:0 20px; position:absolute; }.nav-menu summary { list-style:none; display:grid; gap:6px; cursor:pointer; padding:12px; }.nav-menu summary::-webkit-details-marker { display:none; }.nav-menu summary span { width:23px; height:1px; background:#fff; display:block; }.nav-menu nav { position:absolute; top:70px; left:0; right:0; padding:30px 20px; background:#111; flex-direction:column; gap:25px; }.nav-menu:not([open]) nav { display:none; }
  .hero { min-height:720px; height:100svh; padding:125px 22px 50px; align-items:center; }.hero-eyebrow { top:100px; left:22px; }.hero h1 { font-size:19vw; line-height:.82; }.kicker { font-size:17px; }.hero-description { font-size:12px; }.hero-mark { right:-18vw; bottom:10%; width:70vw; height:70vw; }.hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }.scroll-label { display:none; }
  .section,.play-section,.follow { padding:80px 22px; }.section-head,.games-heading { grid-template-columns:1fr; gap:22px; margin-bottom:45px; }.section-head h2,.play-intro h2,.about h2 { font-size:14vw; }.news-item { grid-template-columns:35px 1fr 20px; gap:10px; padding:18px 0; }.news-item time { grid-column:2; }.news-item strong { grid-column:2; }.news-tag { display:none; }.news-item>span:last-child { grid-column:3; grid-row:1/3; }.games-grid { grid-template-columns:1fr; }.game-card-2 .game-visual { margin-top:10px; }.game-visual { aspect-ratio:4/3; }.play-section { grid-template-columns:1fr; gap:70px; }.play-intro h2 { margin-top:30px; }.browser-game { grid-template-columns:26px 56px 1fr; gap:10px; }.browser-icon { width:48px; height:48px; }.play-cta { display:none; }.about-grid { grid-template-columns:1fr; gap:45px; margin-top:40px; }.follow-lead { font-size:11vw; }footer { grid-template-columns:1fr; gap:35px; }footer nav { flex-wrap:wrap; }footer>p { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }