/* Shouku Games: soft sky, puffy clouds, chunky buttons. Colours come from the logo. */

@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-wght-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
  --sky: #72cdf9;
  --sky-2: #b4e4fc;
  --mist: #eaf7fd;
  --paper: #f2fbff;
  --ink: #17476f;
  --ink-soft: #456c8f;
  --blue: #1f86d8;
  --blue-deep: #1565a8;
  --sun: #ffc947;
  --sun-deep: #e49b12;
  --orange: #ff8a3d;
  --pink: #ec5f96;
  --lilac: #a88bf0;
  --mint: #25b98a;
  --white: #fff;
  --accent: var(--blue);
  --radius: 28px;
  --shadow: 0 18px 44px -18px rgba(23, 71, 111, .35);
  --display: "Fredoka", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Noto Sans CJK JP", "Droid Sans Fallback", system-ui, sans-serif;
  --body: "Nunito", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Noto Sans CJK JP", "Droid Sans Fallback", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 1.0625rem/1.65 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-deep); }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; font-weight: 600; margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 16px; border-radius: 12px; }
.skip:focus { left: 8px; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 12px; z-index: 50; height: 0; padding-inline: 20px; }
.site-head__bar { width: min(1180px, 100%); margin: 12px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px 8px 8px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); border: 3px solid #fff; border-radius: 999px; box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__logo { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(23, 71, 111, .25); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.brand:hover .brand__logo { transform: rotate(-10deg) scale(1.12); }
.brand__name { font: 700 1.45rem/1 var(--display); background: linear-gradient(90deg, #2f9bea 0 55%, #ff8a3d 70%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.site-nav__list, .site-nav__list ul { list-style: none; margin: 0; padding: 0; }
.site-nav__list { display: flex; gap: 4px; align-items: center; }
.site-nav__list a { display: block; padding: 8px 16px; border-radius: 999px; font: 500 1.06rem/1.3 var(--display); color: var(--ink); text-decoration: none; transition: background .2s, transform .2s; }
.site-nav__list > li > a:hover, .site-nav__list > li:focus-within > a { background: var(--mist); transform: translateY(-2px); }
.site-nav__list .current-menu-item > a, .site-nav__list .current-menu-parent > a { background: var(--sky-2); }
.site-nav__list > li { position: relative; }
.site-nav__list .menu-item-has-children > a::after { content: "▾"; margin-left: 6px; font-size: .8em; }
.site-nav__list .sub-menu { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 230px; padding: 10px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.96); transition: .2s cubic-bezier(.3, 1.5, .5, 1); }
.site-nav__list .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.site-nav__list li:hover > .sub-menu, .site-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.site-nav__list .sub-menu a:hover { background: var(--mist); }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 11px 10px; border: 0; border-radius: 50%; background: var(--mist); cursor: pointer; }
.nav-toggle span { display: block; height: 3px; margin: 3px 0; border-radius: 3px; background: var(--ink); transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Shared bits ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 0; border-radius: 999px; font: 600 1.12rem/1.2 var(--display); text-decoration: none; cursor: pointer; --lip: #0003; box-shadow: 0 6px 0 var(--lip), 0 14px 22px -10px rgba(23, 71, 111, .5); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 0 var(--lip), 0 18px 24px -10px rgba(23, 71, 111, .5); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--lip); }
.btn--sun { background: var(--sun); color: #5c3b00; --lip: var(--sun-deep); }
.btn--white { background: #fff; color: var(--blue-deep); --lip: #bcdcef; }
.btn--blue { background: var(--blue); color: #fff; --lip: var(--blue-deep); }
.btn--off { background: #e4eef5; color: #5a7892; --lip: #cfdde8; cursor: default; box-shadow: none; }
.btn--off:hover, .btn--off:active { transform: none; box-shadow: none; }
.btn--small { padding: 9px 18px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn-row--center { justify-content: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 5px 16px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--blue-deep); font: 500 .98rem/1.35 var(--display); }
.eyebrow--dark { background: var(--mist); }
.section-title { text-align: center; font-size: clamp(2rem, 4.5vw, 3.1rem); margin-bottom: 36px; color: var(--ink); }
.section-title--left { text-align: left; margin-bottom: 4px; }
.chip { display: inline-block; padding: 4px 13px; border-radius: 999px; font: 500 .9rem/1.4 var(--display); background: rgba(255, 255, 255, .86); color: var(--ink); }
.chip--accent { color: #fff; background: var(--accent); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.cloud { position: absolute; color: #fff; pointer-events: none; }

/* Scalloped cloud edge: overlaps the section above it. */
.edge { position: relative; z-index: 2; height: 46px; margin-top: -46px; background: var(--edge); -webkit-mask: radial-gradient(circle at 50% 100%, #000 45px, transparent 46px) 0 0 / 118px 46px repeat-x; mask: radial-gradient(circle at 50% 100%, #000 45px, transparent 46px) 0 0 / 118px 46px repeat-x; }

.reveal { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s, transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 120px 0 110px; background: linear-gradient(#72cdf9 0, #9bdcfb 50%, #dff3fd 100%); }
.hero__sky { position: absolute; inset: 0; }
.hero__sky .cloud { opacity: .85; animation: drift 46s linear infinite alternate; }
.c1 { width: 210px; top: 14%; left: -3%; }
.c2 { width: 150px; top: 8%; right: 37%; opacity: .6 !important; animation-duration: 60s !important; }
.c3 { width: 270px; bottom: 7%; left: 24%; opacity: .7 !important; animation-duration: 38s !important; }
.c4 { width: 190px; top: 24%; right: -3%; animation-direction: alternate-reverse !important; }
.c5 { width: 120px; bottom: 26%; left: 6%; opacity: .55 !important; }
@keyframes drift { from { translate: -24px 0; } to { translate: 44px 0; } }
.twinkle { position: absolute; width: 22px; height: 22px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 3.2s ease-in-out infinite; }
.t1 { top: 22%; left: 12%; } .t2 { top: 62%; left: 40%; animation-delay: .8s; background: #fff3b0; } .t3 { top: 16%; left: 48%; animation-delay: 1.6s; } .t4 { top: 74%; right: 6%; animation-delay: 2.1s; background: #fff3b0; } .t5 { top: 44%; left: 3%; animation-delay: 1.1s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; align-items: center; }
.hero__title { font-size: clamp(2.6rem, 6.2vw, 4.9rem); font-weight: 700; color: #fff; text-shadow: 0 3px 0 #2f9bea, 0 10px 26px rgba(23, 71, 111, .35); letter-spacing: .3px; }
.pop-word { display: inline-block; color: var(--sun); text-shadow: 0 3px 0 #e8780f, 0 10px 26px rgba(158, 84, 0, .4); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.hero__jp { margin: 12px 0 0; font: 600 1.45rem/1.3 var(--display); color: var(--blue-deep); letter-spacing: .08em; }
.hero__lead { max-width: 37em; margin: 14px 0 0; font-size: 1.2rem; font-weight: 600; color: #123d61; }
.hero__mascot { display: flex; justify-content: center; }
.mascot { position: relative; width: min(500px, 100%); padding: 0; border: 0; background: none; cursor: pointer; animation: float 5.4s ease-in-out infinite; }
.mascot img { width: 100%; -webkit-mask: radial-gradient(closest-side, #000 76%, transparent 100%); mask: radial-gradient(closest-side, #000 76%, transparent 100%); transition: transform .2s; }
.mascot.is-poked img { animation: squish .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.14, .86); } 60% { transform: scale(.92, 1.1); } 100% { transform: scale(1); } }
.mascot__bubble { position: absolute; top: 5%; right: 3%; padding: 7px 17px; border-radius: 20px 20px 20px 4px; background: #fff; color: var(--blue-deep); font: 600 1.08rem/1.25 var(--display); box-shadow: var(--shadow); animation: bubble-in .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bubble-in { from { transform: scale(.4); opacity: 0; } }
.spark { position: fixed; z-index: 90; pointer-events: none; width: 16px; height: 16px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spark .8s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(.15); opacity: 0; } }

/* ---------- Values ---------- */
.values { position: relative; padding: 60px 0 40px; background: var(--paper); }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value { padding: 26px 22px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border-bottom: 7px solid var(--accent); }
.value:hover .value__ico { transform: rotate(-12deg) scale(1.15); }
.value__ico { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 14px; border-radius: 22px; background: var(--accent); color: #fff; font-size: 1.5rem; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.value h3 { font-size: 1.45rem; margin-bottom: 6px; }
.value p { margin: 0; font-size: 1rem; color: var(--ink-soft); }

/* ---------- Game cards ---------- */
.games-home { padding: 50px 0 90px; background: var(--paper); text-align: center; }
.games-home .game-card { text-align: left; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 42px; }
.game-card { background: #fff; border-radius: var(--radius); border: 5px solid #fff; box-shadow: var(--shadow); transition: box-shadow .25s; transform-style: preserve-3d; will-change: transform; }
.game-card:hover { box-shadow: 0 30px 50px -22px var(--accent); }
.game-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: inherit; }
.game-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px 22px 14px 14px; background: var(--mist); }
.game-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.game-card:hover .game-card__media img { transform: scale(1.06); }
.game-card__play { position: absolute; right: 14px; bottom: 14px; padding: 7px 20px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 1.05rem/1.2 var(--display); box-shadow: 0 5px 12px rgba(0, 0, 0, .28); transform: scale(0) rotate(-20deg); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.game-card:hover .game-card__play, .game-card__link:focus-visible .game-card__play { transform: none; }
.game-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; padding: 18px 20px 22px; }
.game-card__jp { font: 500 .95rem/1.2 var(--display); color: var(--ink-soft); }
.game-card__title { font: 700 1.8rem/1.15 var(--display); color: var(--ink); }
.game-card__text { color: var(--ink-soft); flex: 1; }

/* ---------- Cloud Pop ---------- */
.pop { position: relative; padding: 80px 0; background: linear-gradient(135deg, #ffe7a8, #ffc9d9 55%, #d9c9ff); }
.pop__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: center; }
.pop__jp { margin: 0 0 10px; font: 500 1.1rem/1.2 var(--display); color: var(--ink-soft); }
.pop__stats { list-style: none; display: flex; gap: 12px; margin: 22px 0 0; padding: 0; }
.pop__stats li { flex: 1; padding: 10px 6px; border-radius: 20px; background: rgba(255, 255, 255, .78); text-align: center; font: 500 .84rem/1.25 var(--display); }
.pop__stats strong { display: block; font: 700 1.9rem/1.2 var(--display); color: var(--blue-deep); }
.pop__game { position: relative; height: 480px; overflow: hidden; border: 6px solid #fff; border-radius: 36px; background: linear-gradient(#72cdf9, #d8f1fd); box-shadow: var(--shadow); user-select: none; touch-action: manipulation; }
.pop__game.is-wrong { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-9px) rotate(-.6deg); } 75% { transform: translateX(9px) rotate(.6deg); } }
.pop__question { position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%); padding: 7px 30px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 2rem/1.2 var(--display); white-space: nowrap; box-shadow: 0 6px 16px rgba(23, 71, 111, .25); }
.pop__stage { position: absolute; inset: 0; }
.pop-cloud { position: absolute; left: 0; top: 0; width: 112px; height: 72px; padding: 14px 0 0; border: 0; background: none; color: var(--ink); font: 700 1.65rem/1 var(--display); cursor: pointer; will-change: transform; }
.pop-cloud .cloud { inset: 0; width: 100%; height: 100%; z-index: -1; filter: drop-shadow(0 6px 5px rgba(23, 71, 111, .22)); }
.pop-cloud:hover .cloud { color: #fff6cf; }
.pop__overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; text-align: center; background: rgba(255, 255, 255, .55); backdrop-filter: blur(3px); }
.pop__overlay[hidden] { display: none; }
.pop__result { margin: 0; font: 600 1.7rem/1.25 var(--display); }

.studio { padding: 60px 0 100px; background: var(--paper); }
.prose--center { margin-inline: auto; }

/* ---------- Page and game heroes ---------- */
.page-hero, .game-hero { position: relative; overflow: hidden; padding: 130px 0 96px; background: linear-gradient(#72cdf9, #c6ebfd); }
.page-hero .cloud, .game-hero .cloud { opacity: .75; animation: drift 44s linear infinite alternate; }
.page-hero--tall { min-height: 70vh; }
.page-hero__title { position: relative; font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 700; color: #fff; text-shadow: 0 3px 0 #2f9bea, 0 10px 26px rgba(23, 71, 111, .35); }
.page-hero__lead { position: relative; max-width: 38em; margin: 12px 0 0; font-size: 1.2rem; font-weight: 600; color: #123d61; }
.page-hero--tall .page-hero__lead { margin-inline: auto; }
.game-hero { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 88%, #fff), color-mix(in srgb, var(--accent) 28%, #dff3fd)); }
.game-hero .cloud { opacity: .28; }
.game-hero__grid { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 36px; align-items: center; }
.crumb { display: inline-block; margin-bottom: 14px; color: #fff; font: 500 1.02rem/1.3 var(--display); text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.game-hero__jp { margin: 0; color: #fff; font: 600 1.25rem/1.3 var(--display); letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.game-hero__title { font-size: clamp(2.5rem, 5.6vw, 4.2rem); font-weight: 700; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .18), 0 10px 22px rgba(0, 0, 0, .28); }
.game-hero__lead { margin: 12px 0 0; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .88); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.tv { display: block; padding: 10px; background: #fff; border-radius: 26px; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .5); will-change: transform; animation: float 7s ease-in-out infinite; }
.tv img { width: 100%; border-radius: 18px; }

/* ---------- Game page sections ---------- */
.game-section { padding: 56px 0 96px; background: var(--paper); }
.game-section:has(+ .game-section) { padding-bottom: 56px; }
.game-section--toy { background: color-mix(in srgb, var(--accent) 13%, #fff); text-align: center; }
.game-section--dl { background: #fff; text-align: center; padding-bottom: 80px; }
.prose { max-width: 800px; }
.prose--center { text-align: center; }
.prose h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 1.4em 0 .4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.35rem; margin: 1.2em 0 .3em; }
.prose p { margin: .7em 0; }
.prose ul { list-style: none; margin: .8em 0; padding: 0; }
.prose ul li { position: relative; padding: 2px 0 2px 34px; margin: 7px 0; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 21px; height: 21px; background: var(--accent); clip-path: polygon(50% 0, 63% 34%, 100% 38%, 72% 62%, 80% 100%, 50% 80%, 20% 100%, 28% 62%, 0 38%, 37% 34%); }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1em 0; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); font-size: .98rem; }
.prose th { background: var(--accent); color: #fff; font: 600 1rem/1.3 var(--display); text-align: left; padding: 10px 14px; }
.prose td { padding: 9px 14px; border-top: 1px solid var(--mist); vertical-align: top; }
.prose .wp-block-table { margin: 0; overflow-x: auto; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.shot { display: block; overflow: hidden; padding: 5px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1), opacity .6s; }
.shot.is-in:hover { transform: scale(1.04) rotate(-1deg); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 15px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px 66px; background: rgba(12, 42, 68, .9); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 40px); border-radius: 16px; box-shadow: 0 20px 60px #000; animation: bubble-in .25s; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 700 1.4rem/1 var(--display); cursor: pointer; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 8px; top: calc(50% - 25px); }
.lightbox__next { right: 8px; top: calc(50% - 25px); }

/* Downloads */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.dl { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 18px; border-radius: var(--radius); background: var(--paper); border: 3px solid var(--mist); }
.dl.is-empty { border: 3px dashed #a5cfe8; background: repeating-linear-gradient(-45deg, #f6fcff 0 14px, #eef8fd 14px 28px); }
.dl.is-ready:hover .dl__ico { animation: wiggle .5s; }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.dl__ico { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: #fff; font-size: 1.85rem; background: var(--ink); }
.dl--windows .dl__ico { background: #1f86d8; }
.dl--android .dl__ico { background: #1f9d6a; }
.dl__name { font-size: 1.5rem; }
.dl__file { margin: 0 0 10px; color: var(--ink-soft); font-weight: 700; word-break: break-all; }
.dl__file span { font-weight: 500; white-space: nowrap; }
.dl__admin { font-size: .95rem; font-weight: 700; }
.source { padding: 22px; border-radius: var(--radius); background: var(--ink); color: #eaf7fd; text-align: left; }
.source a { color: #a8e1ff; }
.source .btn { color: var(--blue-deep); }
.source__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.source__head > div { flex: 1 1 200px; }
.source__head h3 { font-size: 1.35rem; color: #fff; }
.source__ico { font-size: 2.2rem; line-height: 1; }
.code { position: relative; border-radius: 16px; background: #0d2f4d; }
.code pre { margin: 0; padding: 16px; overflow-x: auto; }
.code code { font: 500 .92rem/1.65 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; color: #dff3fd; }
.code__copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 500 .88rem/1.3 var(--display); cursor: pointer; }
.next-game { background: var(--accent); }
.next-game__link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 30px 0 76px; color: #fff; text-decoration: none; font: 500 1.15rem/1.3 var(--display); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.next-game__link strong { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; transition: transform .25s; }
.next-game__link:hover strong { transform: translateX(10px); }

/* ---------- Toys ---------- */
.toy { max-width: 760px; margin: 0 auto; padding: 24px; border: 6px solid #fff; border-radius: 34px; background: linear-gradient(#fff, #f4fbff); box-shadow: var(--shadow); text-align: center; }
.toy-note { margin: 14px 0 0; font-size: .95rem; color: var(--ink-soft); }
.toy__title { margin: 0 0 12px; font: 600 1.5rem/1.3 var(--display); min-height: 1.3em; }
.toy__msg { min-height: 1.65em; margin: 10px 0 0; font-weight: 800; }
.toy__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.toy .btn { background: var(--accent); color: #fff; --lip: color-mix(in srgb, var(--accent) 68%, #000); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
/* math */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; text-align: left; font: 600 1rem/1.3 var(--display); }
.duel__bar { height: 18px; margin-top: 3px; padding: 3px; border-radius: 99px; background: #dcebf4; overflow: hidden; }
.duel__bar i { display: block; height: 100%; width: var(--hp, 100%); border-radius: 99px; background: linear-gradient(#5be3a9, #1eb57f); transition: width .3s; }
.duel__cpu .duel__bar i { background: linear-gradient(#ff9d7e, #ee5a4e); margin-left: auto; }
.duel__cpu { text-align: right; }
.duel__q { font: 700 clamp(2.2rem, 7vw, 3.4rem)/1.2 var(--display); }
.duel__answer { display: inline-block; min-width: 2.1em; padding: 0 8px; border-bottom: 5px solid var(--accent); color: var(--accent); }
.duel__timer { height: 10px; margin: 12px auto 0; max-width: 420px; border-radius: 9px; background: #dcebf4; overflow: hidden; }
.duel__timer i { display: block; height: 100%; width: 100%; background: var(--sun-deep); transform-origin: left; }
.keypad { display: grid; grid-template-columns: repeat(5, 62px); justify-content: center; gap: 8px; margin-top: 14px; }
.keypad button { height: 54px; border: 0; border-radius: 16px; background: var(--mist); box-shadow: 0 4px 0 #bcdcef; font: 700 1.4rem/1 var(--display); cursor: pointer; }
.keypad button:active { transform: translateY(3px); box-shadow: 0 1px 0 #bcdcef; }
/* beat */
.rail { position: relative; height: 110px; margin: 10px 0; overflow: hidden; border-radius: 22px; background: #10203a; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: #3b5a7d; }
.rail__ring { position: absolute; left: 22%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border: 4px solid #6ee0a0; border-radius: 50%; }
.rail__ring.is-hit { animation: ring .25s; }
@keyframes ring { 50% { transform: scale(1.35); box-shadow: 0 0 22px #6ee0a0; } }
.node { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #4fd0f5; color: #06263a; font: 700 .86rem/1 var(--display); will-change: transform; }
.node--stress { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: var(--sun); font-size: 1rem; }
.node.is-done { background: #6ee0a0; opacity: .5; }
.node.is-miss { background: #ff6f6f; opacity: .5; }
.word { font: 700 clamp(2rem, 7vw, 3rem)/1.2 var(--display); }
.word b { color: var(--sun-deep); font-weight: 700; }
.word-ja { min-height: 1.4em; margin: 0; color: var(--ink-soft); font-weight: 700; }
/* digest */
.buddy { position: relative; width: 170px; height: 170px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 48% 52% 50% 50%; background: radial-gradient(circle at 35% 30%, #a4e0ff, #5cb4ee); font-size: 4.2rem; transition: transform .2s; }
.buddy.go-burp { animation: squish .7s; }
.buddy.go-fart { animation: hop .7s; }
.buddy.go-smooth { animation: bob .8s 2; }
@keyframes hop { 40% { transform: translateY(-34px) scale(.95, 1.08); } 70% { transform: translateY(0) scale(1.12, .88); } }
.buddy__fx { position: absolute; font: 700 2rem/1 var(--display); color: var(--orange); -webkit-text-stroke: 1px #fff; transform: rotate(-8deg); animation: bubble-in .35s cubic-bezier(.3, 1.8, .5, 1); top: -6px; right: -60px; }
.fact { min-height: 3.2em; margin: 10px auto 0; max-width: 34em; color: var(--ink-soft); font-weight: 600; }
/* story */
.vn { position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; border-radius: 22px; background: linear-gradient(#262a64, #7a4a84 60%, #d98a6c); text-align: left; color: #f4f4f8; }
.vn::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 80px; background: radial-gradient(circle, #ffd27a 0 5px, transparent 6px) 0 0 / 66px 40px, radial-gradient(circle, #ff9db4 0 5px, transparent 6px) 30px 22px / 66px 40px; opacity: .9; animation: twinkle-soft 3s ease-in-out infinite alternate; }
@keyframes twinkle-soft { to { opacity: .5; } }
.vn__box { position: relative; padding: 12px 16px; border-radius: 16px; background: rgba(20, 20, 30, .84); min-height: 96px; font-size: 1.08rem; font-weight: 600; }
.vn__name { display: inline-block; margin-bottom: 3px; color: #ffb3c7; font: 600 1.08rem/1.3 var(--display); }
.vn__choices { position: relative; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.vn__choices button { padding: 9px 16px; border: 2px solid #c89bff; border-radius: 14px; background: rgba(28, 24, 56, .92); color: #fff; font: 500 1.02rem/1.3 var(--display); cursor: pointer; }
.vn__choices button:hover, .vn__choices button:focus-visible { background: #5b3f9d; }
.vn__next { position: relative; align-self: flex-end; margin-top: 8px; }

/* ---------- Footer ---------- */
.site-foot { position: relative; padding: 50px 0 26px; background: #17476f; color: #dff3fd; overflow: hidden; }
.site-foot__stars { position: absolute; inset: 0; opacity: .5; background: radial-gradient(1.5px 1.5px at 8% 30%, #fff, transparent), radial-gradient(2px 2px at 26% 76%, #fff, transparent), radial-gradient(1.5px 1.5px at 46% 18%, #fff, transparent), radial-gradient(2px 2px at 62% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 26%, #fff, transparent), radial-gradient(2px 2px at 94% 80%, #fff, transparent); }
.site-foot__grid { position: relative; display: grid; grid-template-columns: 170px 1.6fr .8fr .6fr; gap: 30px; }
.site-foot__logo { width: 170px; border-radius: 28px; }
.site-foot__title { font-size: 1.6rem; color: #fff; margin-bottom: 8px; }
.site-foot__head { font-size: 1.15rem; color: var(--sun); margin-bottom: 8px; }
.site-foot__jp { font: 500 1.1rem/1.3 var(--display); color: #a8e1ff; letter-spacing: .08em; }
.site-foot__links { list-style: none; margin: 0; padding: 0; }
.site-foot__links li { margin: 5px 0; }
.site-foot a { color: #dff3fd; }
.site-foot__legal { position: relative; margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .92rem; color: #b6d8ec; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { padding-top: 110px; }
  .hero__grid, .game-hero__grid, .pop__grid { grid-template-columns: 1fr; }
  .hero__mascot { order: -1; }
  .mascot { width: min(330px, 80vw); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-head__bar { flex-wrap: wrap; border-radius: 34px; }
  .site-nav { display: none; flex-basis: 100%; max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px 0 8px; }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .site-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 18px; box-shadow: none; background: none; }
  .site-nav__list .sub-menu::before { content: none; }
  .site-nav__list li:hover > .sub-menu, .site-nav__list li:focus-within > .sub-menu { transform: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .wrap { width: calc(100% - 32px); }
  .site-head { padding-inline: 10px; }
  .brand__logo { width: 46px; height: 46px; }
  .brand__name { font-size: 1.25rem; }
  .game-grid, .dl-grid, .value-grid { grid-template-columns: 1fr; }
  .pop__game { height: 430px; }
  .pop-cloud { width: 92px; height: 60px; font-size: 1.4rem; padding-top: 10px; }
  .pop__question { font-size: 1.6rem; padding-inline: 20px; }
  .site-foot__grid { grid-template-columns: 1fr; }
  .site-foot__logo { width: 130px; }
  .shots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .toy { padding: 14px; }
  .code pre { padding-top: 44px; }
  .buddy__fx { right: -10px; top: -14px; }
  .lightbox { padding: 72px 8px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 10px; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}