/* ============================================================
   YUITE GAMES — portal stylesheet
   手づくりブラウザゲームのポータル。ライブラリなし。
   ============================================================ */

:root{
  --bg: #0b0e1a;
  --bg2: #0e1226;
  --panel: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.09);
  --tx: #eef1ff;
  --mut: #9aa3c7;
  --grad: linear-gradient(100deg, #7cc7ff 0%, #b9e6ff 22%, #ffd93b 46%, #ff8c69 70%, #c7a6ff 100%);
  --dot: "DotGothic16", monospace;
  --maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --rad: 20px;
  --nav-h: 64px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
section[id], header[id]{ scroll-margin-top: calc(var(--nav-h) + 8px); }
body{
  background: var(--bg);
  color: var(--tx);
  font-family: var(--maru);
  font-weight: 400;
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:#ffd93b; color:#1a1500; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#0a0c16; }
::-webkit-scrollbar-thumb{ background:#2a3154; border-radius:6px; border:2px solid #0a0c16; }
::-webkit-scrollbar-thumb:hover{ background:#3d4778; }

/* ---------- 背景オーロラ ---------- */
.aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.aurora i{
  position:absolute; display:block; border-radius:50%;
  filter: blur(90px); opacity:.16;
}
.aurora .a1{ width:56vw; height:56vw; left:-14vw; top:-18vw;  background:#3f79ff; animation: drift1 26s ease-in-out infinite alternate; }
.aurora .a2{ width:44vw; height:44vw; right:-12vw; top:22vh;  background:#26c4a5; animation: drift2 31s ease-in-out infinite alternate; }
.aurora .a3{ width:50vw; height:50vw; left:18vw;  bottom:-24vw; background:#8a5cff; animation: drift3 37s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform: translate(9vw, 7vh)  scale(1.12); } }
@keyframes drift2{ to{ transform: translate(-7vw, 9vh) scale(.92); } }
@keyframes drift3{ to{ transform: translate(6vw,-8vh)  scale(1.08); } }

/* ---------- ナビ ---------- */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; gap:26px;
  padding:0 clamp(16px, 4vw, 40px);
  transition: transform .35s ease, background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background: rgba(11,14,26,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--line);
}
#nav.hidden{ transform: translateY(-100%); }
.brand{
  font-family:var(--dot); font-size:20px; letter-spacing:.06em;
  display:flex; align-items:center; gap:8px; margin-right:auto;
}
.brand b{
  background:var(--grad); background-size:220%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradShift 7s linear infinite;
}
.brand-dot{ color:#ffd93b; font-size:13px; animation: blink 1.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
@keyframes gradShift{ 0%{ background-position:0% 50%; } 100%{ background-position:220% 50%; } }
.nav-links{ display:flex; gap:4px; }
.nav-links a{
  font-size:14px; font-weight:700; color:var(--mut);
  padding:8px 14px; border-radius:999px;
  transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--tx); background:rgba(255,255,255,.07); }
.btn-dice{
  font-family:var(--dot); font-size:14px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.btn-dice:hover{ border-color:#ffd93b; box-shadow:0 0 18px rgba(255,217,59,.25); transform:translateY(-1px); }

/* ---------- 共通ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--dot); font-size:16px; letter-spacing:.04em;
  padding:15px 30px; border-radius:16px;
  transition: transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;
}
.btn:active{ transform: scale(.96); }
.btn-primary{
  color:#151000;
  background: linear-gradient(115deg, #ffd93b, #ffb13b 55%, #ff8c69);
  box-shadow: 0 8px 28px rgba(255,177,59,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255,177,59,.5), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-ghost{
  border:1px solid var(--line); background:var(--panel); color:var(--tx);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover{ border-color:#7cc7ff; box-shadow:0 0 22px rgba(124,199,255,.22); transform:translateY(-3px); }

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--nav-h) + 40px) clamp(16px,5vw,48px) 0;
  overflow:hidden;
}
#fx{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-inner{ position:relative; z-index:1; max-width:1160px; margin:0 auto; width:100%; }
.kicker{
  font-family:var(--dot); font-size:clamp(12px,1.6vw,15px); color:#ffd93b;
  letter-spacing:.12em; margin-bottom:18px;
  text-shadow:0 0 14px rgba(255,217,59,.4);
  animation: fadeUp .7s ease .05s backwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } }
.hero-title{
  font-weight:900; line-height:1.16;
  font-size: clamp(38px, 8.4vw, 104px);
  letter-spacing:.01em;
  margin-bottom:26px;
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-title .line-in{
  display:block; transform:translateY(112%);
  background: var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: lineUp .9s cubic-bezier(.16,.84,.28,1) forwards,
             gradShift 9s linear 1s infinite;
}
.hero-title .line:nth-child(2) .line-in{ animation-delay:.16s, 1s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.hero-sub{
  color:var(--mut); font-size:clamp(15px,2vw,18px); font-weight:700;
  margin-bottom:38px;
  animation: fadeUp .8s ease .4s backwards;
}
.hero-sub b{ color:#ffd93b; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; animation: fadeUp .8s ease .55s backwards; }

/* ヒーロー下のティッカー */
.ticker{
  position:relative; z-index:1;
  margin-top:auto;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: rgba(11,14,26,.4);
  overflow:hidden; white-space:nowrap;
  padding:12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{
  display:inline-block;
  font-family:var(--dot); font-size:15px; color:var(--mut); letter-spacing:.1em;
  animation: tick 30s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track em{ font-style:normal; color:var(--tx); }
.ticker-track i{ font-style:normal; color:#ffd93b; margin:0 18px; }
@keyframes tick{ to{ transform: translateX(-50%); } }

/* ---------- スタッツ ---------- */
.stats{
  max-width:1160px; margin:0 auto;
  padding: clamp(48px,7vw,84px) clamp(16px,5vw,48px) 0;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;
}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--rad);
  padding:22px 10px 18px; text-align:center;
  transition: border-color .25s, transform .25s;
}
.stat:hover{ border-color:rgba(255,217,59,.5); transform:translateY(-4px); }
.stat b{
  display:block; font-family:var(--dot); font-weight:400;
  font-size:clamp(30px,4.4vw,46px); line-height:1.1;
  background:var(--grad); background-size:220%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-l{ display:block; font-family:var(--dot); font-size:12px; color:#ffd93b; letter-spacing:.2em; margin-top:6px; }
.stat i{ display:block; font-style:normal; font-size:12.5px; color:var(--mut); font-weight:700; margin-top:2px; }

/* ---------- セクション共通 ---------- */
section{ position:relative; }
.sec-head{ max-width:1160px; margin:0 auto; padding:0 clamp(16px,5vw,48px); }
.eyebrow{
  font-family:var(--dot); font-size:13.5px; letter-spacing:.22em;
  color:#7cc7ff; margin-bottom:10px;
  text-shadow:0 0 12px rgba(124,199,255,.5);
}
.eyebrow.gold{ color:#e8c96a; text-shadow:0 0 12px rgba(232,201,106,.5); }
h2{
  font-weight:900; font-size:clamp(28px,4.6vw,44px); line-height:1.3;
  margin-bottom:14px;
}
.lead{ color:var(--mut); font-weight:700; font-size:clamp(14px,1.8vw,16.5px); }

/* ---------- ゲームグリッド ---------- */
.games{ padding-top: clamp(80px, 11vw, 130px); }
.grid{
  max-width:1160px; margin:34px auto 0;
  padding:0 clamp(16px,5vw,48px);
  display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
}
.card{
  position:relative;
  border-radius:var(--rad);
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: border-color .3s, box-shadow .3s;
  will-change: transform;
  --ac:#7cc7ff; --ac2:#c7a6ff;
}
.card:hover{
  border-color: color-mix(in srgb, var(--ac) 65%, transparent);
  box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--ac) 40%, transparent),
              0 0 0 1px color-mix(in srgb, var(--ac) 25%, transparent);
}
.card[data-theme="natsu"]  { --ac:#ffd24d; --ac2:#3fb6ff; }
.card[data-theme="mofu"]   { --ac:#8fd0ff; --ac2:#c7a6ff; }
.card[data-theme="nyanko"] { --ac:#8ecdf7; --ac2:#ffe08a; }
.card[data-theme="maruo"]  { --ac:#c39bf5; --ac2:#ff7b7b; }
.card[data-theme="dq"]     { --ac:#7c95ff; --ac2:#ffd43b; }
.card[data-theme="tenka"]  { --ac:#5fd9a0; --ac2:#e8c96a; }
.card[data-theme="tenryu"] { --ac:#e5b968; --ac2:#d1705f; }
.card[data-theme="gomunaga"] { --ac:#e2b13c; --ac2:#c2402a; }

.card-link{ display:flex; flex-direction:column; height:100%; }
.thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#080a12;
}
.thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.card:hover .thumb img{ transform: scale(1.07); }
.thumb::after{ /* 画面下をカード背景へ溶かす */
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(180deg, transparent, rgba(8,10,18,.55));
}
.shine{
  position:absolute; top:0; bottom:0; left:-80%; width:55%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg);
  transition:left .1s; pointer-events:none;
}
.card:hover .shine{ left:130%; transition:left .75s ease; }

.card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.genre{
  font-family:var(--dot); font-size:12px; letter-spacing:.14em;
  color:var(--ac); margin-bottom:6px;
  text-shadow:0 0 10px color-mix(in srgb, var(--ac) 55%, transparent);
}
.card h3{ font-size:21px; font-weight:900; line-height:1.4; margin-bottom:8px; }
.card h3 small{ display:block; font-size:12.5px; color:var(--mut); font-weight:700; }
.desc{ font-size:13.5px; color:var(--mut); font-weight:700; line-height:1.85; margin-bottom:16px; }
.card-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags span{
  font-size:11px; font-weight:700; color:var(--mut);
  border:1px solid var(--line); border-radius:999px; padding:2.5px 9px;
  background:rgba(255,255,255,.03);
}
.play{
  flex-shrink:0;
  font-family:var(--dot); font-size:13.5px; letter-spacing:.08em;
  color:var(--ac); border:1px solid color-mix(in srgb, var(--ac) 55%, transparent);
  border-radius:12px; padding:8px 14px;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.card:hover .play{
  background: linear-gradient(115deg, var(--ac), var(--ac2));
  color:#10131f; border-color:transparent;
  box-shadow:0 6px 20px -4px color-mix(in srgb, var(--ac) 70%, transparent);
  transform: translateY(-2px);
}
.glare{
  position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:var(--rad);
  background: radial-gradient(560px circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,.14), transparent 42%);
  transition:opacity .3s;
}
.card:hover .glare{ opacity:1; }

/* 幅広カード(最新作) */
.card.wide{ grid-column: span 2; }
.card.wide .card-link{ flex-direction:row; }
.card.wide .thumb{ width:54%; aspect-ratio:auto; min-height:280px; }
.card.wide .thumb::after{
  inset:0 0 0 auto; width:34%; height:auto;
  background:linear-gradient(90deg, transparent, rgba(8,10,18,.5));
}
.card.wide .card-body{ width:46%; padding:26px 26px 24px; }
.card.wide h3{ font-size:26px; }
.card.wide .desc{ font-size:14px; }
.badge-new{
  position:absolute; top:14px; left:-38px; z-index:3;
  transform:rotate(-45deg);
  width:140px; text-align:center;
  font-family:var(--dot); font-size:14px; letter-spacing:.2em; color:#151000;
  background:linear-gradient(115deg,#ffd93b,#ff9c4a);
  padding:6px 0;
  box-shadow:0 6px 18px rgba(255,177,59,.5);
  animation:newPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}
.badge-new i{ font-style:normal; margin-left:4px; display:inline-block; animation:spinStar 3.5s linear infinite; }
@keyframes newPulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.22);} }
@keyframes spinStar{ to{ transform:rotate(360deg);} }

/* ---------- 16-BIT TABLE SERIES ---------- */
.series{ padding: clamp(90px,12vw,150px) clamp(16px,5vw,48px) 0; }
.crt{
  position:relative; max-width:1160px; margin:0 auto;
  border-radius:26px; overflow:hidden;
  background:
    radial-gradient(90% 130% at 16% -10%, rgba(46,163,107,.17), transparent 52%),
    radial-gradient(90% 130% at 84% -10%, rgba(201,138,74,.15), transparent 52%),
    linear-gradient(180deg, #101b1c, #0b1414);
  border:1px solid rgba(232,201,106,.28);
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 30px 70px -30px rgba(38,196,165,.25);
  padding: clamp(36px,6vw,64px) clamp(22px,5vw,60px);
  text-align:center;
}
.crt::before{ /* スキャンライン */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.crt-scan{ /* 走査グロー */
  position:absolute; left:0; right:0; top:-30%; height:26%;
  background:linear-gradient(180deg, transparent, rgba(150,255,220,.06), transparent);
  animation:scan 5.5s linear infinite; pointer-events:none;
}
@keyframes scan{ to{ top:120%; } }
.crt h2{ font-family:var(--dot); font-weight:400; color:#ecdfb8; letter-spacing:.05em; }
.crt .lead{ color:#9db8ac; margin-bottom:34px; }
.cursor{ animation:blink 1.1s steps(2) infinite; color:#e8c96a; }
.series-links{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.series-links a{
  position:relative;
  display:flex; align-items:center; gap:16px;
  min-width:min(340px,100%);
  text-align:left;
  border:1px solid rgba(232,201,106,.35); border-radius:16px;
  padding:16px 20px;
  background:rgba(10,20,20,.55);
  transition:transform .22s, box-shadow .25s, border-color .25s, background .25s;
}
.series-links a:hover{
  transform:translateY(-4px);
  border-color:#e8c96a;
  background:rgba(20,34,30,.75);
  box-shadow:0 14px 34px -12px rgba(232,201,106,.35);
}
.s-tile{
  width:48px; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:"Noto Serif JP", serif; font-size:26px; font-weight:900;
  color:#0d3527; background:linear-gradient(160deg,#fdfbef,#e8dfc8);
  border-radius:7px; border:2px solid #b8a25c;
  box-shadow:0 4px 0 #8f7c40, 0 8px 14px rgba(0,0,0,.45);
}
.s-tile.koma{
  color:#2a1c08; background:linear-gradient(160deg,#e6bd7a,#c99a52);
  border-color:#8a6a30; box-shadow:0 4px 0 #6b5124, 0 8px 14px rgba(0,0,0,.45);
  clip-path:polygon(50% 0, 88% 16%, 100% 100%, 0 100%, 12% 16%);
  border-radius:3px;
}
.series-links em{ display:block; font-style:normal; font-weight:900; font-size:18px; color:#f2ead2; }
.series-links i{ display:block; font-style:normal; font-size:12px; color:#9db8ac; font-weight:700; }
.s-go{
  margin-left:auto; font-family:var(--dot); color:#e8c96a; font-size:18px;
  transition:transform .22s;
}
.series-links a:hover .s-go{ transform:translateX(5px); }

/* ---------- ひみつ (フリップカード) ---------- */
.himitsu{ padding-top: clamp(90px,12vw,150px); }
.flip-grid{
  max-width:1160px; margin:30px auto 0;
  padding:0 clamp(16px,5vw,48px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.flip{ perspective:1100px; min-height:190px; text-align:inherit; }
.flip-in{
  position:relative; display:block; width:100%; height:100%; min-height:190px;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.75,.25,1);
}
.flip:hover .flip-in, .flip.flipped .flip-in{ transform:rotateY(180deg); }
.flip-front, .flip-back{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:var(--rad); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:20px; text-align:center;
}
.flip-front{ background:var(--panel); }
.flip-front i{
  font-style:normal; font-size:38px; line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.flip-front b{ font-size:15px; font-weight:900; }
.flip-front u{
  text-decoration:none; font-family:var(--dot); font-size:11.5px;
  color:#ffd93b; letter-spacing:.16em;
  animation:blink 1.6s steps(2) infinite;
}
.flip-back{
  transform:rotateY(180deg);
  background:linear-gradient(150deg, rgba(124,199,255,.13), rgba(199,166,255,.13));
  border-color:rgba(124,199,255,.4);
  font-size:13.5px; font-weight:700; color:var(--tx); line-height:1.9;
}

/* ---------- つくりかた ---------- */
.about{ padding: clamp(90px,12vw,150px) clamp(16px,5vw,48px) 0; }
.about-in{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns: 1.35fr .65fr; gap:40px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:26px;
  padding: clamp(28px,5vw,54px);
}
.about-txt .lead{ margin-bottom:22px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{
  font-family:var(--dot); font-size:12.5px; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  background:rgba(255,255,255,.03); color:var(--mut);
  transition:border-color .2s, color .2s, box-shadow .2s;
}
.chips span:hover{ border-color:#7cc7ff; color:var(--tx); box-shadow:0 0 14px rgba(124,199,255,.25); }
.about-eq{ text-align:center; }
.eq{
  display:flex; gap:6px; align-items:flex-end; justify-content:center;
  height:120px; margin-bottom:14px;
}
.eq i{
  width:10px; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#7cc7ff,#c7a6ff);
  animation:eq 1s ease-in-out infinite alternate;
  transform-origin:bottom;
}
.eq i:nth-child(1){ height:34%; animation-delay:-.10s; }
.eq i:nth-child(2){ height:62%; animation-delay:-.55s; }
.eq i:nth-child(3){ height:45%; animation-delay:-.32s; background:linear-gradient(180deg,#ffd93b,#ff8c69); }
.eq i:nth-child(4){ height:80%; animation-delay:-.78s; }
.eq i:nth-child(5){ height:52%; animation-delay:-.15s; }
.eq i:nth-child(6){ height:92%; animation-delay:-.60s; background:linear-gradient(180deg,#ffd93b,#ff8c69); }
.eq i:nth-child(7){ height:40%; animation-delay:-.42s; }
.eq i:nth-child(8){ height:70%; animation-delay:-.88s; }
.eq i:nth-child(9){ height:56%; animation-delay:-.25s; background:linear-gradient(180deg,#5fd9a0,#7cc7ff); }
.eq i:nth-child(10){ height:84%; animation-delay:-.66s; }
.eq i:nth-child(11){ height:47%; animation-delay:-.05s; }
.eq i:nth-child(12){ height:66%; animation-delay:-.50s; background:linear-gradient(180deg,#ffd93b,#ff8c69); }
@keyframes eq{ from{ transform:scaleY(.35);} to{ transform:scaleY(1);} }
.eq-note{ font-family:var(--dot); font-size:13px; color:var(--mut); letter-spacing:.08em; }

/* ---------- フッター ---------- */
footer{
  margin-top: clamp(90px,12vw,150px);
  border-top:1px solid var(--line);
  padding:44px clamp(16px,5vw,48px) 60px;
  text-align:center;
}
.f-brand{ font-family:var(--dot); font-size:22px; margin-bottom:10px; display:flex; justify-content:center; gap:8px; align-items:center; }
.f-brand b{
  background:var(--grad); background-size:220%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 7s linear infinite;
}
.f-note{ color:var(--mut); font-size:13px; font-weight:700; margin-bottom:8px; }
.f-links{ font-size:12.5px; color:var(--mut); }
.f-links a:hover{ color:#ffd93b; }

/* ---------- おまかせモーダル ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px; }
.modal[hidden]{ display:none; }
.modal-bg{
  position:absolute; inset:0; background:rgba(5,7,14,.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:fadeIn .25s ease;
}
.modal-card{
  position:relative; width:min(480px,100%);
  background:#12162b; border:1px solid var(--line); border-radius:24px;
  padding:26px 26px 28px; text-align:center;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  animation:popUp .38s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes popUp{ from{ opacity:0; transform:translateY(34px) scale(.92); } }
.roulette figure{
  border-radius:14px; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--line); margin:14px 0 16px;
  background:#080a12;
}
.roulette img{ width:100%; height:100%; object-fit:cover; }
.roulette h3{ font-size:22px; font-weight:900; }
.roulette p{ font-size:13px; color:var(--mut); font-weight:700; min-height:3.4em; margin-top:4px; }
.modal.spinning .roulette figure{ animation:shake .12s linear infinite; }
@keyframes shake{ 25%{ transform:translateX(-2px) rotate(-.4deg);} 75%{ transform:translateX(2px) rotate(.4deg);} }
.modal-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.modal-actions .btn{ font-size:14.5px; padding:13px 22px; }
.modal.spinning .modal-actions{ visibility:hidden; }
.modal-x{
  position:absolute; top:12px; right:14px;
  font-size:16px; color:var(--mut); padding:6px 10px; border-radius:10px;
  transition:color .2s, background .2s;
}
.modal-x:hover{ color:var(--tx); background:rgba(255,255,255,.08); }

/* ---------- リビール ---------- */
.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .75s ease var(--d,0s), transform .75s cubic-bezier(.16,.84,.28,1) var(--d,0s);
}
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .flip-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .card.wide{ grid-column:span 2; }
  .card.wide .card-link{ flex-direction:column; }
  .card.wide .thumb{ width:100%; aspect-ratio:16/9; min-height:0; }
  .card.wide .thumb::after{ inset:auto 0 0 0; width:auto; height:38%;
    background:linear-gradient(180deg, transparent, rgba(8,10,18,.55)); }
  .card.wide .card-body{ width:100%; padding:18px 20px 20px; }
  .card.wide h3{ font-size:22px; }
  .about-in{ grid-template-columns:1fr; gap:26px; }
  .pc{ display:none; }
}
@media (max-width:720px){
  .grid{ grid-template-columns:1fr; }
  .card.wide{ grid-column:span 1; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .flip-grid{ grid-template-columns:1fr; }
  .flip, .flip-in{ min-height:150px; }
  .btn-dice span{ display:none; }
  .hero-cta .btn{ flex:1 1 100%; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01s !important; animation-iteration-count:1 !important; transition-duration:.01s !important; }
  .hero-title .line-in{ transform:none; }
  .js .reveal{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
}