/* ========================================
   RESET
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
}

::selection {
    background: #111;
    color: #fff;
}

/* ========================================
   VARIABLES
======================================== */

/* ========================================
   COMMON
======================================== */

/* Card Common */

/* ========================================
   Scroll Animation
======================================== */

:where(html.js-enabled) .about-container,
:where(html.js-enabled) .achievement-card,
:where(html.js-enabled) .can-do-card,
:where(html.js-enabled) .featured-video,
:where(html.js-enabled) .featured-container,
:where(html.js-enabled) .work-card,
:where(html.js-enabled) .blog-introduction,
:where(html.js-enabled) .article-card,
:where(html.js-enabled) .timeline-item,
:where(html.js-enabled) .play-card,
:where(html.js-enabled) .contact-container,
:where(html.js-enabled) .sns-card {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity var(--transition),
        transform var(--transition),
        box-shadow .3s;
}

:where(html.js-enabled) .about-container.show,
:where(html.js-enabled) .achievement-card.show,
:where(html.js-enabled) .can-do-card.show,
:where(html.js-enabled) .featured-video.show,
:where(html.js-enabled) .featured-container.show,
:where(html.js-enabled) .work-card.show,
:where(html.js-enabled) .blog-introduction.show,
:where(html.js-enabled) .article-card.show,
:where(html.js-enabled) .timeline-item.show,
:where(html.js-enabled) .play-card.show,
:where(html.js-enabled) .contact-container.show,
:where(html.js-enabled) .sns-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   HEADER
======================================== */

.header-nav {
    display: flex;
}

/* ========================================
   HAMBURGER
======================================== */

.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ========================================
   HERO
======================================== */

/* ========================================
   ABOUT
======================================== */

.about-content {
    flex: 1;
}

/* ========================================
   ACHIEVEMENTS
======================================== */

.achievement-card:hover {
    transform: translateY(-8px);
}

.achievement-card:hover i {
    transform: scale(1.15);
}

/* ========================================
   WHAT I CAN DO
======================================== */

.can-do-category {
    width: min(100%, 1200px);
    margin: 0 auto 40px;
}

.can-do-category-title > span {
    flex-shrink: 0;
}

.can-do-category-title > div {
    flex: 1;
}

.can-do-category-title h3 {
    margin: 0 0 5px;
}

.can-do-card {
    min-width: 0;
}

.can-do-card:hover::before {
    transform: scaleX(1);
}

.can-do-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.can-do-content h4 {
    margin: 0 0 14px;
}

.can-do-content p {
    margin: 0 0 20px;
}

/* ========================================
   WHAT I CAN DO RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .can-do-category {
        width: min(100%, 1100px);
    }

    }

/* ========================================
   FEATURED WORKS
======================================== */

:where(html.js-enabled) .featured-video,
:where(html.js-enabled) .featured-container {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity var(--transition),
        transform var(--transition);
}

:where(html.js-enabled) .featured-video.show,
:where(html.js-enabled) .featured-container.show {
    opacity: 1;
    transform: translateY(0);
}

.featured-video video {
    display: block;
}

.featured-point ul {
    list-style: none;
}

.featured-point li {
    position: relative;
}

.featured-point li::before {
    content: "";
    position: absolute;
    left: 0;
}

/* ========================================
   OTHER WORKS
======================================== */

/* ========================================
   BLOG
======================================== */

.blog-introduction {
    margin: 0 auto 80px;
    align-items: center;
}

.blog-intro-content p {
    line-height: 2;
}

.article-summary {
    margin-bottom: 25px;
}

/* ========================================
   TIMELINE
======================================== */

.timeline-container::before {
    top: 0;
    height: 100%;
}

.timeline-item::before {
    content: "";
    position: absolute;
}

/* カードの中身だけ中央揃え */
.timeline-date {
    display: inline-block;
}

/* ========================================
   PLAY GAMES
======================================== */

/* ========================================
   CONTACT
======================================== */

/* ========================================
   SNS
======================================== */

/* ========================================
   FOOTER
======================================== */

footer {
    font-size: .9rem;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 900px) {
.blog-introduction {
        flex-direction: column;
        text-align: center;
    }

}

@media (max-width: 768px) {
/* Header */

        .header-nav.active {
        transform: translateY(0);
        visibility: visible;
        transition: transform .35s ease, visibility 0s;
    }

/* Hero */

/* About */

    /* What I Can Do */

    /* Featured */

/* Blog */

/* Timeline */

/* 日時だけ中央揃え */
    /* Play */

/* Contact */

/* Footer */

    }

@media (prefers-reduced-motion: reduce) {
    .can-do-category,
    .can-do-card,
    .can-do-card::before {
        transition-duration: .01ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   Game Studio Visual Direction
======================================== */

body {
    line-height: 1.8;
    overflow-x: hidden;
    color: var(--color-main);
    background: #fff;
    font-family: "Inter", "Noto Sans JP", "Yu Gothic", sans-serif;
    letter-spacing: .015em;
}

section:not(.hero) {
    min-height: 0;
    padding: 118px 8%;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: background .3s;
    height: 82px;
    padding: 0 clamp(24px, 5vw, 76px);
    color: var(--color-main);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(23, 25, 29, .08);
    backdrop-filter: blur(16px);
}

.header-logo {
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    font-size: inherit;
    letter-spacing: 0;
}

.brand-mark {
    width: 42px;
    height: 42px;
}

.brand-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .09em;
}

.brand-name small {
    color: var(--color-sub);
    font-weight: 600;
    letter-spacing: .17em;
}

.header-nav {
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
}

.header-nav a {
    text-decoration: none;
    transition: opacity .3s;
    color: #3c4045;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.header-nav a:hover {
    opacity: 1;
}

.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px auto;
    transition: .3s;
    background: var(--color-main);
}

:where(html.js-enabled) .hero-content {
    transition: opacity .7s ease;
}

:where(html.js-enabled) .hero-content.is-visible {
    opacity: 1;
}

.hero-eyebrow,
.hero-index {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .19em;
}

.hero-lead {
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
}

/* トップの「最近の更新」（js/main.js）：いちばん新しい作品と note の最新記事 */
.hero-news {
    display: grid;
    gap: 6px;
    max-width: 520px;
    margin-top: 22px;
}

.hero-news-label {
    color: #00739e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.hero-news-item {
    display: flex;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 2px solid var(--ui-line, #e1e7ef);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--ui-ink, #111713);
    font-size: 13px;
    text-decoration: none;
    transition: border-color .2s ease, transform .15s ease;
}

.hero-news-item:hover {
    border-color: #00a3e0;
    transform: translateX(2px);
}

.hero-news-item b {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: #111713;
    color: #fff;
    font-size: 10px;
    letter-spacing: .1em;
}

.hero-news-item:first-of-type b {
    background: var(--red-strong, #d6363d);
}

.hero-news-date {
    flex: none;
    color: var(--ui-sub, #5b6560);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.hero-news-title {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 35px;
}

.hero-button {
    min-height: 54px;
    font-size: 13px;
}

.hero-button span {
    font-size: 18px;
}

.hero-index {
    bottom: -88px;
}

.section-title h2 {
    margin-bottom: 12px;
    font-size: clamp(2.25rem, 4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.065em;
}

.section-title p {
    color: var(--color-sub);
    font-size: 14px;
}

.achievements .section-title {
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.achievements .section-title h2::before {
    display: block;
    margin-bottom: 13px;
    color: var(--accent);
    content: "02 / CAREER HIGHLIGHTS";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.achievements .section-title h2::after {
    margin: 14px 0 0;
}

.achievements .achievement-card::before {
    position: absolute;
    content: counter(achievement, decimal-leading-zero);
    font-weight: 700;
    letter-spacing: .18em;
}

.achievements .achievement-card .achievement-value,
.achievements .achievement-card p {
    grid-column: 1 / -1;
    margin: 0;
}

.achievements .achievement-card:hover::after {
    transform: scaleX(1);
}

.about-container {
    grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr);
    gap: clamp(42px, 7vw, 100px);
}

.about-image {
    padding: 0 0 28px 28px;
}

.about-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.about-name {
    font-size: clamp(2.5rem, 4.2vw, 4.2rem);
}

.about-name span {
    font-size: .7rem;
    letter-spacing: .22em;
}

.about-statement {
    margin-bottom: 20px;
    color: var(--color-main);
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.65;
}

.about-text {
    font-size: 14px;
    line-height: 2.05;
}

.about-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.achievement-list {
    display: grid;
    width: min(100%, 1200px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    counter-reset: achievement;
}

.work-content h3,
.article-content h3 {
    letter-spacing: -.035em;
}

footer {
    padding: 46px 8% 24px;
}

.footer-inner {
    align-items: center;
    gap: 24px;
}

.footer-brand,
.footer-top {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
}

.footer-brand span {
    margin-left: 10px;
}

.footer-motto {
    font-weight: 700;
    letter-spacing: .2em;
}

@media (max-width: 900px) {
    .achievement-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .hero-index {
        bottom: -52px;
    }

}

/* What I Can Do: studio capability panels */
.can-do-category {
    grid-template-columns: minmax(190px, .78fr) minmax(0, 2.5fr);
    gap: clamp(24px, 4vw, 56px);
    padding: 34px 38px;
}

.can-do-category:hover {
    transform: translateY(-2px);
}

.can-do-category-title {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 8px 0 0;
    border: 0;
}

.can-do-category-title h3 {
    font-size: clamp(1.5rem, 2.1vw, 2rem);
}

.can-do-category-title p {
    font-size: .82rem;
}

.can-do-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.can-do-card {
    min-height: 260px;
    padding: 24px 20px 20px;
}

.can-do-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    gap: 6px;
}

@media (max-width: 1100px) {
    .can-do-category {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px;
    }

    .can-do-category-title {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

.can-do-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Main Works: cinematic featured-title presentation */
.featured-works .section-title h2::after {
    margin: 14px 0 0;
}

.featured-video {
    width: min(100%, 1200px);
    aspect-ratio: 16 / 8.2;
    margin: 0 auto 0;
}

.featured-video video {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

.featured-video:hover video {
    transform: scale(1.025);
    filter: saturate(1.08);
}

.featured-container {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: clamp(30px, 5vw, 62px);
}

.featured-title {
    margin: 0 0 38px;
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1;
    text-align: left;
}

.featured-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.featured-works .featured-point ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 24px;
}

.featured-works .featured-point li {
    margin: 0;
    padding: 0 0 0 18px;
}

@media (prefers-reduced-motion: reduce) {
    .featured-video video {
        transition-duration: .01ms !important;
    }
}

/* Other Works: searchable-at-a-glance project archive styling */
.other-works .section-title h2 {
    margin: 0;
    color: #20261f;
}

.other-works .section-title h2::after {
    margin: 14px 0 0;
}

.works-list {
    margin: 0 auto;
    display: grid;
    width: min(100%, 1200px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    counter-reset: project;
}

.work-card {
    grid-template-columns: minmax(118px, .72fr) minmax(0, 1.28fr);
}

.work-card::before {
    position: absolute;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

.work-card::after {
    position: absolute;
    transform-origin: left;
    transition: transform .35s ease;
}

.work-card:hover::after {
    transform: scaleX(1);
}

.work-card img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #252d24;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}

.work-card:hover img {
    transform: scale(1.04);
    filter: saturate(1.08);
}

.work-content {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 14px;
    padding: 20px 18px 18px;
}

.work-content h3,
.work-description,
.work-link {
    grid-column: 1 / -1;
}

.work-content h3 {
    margin: 0 0 12px;
    color: #20261f;
    font-size: clamp(.95rem, 1.2vw, 1.12rem);
    line-height: 1.45;
    letter-spacing: -.02em;
}

.work-genre,
.work-tech,
.work-period,
.work-member,
.work-role {
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    border-top: 1px solid #eceee9;
    color: #535b50;
    font-size: .68rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.work-genre,
.work-tech,
.work-role {
    grid-column: 1 / -1;
}

.work-genre::before,
.work-tech::before,
.work-period::before,
.work-member::before,
.work-role::before {
    display: inline-block;
    width: 48px;
    margin-right: 5px;
    color: #8a9185;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    vertical-align: baseline;
}

.work-genre::before { content: "GENRE"; }
.work-tech::before { content: "TOOLS"; }
.work-period::before { content: "DATE"; }
.work-member::before { content: "TEAM"; }
.work-role::before { content: "ROLE"; }

.work-description {
    margin: 13px 0 15px;
    color: #525950;
    font-size: .76rem;
    line-height: 1.75;
}

.work-link::after {
    content: "↗";
    font-size: .9rem;
}

.work-link:hover {
    opacity: 1;
}

/* Give a recurring archive entry more room to establish visual rhythm. */
.work-card:nth-child(7n + 1) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
}

.work-card:nth-child(7n + 1) img {
    aspect-ratio: 16 / 7;
}

.work-card:nth-child(7n + 1) .work-content {
    align-content: center;
    padding: clamp(24px, 4vw, 48px);
}

.work-card:nth-child(7n + 1) .work-content h3 {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
}

@media (max-width: 980px) {
    .works-list {
        grid-template-columns: 1fr;
    }

    .work-card:nth-child(7n + 1) {
        grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-card,
    .work-card img,
    .work-card::after,
    .work-link {
        transition-duration: .01ms !important;
    }
}

/* Blog: creator journal editorial feature */
.blog .section-title h2::before,
.timeline .section-title h2::before,
.play-games .section-title h2::before,
.contact .section-title h2::before {
    display: block;
    margin-bottom: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.blog .section-title h2::after,
.timeline .section-title h2::after,
.play-games .section-title h2::after {
    margin: 14px 0 0;
}

.blog-introduction {
    width: min(100%, 1200px);
    gap: clamp(32px, 7vw, 100px);
    margin-bottom: 50px;
    padding: clamp(32px, 6vw, 72px);
}

.blog-logo {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
}

.blog-logo img {
    width: 78px;
    max-height: 90px;
}

.blog-intro-content {
    flex: 1;
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.blog-intro-content h3 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.blog-intro-content > p {
    max-width: 560px;
    font-size: .92rem;
    line-height: 1.9;
}

.blog-stats {
    display: flex;
    gap: 40px;
    margin: 22px 0;
}

.latest-articles {
    width: min(100%, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.article-card img {
    height: 190px;
}

.article-card:hover img {
    transform: scale(1.035);
}

.article-content h3 {
    color: #242a22;
    font-size: 1.04rem;
    line-height: 1.6;
}

.article-summary {
    color: #697067;
    font-size: .82rem;
    line-height: 1.8;
}

/* Timeline: compact studio development log */
.timeline-container {
    width: min(100%, 1040px);
    padding: 8px 0;
}

.timeline-item,
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
    display: grid;
    width: 100%;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 84px;
    left: 0;
    padding: 12px 0;
    text-align: left;
}

.timeline-item::before,
.timeline-item:nth-child(odd)::before,
.timeline-item:nth-child(even)::before {
    top: 31px;
    left: 148px;
}

.timeline-item:hover::before {
    transform: scale(1.08);
}

.timeline-date {
    margin: 22px 0 0;
    font-size: .9rem;
    text-align: right;
}

.timeline-content {
    padding: 22px 25px;
}

.timeline-content:hover {
    transform: translateX(4px);
}

.timeline-content h3 {
    margin: 0 0 8px;
    color: #252b23;
    font-size: .98rem;
    line-height: 1.6;
}

.timeline-content p {
    margin: 0;
    color: #6b7268;
    font-size: .82rem;
    line-height: 1.8;
}

/* Play Games: platform launch panels */
.play-container {
    margin: 0 auto;
    display: grid;
    width: min(100%, 1200px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.play-card {
    min-height: 210px;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
    padding: 28px;
    text-align: left;
}

.play-card:hover::after {
    transform: scaleX(1);
}

.play-card img {
    width: 72px;
    height: 72px;
}

.play-card:hover img {
    transform: scale(1.06) rotate(-3deg);
}

.play-card p {
    margin: 0 0 14px;
}

.play-card:hover span {
    opacity: 1;
}

/* Contact: dark creator-link directory */
.contact .section-title h2::after {
    margin: 14px 0 0;
}

.contact .section-title p {
    margin-top: 9px;
    font-size: 12px;
    letter-spacing: .1em;
}

.contact-container {
    margin: 0 auto;
    width: min(100%, 1200px);
    text-align: left;
}

.contact-message {
    max-width: 760px;
    margin: 0 0 36px;
    font-size: .9rem;
    line-height: 1.9;
}

.sns-list {
    display: grid;
    gap: 12px;
}

.sns-card {
    min-height: 106px;
    padding: 20px;
}

.sns-card:hover::after {
    transform: scaleX(1);
}

.sns-card:hover img {
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .latest-articles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .play-container {
        grid-template-columns: 1fr;
    }

    .play-card {
        min-height: 150px;
    }

    .sns-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-logo img,
    .blog-button,
    .article-card,
    .article-card img,
    .article-content a,
    .timeline-item::before,
    .timeline-content,
    .play-card,
    .play-card img,
    .play-card::after,
    .play-card span,
    .sns-card,
    .sns-card img,
    .sns-card::after {
        transition-duration: .01ms !important;
    }
}

/* Higher contrast palette for accents and dark studio panels */
.achievements .achievement-card {
    position: relative;
    display: grid;
    min-height: 220px;
    grid-template-columns: 1fr auto;
    align-items: start;
    overflow: hidden;
    padding: 26px 28px 24px;
    text-align: left;
    counter-increment: achievement;
    background: rgba(255, 255, 255, .055);
}

.achievements .achievement-card:hover {
    background: #394a3d;
}

.work-card::after,
.play-card::after {
    background: #168bc4;
}

.what-i-can-do .section-title::before,
.blog .section-title h2::before,
.timeline .section-title h2::before,
.play-games .section-title h2::before {
    color: #006ea8;
}

.header-nav a:hover {
    color: #006ea8;
}

.section-title h2::after {
    display: block;
    width: 28px;
    height: 2px;
    content: "";
    background: #168bc4;
}

/* Mobile layout polish */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    section:not(.hero) {
        min-height: 0;
        padding: 76px 6%;
        scroll-margin-top: 68px;
    }

    .header {
        height: 68px;
        padding: 0 16px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .brand-name {
        font-size: 11px;
    }

.hamburger {
        display: block;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .hamburger span {
        width: 24px;
        height: 2px;
        margin: 6px auto;
    }

    .header-nav {
        position: fixed;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        transform: translateY(-120%);
        visibility: hidden;
        transition: transform .35s ease, visibility 0s linear .35s;
        border-bottom: 1px solid #e9ebea;
        top: 68px;
        max-height: calc(100svh - 68px);
        gap: 0;
        overflow-y: auto;
        padding: 12px 6% 24px;
        background: rgba(255, 255, 255, .99);
        box-shadow: 0 18px 30px rgba(22, 32, 24, .12);
    }

    .header-nav a {
        color: var(--color-main);
        width: min(100%, 520px);
        padding: 12px 4px;
        border-bottom: 1px solid #e8ecef;
        font-size: 15px;
        text-align: center;
    }

.hero-content {
        margin: 0;
    }

.hero-content h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .hero-lead {
        margin-top: 16px;
        font-size: clamp(.82rem, 3.6vw, 1rem);
        line-height: 1.9;
    }

    .hero-actions {
        margin-top: 22px;
    }

    .hero-button {
        font-size: 12px;
    }

.section-title,
    .about .section-title,
    .achievements .section-title,
    .what-i-can-do .section-title,
    .featured-works .section-title,
    .other-works .section-title,
    .blog .section-title,
    .timeline .section-title,
    .play-games .section-title,
    .contact .section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .section-title h2 {
        margin-bottom: 0;
        font-size: clamp(2rem, 8vw, 2.8rem);
        letter-spacing: .015em;
        overflow-wrap: anywhere;
    }

    .section-title h2::after,
    .about .section-title h2::after,
    .achievements .section-title h2::after,
    .featured-works .section-title h2::after,
    .other-works .section-title h2::after,
    .blog .section-title h2::after,
    .timeline .section-title h2::after,
    .play-games .section-title h2::after,
    .contact .section-title h2::after {
        margin: 12px 0 0;
    }

    .section-title p {
        max-width: 100%;
        font-size: .82rem;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

            .about-image img {
        width: 100%;
        height: clamp(280px, 78vw, 420px);
        object-fit: cover;
    }

    .about-content {
        min-width: 0;
        padding: 0;
        text-align: left;
    }

    .about-name {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .about-name span {
        font-size: .68rem;
        letter-spacing: .15em;
    }

    .about-statement {
        font-size: clamp(1.25rem, 5.5vw, 1.8rem);
        line-height: 1.55;
    }

    .about-text {
        font-size: .9rem;
        line-height: 1.9;
        overflow-wrap: anywhere;
    }

    .about-meta {
        grid-template-columns: 1fr;
    }

        .achievements .achievement-card {
        min-width: 0;
    }

        .can-do-category {
        width: 100%;
        gap: 18px;
        margin-bottom: 16px;
        padding: 22px 18px;
    }

    .can-do-category-title {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

        .can-do-category-title h3 {
        font-size: 1.35rem;
    }

    .can-do-category-title p {
        font-size: .76rem;
    }

    .can-do-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .can-do-card {
        min-width: 0;
        min-height: 0;
        padding: 20px 18px;
    }

.featured-video {
        margin-bottom: 0;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .featured-container {
        width: 100%;
        padding: 26px 20px;
    }

                    .works-list {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .work-card,
    .work-card:nth-child(7n + 1) {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-card img,
    .work-card:nth-child(7n + 1) img {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .work-content,
    .work-card:nth-child(7n + 1) .work-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 20px;
    }

    .work-content h3,
    .work-description,
    .work-link,
    .work-genre,
    .work-tech,
    .work-role {
        grid-column: 1 / -1;
    }

    .work-content h3,
    .work-card:nth-child(7n + 1) .work-content h3 {
        font-size: 1.12rem;
    }

    .work-genre::before,
    .work-tech::before,
    .work-period::before,
    .work-member::before,
    .work-role::before {
        width: 46px;
    }

    .blog-introduction {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
        padding: 24px;
    }

    .blog-logo {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .blog-logo img {
        width: 44px;
        max-height: 50px;
    }

    .blog-intro-content {
        width: 100%;
    }

    .blog-intro-content h3 {
        font-size: 1.45rem;
    }

    .blog-intro-content > p {
        font-size: .85rem;
    }

    .latest-articles {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .article-card img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .timeline-container {
        width: 100%;
        padding: 0 0 0 28px;
    }

        .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        padding: 10px 0 10px 20px;
    }

    .timeline-item::before,
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        top: 27px;
        left: -28px;
    }

    .timeline-date {
        display: block;
        margin: 0;
        font-size: .82rem;
        text-align: left;
    }

        .timeline-content h3 {
        font-size: .9rem;
        overflow-wrap: anywhere;
    }

    .timeline-content p {
        font-size: .78rem;
    }

    .play-container {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .play-card {
        min-height: 0;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 15px;
        padding: 20px;
        text-align: left;
    }

    .play-card img {
        width: 58px;
        height: 58px;
    }

    .play-card p {
        margin-bottom: 10px;
    }

    .contact-container {
        width: 100%;
    }

    .contact-message {
        margin-bottom: 24px;
        font-size: .84rem;
        line-height: 1.85;
        text-align: left;
    }

    .sns-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .sns-card {
        min-height: 82px;
        padding: 16px;
    }

    footer {
        font-size: .8rem;
        padding: 34px 6% 20px;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .footer-motto {
        line-height: 1.6;
    }

    .footer-copyright {
        line-height: 1.6;
    }
}

@media (max-width: 420px) {
    section:not(.hero) {
        padding-right: 5%;
        padding-left: 5%;
    }

            .can-do-category {
        padding: 20px 15px;
    }

    .can-do-category-title {
        gap: 11px;
    }

.featured-container {
        padding: 22px 16px;
    }

    .work-content,
    .work-card:nth-child(7n + 1) .work-content {
        padding: 17px;
    }

    .work-genre,
    .work-tech,
    .work-period,
    .work-member,
    .work-role {
        font-size: .65rem;
    }

    .work-genre::before,
    .work-tech::before,
    .work-period::before,
    .work-member::before,
    .work-role::before {
        width: 42px;
        font-size: 7px;
    }

    .blog-introduction {
        padding: 21px;
    }

    .timeline-container {
        padding-left: 24px;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        padding-left: 17px;
    }

    .timeline-item::before,
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        left: -24px;
    }

    .play-card {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
        padding: 17px;
    }

    .play-card img {
        width: 50px;
        height: 50px;
    }

    .footer-brand span {
        display: block;
        margin: 5px 0 0;
    }
}

@media (max-width: 350px) {
.section-title h2 {
        font-size: 1.85rem;
    }

    .work-content,
    .work-card:nth-child(7n + 1) .work-content {
        padding: 15px;
    }
}

/* ========================================
   Game UI: Achievements Status Screen (bright)
======================================== */

@property --bracket {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255, 255, 255, 0);
}

.achievements {
    position: relative;
    overflow: hidden;
    --accent: #006ea8;
    color: var(--color-main);
    background:
        radial-gradient(circle at 8% 12%, rgba(0, 163, 224, .12), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(255, 179, 0, .14), transparent 30%),
        radial-gradient(rgba(17, 23, 19, .09) 1px, transparent 1.4px) 0 0 / 22px 22px,
        #f5f8fc;
}

.achievements .section-title h2 {
    margin: 0;
    color: var(--color-main);
}

.achievements .section-title p {
    margin-bottom: 5px;
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--color-text);
}

/* Player bar */
.status-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: min(100%, 1200px);
    margin: 0 auto 18px;
    padding: 10px;
    border: 2px solid #e1e7ef;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 0 #e1e7ef;
    color: #5b6560;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.status-header > span {
    padding: 8px 16px;
    border-radius: 999px;
    background: #f1f5f9;
}

.status-header b {
    margin-left: 8px;
    color: var(--color-main);
    font-weight: 750;
}

.status-state {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    color: #13803d;
}

.status-header > .status-state {
    background: #dcfce7;
}

.status-state::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
    content: "";
    animation: status-blink 1.6s ease-in-out infinite;
}

@keyframes status-blink {
    50% { opacity: .35; }
}

/* Stat colors */
.achievement-card:nth-child(5) { --stat: #8b5cf6; --stat-soft: #e2d8fd; --stat-ink: #6d3fd8; }
/* Cards: white panels with a colored "button" edge and selection brackets */
.achievements .achievement-card,
.achievements .achievement-card:hover {
    grid-template-rows: auto 1fr auto auto;
    border: 2px solid #e1e7ef;
    border-radius: 16px;
    background-color: #fff;
    background-image:
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket)),
        linear-gradient(var(--bracket), var(--bracket));
    background-position:
        10px 10px, 10px 10px,
        calc(100% - 10px) 10px, calc(100% - 10px) 10px,
        10px calc(100% - 10px), 10px calc(100% - 10px),
        calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
    background-size: 18px 3px, 3px 18px, 18px 3px, 3px 18px, 18px 3px, 3px 18px, 18px 3px, 3px 18px;
    background-repeat: no-repeat;
    box-shadow: 0 6px 0 var(--stat-soft), 0 16px 30px rgba(30, 45, 70, .06);
    transition:
        opacity var(--transition),
        transform .3s cubic-bezier(.2, .9, .3, 1.3),
        box-shadow .3s ease,
        border-color .25s ease,
        --bracket .25s ease;
}

.achievements .achievement-card:hover {
    --bracket: var(--stat);
    transform: translateY(-6px);
    border-color: var(--stat);
    box-shadow: 0 10px 0 var(--stat), 0 22px 36px rgba(30, 45, 70, .12);
}

.achievements .achievement-card::before,
.achievements .achievement-card:hover::before {
    top: 24px;
    left: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--stat-soft);
    color: var(--stat-ink);
    font-size: 10px;
}

.achievements .achievement-card:hover::before {
    content: "▶ " counter(achievement, decimal-leading-zero);
}

.achievements .achievement-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    display: none;
}

.achievements .achievement-card .achievement-value {
    grid-row: 2;
    align-self: end;
    margin: 25px 0 10px;
    font-size: clamp(3.2rem, 5vw, 4.8rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -.075em;
    line-height: 1;
    color: var(--color-main);
}

.achievements .achievement-card p {
    grid-row: 3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5b6560;
}

.achievements .achievement-card:hover i {
    transform: rotate(-8deg) scale(1.1);
}

/* EXP gauge toward the next milestone */
.stat-meter {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 4;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.stat-gauge {
    position: relative;
    flex: 1;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
}

.stat-gauge span {
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .15s;
}

.achievement-card.show .stat-gauge span,
html:not(.js-enabled) .stat-gauge span {
    transform: scaleX(1);
}

.stat-next {
    flex: 0 0 auto;
    color: var(--stat-ink);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    letter-spacing: .14em;
}

/* "Achievement unlocked" toast */
.achievement-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 24px 10px 10px;
    border: 2px solid #ffd666;
    border-radius: 999px;
    background: #fff;
    color: var(--color-main);
    box-shadow: 0 6px 0 #ffd666, 0 20px 40px rgba(30, 45, 70, .18);
    pointer-events: none;
}

.achievement-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffb300;
    font-size: 18px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}

.toast-text small {
    display: block;
    margin-bottom: 3px;
    color: #9a6200;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .2em;
}

.toast-text strong {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .status-header {
        gap: 6px;
        padding: 8px;
        border-radius: 20px;
    }

    .status-header > span {
        padding: 7px 12px;
    }

    .status-state {
        margin-left: 0;
    }

    .achievement-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-gauge span,
    .achievement-toast {
        transition: none;
    }
}

/* ========================================
   Game UI: Bright sections (shared)
======================================== */

.featured-works,
.contact,
footer,
.blog-introduction {
    --accent: #006ea8;
}

/* ---------- Main Works ---------- */
.featured-works {
    position: relative;
    overflow: hidden;
    color: var(--ui-ink);
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 90, 95, .12), transparent 30%),
        radial-gradient(circle at 4% 92%, rgba(0, 163, 224, .12), transparent 30%),
        var(--ui-dots),
        #fff8f2;
}

.featured-works .section-title h2 {
    margin: 0;
    color: var(--ui-ink);
}

.featured-works .section-title h2::after {
    background: #168bc4;
}

.featured-works .section-title p {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--color-text);
}

.featured-video {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--ui-line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: #dfe9f3;
    box-shadow: none;
}

.featured-video::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(17, 23, 19, .18));
}

.featured-works .featured-container {
    border: 2px solid var(--ui-line);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: #fff;
    box-shadow: 0 8px 0 #ffd6d7, 0 24px 50px rgba(30, 45, 70, .08);
}

.featured-works .featured-title {
    color: var(--ui-ink);
}

.featured-works .info-item:nth-child(3) { --stat: #8b5cf6; --stat-soft: #e2d8fd; --stat-ink: #6d3fd8; }
.featured-works .info-item,
.featured-works .featured-point {
    padding: 24px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-panel);
}

.featured-works .info-item h4,
.featured-works .featured-point h4 {
    margin-bottom: 15px;
    border: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--stat-soft);
    color: var(--stat-ink);
}

.featured-works .info-item p,
.featured-works .featured-point li {
    font-size: .88rem;
    line-height: 1.85;
    color: var(--color-text);
}

.featured-works .featured-point li::before {
    top: .65em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--stat);
    transform: rotate(45deg);
}

/* ---------- Blog introduction ---------- */
.blog-introduction {
    display: flex;
    position: relative;
    min-height: 300px;
    justify-content: flex-start;
    overflow: hidden;
    border: 2px solid var(--ui-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 82% 22%, rgba(0, 163, 224, .14), transparent 30%),
        radial-gradient(circle at 96% 100%, rgba(255, 179, 0, .14), transparent 28%),
        #fff;
    box-shadow: 0 8px 0 #c9eefc, 0 24px 50px rgba(30, 45, 70, .08);
}

.blog-introduction::after {
    position: absolute;
    right: 28px;
    bottom: 20px;
    content: "NOTE / JOURNAL";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    pointer-events: none;
    color: rgba(17, 23, 19, .28);
}

.blog-logo img {
    object-fit: contain;
    transition: transform .4s ease;
    filter: none;
}

.blog-intro-content h3 {
    margin-bottom: 14px;
    letter-spacing: -.04em;
    color: var(--ui-ink);
}

.blog-stat span {
    display: block;
    font-weight: 700;
    letter-spacing: -.06em;
    font-size: 2.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #0089c2;
}

.blog-stat p {
    margin-top: 6px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ui-sub);
}

/* ---------- Contact ---------- */
.contact {
    position: relative;
    overflow: hidden;
    color: var(--ui-ink);
    background:
        radial-gradient(circle at 10% 8%, rgba(139, 92, 246, .1), transparent 30%),
        radial-gradient(circle at 92% 96%, rgba(34, 197, 94, .1), transparent 30%),
        var(--ui-dots),
        var(--ui-panel);
}

.contact .section-title h2 {
    color: var(--ui-ink);
}

.contact .section-title p,
.contact-message {
    color: var(--color-text);
}

.sns-card:nth-child(1) { --brand: #24292f; --brand-soft: #dfe3e8; }
.sns-card:nth-child(2) { --brand: #ff0000; --brand-soft: #ffd3d3; }
.sns-card:nth-child(3) { --brand: #111111; --brand-soft: #e3e5e8; }
.sns-card:nth-child(4) { --brand: #ff0050; --brand-soft: #ffd0de; }
.sns-card:nth-child(5) { --brand: #1877f2; --brand-soft: #d3e5fd; }

.sns-card {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    position: relative;
    gap: 16px;
    overflow: hidden;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    transition:
        opacity var(--transition),
        transform .3s cubic-bezier(.2, .9, .3, 1.3),
        border-color .25s ease,
        box-shadow .3s ease;
}

.sns-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    display: none;
}

.sns-card::before {
    position: absolute;
    top: 50%;
    right: 22px;
    color: var(--brand);
    content: "▶";
    font-size: 12px;
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity .25s ease, transform .25s ease;
}

.sns-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 9px 0 var(--brand-soft);
}

.sns-card:hover::before {
    opacity: 1;
    transform: translate(0, -50%);
}

.sns-card h3 {
    margin: 0 0 5px;
    font-size: .92rem;
    color: var(--ui-ink);
}

.sns-card p {
    font-size: .72rem;
    line-height: 1.6;
    color: var(--ui-sub);
}

/* ---------- Footer ---------- */
footer {
    letter-spacing: .05em;
    color: #fff;
    text-align: left;
    border-color: rgba(255, 255, 255, .18);
    border-top: 2px solid var(--ui-line);
    background: #fff;
}

.footer-inner {
    display: flex;
    max-width: 1280px;
    justify-content: space-between;
    margin: 0 auto;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    border-color: var(--ui-line);
}

.footer-brand span,
.footer-motto {
    color: var(--ui-sub);
}

.footer-top {
    padding: 10px 18px;
    border: 2px solid #c9eefc;
    border-radius: 999px;
    background: #e9f8fe;
    box-shadow: 0 4px 0 #c9eefc;
    color: #00739e;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s ease;
}

.footer-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #9fdff8;
}

/* ========================================
   Game UI: Timeline Quest Log
======================================== */

.timeline {
    overflow: hidden;
    background:
        radial-gradient(circle at 94% 6%, rgba(34, 197, 94, .1), transparent 28%),
        var(--ui-dots),
        var(--ui-panel);
}

.timeline-container {
    position: relative;
    margin: 0 auto;
    counter-reset: quest;
}

.timeline-container::before {
    left: 153px;
}

.timeline-item::before,
.timeline-item:nth-child(odd)::before,
.timeline-item:nth-child(even)::before {
    right: auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    border: 3px solid #fff;
    background: var(--quest);
    box-shadow: 0 0 0 2px var(--quest-soft);
}

.timeline-item[data-quest="now"]::before {
    animation: quest-pulse 1.8s ease-out infinite;
}

@keyframes quest-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .55); }
    100% { box-shadow: 0 0 0 12px rgba(255, 90, 95, 0); }
}

.timeline-item:hover::before {
    background: var(--quest);
    box-shadow: 0 0 0 5px var(--quest-soft);
}

.timeline-item[data-quest="award"]:hover::before {
    box-shadow: none;
    transform: scale(1.2) rotate(-8deg);
}

.timeline-content {
    position: relative;
    text-align: left;
    transition: border-color .25s ease, transform .3s ease, box-shadow .3s ease;
    padding-top: 46px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
}

.timeline-content::before {
    position: absolute;
    top: 18px;
    left: 25px;
    color: var(--ui-sub);
    content: "QUEST " counter(quest, decimal-leading-zero);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .18em;
}

.timeline-content::after {
    position: absolute;
    top: 13px;
    right: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--quest-soft);
    color: var(--quest-ink);
    content: "✓ CLEAR";
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .14em;
}

.timeline-item[data-quest="award"] .timeline-content::after {
    content: "★ AWARD";
}

.timeline-content:hover {
    border-color: var(--quest);
    box-shadow: 0 8px 0 var(--quest-soft);
}

.timeline-date {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .04em;
    color: #006495;
}

/* ========================================
   Game UI: Other Works Stage Select
======================================== */

.other-works {
    position: relative;
    background:
        radial-gradient(circle at 90% 4%, rgba(0, 163, 224, .1), transparent 28%),
        var(--ui-dots),
        var(--ui-panel);
}

.stage-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: min(100%, 1200px);
    margin: 0 auto 22px;
}

.stage-filter-label {
    margin-right: 8px;
    color: var(--ui-sub);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .18em;
}

.stage-filter button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 16px;
    border: 2px solid var(--ui-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 0 var(--ui-line);
    color: var(--ui-ink);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s ease, border-color .2s ease;
}

.stage-filter button b {
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ui-panel);
    color: var(--ui-sub);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.stage-filter button:hover {
    transform: translateY(-2px);
    border-color: #9fdff8;
}

.stage-filter button[aria-pressed="true"] b {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.stage-filter button:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

.work-card[hidden] {
    display: none;
}

.work-card {
    position: relative;
    display: grid;
    min-width: 0;
    align-items: stretch;
    overflow: hidden;
    counter-increment: project;
    transition:
        opacity var(--transition),
        transform .3s cubic-bezier(.2, .9, .3, 1.3),
        border-color .25s ease,
        box-shadow .3s ease;
}

.work-card:hover {
    transform: translateY(-5px);
    border-color: #00a3e0;
    box-shadow: 0 9px 0 #c9eefc, 0 20px 36px rgba(30, 45, 70, .1);
}

.stage-badges {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}

.stage-badges span {
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(17, 23, 19, .18);
    color: var(--ui-ink);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}

.work-link {
    display: flex;
    width: fit-content;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    gap: 8px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: #e6f6fd;
    color: #00739e;
    transition: background .2s ease, color .2s ease, gap .25s ease;
}

.work-link:hover {
    gap: 12px;
    color: #fff;
}

.work-card.stage-pop {
    animation: stage-pop .4s cubic-bezier(.2, .9, .3, 1.3);
}

@keyframes stage-pop {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 769px) {
    .works-list.is-filtered .work-card:nth-child(7n + 1) {
        grid-column: auto;
        grid-template-columns: minmax(118px, .72fr) minmax(0, 1.28fr);
    }

    .works-list.is-filtered .work-card:nth-child(7n + 1) img {
        aspect-ratio: 4 / 5;
    }

    .works-list.is-filtered .work-card:nth-child(7n + 1) .work-content {
        align-content: start;
        padding: 20px 18px 18px;
    }

    .works-list.is-filtered .work-card:nth-child(7n + 1) .work-content h3 {
        font-size: clamp(.95rem, 1.2vw, 1.12rem);
    }
}

@media (max-width: 768px) {
    .timeline-container::before {
        top: 4px;
        bottom: 4px;
        height: auto;
        left: 8.5px;
    }

    .timeline-content::before {
        left: 16px;
    }

    .timeline-content {
        padding: 16px;
        padding-top: 42px;
    }

    .stage-filter-label {
        width: 100%;
    }

    .stage-filter button {
        padding: 7px 8px 7px 13px;
        font-size: .74rem;
    }
}

/* ========================================
   Game UI: Hero (bright title screen)
======================================== */

.hero {
    position: relative;
    width: 100%;
    --accent: #00a3e0;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
    height: auto;
    min-height: min(860px, 100svh);
    padding: 130px 8% 90px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 30%, rgba(0, 163, 224, .16), transparent 34%),
        radial-gradient(circle at 12% 86%, rgba(255, 179, 0, .16), transparent 30%),
        radial-gradient(circle at 96% 96%, rgba(255, 90, 95, .1), transparent 26%),
        var(--ui-dots),
        #f5f8fc;
}

.hero-screen {
    grid-column: 2;
    grid-row: 1;
    transform: rotate(1.2deg);
    transition: transform .5s cubic-bezier(.2, .9, .3, 1.3);
}

.hero-screen:hover {
    transform: rotate(0deg) scale(1.01);
}

.hero-video {
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border: 6px solid #fff;
    border-radius: 24px;
    background: #dfe9f3;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 0 0 2px var(--ui-line), 0 12px 0 #c9eefc, 0 34px 60px rgba(30, 45, 70, .16);
}

/* The overlay element becomes the "NOW PLAYING" badge on the game screen */
.hero-overlay {
    inset: auto;
    top: -14px;
    left: 24px;
}

.hero-overlay::before {
    content: "● NOW PLAYING — ししとう";
}

:root[lang="en"] .hero-overlay::before {
    content: "● NOW PLAYING — SHISHITO";
}

.hero-content {
    z-index: 2;
    padding: 0;
    text-align: left;
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    transform: none;
}

.hero-eyebrow {
    align-items: center;
    gap: 10px;
    display: inline-flex;
    margin-bottom: 26px;
    padding: 8px 16px;
    border: 2px solid var(--ui-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 0 var(--ui-line);
    color: var(--ui-sub);
}

.hero-content h1 {
    font-weight: 750;
    color: var(--ui-ink);
    font-size: clamp(2.5rem, 4.6vw, 4.8rem);
    letter-spacing: -.06em;
    line-height: 1.2;
    white-space: normal;
}

.hero-mark {
    background: linear-gradient(transparent 62%, #ffe07a 62%, #ffe07a 92%, transparent 92%);
}

.hero-lead {
    color: var(--color-text);
}

.hero-button {
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.hero-button span,
.hero-button:hover span {
    color: #fff;
}

.hero-button:hover {
    transform: translateY(-2px);
    border: 0;
    color: #fff;
}

.hero-button:active {
    transform: translateY(4px);
}

.hero-text-link {
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    padding: 0 22px;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    color: var(--ui-ink);
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}

.hero-text-link:hover {
    transform: translateY(-2px);
    border-color: #9fdff8;
    box-shadow: 0 7px 0 #c9eefc;
    opacity: 1;
}

.hero-text-link span {
    padding-left: 7px;
    color: #00a3e0;
}

.hero-index {
    left: 0;
    position: static;
    margin-top: 40px;
    color: var(--ui-sub);
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 112px 6% 64px;
    }

    .hero-content {
        top: auto;
        left: auto;
        width: auto;
        max-width: none;
        transform: none;
    }

    .hero-screen {
        grid-column: 1;
        grid-row: 2;
        transform: none;
    }

    .hero-video {
        border-width: 4px;
        border-radius: 18px;
    }

    .hero-overlay {
        top: -12px;
        left: 16px;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 8.4vw, 3.2rem);
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .hero-button,
    .hero-text-link {
        min-height: 48px;
    }

    .hero-index {
        margin-top: 26px;
    }
}

/* ========================================
   Game UI: What I Can Do (skill sets)
======================================== */

.what-i-can-do {
    background:
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, .1), transparent 28%),
        radial-gradient(circle at 4% 70%, rgba(0, 163, 224, .1), transparent 28%),
        var(--ui-dots),
        var(--ui-panel);
}

.what-i-can-do .section-title h2::after {
    margin: 14px 0 0;
}

.can-do-category {
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    display: grid;
    align-items: stretch;
    border: 2px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 0 var(--cat-soft), 0 20px 40px rgba(30, 45, 70, .06);
}

.can-do-category::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background: #168bc4;
    display: none;
}

.can-do-category:hover {
    box-shadow: 0 10px 0 var(--cat-soft), 0 24px 44px rgba(30, 45, 70, .08);
}

.can-do-category-title > span {
    font-size: 15px;
}

.can-do-category-title > span::before {
    content: "SKILL SET";
    font-size: 10px;
    letter-spacing: .16em;
    opacity: .85;
}

.can-do-category-title h3 {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    letter-spacing: .02em;
    color: var(--ui-ink);
}

.can-do-category-title p {
    margin: 0;
    line-height: 1.8;
    color: var(--ui-sub);
}

.can-do-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-panel);
    transition:
        opacity var(--transition),
        transform .3s cubic-bezier(.2, .9, .3, 1.3),
        border-color .25s ease,
        background .25s ease,
        box-shadow .3s ease;
}

.can-do-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    height: 2px;
    background: #168bc4;
    display: none;
}

.can-do-card:hover {
    transform: translateY(-5px);
    border-color: var(--cat);
    background: #fff;
    box-shadow: 0 7px 0 var(--cat-soft);
}

.can-do-card:hover .can-do-icon {
    transform: rotate(-8deg) scale(1.1);
}

.can-do-content h4 {
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
    font-size: 1rem;
    letter-spacing: .01em;
    color: var(--ui-ink);
}

.can-do-content p {
    margin-bottom: 18px;
    font-size: .82rem;
    line-height: 1.85;
    color: var(--color-text);
}

.can-do-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    font-size: .66rem;
    letter-spacing: .02em;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--cat-soft);
    color: var(--cat-ink);
    font-weight: 700;
}

@media (max-width: 1100px) {
    .can-do-category-title > span {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .can-do-category-title > span {
        flex: 0 0 auto;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-screen,
    .hero-button,
    .hero-text-link {
        transition: none;
    }
}

/* ========================================
   Game UI: About (player profile card)
======================================== */

.about {
    background:
        radial-gradient(circle at 6% 10%, rgba(255, 90, 95, .14), transparent 28%),
        radial-gradient(circle at 94% 90%, rgba(255, 90, 95, .08), transparent 28%),
        var(--ui-dots),
        #fff7f7;
}

.about .section-title h2::before {
    display: block;
    margin-bottom: 12px;
    color: #006ea8;
    content: "01 / PLAYER PROFILE";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.about .section-title h2::after {
    margin: 14px 0 0;
}

.about .section-title p {
    color: var(--color-text);
}

.about-container {
    margin: 0 auto;
    display: grid;
    width: min(100%, 1200px);
    align-items: center;
    padding: clamp(24px, 4vw, 52px);
    border: 2px solid var(--ui-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 8px 0 #ffd6d7, 0 24px 50px rgba(30, 45, 70, .07);
}

.about-image::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 68%;
    height: 72%;
    content: "";
    border-radius: 20px;
    background: #ff5a5f;
}

.about-image::after {
    position: absolute;
    inset: 0 0 28px 28px;
    content: "";
    pointer-events: none;
    border-radius: 18px;
    background: linear-gradient(0deg, rgba(17, 23, 19, .4), transparent 34%);
}

.about-image img {
    position: relative;
    z-index: 1;
    border-radius: 18px;
}

.about-image-caption {
    position: absolute;
    z-index: 2;
    bottom: 48px;
    left: 50px;
    font-weight: 700;
    letter-spacing: .2em;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 0 rgba(17, 23, 19, .2);
    color: var(--ui-ink);
}

.about-kicker {
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ui-panel);
    color: var(--ui-sub);
}

.about-name {
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.15;
    letter-spacing: -.04em;
    color: var(--ui-ink);
}

.about-name span {
    display: block;
    margin-top: 10px;
    font-weight: 650;
    color: var(--ui-sub);
}

.about-text {
    max-width: 650px;
    color: var(--color-text);
}

.about-meta {
    display: grid;
    margin-top: 28px;
    gap: 12px;
    padding-top: 0;
    border-top: 0;
}

.about-meta span {
    font-weight: 700;
    letter-spacing: .16em;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--stat-soft);
    color: var(--stat-ink);
}

.about-meta strong {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.6;
    color: var(--ui-ink);
}

/* ========================================
   Game UI: Play Games (platform launchers)
======================================== */

.play-games {
    background:
        radial-gradient(circle at 92% 8%, rgba(30, 136, 229, .1), transparent 28%),
        radial-gradient(circle at 6% 94%, rgba(250, 92, 92, .1), transparent 28%),
        var(--ui-dots),
        #fff;
}

.play-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    display: none;
}

.play-card:hover {
    transform: translateY(-5px);
    border-color: var(--pc);
    background: #fff;
    box-shadow: 0 10px 0 var(--pc-soft), 0 22px 36px rgba(30, 45, 70, .1);
}

.play-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--ui-ink);
}

.play-card p {
    font-size: .78rem;
    line-height: 1.7;
    color: var(--color-text);
}

.play-card:hover span {
    gap: 12px;
    color: #fff;
}

.play-card:active span {
    transform: translateY(3px);
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        text-align: left;
        padding: 20px;
        border-radius: 20px;
    }

    .about-image {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 0 0 18px 18px;
    }

    .about-image::after {
        inset: 0 0 18px 18px;
    }
}

/* Hero: blinking "PRESS START" cursor */
.hero-index span {
    color: #00a3e0;
    display: inline-block;
    margin-right: 4px;
    animation: press-start-blink 1.1s steps(2, jump-none) infinite;
}

@keyframes press-start-blink {
    50% { opacity: 0; }
}

/* ========================================
   Game UI: Blog (message window + EXP)
======================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.blog {
    background:
        radial-gradient(circle at 6% 8%, rgba(0, 163, 224, .1), transparent 28%),
        radial-gradient(circle at 94% 92%, rgba(255, 179, 0, .12), transparent 28%),
        var(--ui-dots),
        #fff;
}

/* Floating logo, like an item waiting to be picked up */
.blog-logo {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    border: 2px solid var(--ui-line);
    border-radius: 20px;
    background: var(--ui-panel);
    animation: blog-float 3.2s ease-in-out infinite;
    box-shadow: 0 6px 0 var(--ui-line);
}

.blog-logo::after {
    position: absolute;
    right: -10px;
    bottom: -18px;
    left: -10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(17, 23, 19, .1);
    content: "";
    animation: blog-shadow 3.2s ease-in-out infinite;
}

@keyframes blog-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes blog-shadow {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50% { opacity: .5; transform: scaleX(.8); }
}

.blog-introduction:hover .blog-logo img {
    transform: rotate(-10deg) scale(1.12);
}

/* Message window */
.blog-intro-content > p.blog-message {
    position: relative;
    min-height: 6.2em;
    padding: 16px 44px 16px 20px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-panel);
    color: var(--ui-ink);
    font-weight: 500;
}

.blog-message-cursor {
    position: absolute;
    right: 18px;
    bottom: 12px;
    color: #00a3e0;
    font-size: 11px;
    opacity: 0;
}

.blog-message.is-done .blog-message-cursor {
    opacity: 1;
}

@keyframes message-cursor {
    50% { transform: translateY(4px); }
}

/* Article counter + EXP gauge */
.blog-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: 18px;
    max-width: 460px;
}

.blog-stat span#article-count {
    display: inline-block;
}

.blog-stat span#article-count.is-counted {
    animation: count-pop .45s cubic-bezier(.2, .9, .3, 1.6);
}

@keyframes count-pop {
    40% { transform: scale(1.18) rotate(-3deg); }
}

.blog-stat > p {
    grid-column: 1;
}

.blog-exp {
    --stat: #00a3e0;
    display: flex;
    min-width: 160px;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    align-items: center;
    gap: 12px;
}

.blog-exp .stat-gauge span {
    transform: scaleX(0);
}

.blog-introduction.show .blog-exp .stat-gauge span {
    transform: scaleX(1);
}

.blog-stat .stat-gauge span {
    font-size: 0;
    line-height: 0;
}

.blog-stat .blog-exp-next {
    flex: 0 0 auto;
    color: #00739e;
    font-size: 10px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .14em;
}

.blog-button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-size: .8rem;
    font-weight: 700;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease, gap .25s ease;
}

.blog-button:hover {
    gap: 26px;
    transform: translateY(-2px);
    color: #fff;
}

.blog-button:active {
    transform: translateY(4px);
}

/* Latest articles as collectible log cards */
.article-card:hover {
    transform: translateY(-6px) rotate(-.6deg);
    border-color: var(--log);
    box-shadow: 0 10px 0 var(--log-soft), 0 22px 36px rgba(30, 45, 70, .1);
}

.article-card img {
    width: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1);
    background: var(--ui-panel);
}

.article-badges {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    pointer-events: none;
}

.article-badges span {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(17, 23, 19, .18);
    color: var(--ui-ink);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}

.article-badges .is-new {
    color: #fff;
    animation: new-bounce 1.4s ease-in-out infinite;
}

@keyframes new-bounce {
    0%, 60%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-4px) rotate(-4deg); }
}

.article-date {
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--log-soft);
    color: var(--log-ink);
}

.article-content a:hover {
    gap: 12px;
    padding-left: 14px;
    color: #fff;
}

@media (max-width: 600px) {
    .blog-stat {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        width: 100%;
        max-width: none;
    }

    .blog-logo {
        margin-right: auto;
        margin-left: auto;
    }

    .blog-stat > p {
        grid-column: 1;
    }

    .blog-exp {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 300px;
        margin-top: 12px;
    }

    .blog-intro-content > p.blog-message {
        text-align: left;
    }

    .blog-introduction::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-exp .stat-gauge span {
        transition: none;
    }
}

/* ========================================
   Ambient Motion: the page is always alive
======================================== */

section {
    scroll-margin-top: 90px;
    position: relative;
    isolation: isolate;
}

.ambient {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient i {
    position: absolute;
    color: var(--c);
    font-size: var(--s);
    font-style: normal;
    line-height: 1;
    animation: ambient-float var(--d) ease-in-out var(--delay) infinite;
    will-change: translate, rotate;
}

@keyframes ambient-float {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    33% { translate: 10px -22px; rotate: var(--r); }
    66% { translate: -8px -8px; rotate: calc(var(--r) * -0.5); }
}

/* Shared idle keyframes (use individual transform properties so hover effects still work) */
@keyframes idle-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@keyframes idle-bob-tilt {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 0 -7px; rotate: -4deg; }
}

@keyframes idle-float-soft {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes idle-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}

@keyframes idle-pulse-ring-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .5); }
    100% { box-shadow: 0 0 0 9px rgba(255, 90, 95, 0); }
}

@keyframes idle-hop {
    0%, 86%, 100% { translate: 0 0; }
    90% { translate: 0 -6px; }
    94% { translate: 0 0; }
    97% { translate: 0 -2px; }
}

@keyframes idle-nudge {
    0%, 100% { translate: 0 0; }
    50% { translate: 3px 0; }
}

@keyframes idle-twinkle {
    0%, 100% { scale: 1; rotate: 0deg; }
    50% { scale: 1.18; rotate: 14deg; }
}

@keyframes idle-wobble {
    0%, 80%, 100% { rotate: 0deg; }
    85% { rotate: -8deg; }
    90% { rotate: 6deg; }
    95% { rotate: -3deg; }
}

@keyframes idle-shine {
    0% { translate: -120% 0; }
    60%, 100% { translate: 320% 0; }
}

@keyframes idle-dash-flow {
    to { background-position: 0 30px; }
}

@keyframes idle-blink {
    50% { opacity: 0; }
}

/* Header */
.brand-mark {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    animation: idle-wobble 7s ease-in-out infinite;
}

/* Hero */
.hero-screen {
    animation: idle-float-soft 5s ease-in-out infinite;
}

.hero-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
    animation: idle-pulse-ring 1.8s ease-out infinite;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 18px;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-weight: 750;
    animation: idle-hop 4s ease-in-out infinite;
}

.hero-overlay {
    position: absolute;
    z-index: 2;
    display: block;
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .16em;
    pointer-events: none;
    animation: idle-bob 2.6s ease-in-out infinite;
}

/* About */
.about-image {
    flex-shrink: 0;
    position: relative;
    animation: idle-float-soft 6s ease-in-out infinite;
}

.about-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5a5f;
    box-shadow: 0 0 0 3px rgba(255, 90, 95, .25);
    animation: idle-pulse-ring-red 1.8s ease-out infinite;
}

/* Achievements */
.achievements .achievement-card i {
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    transition: transform .3s ease;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--stat);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 4px 0 var(--stat-ink);
    animation: idle-bob-tilt 3s ease-in-out var(--idle-delay, 0s) infinite;
}

.stat-gauge span {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--fill, 0) * 100%);
    border-radius: inherit;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px),
        var(--stat);
    transform: scaleX(0);
    transform-origin: left;
    overflow: hidden;
}

.stat-gauge span::after,
.blog-exp .stat-gauge span::after {
    position: absolute;
    inset: 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    content: "";
    animation: idle-shine 3.2s ease-in-out var(--idle-delay, 0s) infinite;
}

/* Skills */
.can-do-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    font-size: 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--cat) !important;
    box-shadow: 0 4px 0 var(--cat-ink);
    color: #fff;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.3);
    animation: idle-bob-tilt 3.2s ease-in-out var(--idle-delay, 0s) infinite;
}

/* Main works */
.featured-video::before {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #fff;
    content: "● NOW PLAYING";
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .16em;
    animation: idle-bob 2.6s ease-in-out infinite;
}

/* Other works */
.stage-filter-label::before {
    display: inline-block;
    margin-right: 6px;
    color: #00a3e0;
    content: "▶";
    animation: idle-blink 1.1s steps(2, jump-none) infinite;
}

.stage-badges .is-wip {
    background: #ffb300;
    color: #3d2800;
    display: inline-block;
    animation: idle-wobble 4s ease-in-out infinite;
}

/* Timeline */
.timeline-container::before {
    content: "";
    position: absolute;
    transform: none;
    width: 3px;
    background: repeating-linear-gradient(to bottom, #c3ccd8 0 8px, transparent 8px 15px);
    animation: idle-dash-flow 1.4s linear infinite;
}

.timeline-item[data-quest="award"]::before {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background: var(--quest);
    box-shadow: none;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    translate: -1.5px -1.5px;
    animation: idle-twinkle 2.4s ease-in-out infinite;
}

.timeline-item[data-quest="now"] .timeline-content::after {
    content: "▶ NOW PLAYING";
    animation: idle-bob 2s ease-in-out infinite;
}

/* Play games */
.play-card img {
    object-fit: contain;
    margin: 0;
    padding: 10px;
    transition: transform .3s ease;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: var(--ui-panel);
    animation: idle-bob-tilt 3.4s ease-in-out var(--idle-delay, 0s) infinite;
}

.play-card span::before {
    content: "▶";
    font-size: .6rem;
    display: inline-block;
    animation: idle-nudge 1s ease-in-out infinite;
}

/* Contact */
.sns-card img {
    object-fit: contain;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 7px;
    transition: transform .3s ease;
    border: 2px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-panel);
    animation: idle-bob 3s ease-in-out var(--idle-delay, 0s) infinite;
}

/* Footer */
.footer-top span {
    margin-left: 8px;
    color: #00a3e0;
    display: inline-block;
    animation: idle-bob 1.6s ease-in-out infinite;
}

/* Pause everything that is off screen to save battery and CPU */
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
    animation-play-state: paused !important;
}

/* ========================================
   Characters: peek, drift and pop
======================================== */

.peeker-sprite,
.drifter,
.card-pop {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    pointer-events: none;
}

/* 1. Peek from behind a box edge */
.has-peeker {
    position: relative;
}

.peeker {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: var(--peek-x);
    width: var(--peek-w);
    height: calc(var(--peek-w) * .72);
    overflow: hidden;
    pointer-events: none;
}

.peeker-sprite {
    display: block;
    width: 100%;
    translate: 0 102%;
    animation: peek 9s cubic-bezier(.3, 1.4, .5, 1) var(--peek-delay) infinite;
    transform-origin: 50% 100%;
}

@keyframes peek {
    0%, 50%, 100% { translate: 0 102%; rotate: 0deg; }
    56% { translate: 0 14%; rotate: 0deg; }
    63% { translate: 0 18%; rotate: -7deg; }
    70% { translate: 0 18%; rotate: 7deg; }
    80% { translate: 0 16%; rotate: 0deg; }
    87% { translate: 0 102%; }
}

/* Side variant: peek out from the right edge */
.peeker.is-side {
    top: var(--peek-y);
    bottom: auto;
    left: 100%;
    width: calc(var(--peek-w) * .72);
    height: var(--peek-w);
}

.peeker.is-side .peeker-sprite {
    translate: -102% 0;
    animation-name: peek-side;
    transform-origin: 0 50%;
}

@keyframes peek-side {
    0%, 50%, 100% { translate: -102% 0; rotate: 0deg; }
    56% { translate: -16% 0; rotate: 0deg; }
    63% { translate: -20% 0; rotate: 8deg; }
    70% { translate: -20% 0; rotate: -4deg; }
    80% { translate: -18% 0; rotate: 0deg; }
    87% { translate: -102% 0; }
}

/* 2. Drift across the background */
.drifter {
    position: absolute;
    left: 0;
    width: var(--drift-w);
    opacity: .9;
    animation:
        drift var(--drift-d) linear var(--drift-delay) infinite,
        drift-spin 11s ease-in-out infinite;
}

.drifter.is-reverse {
    animation-direction: reverse, normal;
    scale: -1 1;
}

@keyframes drift {
    from { translate: -160px 0; }
    25% { translate: 25vw -30px; }
    50% { translate: 50vw 10px; }
    75% { translate: 75vw -24px; }
    to { translate: calc(100vw + 160px) 0; }
}

@keyframes drift-spin {
    0%, 100% { rotate: -14deg; }
    50% { rotate: 14deg; }
}

/* 3. Pop out of a card on hover */
.card-pop {
    position: absolute;
    z-index: 0;
    right: 54px;
    bottom: 0;
    opacity: 0;
    translate: 0 110%;
}

.play-card img.card-pop,
.sns-card img.card-pop,
.article-card img.card-pop {
    width: 56px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    object-fit: contain;
    animation: none;
    transform: none;
    transform-origin: 50% 100%;
    transition:
        translate .5s cubic-bezier(.3, 1.7, .5, 1),
        opacity .15s ease;
}

/* Hop out from below the card, then keep wiggling while hovered */
.play-card:hover img.card-pop,
.play-card:focus-visible img.card-pop,
.sns-card:hover img.card-pop,
.sns-card:focus-visible img.card-pop,
.article-card:hover img.card-pop {
    opacity: 1;
    translate: 0 22%;
    transform: none;
    animation: card-pop-wiggle .9s ease-in-out .5s infinite;
}

@keyframes card-pop-wiggle {
    0%, 100% { rotate: 0deg; }
    25% { rotate: -8deg; }
    75% { rotate: 8deg; }
}

.article-card img.card-pop {
    position: absolute;
    right: 18px;
    bottom: 0;
    width: 60px;
}

.article-card .article-content {
    position: relative;
    z-index: 1;
}

.play-card img.card-pop {
    right: 18px;
    width: 76px;
}

.play-card:hover .card-pop,
.play-card:focus-visible .card-pop,
.sns-card:hover .card-pop,
.sns-card:focus-visible .card-pop {
    opacity: 1;
    translate: 0 22%;
}

.play-card > *:not(.card-pop),
.sns-card > *:not(.card-pop) {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .peeker {
        --peek-w: 56px !important;
    }

    .drifter {
        width: calc(var(--drift-w) * .7);
    }
}

@media (hover: none) {
    .card-pop {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .peeker,
    .drifter {
        display: none;
    }

}

/* Footer hosts a peeker on its top edge */
footer.has-peeker {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .play-card:hover img.card-pop,
    .sns-card:hover img.card-pop,
    .article-card:hover img.card-pop {
        animation: none;
    }
}

/* ========================================
   Mobile polish: legibility, tap targets, landscape menu
======================================== */

/* Keep small labels at a readable 10px minimum */
.brand-name small,
.about-image-caption,
.about-meta span,
.blog-stat > p,
.article-date,
.footer-motto,
.footer-copyright {
    font-size: 10px;
}

/* Comfortable tap targets */
.article-content a {
    text-decoration: none;
    display: inline-flex;
    font-size: .74rem;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--log-soft);
    color: var(--log-ink);
    font-weight: 750;
    transition: gap .25s ease, background .2s ease, color .2s ease;
    min-height: 40px;
}

.footer-brand {
    color: var(--ui-ink);
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 10px; /* 「HN」と名前の間（flex の中では span の余白の指定が効かない画面幅があったため） */
}

.footer-brand span {
    margin: 0;
}

/* PC の上のメニュー：押せる範囲を高さ 24px 以上にする（見た目の文字の位置は変えない） */
@media (min-width: 769px) {
    .header-nav a {
        display: inline-block;
        padding-block: 5px;
    }
}

@media (max-width: 768px) {
    .hero-eyebrow,
    .hero-index {
        font-size: 10px;
        letter-spacing: .1em;
    }

    .hero-eyebrow {
        flex-wrap: nowrap;
        max-width: 100%;
        line-height: 1.5;
    }
}

@media (max-width: 360px) {
    .hero-eyebrow {
        gap: 8px;
        padding: 7px 12px;
        letter-spacing: .05em;
    }
}

/* Short screens (phones in landscape): show the whole menu at once in two columns */
@media (max-width: 768px) and (max-height: 500px) {
    .header-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: center;
        column-gap: 16px;
        padding-top: 8px;
        padding-bottom: 12px;
    }

    .header-nav a {
        padding: 9px 4px;
    }
}

/* ========================================
   Other Works: collapsible drawer
======================================== */

.works-toggle {
    position: relative;
    display: flex;
    width: min(100%, 1200px);
    align-items: center;
    gap: 18px;
    margin: 0 auto;
    padding: 18px 22px;
    border: 2px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 0 #c9eefc, 0 20px 40px rgba(30, 45, 70, .07);
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s ease, border-color .2s ease;
}

.works-toggle:hover {
    transform: translateY(-3px);
    border-color: #00a3e0;
    box-shadow: 0 10px 0 #9fdff8, 0 24px 44px rgba(30, 45, 70, .1);
}

.works-toggle:active {
    transform: translateY(5px);
    box-shadow: 0 2px 0 #9fdff8;
}

.works-toggle:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.works-toggle-label {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .16em;
}

.works-toggle-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 750;
    letter-spacing: .02em;
}

.works-toggle-thumbs {
    display: flex;
    flex: 0 0 auto;
}

.works-toggle-thumbs img {
    width: 54px;
    height: 54px;
    margin-left: -14px;
    border: 3px solid #fff;
    border-radius: 12px;
    background: var(--ui-panel);
    box-shadow: 0 3px 0 var(--ui-line);
    object-fit: cover;
    transition: translate .3s cubic-bezier(.2, .9, .3, 1.4), rotate .3s ease;
}

.works-toggle-thumbs img:first-child {
    margin-left: 0;
}

.works-toggle-thumbs img:nth-child(odd) { rotate: -5deg; }
.works-toggle-thumbs img:nth-child(even) { rotate: 5deg; }

.works-toggle:hover .works-toggle-thumbs img {
    translate: 0 -6px;
    rotate: 0deg;
}

.works-toggle:hover .works-toggle-thumbs img:nth-child(2) { transition-delay: .04s; }
.works-toggle:hover .works-toggle-thumbs img:nth-child(3) { transition-delay: .08s; }
.works-toggle:hover .works-toggle-thumbs img:nth-child(4) { transition-delay: .12s; }

.works-toggle-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e6f6fd;
    color: #00739e;
    font-size: 14px;
    animation: idle-bob 1.6s ease-in-out infinite;
    transition: rotate .4s cubic-bezier(.2, .9, .3, 1.3);
}

.works-toggle[aria-expanded="true"] .works-toggle-icon {
    rotate: 180deg;
    animation: none;
}

.works-toggle[aria-expanded="true"] .works-toggle-thumbs {
    display: none;
}

/* Smooth open/close using the 0fr -> 1fr grid row trick */
.works-drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .7s cubic-bezier(.2, .8, .2, 1);
}

.works-drawer.is-open {
    grid-template-rows: 1fr;
}

.works-drawer-inner {
    min-height: 0;
    overflow: hidden;
}

.works-drawer.is-settled .works-drawer-inner {
    overflow: visible;
}

.works-drawer .stage-filter {
    margin-top: 26px;
}

.works-close {
    display: flex;
    margin: 28px auto 0;
    padding: 12px 22px;
    border: 2px solid var(--ui-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    font-weight: 750;
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}

.works-close:hover {
    transform: translateY(-2px);
    border-color: #00a3e0;
}

.works-close:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--ui-line);
}

@media (max-width: 600px) {
    .works-toggle {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .works-toggle-text {
        flex-basis: calc(100% - 60px);
        order: 2;
    }

    .works-toggle-icon {
        order: 3;
    }

    .works-toggle-thumbs {
        order: 4;
        width: 100%;
    }

    .works-toggle-thumbs img {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-drawer,
    .works-toggle,
    .works-toggle-thumbs img,
    .works-toggle-icon {
        transition: none;
    }
}

/* ========================================
   Contact: mail card
======================================== */

.mail-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
    padding: 24px 26px;
    border: 2px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 0 #ffd6d7, 0 20px 40px rgba(30, 45, 70, .07);
}

.mail-card-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: #ff5a5f;
    box-shadow: 0 5px 0 #c8323a;
    color: #fff;
    font-size: 24px;
    animation: idle-bob-tilt 3s ease-in-out infinite;
}

.mail-card-text p {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: .85rem;
    line-height: 1.7;
}

.mail-address {
    display: inline-block;
    padding: 8px 0;
    color: var(--ui-ink);
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 750;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.mail-address:hover {
    color: #c8323a;
    opacity: 1;
}

.mail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mail-button,
.mail-copy {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 14px;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}

.mail-button:hover {
    transform: translateY(-2px);
    color: #fff;
    opacity: 1;
}

.mail-button:active {
    transform: translateY(4px);
}

.mail-copy {
    border: 2px solid var(--ui-line);
    background: #fff;
    box-shadow: 0 4px 0 var(--ui-line);
    color: var(--ui-ink);
}

.mail-copy:hover {
    transform: translateY(-2px);
    border-color: #ff5a5f;
}

.mail-copy:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--ui-line);
}

.mail-copy.is-copied {
    border-color: #22c55e;
    background: #dcfce7;
    color: #15803d;
}

@media (max-width: 768px) {
    .mail-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .mail-card-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .mail-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mail-button,
    .mail-copy {
        flex: 1 1 160px;
    }
}

/* ========================================
   Header: ⚙ OPTIONS（設定画面を開くボタン）
======================================== */

.settings-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    margin-left: auto;
    margin-right: 22px;
    padding: 6px 14px 6px 10px;
    border: 2px solid var(--ui-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 0 var(--ui-line);
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}

.settings-button:hover {
    transform: translateY(-1px);
    border-color: #9fdff8;
}

.settings-button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ui-line);
}

.settings-button:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

.settings-button-icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: #111713;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1;
    transition: rotate .4s ease;
}

.settings-button:hover .settings-button-icon {
    rotate: 90deg;
}

@media (max-width: 768px) {
    .settings-button {
        margin-right: 12px;
        padding: 6px;
    }

    .settings-button-text {
        display: none;
    }
}

/* Motion OFF: stop every idle animation, hide drifting/peeking characters */
.motion-off *,
.motion-off *::before,
.motion-off *::after {
    animation: none !important;
}

.motion-off .ambient,
.motion-off .peeker {
    display: none !important;
}

/* Header fit: keep logo, ⚙ button and nav on one tidy row at every width */
.header-nav a,
.brand-name,
.brand-name small {
    white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .settings-button {
        margin-right: 14px;
        padding: 6px;
    }

    .settings-button-text {
        display: none;
    }

    .header-nav {
        gap: 14px;
    }
}

@media (min-width: 769px) and (max-width: 960px) {
    .brand-name small {
        display: none;
    }

    .header-nav {
        gap: 11px;
    }

    .header-nav a {
        font-size: 12px;
        letter-spacing: 0;
    }
}

@media (max-width: 420px) {
    .settings-button {
        margin-right: 8px;
    }

    .brand-name small {
        letter-spacing: .08em;
    }
}

/* ========================================
   Accessibility: readable contrast (WCAG AA 4.5:1)
   Bright accents stay for decoration; text sits on slightly deeper shades.
======================================== */

:root {
    --transition: .8s ease;
    --color-main: #111713;
    --color-text: #414844;
    --bg-white: #fff;
    --bg-gray: #f2f4f0;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius: 20px;
    --radius-lg: 24px;
    --shadow: 0 16px 45px rgba(20, 25, 30, .07);
    --shadow-hover: 0 22px 55px rgba(20, 25, 30, .12);
    --accent: #006ea8;
    --accent-on-dark: #62d8ff;
    --dark-surface: #26342b;
    --dark-card: #314136;
    --dark-card-hover: #394a3d;
    --ui-ink: #111713;
    --ui-sub: #5b6560;
    --ui-line: #e1e7ef;
    --ui-panel: #f5f8fc;
    --ui-dots: radial-gradient(rgba(17, 23, 19, .08) 1px, transparent 1.4px) 0 0 / 22px 22px;
    --color-sub: #5b6560;
    --cyan-strong: #007caa;
    --cyan-strong-hover: #00709a;
    --cyan-edge: #005b7d;
    --green-strong: #178640;
    --green-edge: #0f6330;
    --red-strong: #d6363d;
    --red-edge: #a8262c;
    --purple-strong: #7c4dea;
    --purple-edge: #5b33c2;
}

/* Darker inks for small text on soft pastel chips */
.achievement-card:nth-child(1) {
    --stat: #00a3e0;
    --stat-soft: #c9eefc; --stat-ink: #006d96; }
.achievement-card:nth-child(2) {
    --stat: #ff5a5f;
    --stat-soft: #ffd6d7; --stat-ink: #b42d34; }
.achievement-card:nth-child(3) {
    --stat: #ffb300;
    --stat-soft: #ffeab0; --stat-ink: #905c00; }
.achievement-card:nth-child(4) {
    --stat: #22c55e;
    --stat-soft: #c8f2d8; --stat-ink: #137538; }
.achievement-card:nth-child(6) {
    --stat: #ff7a1a;
    --stat-soft: #ffe0c7; --stat-ink: #a24909; }

.featured-works .info-item:nth-child(1) {
    --stat: #00a3e0;
    --stat-soft: #c9eefc; --stat-ink: #006d96; }
.featured-works .info-item:nth-child(2) {
    --stat: #22c55e;
    --stat-soft: #c8f2d8; --stat-ink: #137538; }
.featured-works .featured-point {
    --stat: #ff5a5f;
    --stat-soft: #ffd6d7; --stat-ink: #b42d34; }
.about-meta div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-panel);
    --stat-soft: #ffd6d7; --stat-ink: #b42d34; }

.can-do-category:nth-child(1 of .can-do-category) {
    --cat: #00a3e0;
    --cat-soft: #c9eefc; --cat-ink: #006d96; --cat-strong: var(--cyan-strong); --cat-edge: var(--cyan-edge); }
.can-do-category:nth-child(2 of .can-do-category) {
    --cat: #22c55e;
    --cat-soft: #c8f2d8; --cat-ink: #137538; --cat-strong: var(--green-strong); --cat-edge: var(--green-edge); }
.can-do-category:nth-child(3 of .can-do-category) {
    --cat: #8b5cf6;
    --cat-soft: #e2d8fd;
    --cat-ink: #6d3fd8; --cat-strong: var(--purple-strong); --cat-edge: var(--purple-edge); }

.article-card:nth-child(1 of .article-card) {
    --log: #ff5a5f;
    --log-soft: #ffd6d7; --log-ink: #b42d34; --log-strong: var(--red-strong); }
.article-card:nth-child(2 of .article-card) {
    --log: #00a3e0;
    --log-soft: #c9eefc; --log-ink: #006d96; --log-strong: var(--cyan-strong); }
.article-card:nth-child(3 of .article-card) {
    --log: #8b5cf6;
    --log-soft: #e2d8fd;
    --log-ink: #6d3fd8; --log-strong: var(--purple-strong); }

.play-card:nth-child(1) {
    --pc: #1e88e5;
    --pc-soft: #cfe5fb;
    --pc-ink: #1565c0; --pc-strong: #1777ca; --pc-edge: #0f58a0; }
.play-card:nth-child(2) {
    --pc: #fa5c5c;
    --pc-soft: #ffd6d6;
    --pc-ink: #c8323a; --pc-strong: #d23b3b; --pc-edge: #9e2a2a; }
.play-card:nth-child(3) {
    --pc: #22c55e;
    --pc-soft: #c8f2d8;
    --pc-ink: #15803d; --pc-strong: var(--green-strong); --pc-edge: var(--green-edge); }

.timeline-item {
    position: relative;
    --quest: #22c55e;
    --quest-soft: #c8f2d8;
    counter-increment: quest; --quest-ink: #137538; }
.timeline-item[data-quest="award"] {
    --quest: #ffb300;
    --quest-soft: #ffeab0; --quest-ink: #905c00; }
.timeline-item[data-quest="now"] {
    --quest: #ff5a5f;
    --quest-soft: #ffd6d7; --quest-ink: #b42d34; }

.mail-card-label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ffd6d7;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .16em; color: #b42d34; }
.about-image-caption b {
    margin-left: 12px; color: #c8323a; }
.other-works .section-title p {
    margin-top: 9px;
    font-size: 12px;
    letter-spacing: .08em; color: var(--color-sub); }
.footer-copyright {
    max-width: 1280px;
    margin: 18px auto 0;
    letter-spacing: .1em; color: var(--color-sub); }

/* Cyan buttons and labels with white text */
.hero-button,
.blog-button {
    background: var(--cyan-strong);
    box-shadow: 0 5px 0 var(--cyan-edge);
}

.hero-button:hover,
.blog-button:hover {
    background: var(--cyan-strong-hover);
    box-shadow: 0 7px 0 var(--cyan-edge);
}

.hero-button:active,
.blog-button:active {
    box-shadow: 0 1px 0 var(--cyan-edge);
}

.works-toggle-label,
.blog-message::before {
    background: var(--cyan-strong);
    box-shadow: 0 3px 0 var(--cyan-edge);
}

.blog-message::before {
    position: absolute;
    top: -11px;
    left: 16px;
    padding: 2px 10px;
    border-radius: 999px;
    color: #fff;
    content: "HARU";
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .16em;
    box-shadow: none;
}

.stage-filter button[aria-pressed="true"] {
    color: #fff;
    animation: idle-hop 4s ease-in-out infinite;
    border-color: var(--cyan-strong);
    background: var(--cyan-strong);
    box-shadow: 0 4px 0 var(--cyan-edge);
}

.work-link:hover {
    background: var(--cyan-strong);
}

/* Category badges, play buttons and article links */
.can-do-category-title > span {
    width: auto;
    height: auto;
    justify-content: flex-start;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    color: #fff;
    font-weight: 750;
    letter-spacing: .08em;
    animation: idle-hop 5s ease-in-out infinite;
    background: var(--cat-strong) !important;
    box-shadow: 0 4px 0 var(--cat-edge);
}

.play-card span {
    display: inline-flex;
    font-size: .72rem;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-weight: 750;
    transition: gap .25s ease, transform .15s ease, box-shadow .15s ease;
    background: var(--pc-strong);
    box-shadow: 0 4px 0 var(--pc-edge);
}

.play-card:active span {
    box-shadow: 0 1px 0 var(--pc-edge);
}

.article-content a:hover {
    background: var(--log-strong);
}

/* Red badges and buttons with white text */
.hero-overlay,
.featured-video::before,
.article-badges .is-new,
.mail-button {
    background: var(--red-strong);
    box-shadow: 0 4px 0 var(--red-edge);
}

.mail-button {
    border: 0;
    color: #fff;
    box-shadow: 0 5px 0 var(--red-edge);
}

.mail-button:hover {
    box-shadow: 0 7px 0 var(--red-edge);
}

.mail-button:active {
    box-shadow: 0 1px 0 var(--red-edge);
}

.stage-badges .is-team {
    color: #fff;
    background: var(--purple-strong);
}

/* ========================================
   New section order: renumbered labels
======================================== */

.featured-works .section-title h2::before {
    display: block;
    margin-bottom: 13px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em; content: "03 / FEATURED TITLE"; }
.other-works .section-title h2::before {
    display: block;
    margin-bottom: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #006ea8; content: "04 / PROJECT ARCHIVE"; }
.play-games .section-title h2::before { content: "05 / PLAYABLE BUILDS"; }
.what-i-can-do .section-title::before {
    display: block;
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #006ea8; content: "06 / CAPABILITIES"; }
.timeline .section-title h2::before { content: "07 / DEVELOPMENT LOG"; }
.blog .section-title h2::before { content: "08 / CREATOR JOURNAL"; }
.contact .section-title h2::before {
    color: var(--accent); content: "09 / FIND THE CREATOR"; }

/* ========================================
   Timeline: folded older quests
======================================== */

.quest-toggle {
    display: flex;
    width: min(100%, 1040px);
    align-items: center;
    gap: 14px;
    margin: 0 auto 18px;
    padding: 14px 20px;
    border: 2px dashed #c3ccd8;
    border-radius: 16px;
    background: rgba(255, 255, 255, .75);
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    font-size: .92rem;
    font-weight: 750;
    text-align: left;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), border-color .2s ease, background .2s ease;
}

.quest-toggle:hover {
    transform: translateY(-2px);
    border-color: #22c55e;
    background: #fff;
}

.quest-toggle:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.quest-toggle-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dcfce7;
    color: #137538;
    font-size: 11px;
    transition: rotate .4s cubic-bezier(.2, .9, .3, 1.3);
    animation: idle-bob 1.6s ease-in-out infinite;
}

.quest-toggle[aria-expanded="true"] .quest-toggle-icon {
    rotate: 180deg;
    animation: none;
}

.quest-toggle-text {
    flex: 1 1 auto;
}

.quest-toggle-count {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ui-panel);
    color: var(--ui-sub);
    font-size: 10px;
    letter-spacing: .14em;
}

.quest-drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .7s cubic-bezier(.2, .8, .2, 1);
}

.quest-drawer.is-open {
    grid-template-rows: 1fr;
}

.quest-drawer-inner {
    min-height: 0;
    overflow: hidden;
}

.quest-drawer.is-settled .quest-drawer-inner {
    overflow: visible;
}

@media (max-width: 600px) {
    .quest-toggle {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .quest-toggle-text {
        flex-basis: calc(100% - 50px);
    }

    .quest-toggle-count {
        margin-left: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quest-drawer,
    .quest-toggle,
    .quest-toggle-icon {
        transition: none;
    }
}

/* ========================================
   Main Works: tech highlights (DEV LOG)
======================================== */

.tech-log {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 2px dashed var(--ui-line);
}

.tech-log-head {
    margin-bottom: 22px;
}

.tech-log-label,
.tech-panel-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cyan-strong);
    box-shadow: 0 3px 0 var(--cyan-edge);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .16em;
}

.tech-log-head h4 {
    margin: 12px 0 6px;
    padding: 0;
    border: 0;
    color: var(--ui-ink);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    letter-spacing: -.02em;
}

.tech-log-head p {
    color: var(--color-text);
    font-size: .9rem;
    line-height: 1.8;
}

.tech-log h5 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 1.05rem;
    line-height: 1.5;
}

.tech-log h6 {
    margin: 18px 0 10px;
    color: var(--ui-sub);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .16em;
}

.tech-log code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #eef2f7;
    color: #6d3fd8;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .86em;
}

/* Highlight card with problem -> solution -> result */
.tech-highlight {
    padding: 22px;
    border: 2px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 0 #ffd6d7;
}

.tech-highlight-title span {
    color: #b42d34;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .18em;
}

.tech-highlight-title h5 {
    margin-top: 6px;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.tech-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.tech-step {
    position: relative;
    padding: 16px 18px;
    border: 2px solid var(--step-soft);
    border-radius: 14px;
    background: var(--ui-panel);
}

.tech-step.is-problem { --step-soft: #ffd6d7; --step-ink: #b42d34; }
.tech-step.is-solution { --step-soft: #c9eefc; --step-ink: #006d96; }
.tech-step.is-result { --step-soft: #c8f2d8; --step-ink: #137538; }

.tech-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -24px;
    color: #c3ccd8;
    content: "▶";
    font-size: 14px;
    translate: 0 -50%;
}

.tech-step-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--step-soft);
    color: var(--step-ink);
    font-size: .74rem;
    font-weight: 750;
}

.tech-step p {
    margin: 0;
    color: var(--color-text);
    font-size: .85rem;
    line-height: 1.85;
}

/* Party / tools panels */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.tech-panel {
    min-height: 0;
    padding: 20px 22px;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: var(--ui-panel);
}

.tech-panel h5 {
    margin: 10px 0 14px;
}

.tech-party {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-party li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 2px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ui-sub);
    font-size: .74rem;
    font-weight: 700;
}

.tech-party b {
    color: var(--ui-ink);
    font-size: 1.6rem;
    line-height: 1.1;
}

.tech-note {
    margin: 6px 0 0;
    color: var(--ui-sub);
    font-size: .72rem;
}

.tech-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--ui-ink);
    font-size: .9rem;
    font-weight: 750;
}

.tech-role span {
    padding: 3px 10px;
    border-radius: 999px;
    background: #e2d8fd;
    color: #6b3dd8;
    font-size: 10px;
    letter-spacing: .14em;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-tags li {
    padding: 5px 11px;
    border-radius: 999px;
    background: #c9eefc;
    color: #006d96;
    font-size: .74rem;
    font-weight: 700;
}

.tech-flow {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.tech-flow li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    font-size: .84rem;
    line-height: 1.6;
}

.tech-flow li span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #c8f2d8;
    color: #137538;
    font-size: .72rem;
    font-weight: 750;
}

/* Results */
.tech-awards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.tech-awards li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #ffeab0;
    border-radius: 14px;
    background: #fffaf0;
    color: var(--ui-ink);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.6;
}

.tech-awards i {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #ffb300;
    box-shadow: 0 3px 0 #b8860b;
    color: #fff;
    font-size: 16px;
}

@media (max-width: 900px) {
    .tech-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .tech-step:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -22px;
        left: 50%;
        content: "▼";
        translate: -50% 0;
    }

    .tech-grid,
    .tech-awards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .tech-highlight,
    .tech-panel {
        padding: 16px;
    }

    .tech-party li {
        padding: 10px 4px;
        font-size: .68rem;
        white-space: nowrap;
    }
}

/* ========================================
   Main Works: photo gallery + viewer
======================================== */

.tech-gallery {
    margin-top: 22px;
}

.tech-gallery h5 {
    margin: 10px 0 14px;
}

.tech-photos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-photo {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: var(--ui-panel);
    box-shadow: 0 5px 0 var(--ui-line);
    cursor: zoom-in;
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s ease, border-color .25s ease;
}

.tech-photo img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.tech-photo:hover {
    transform: translateY(-4px);
    border-color: var(--cyan-strong);
    box-shadow: 0 9px 0 #c9eefc;
}

.tech-photo:hover img {
    transform: scale(1.03);
}

.tech-photo:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.tech-photo-caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 3px 0 rgba(17, 23, 19, .15);
    color: var(--ui-ink);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.tech-photo-caption b {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--red-strong);
    color: #fff;
    font-size: 10px;
    letter-spacing: .14em;
}

/* Viewer */
.photo-viewer {
    margin: auto;
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    background: transparent;
}

.photo-viewer::backdrop {
    background: rgba(17, 23, 19, .78);
}

.photo-viewer[open] {
    animation: viewer-pop .35s cubic-bezier(.2, .9, .3, 1.3);
}

@keyframes viewer-pop {
    from { opacity: 0; scale: .94; }
    to { opacity: 1; scale: 1; }
}

.photo-viewer figure {
    margin: 0;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 18px;
    background: #fff;
}

.photo-viewer img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 80px);
    margin: 0 auto;
    object-fit: contain;
}

.photo-viewer figcaption {
    padding: 10px 6px 4px;
    color: var(--ui-ink);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.6;
}

.photo-viewer-close {
    position: absolute;
    z-index: 1;
    top: -14px;
    right: -14px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--red-strong);
    box-shadow: 0 4px 0 var(--red-edge);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.photo-viewer-close:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .tech-photos {
        grid-template-columns: minmax(0, 1fr);
    }

    .photo-viewer-close {
        top: -10px;
        right: -6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-viewer[open] {
        animation: none;
    }
}

/* ========================================
   Timeline photos
======================================== */

.timeline-content.has-photo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 176px;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
}

.timeline-content.has-photo h3,
.timeline-content.has-photo p {
    grid-column: 1;
}

.timeline-photo {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0;
    border: 2px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-panel);
    cursor: zoom-in;
    transition: border-color .25s ease, transform .25s ease;
}

.timeline-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.timeline-photo::after {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ui-ink);
    content: "+";
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.timeline-photo:hover,
.timeline-photo:focus-visible {
    border-color: var(--quest);
    transform: translateY(-2px);
}

.timeline-photo:hover img,
.timeline-photo:focus-visible img {
    transform: scale(1.06);
}

.timeline-photo:focus-visible {
    outline: 3px solid var(--quest-ink);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .timeline-content.has-photo {
        grid-template-columns: minmax(0, 1fr);
    }

    .timeline-photo {
        grid-column: 1;
        grid-row: auto;
        margin-top: 14px;
        aspect-ratio: 16 / 9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-photo,
    .timeline-photo img {
        transition: none;
    }
}

/* ========================================
   3D Challenge Progress
======================================== */

.challenge-progress {
    margin-top: 16px;
    padding: 14px 16px 12px;
    border: 2px solid var(--quest-soft);
    border-radius: 12px;
    background: #fff8f8;
}

.challenge-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.challenge-label {
    color: var(--quest-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.challenge-count {
    color: var(--ui-ink);
    font-size: .82rem;
    font-weight: 700;
}

.challenge-count b {
    color: var(--red-strong);
    font-size: 1.5rem;
    line-height: 1;
}

.challenge-bar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--challenge-total, 10), minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #f1e3e4;
}

.challenge-pip {
    height: 14px;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #ead3d5;
}

.challenge-pip.is-done {
    background: var(--red-strong);
    box-shadow: inset 0 -3px 0 var(--red-edge, #a8262c);
    transform-origin: left center;
}

.challenge-progress.show .challenge-pip.is-done {
    animation: challenge-fill .35s cubic-bezier(.3, 1.4, .5, 1) both;
    animation-delay: calc(var(--i) * 90ms);
}

.challenge-pip.is-next {
    background: #ffd6d7;
    box-shadow: inset 0 0 0 2px var(--red-strong);
    animation: challenge-blink 1.4s ease-in-out infinite;
}

.timeline-content .challenge-next {
    margin: 9px 0 0;
    color: var(--quest-ink);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
}

.challenge-progress.is-complete .challenge-next::after {
    content: " ★";
}

@keyframes challenge-fill {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

@keyframes challenge-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ========================================
   Footer: analytics notice
======================================== */

.footer-privacy {
    max-width: 640px;
    margin: 6px auto 0;
    padding: 0 16px;
    color: var(--color-sub);
    font-size: 10px;
    line-height: 1.7;
    text-align: center;
}

/* ========================================
   Like button（サイト全体のいいね）
======================================== */

.like-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 16px 6px 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--red-strong);
    box-shadow: 0 5px 0 var(--red-edge), 0 12px 26px rgba(168, 38, 44, .28);
    color: #fff;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.like-button[hidden] {
    display: none;
}

.like-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--red-edge), 0 16px 30px rgba(168, 38, 44, .32);
}

.like-button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--red-edge), 0 8px 18px rgba(168, 38, 44, .28);
}

.like-button:focus-visible {
    outline: 3px solid var(--ui-ink);
    outline-offset: 3px;
}

.like-heart {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    animation: like-beat 2.8s ease-in-out infinite;
}

.like-heart svg {
    fill: var(--red-strong);
}

.like-button.is-pop .like-heart {
    animation: like-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}

.like-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.like-count {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.like-label {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
    opacity: .9;
}

.like-combo {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ui-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.like-combo.is-show {
    animation: like-combo .9s ease-out forwards;
}

.like-float {
    position: absolute;
    left: 25px;
    top: 4px;
    color: var(--red-strong);
    font-size: 15px;
    font-weight: 900;
    pointer-events: none;
    text-shadow: 0 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    animation: like-float .8s ease-out forwards;
}

.like-particle {
    position: absolute;
    left: 20px;
    top: 14px;
    color: var(--red-strong);
    font-size: 14px;
    pointer-events: none;
    animation: like-particle .7s ease-out forwards;
}

@keyframes like-beat {
    0%, 70%, 100% { transform: scale(1); }
    76% { transform: scale(1.16); }
    82% { transform: scale(.96); }
    88% { transform: scale(1.1); }
}

@keyframes like-pop {
    0% { transform: scale(.7); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes like-float {
    0% { opacity: 0; transform: translate(0, 0) scale(.8); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), -46px) scale(1.15); }
}

@keyframes like-particle {
    0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.1); }
}

@keyframes like-combo {
    0% { opacity: 0; transform: translateY(6px) scale(.9); }
    15% { opacity: 1; transform: translateY(0) scale(1.08); }
    30% { transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ページの一番下の文字がいいねボタンに隠れないように */
.has-like .footer-privacy {
    padding-bottom: 72px;
}

/* 実績トーストはいいねボタンの上に出す */
.has-like .achievement-toast {
    bottom: 92px;
}

@media (max-width: 600px) {
    .like-button {
        right: 14px;
        bottom: 14px;
        min-height: 46px;
        gap: 8px;
        padding: 4px 13px 4px 4px;
    }

    .like-heart {
        width: 34px;
        height: 34px;
    }

    .like-count {
        font-size: 15px;
    }

    .has-like .achievement-toast {
        bottom: 76px;
    }
}

/* スマホのトロフィー通知：画面の幅いっぱいの2行 → 右下の小さな1行に（js/play.js）
   左下の「連絡する」と右下の ❤ のすぐ上に出して、本文を隠す範囲をできるだけ小さくする */
@media (max-width: 600px) {
    .achievement-toast,
    .has-like .achievement-toast {
        left: auto;
        right: 14px;
        bottom: 72px;
        gap: 8px;
        max-width: calc(100vw - 28px);
        padding: 5px 14px 5px 5px;
        box-shadow: 0 4px 0 #ffd666, 0 10px 24px rgba(30, 45, 70, .16);
    }

    .achievement-toast .toast-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .achievement-toast .toast-text {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 6px;
    }

    .achievement-toast .toast-text small {
        flex: none;
        margin: 0;
        font-size: 10px;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .achievement-toast .toast-label {
        display: none;
    }

    .achievement-toast .toast-text strong {
        overflow: hidden;
        font-size: 12.5px;
        letter-spacing: .02em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.motion-off .like-combo.is-show {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .like-heart,
    .like-button.is-pop .like-heart {
        animation: none;
    }
}

/* ========================================
   Status screen (What I Can Do)
======================================== */

.status-screen {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
    gap: 18px;
    width: min(100%, 1200px);
    margin: 0 auto 40px;
    padding: 22px;
    border: 2px solid var(--ui-line);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(0, 163, 224, .05), transparent 40%),
        var(--ui-dots),
        #fff;
    box-shadow: 0 8px 0 var(--ui-line), 0 20px 40px rgba(30, 45, 70, .06);
}

.status-screen[hidden] {
    display: none;
}

.status-profile,
.status-exp {
    min-width: 0;
    padding: 18px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: #fff;
}

.status-profile {
    background: var(--ui-ink);
    border-color: var(--ui-ink);
    color: #fff;
}

.status-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--red-strong);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.status-name {
    margin: 12px 0 2px;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.2;
}

.status-class {
    margin: 0 0 14px;
    color: #c9d3cd;
    font-size: .78rem;
    font-weight: 700;
}

.status-params {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.status-param {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
}

.status-param dt {
    color: #c9d3cd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.status-param dd {
    margin: 0;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1;
}

.status-param:first-child dd {
    color: #ffd84d;
}

.status-exp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
}

.status-exp-head span {
    color: var(--tone-ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
}

.status-exp-head small {
    color: var(--ui-sub);
    font-size: 11px;
    font-weight: 700;
}

.status-exp.is-cyan {
    --tone: var(--cyan-strong);
    --tone-edge: var(--cyan-edge);
    --tone-ink: #006d96;
    --tone-soft: #e3f5fc;
}

.status-exp.is-red {
    --tone: var(--red-strong);
    --tone-edge: var(--red-edge);
    --tone-ink: #b02a31;
    --tone-soft: #fde8e9;
}

.exp-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exp-list li {
    display: grid;
    grid-template-columns: 7.4em minmax(0, 1fr) 3.4em;
    align-items: center;
    gap: 10px;
}

.exp-label {
    overflow: hidden;
    color: var(--ui-ink);
    font-size: .8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exp-bar {
    position: relative;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tone-soft);
}

.exp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--fill) * 100%);
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%),
        var(--tone);
    box-shadow: inset 0 -2px 0 var(--tone-edge);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.2, .9, .3, 1);
    transition-delay: calc(var(--i) * 90ms + .1s);
}

.status-screen.show .exp-fill {
    transform: scaleX(1);
}

.exp-fill::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 220% 100%;
    content: "";
    animation: exp-shine 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * .25s);
}

.exp-value {
    color: var(--tone-ink);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@keyframes exp-shine {
    0%, 55% { background-position: 120% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 1000px) {
    .status-screen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-profile {
        grid-column: 1 / -1;
    }

    .status-params {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .status-screen {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        margin-bottom: 28px;
    }

    .status-params {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exp-list li {
        grid-template-columns: 7.4em minmax(0, 1fr) 3.4em;
        gap: 8px;
    }
}

/* ========================================
   Rare cards: award-winning works
======================================== */

.work-card.is-rare:hover {
    box-shadow: 0 8px 0 #d99a00, 0 20px 40px rgba(242, 183, 5, .3);
}

.stage-badges .is-award {
    background: linear-gradient(135deg, #ffe066, #f2b705);
    color: #4a3300;
}

.award-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0 0 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff4c7;
    color: #6b4a00;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.award-ribbon i {
    color: #d99a00;
}

.rare-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.rare-shine::before {
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 199, .75), transparent);
    content: "";
    transform: rotate(18deg);
    animation: rare-sweep 4.5s ease-in-out infinite;
}

.works-list .work-card.is-rare:nth-of-type(2n) .rare-shine::before {
    animation-delay: 1.6s;
}

@keyframes rare-sweep {
    0%, 62% { left: -60%; }
    100% { left: 140%; }
}

/* ========================================
   Ending
======================================== */

.ending {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 54, 61, .1), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(0, 163, 224, .1), transparent 40%),
        var(--ui-dots),
        var(--ui-panel);
    text-align: center;
}

.ending-kicker {
    margin: 0 0 14px;
    color: #b8282f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .28em;
}

.ending-kicker span {
    display: inline-block;
    animation: ending-twinkle 1.6s ease-in-out infinite;
}

.ending-kicker span:last-child {
    animation-delay: .8s;
}

.ending-title {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(2.6rem, 8vw, 5.6rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: .98;
}

.ending-lead {
    margin: 18px 0 6px;
    color: var(--ui-sub);
    font-size: .95rem;
}

.ending-stats {
    margin: 0 0 26px;
    color: var(--ui-ink);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .16em;
}

.credits-window {
    position: relative;
    width: min(100%, 520px);
    height: 220px;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid var(--ui-ink);
    border-radius: 18px;
    background: var(--ui-ink);
    box-shadow: 0 6px 0 #000, 0 20px 40px rgba(17, 23, 19, .2);
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}

.credits-roll {
    padding: 30px 24px;
}

.credits-roll.is-rolling .credits-list {
    animation: credits-roll 22s linear infinite;
}

.credits-window:hover .credits-list {
    animation-play-state: paused;
}

.credits-list {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 160px 0;
}

.credits-list dt {
    margin-bottom: 4px;
    color: #ffd84d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .24em;
}

.credits-list dd {
    margin: 0;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.7;
}

.ending-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.ending-button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    color: var(--ui-ink);
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ending-button.is-primary {
    border-color: var(--red-strong);
    background: var(--red-strong);
    box-shadow: 0 5px 0 var(--red-edge);
    color: #fff;
}

.ending-button:hover {
    transform: translateY(-2px);
}

.ending-button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--ui-line);
}

.ending-button.is-primary:active {
    box-shadow: 0 2px 0 var(--red-edge);
}

.ending-hint {
    margin: 22px 0 0;
    color: var(--ui-sub);
    font-size: .8rem;
}

.ending-hint span {
    color: var(--red-strong);
}

@keyframes credits-roll {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@keyframes ending-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    .exp-fill {
        transition: none;
    }

    .exp-fill::after,
    .rare-shine::before,
    .ending-kicker span {
        animation: none;
    }
}

/* モーションOFF・動きを減らす設定では、クレジットを静止した一覧で全部見せる */
.motion-off .credits-window {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.motion-off .credits-list {
    padding: 0;
}

.motion-off .exp-fill {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
        .credits-list {
        animation: none !important;
    }
}

/* ========================================
   Main Works: second title (Falien)
======================================== */

.featured-video.is-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

.featured-video.is-image:hover img {
    transform: scale(1.025);
    filter: saturate(1.08);
}

.featured-video.is-grandprix::before {
    background: linear-gradient(135deg, #ffe066, #f2b705);
    box-shadow: 0 4px 0 #c98f00;
    color: #4a3300;
    content: "★ IGCC GRAND PRIX";
}

.tech-highlight + .tech-highlight {
    margin-top: 16px;
}

.tech-awards:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tech-review {
    position: relative;
    margin: 16px 0 0;
    padding: 22px 24px 20px;
    border: 2px solid #f2d27a;
    border-radius: 18px;
    background: #fffaf0;
    box-shadow: 0 6px 0 #ffe8a8;
}

.tech-review .tech-panel-label {
    background: #f2b705;
    box-shadow: 0 3px 0 #c98f00;
    color: #4a3300;
}

.tech-review blockquote {
    position: relative;
    margin: 14px 0 10px;
    padding-left: 34px;
}

.tech-review blockquote::before {
    position: absolute;
    top: -14px;
    left: 0;
    color: #f2b705;
    content: "“";
    font-family: Georgia, serif;
    font-size: 56px;
    line-height: 1;
}

.tech-review blockquote p {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 800;
    line-height: 1.75;
}

.tech-review figcaption {
    color: #6b4a00;
    font-size: .78rem;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 600px) {
    .tech-awards:has(> li:nth-child(2):last-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .tech-review {
        padding: 18px 16px 16px;
    }

    .tech-review blockquote {
        padding-left: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-video.is-image img {
        transition: none;
    }
}

/* ========================================
   Main Works: title select (tabs)
======================================== */

.main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(100%, 1200px);
    margin: 0 auto 24px;
}

.main-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 10px 16px 10px 10px;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}

.main-tab img {
    flex: none;
    width: 112px;
    height: 63px;
    border-radius: 10px;
    object-fit: cover;
    filter: grayscale(.55) brightness(.95);
    transition: filter .25s ease;
}

.main-tab-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.main-tab-text small {
    color: var(--ui-sub);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.main-tab-text b {
    overflow: hidden;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-tab:hover {
    transform: translateY(-2px);
}

.main-tab:hover img {
    filter: none;
}

.main-tab[aria-selected="true"] {
    border-color: var(--red-strong);
    box-shadow: 0 5px 0 var(--red-edge);
}

.main-tab[aria-selected="true"] img {
    filter: none;
}

.main-tab[aria-selected="true"] .main-tab-text small {
    color: #b8282f;
}

.main-tab[aria-selected="true"]::after {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--red-strong);
    color: #fff;
    content: "▶ SELECT";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    animation: idle-bob 2.6s ease-in-out infinite;
}

.main-tab:focus-visible {
    outline: 3px solid var(--ui-ink);
    outline-offset: 3px;
}

.main-work[hidden] {
    display: none;
}

.main-work.is-switching .featured-video,
.main-work.is-switching .featured-container {
    animation: main-switch .45s cubic-bezier(.2, .9, .3, 1) both;
}

.main-work.is-switching .featured-container {
    animation-delay: .06s;
}

@keyframes main-switch {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .main-tabs {
        gap: 10px;
        margin-bottom: 18px;
    }

    .main-tab {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px;
    }

    .main-tab img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .main-tab-text {
        padding: 0 4px 2px;
    }

    .main-tab-text small {
        font-size: 10px;
        letter-spacing: .02em;
    }

    .main-tab[aria-selected="true"]::after {
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-work.is-switching .featured-video,
    .main-work.is-switching .featured-container,
    .main-tab[aria-selected="true"]::after {
        animation: none;
    }
}

/* ========================================
   Mobile compact layout（スマホだけ。PC の見た目は変えない）
   - Achievements：2列
   - What I Can Do / Blog / Main Works の写真：横スワイプ
   - 技術の見どころ：解決・結果はタップで開く
======================================== */

.swipe-dots,
.tech-steps-toggle {
    display: none;
}

.latest-articles-wrap {
    position: relative;
}

@media (max-width: 768px) {
    /* ---------- Achievements：2列 ---------- */

    .achievement-list {
        margin-top: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .achievements .achievement-card,
    .achievements .achievement-card:hover {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        min-height: 0;
        padding: 14px 12px 14px;
        background-position:
            6px 6px, 6px 6px,
            calc(100% - 6px) 6px, calc(100% - 6px) 6px,
            6px calc(100% - 6px), 6px calc(100% - 6px),
            calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
        background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
        box-shadow: 0 5px 0 var(--stat-soft), 0 10px 20px rgba(30, 45, 70, .05);
    }

    .achievements .achievement-card::before,
    .achievements .achievement-card:hover::before {
        top: 16px;
        left: 14px;
        padding: 3px 8px;
        font-size: 9px;
    }

    .achievements .achievement-card i {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 13px;
        box-shadow: 0 3px 0 var(--stat-ink);
    }

    .achievements .achievement-card .achievement-value {
        margin: 12px 0 6px;
        font-size: 2.2rem;
        line-height: 1;
    }

    .achievements .achievement-card p {
        font-size: 10px;
        letter-spacing: .08em;
        line-height: 1.4;
    }

    .achievements .stat-meter {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-top: 10px;
    }

    .achievements .stat-gauge {
        flex: 0 0 auto;
        height: 7px;
    }

    .achievements .stat-next {
        font-size: 9px;
        letter-spacing: .1em;
        text-align: right;
    }

    /* ---------- 横スワイプ（共通） ---------- */

    .can-do-list,
    .latest-articles,
    .tech-photos {
        display: flex;
        gap: 12px;
        margin-bottom: 0;
        padding: 6px 2px 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .can-do-list::-webkit-scrollbar,
    .latest-articles::-webkit-scrollbar,
    .tech-photos::-webkit-scrollbar {
        display: none;
    }

    .can-do-list > *,
    .latest-articles > *,
    .tech-photos > * {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    /* 横に並べると、カードの中のキャラクターは枠で隠れてしまうので出さない */
    .can-do-list .peeker {
        display: none;
    }

    .swipe-dots:not(:empty) {
        display: flex;
        justify-content: center;
        gap: 2px;
        margin-top: 2px;
    }

    .swipe-dot {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .swipe-dot::before {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #cfd8e3;
        content: "";
        transition: width .25s ease, background-color .25s ease;
    }

    .swipe-dot.is-current::before {
        width: 22px;
        background: var(--color-main, #111713);
    }

    .swipe-dot:focus-visible {
        outline: 3px solid #ffb300;
        outline-offset: -2px;
        border-radius: 8px;
    }

    /* What I Can Do：カードの高さをそろえる */
    .can-do-list > .can-do-card {
        height: auto;
    }

    /* Blog：横に並ぶぶん、カードを少しコンパクトに */
    .latest-articles > .article-card {
        display: flex;
        flex-direction: column;
    }

    /* Main Works の写真：縦長・横長がまざっても高さをそろえる（全体は拡大表示で見られる） */
    .tech-photos > li {
        flex-basis: 80%;
    }

    .tech-photos .tech-photo img {
        height: 200px;
        object-fit: cover;
    }

    /* ---------- 技術の見どころ：解決・結果は折りたたむ ---------- */

    .tech-steps.is-folded > .tech-step:not(:first-child) {
        display: none;
    }

    .tech-steps.is-folded > .tech-step::after {
        display: none;
    }

    .tech-steps-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        margin-top: 12px;
        padding: 0 16px;
        border: 2px solid var(--ui-line, #e1e7ef);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 0 var(--ui-line, #e1e7ef);
        color: var(--color-main, #111713);
        font: inherit;
        font-size: .85rem;
        font-weight: 800;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .tech-steps-toggle i {
        color: #00739e;
        font-size: .8em;
    }

    .tech-steps-toggle:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 var(--ui-line, #e1e7ef);
    }

    .tech-steps-toggle:focus-visible {
        outline: 3px solid #ffb300;
        outline-offset: 3px;
    }
}

/* ========================================
   Other Works: 作品の詳細ポップアップ
======================================== */

.work-card.has-viewer {
    cursor: pointer;
}

.work-thumb {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #252d24;
    font: inherit;
    cursor: zoom-in;
}

.work-thumb:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: -3px;
}

.work-thumb-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(17, 23, 19, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    opacity: 0;
    translate: 0 6px;
    transition: opacity .2s ease, translate .25s ease;
    pointer-events: none;
}

.work-card:hover .work-thumb-hint,
.work-thumb:focus-visible .work-thumb-hint {
    opacity: 1;
    translate: 0 0;
}

@media (hover: none) {
    .work-thumb-hint {
        opacity: 1;
        translate: 0 0;
    }
}

/* ---------- ポップアップ本体 ---------- */

.work-viewer {
    width: min(94vw, 980px);
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--color-main, #111713);
}

.work-viewer::backdrop {
    background: rgba(17, 23, 19, .72);
}

.work-viewer[open] {
    animation: viewer-pop .35s cubic-bezier(.2, .9, .3, 1.3);
}

.work-viewer-panel {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 760px);
    max-height: min(90dvh, 760px);
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 0 #c9eefc, 0 30px 60px rgba(0, 0, 0, .3);
}

.work-viewer.is-rare .work-viewer-panel {
    box-shadow: 0 8px 0 #ffd36b, 0 30px 60px rgba(0, 0, 0, .3);
}

.work-viewer-bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    background: #111713;
    color: #fff;
}

.work-viewer-stage {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .2em;
}

.work-viewer-count {
    color: #9fb0bd;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .1em;
}

.work-viewer-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background .2s ease;
}

.work-viewer-close:hover {
    background: #d6363d;
}

.work-viewer-body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.work-viewer-panel.is-switching .work-viewer-body {
    animation: work-viewer-switch .3s ease;
}

@keyframes work-viewer-switch {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

.work-viewer-media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100%;
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 18px 18px,
        #1d2520;
}

.work-viewer-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.work-viewer-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.work-viewer-badges span {
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(17, 23, 19, .18);
    color: #111713;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}

.work-viewer-badges .is-team {
    background: #8b5cf6;
    color: #fff;
}

.work-viewer-badges .is-wip {
    background: #ffb300;
    color: #3d2800;
}

.work-viewer-badges .is-award {
    background: #ffb300;
    color: #3d2800;
}

.work-viewer-info {
    padding: 26px 28px 28px;
}

.work-viewer-award {
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff4d1;
    color: #7a4d00;
    font-size: 12px;
    font-weight: 800;
}

.work-viewer-award[hidden] {
    display: none;
}

.work-viewer-info h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 850;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.work-viewer-genre {
    margin: 8px 0 0;
    color: #00739e;
    font-size: .9rem;
    font-weight: 750;
}

/* 技術のポイント：カードには出さない（作品の詳しい画面だけで出す） */
.work-card .work-point {
    display: none;
}

.work-viewer-point {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 4px solid #00739e;
    border-radius: 0 12px 12px 0;
    background: #eef8fd;
}

.work-viewer-point[hidden] {
    display: none;
}

.work-viewer-point-label {
    display: block;
    margin-bottom: 4px;
    color: #00739e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.work-viewer-point p {
    margin: 0;
    color: var(--ui-ink, #111713);
    font-size: .9rem;
    line-height: 1.8;
}

.work-viewer-desc {
    margin: 14px 0 0;
    color: var(--color-text, #333);
    font-size: .92rem;
    line-height: 1.85;
}

.work-viewer-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 0;
}

.work-viewer-stats div {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f5f8fc;
}

.work-viewer-stats .is-wide {
    grid-column: 1 / -1;
}

.work-viewer-stats dt,
.work-viewer-label {
    margin: 0 0 4px;
    color: #5b6560;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.work-viewer-stats dd {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
}

.work-viewer-label {
    margin-top: 16px;
    margin-bottom: 8px;
}

.work-viewer-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-viewer-tools li {
    padding: 5px 11px;
    border-radius: 999px;
    background: #e6f6fd;
    color: #00739e;
    font-size: 12px;
    font-weight: 750;
}

.work-viewer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 22px;
    padding: 0 20px;
    border-radius: 14px;
    background: #00739e;
    box-shadow: 0 5px 0 #00506e;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.work-viewer-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #00506e;
}

.work-viewer-link:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #00506e;
}

.work-viewer-link[hidden] {
    display: none;
}

/* ブラウザで遊べる作品の「▶ unityroom で遊ぶ」（作品の詳しい画面・Main Works のししとう）
   Play Games の「遊びに行く」と同じ緑にして、「遊べる」ことが一目で分かるようにする */
.work-viewer-play,
.featured-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    background: #1f8a4c;
    box-shadow: 0 5px 0 #14643a;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.work-viewer-play {
    margin-top: 22px;
}

.work-viewer-play:not([hidden]) + .work-viewer-link {
    margin-top: 12px;
}

.work-viewer-play:hover,
.featured-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #14643a;
}

.work-viewer-play:active,
.featured-play:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #14643a;
}

.work-viewer-play[hidden] {
    display: none;
}

.featured-actions {
    display: flex;
    margin: 18px 0 4px;
}

.featured-play {
    display: inline-flex;
}

@media (max-width: 600px) {
    .featured-play {
        width: 100%;
    }
}

/* 作品カードの印（STAGE・TEAM・PLAYABLE など）は画像の中に収めて、入りきらなければ折り返す（js/main.js）
   右上の「▶ MOVIE」とは重ならないように、映像のある作品は右側を空ける */
.works-list .work-card .work-thumb > .stage-badges {
    top: 10px;
    left: 10px;
    right: 10px;
}

.works-list .work-card.has-preview .work-thumb > .stage-badges {
    right: 92px;
}

.works-list .work-card .work-thumb > .stage-badges span {
    white-space: nowrap;
}

/* PC：画像が縦長で細いので、印は左上に縦に並べる（映像のある作品は「▶ MOVIE」の下から） */
@media (min-width: 769px) {
    .works-list .work-card .work-thumb > .stage-badges,
    .works-list .work-card.has-preview .work-thumb > .stage-badges {
        right: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .works-list .work-card.has-preview .work-thumb > .stage-badges {
        top: 42px;
    }
}

/* カードと作品の詳しい画面の「▶ PLAYABLE」の印 */
.stage-badges .is-play,
.work-viewer-badges .is-play {
    background: #1f8a4c;
    color: #fff;
}

/* 作品のリンクをコピー（js/main.js。note のボタンの下に、控えめに） */
.work-viewer-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 0 16px;
    border: 2px solid #cfe3ee;
    border-radius: 14px;
    background: #fff;
    color: #00739e;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.work-viewer-share:hover {
    background: #f0f9fd;
}

.work-viewer-share:focus-visible {
    outline: 3px solid #00a3e0;
    outline-offset: 3px;
}

.work-viewer-share.is-done {
    border-color: #2a9d5c;
    background: #edf9f1;
    color: #1f7a45;
}

.work-viewer-nav {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-top: 2px solid #eef2f6;
    background: #fff;
}

.work-viewer-nav button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid #e1e7ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 0 #e1e7ef;
    color: #111713;
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, border-color .2s ease;
}

.work-viewer-nav button:hover {
    border-color: #00a3e0;
}

.work-viewer-nav button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #e1e7ef;
}

.work-viewer-nav button[hidden] {
    display: none;
}

.work-viewer-nav i {
    color: #00739e;
    font-size: 1.1em;
}

.work-viewer-close:focus-visible,
.work-viewer-nav button:focus-visible,
.work-viewer-link:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .work-viewer {
        width: calc(100vw - 20px);
    }

    .work-viewer-panel {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    .work-viewer-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-viewer-media {
        min-height: 0;
    }

    .work-viewer-media img {
        max-height: 48vh;
    }

    .work-viewer-info {
        padding: 20px 18px 22px;
    }

    .work-viewer-nav button {
        flex: 1 1 0;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-viewer[open],
    .work-viewer-panel.is-switching .work-viewer-body {
        animation: none;
    }
}

.motion-off .work-viewer[open],
.motion-off .work-viewer-panel.is-switching .work-viewer-body {
    animation: none;
}

/* ========================================
   Quick Guide（30秒でわかる 長屋晴太）
======================================== */

.summary {
    position: relative;
    background: var(--ui-panel, #f5f8fc);
}

.summary .ambient {
    display: none;
}

.summary-card {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid var(--ui-ink, #111713);
    border-radius: 20px;
    background:
        var(--ui-dots),
        #fff;
    box-shadow: 0 8px 0 var(--ui-ink, #111713), 0 22px 40px rgba(30, 45, 70, .08);
}

/* 上の黒いバー */
.summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 22px;
    background: var(--ui-ink, #111713);
    color: #fff;
}

.summary-label {
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffb300;
    color: #111713;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
}

.summary-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 900;
    letter-spacing: .02em;
}

.summary-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #62d8ff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .1em;
}

/* 4つのマス */
.summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.05fr);
    margin: 0;
}

.summary-item {
    min-width: 0;
    padding: 20px 22px 22px;
    border-right: 2px dashed var(--ui-line, #e1e7ef);
}

.summary-item:last-child {
    border-right: 0;
}

.summary-item dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--ui-sub, #5b6560);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.summary-item dt span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 20px;
    border-radius: 6px;
    background: var(--tone-soft);
    color: var(--tone-ink);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.summary-item dd {
    margin: 0;
}

.summary-item.is-job { --tone-soft: #c9eefc; --tone-ink: #006d96; }
.summary-item.is-skill { --tone-soft: #c8f2d8; --tone-ink: #137538; }
.summary-item.is-works { --tone-soft: #ffd6d7; --tone-ink: #b42d34; }
.summary-item.is-stats { --tone-soft: #ffeab0; --tone-ink: #905c00; }

.summary-item strong {
    display: block;
    color: var(--ui-ink, #111713);
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 900;
    line-height: 1.35;
}

.summary-item p {
    margin: 8px 0 0;
    color: var(--ui-sub, #5b6560);
    font-size: .8rem;
    line-height: 1.7;
}

.summary-tags,
.summary-works,
.summary-stats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.summary-tags li {
    padding: 5px 10px;
    border: 2px solid #c8f2d8;
    border-radius: 999px;
    background: #f0fbf4;
    color: #137538;
    font-size: .78rem;
    font-weight: 800;
}

.summary-works {
    display: grid;
    gap: 8px;
}

.summary-works a {
    position: relative;
    display: block;
    padding: 10px 34px 10px 12px;
    border: 2px solid var(--ui-line, #e1e7ef);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 0 var(--ui-line, #e1e7ef);
    color: var(--ui-ink, #111713);
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), border-color .2s ease, box-shadow .2s ease;
}

.summary-works a::after {
    position: absolute;
    top: 50%;
    right: 12px;
    color: #b42d34;
    content: "▶";
    font-size: 11px;
    translate: 0 -50%;
}

.summary-works a:hover {
    transform: translateY(-2px);
    border-color: #ff5a5f;
    box-shadow: 0 6px 0 #ffd6d7;
}

.summary-works a:focus-visible,
.summary-mail:focus-visible,
.summary-more:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.summary-works b {
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.summary-works span {
    display: block;
    margin-top: 2px;
    color: var(--ui-sub, #5b6560);
    font-size: .74rem;
    line-height: 1.5;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.summary-stats li {
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff8e1;
    color: var(--ui-sub, #5b6560);
    font-size: .74rem;
    font-weight: 800;
}

.summary-stats b {
    display: block;
    color: var(--ui-ink, #111713);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.1;
}

/* 下の連絡バー */
.summary-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 14px 22px;
    border-top: 2px dashed var(--ui-line, #e1e7ef);
    background: rgba(245, 248, 252, .85);
}

/* スマホだけ：下のほうのセクションへの近道（index.html の .summary-jump）
   PC は上のメニューに同じリンクがあるので出さない */
.summary-jump {
    display: none;
}

@media (max-width: 768px) {
    .summary-jump {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 16px 14px;
        border-top: 2px dashed var(--ui-line, #e1e7ef);
        background: rgba(245, 248, 252, .85);
    }

    .summary-jump-label {
        width: 100%;
        color: var(--ui-sub, #5b6560);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .16em;
    }

    .summary-jump a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 14px;
        border: 2px solid var(--ui-line, #e1e7ef);
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 3px 0 var(--ui-line, #e1e7ef);
        color: var(--ui-ink, #111713);
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
    }

    .summary-jump a::after {
        margin-left: 6px;
        color: #00739e;
        content: "↓";
        font-size: 12px;
    }

    .summary-jump a:active {
        box-shadow: 0 1px 0 var(--ui-line, #e1e7ef);
        transform: translateY(2px);
    }
}

.summary-contact p {
    margin: 0;
    color: var(--ui-sub, #5b6560);
    font-size: .82rem;
}

.summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.summary-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--red-strong, #d6363d);
    box-shadow: 0 4px 0 var(--red-edge, #a8262c);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.summary-mail:hover {
    transform: translateY(-2px);
    color: #fff;
}

.summary-mail:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--red-edge, #a8262c);
}

.summary-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #006d96;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
}

.summary-more:hover {
    text-decoration: underline;
}

@media (max-width: 1100px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-item:nth-child(2n) {
        border-right: 0;
    }

    .summary-item:nth-child(-n + 2) {
        border-bottom: 2px dashed var(--ui-line, #e1e7ef);
    }

    .summary-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
        .summary-head {
        padding: 12px 16px;
    }

    .summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary-item,
    .summary-item:nth-child(-n + 2) {
        padding: 16px;
        border-right: 0;
        border-bottom: 2px dashed var(--ui-line, #e1e7ef);
    }

    .summary-item:last-child {
        border-bottom: 0;
    }

    .summary-timer {
        display: none;
    }

    .summary-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .summary-stats li {
        padding: 8px 6px;
        font-size: .68rem;
        text-align: center;
    }

    .summary-stats b {
        font-size: 1.3rem;
    }

    .summary-contact {
        padding: 14px 16px;
    }

    .summary-actions,
    .summary-mail {
        width: 100%;
    }

    .summary-mail {
        justify-content: center;
    }

    .summary-more {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .summary-works a,
    .summary-mail {
        transition: none;
    }
}

/* ========================================
   Design polish（見出し・余白・Blog・細部の統一）
======================================== */

/* ---------- セクション見出し：全セクションで同じ形（左寄せ＋下に区切り線） ---------- */

section[id] > .section-title {
    display: block;
    width: min(100%, 1200px);
    max-width: none;
    margin: 0 auto 40px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(17, 23, 19, .12);
    text-align: left;
}

@media (max-width: 768px) {
    section[id] > .section-title {
        padding-bottom: 18px;
    }
}

/* ---------- セクションの上下の余白を詰める ---------- */

main > section[id]:not(#summary):not(#ending) {
    padding-top: clamp(64px, 6.2vw, 88px);
    padding-bottom: clamp(64px, 6.2vw, 88px);
}

/* ---------- Play Games：説明の長さが違ってもタイトルとボタンの位置をそろえる ---------- */

.play-card {
    flex-direction: column;
    text-decoration: none;
    position: relative;
    display: grid;
    overflow: hidden;
    color: #242a22;
    border: 2px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 0 var(--ui-line);
    transition:
        opacity var(--transition),
        transform .3s cubic-bezier(.2, .9, .3, 1.3),
        border-color .25s ease,
        box-shadow .3s ease;
    align-content: stretch;
    align-items: start;
    grid-template-rows: minmax(0, 1fr);
}

.play-card > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.play-card > div > span:last-child {
    margin-top: auto;
}

/* ---------- Blog の画像が読み込めなかったとき ---------- */

.article-card img.is-fallback {
    padding: 28px;
    background: var(--ui-panel, #f5f8fc);
    object-fit: contain;
}

@media (min-width: 901px) {
    /* ---------- Contact：SNS が5つのとき、下の段の2つを中央に ---------- */

    .sns-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sns-list > * {
        grid-column: span 2;
    }

    .sns-list > :nth-child(4):nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    /* ---------- Blog の紹介：横1列にまとめて低くする ---------- */

    .blog-introduction {
        gap: 36px;
        padding: 32px 40px;
    }

    .blog-introduction .blog-logo {
        flex: 0 0 auto;
        width: 112px;
        height: 112px;
    }

    .blog-intro-content {
        display: grid;
        flex: 1 1 auto;
        grid-template-areas:
            "title stats"
            "message button";
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px 40px;
        width: auto;
        max-width: none;
    }

    .blog-intro-content > h3 {
        grid-area: title;
        margin: 0;
        font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    }

    .blog-intro-content > .blog-message {
        grid-area: message;
        width: auto;
        max-width: 620px;
        margin: 0;
    }

    .blog-intro-content > .blog-stats {
        grid-area: stats;
        justify-self: end;
        margin: 0;
    }

    .blog-intro-content > .blog-button {
        grid-area: button;
        justify-self: end;
        margin: 0;
    }
}

/* ========================================
   Play（キャラクター図鑑・隠しコマンド・つづきから・進行バー・クリックエフェクト）
======================================== */

/* ---------- 1. キャラクター図鑑：顔を出す・漂うキャラをクリックできるように ---------- */

.peeker-sprite,
.drifter {
    pointer-events: auto;
    cursor: pointer;
    scale: 1;
    transition: scale .2s cubic-bezier(.3, 1.8, .5, 1);
}

.peeker-sprite.is-caught,
.drifter.is-caught {
    scale: 1.3;
}

.play-bubble {
    position: fixed;
    z-index: 1300;
    padding: 6px 10px;
    border: 2px solid #111713;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 0 #111713;
    color: #111713;
    font-size: 12px;
    font-weight: 900;
    pointer-events: none;
    white-space: nowrap;
    translate: -50% -130%;
    animation: play-bubble 1.1s ease-out forwards;
}

@keyframes play-bubble {
    0% { opacity: 0; transform: translateY(8px) scale(.6); }
    15% { opacity: 1; transform: translateY(0) scale(1.08); }
    25% { transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-14px); }
}

/* エンディングのクレジット：見つけたキャラは光る */
.cast-name {
    color: rgba(255, 255, 255, .56);
    transition: color .3s ease, text-shadow .3s ease;
}

.cast-name.is-found {
    color: #ffd54a;
    text-shadow: 0 0 12px rgba(255, 213, 74, .45);
}

.cast-meter {
    margin: 14px auto 0;
    max-width: 520px;
    color: var(--ui-sub, #5b6560);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}

.cast-meter.is-complete {
    color: #8a5a00;
    font-weight: 900;
    letter-spacing: .08em;
}

.ending-secret {
    max-width: 520px;
    margin: 14px auto 0;
    padding: 16px 20px;
    border: 2px solid #ffb300;
    border-radius: 16px;
    background: #fff8e1;
    box-shadow: 0 5px 0 #f0c14b;
    text-align: center;
}

.ending-secret b {
    color: #8a5a00;
    font-size: .8rem;
    letter-spacing: .16em;
}

.ending-secret p {
    margin: 8px 0 0;
    color: #3d3a2f;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.8;
}

/* ---------- 通知（ヘッダーの下） ---------- */

.play-notice {
    position: fixed;
    z-index: 1200;
    top: 96px;
    left: 50%;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    width: max-content;
    padding: 8px 16px 8px 8px;
    border: 2px solid #111713;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 4px 0 #111713, 0 12px 24px rgba(20, 25, 30, .12);
    color: #111713;
    font-size: .82rem;
    line-height: 1.5;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}

.play-notice:empty {
    display: none;
}

.play-notice.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.play-notice img {
    width: 34px;
    height: 34px;
    padding: 2px;
    border-radius: 50%;
    background: #f5f8fc;
    image-rendering: pixelated;
    object-fit: contain;
}

.play-notice b {
    margin-right: 4px;
    color: #c8323a;
    font-weight: 900;
    letter-spacing: .06em;
}

.play-notice[data-tone="gold"] {
    border-color: #8a5a00;
    background: #fff8e1;
    box-shadow: 0 4px 0 #8a5a00, 0 12px 24px rgba(20, 25, 30, .12);
}

.play-notice[data-tone="gold"] b {
    color: #8a5a00;
}

/* ---------- 2. 隠しコマンド（キャラクターが画面を駆け抜ける） ---------- */

.play-parade {
    position: fixed;
    z-index: 1300;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: rgba(17, 23, 19, 0);
    transition: background .4s ease;
}

.play-parade.is-on {
    background: rgba(17, 23, 19, .35);
}

.play-parade-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 7vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: center;
    text-shadow: 4px 4px 0 #d6363d, 8px 8px 0 #111713;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
    transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1);
    white-space: nowrap;
}

.play-parade-banner small {
    display: block;
    margin-bottom: 10px;
    color: #ffd54a;
    font-size: .26em;
    letter-spacing: .3em;
    text-shadow: 2px 2px 0 #111713;
}

.play-parade.is-on .play-parade-banner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.play-runner {
    position: absolute;
    top: calc(8% + var(--row) * 12.5%);
    left: 0;
    width: var(--size);
    image-rendering: pixelated;
    transform: translateX(-120px);
    animation: play-run 2.8s linear var(--delay) forwards, play-hop .36s ease-in-out var(--delay) infinite alternate;
}

@keyframes play-run {
    to { transform: translateX(calc(100vw + 120px)); }
}

@keyframes play-hop {
    to { translate: 0 -14px; }
}

/* ---------- 3. つづきから ---------- */

.play-continue {
    position: fixed;
    z-index: 1150;
    top: 96px;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    width: min(560px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 2px solid #111713;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 0 #111713, 0 18px 36px rgba(20, 25, 30, .16);
    opacity: 0;
    transform: translate(-50%, -14px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.5, .5, 1);
}

.play-continue.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.play-continue p {
    flex: 1 1 220px;
    margin: 0;
    color: #111713;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.5;
}

.play-continue small {
    display: block;
    color: #00739e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
}

.play-continue button {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease;
}

.play-continue-go {
    border: 0;
    background: #d6363d;
    box-shadow: 0 4px 0 #a8262c;
    color: #fff;
}

.play-continue-new {
    border: 2px solid #e1e7ef;
    background: #fff;
    box-shadow: 0 4px 0 #e1e7ef;
    color: #111713;
}

.play-continue button:active {
    transform: translateY(3px);
}

.play-continue button:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

/* ---------- 4. ステージ進行バー（ヘッダーの下） ---------- */

.stage-bar {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 3px;
    pointer-events: none;
}

.stage-bar-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #00a3e0, #22c55e, #ffb300, #ff5a5f, #8b5cf6);
    transform: scaleX(0);
    transform-origin: left;
}

.stage-bar-chip {
    position: absolute;
    top: 10px;
    right: 16px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    padding: 5px 12px;
    border-radius: 999px;
    background: #111713;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: 0;
    text-overflow: ellipsis;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .3s ease;
    white-space: nowrap;
}

.stage-bar-chip.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 5. クリックエフェクト ---------- */

.play-spark {
    position: fixed;
    z-index: 1400;
    width: 0;
    height: 0;
    pointer-events: none;
}

.play-spark i {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    background: var(--c);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
    transform: rotate(var(--a)) translateY(0) scale(1);
    animation: play-spark .5s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes play-spark {
    to { opacity: 0; transform: rotate(var(--a)) translateY(-22px) scale(.3); }
}

@media (max-width: 768px) {
    .play-notice,
    .play-continue {
        top: 80px;
    }

    .play-notice {
        font-size: .76rem;
    }

    .stage-bar-chip {
        right: 12px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .play-runner {
        display: none;
    }

    .play-notice,
    .play-continue,
    .play-parade-banner,
    .stage-bar-chip {
        transition: opacity .2s ease;
    }
}

.motion-off .play-runner {
    display: none;
}

/* ========================================
   Play 2（トロフィー・ランク・季節イベント）
======================================== */

/* ---------- トロフィーを開くボタン ---------- */

.footer-trophy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid #ffd666;
    border-radius: 999px;
    background: #fff8e1;
    box-shadow: 0 4px 0 #ffd666;
    color: #8a5a00;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    cursor: pointer;
    transition: transform .15s ease;
}

.footer-trophy:hover {
    transform: translateY(-2px);
}

.footer-trophy:focus-visible,
.ending-trophy:focus-visible,
.trophy-close:focus-visible {
    outline: 3px solid #111713;
    outline-offset: 3px;
}

/* 結果をシェア（js/play.js）：ランクのすぐ下 */
.ending-share-row {
    display: flex;
    justify-content: center;
    margin: 16px 0 6px;
}

.ending-share {
    gap: 6px;
    border-color: #111713;
    background: #111713;
    box-shadow: 0 5px 0 #000;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ending-share:active {
    box-shadow: 0 2px 0 #000;
}

.ending-share:focus-visible {
    outline: 3px solid #00a3e0;
    outline-offset: 3px;
}

.ending-trophy {
    gap: 6px; /* 「トロフィー」と「4 / 14」の間（ボタンの中では、文字の後ろの空白が消えてしまうため） */
    border: 2px solid #ffd666;
    background: #fff8e1;
    box-shadow: 0 5px 0 #f0c14b;
    color: #8a5a00;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ending-trophy b,
.footer-trophy b {
    font-variant-numeric: tabular-nums;
}

/* ---------- トロフィー一覧 ---------- */

.trophy-room {
    position: fixed;
    inset: 0;
    width: min(720px, calc(100vw - 24px));
    height: fit-content;
    margin: auto;
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: auto;
    border: 2px solid #111713;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 0 #111713, 0 30px 60px rgba(0, 0, 0, .3);
    color: #111713;
}

.trophy-room::backdrop {
    background: rgba(17, 23, 19, .55);
}

.trophy-head {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 22px;
    background: #111713;
    color: #fff;
}

.trophy-head h2 {
    margin: 0;
    color: #ffd54a;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.trophy-count {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.trophy-close {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.trophy-gauge {
    height: 8px;
    background: #fff1c2;
}

.trophy-gauge span {
    display: block;
    height: 100%;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), #ffb300;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.trophy-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 18px;
    list-style: none;
}

.trophy {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 2px dashed #d7dde6;
    border-radius: 14px;
    background: #f5f8fc;
    color: #5b6560;
}

.trophy.is-got {
    border: 2px solid #ffd666;
    background: #fffaf0;
    box-shadow: 0 4px 0 #ffe7a3;
    color: #111713;
}

.trophy-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e5eaf1;
    color: #8a939c;
    font-size: 18px;
    font-weight: 900;
}

.trophy.is-got .trophy-icon {
    background: #ffb300;
    color: #4a2f00;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}

.trophy b {
    display: block;
    font-size: .88rem;
    font-weight: 900;
}

.trophy small {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    line-height: 1.5;
}

.trophy-note {
    margin: 0;
    padding: 0 18px 18px;
    color: #5b6560;
    font-size: .74rem;
}

@media (max-width: 560px) {
    .trophy-list {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }
}

/* ---------- エンディングのランク ---------- */

.ending-rank {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(520px, 100%);
    margin: 16px auto 22px;
    padding: 12px 18px 12px 12px;
    border: 2px solid #111713;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 0 #111713;
    text-align: left;
}

.ending-rank-badge {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 16px;
    background: var(--rank-bg, #5b6560);
    color: #fff;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
}

.ending-rank-badge small {
    display: block;
    font-size: 9px;
    letter-spacing: .2em;
    text-shadow: none;
}

.ending-rank[data-rank="S"] { --rank-bg: linear-gradient(135deg, #ffb300, #ff5a5f); }
.ending-rank[data-rank="A"] { --rank-bg: #d6363d; }
.ending-rank[data-rank="B"] { --rank-bg: #007caa; }
.ending-rank[data-rank="C"] { --rank-bg: #5b6560; }

.ending-rank-body b {
    display: block;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: .08em;
}

.ending-rank-body small {
    display: block;
    margin: 4px 0;
    color: #5b6560;
    font-size: .74rem;
    line-height: 1.5;
}

.ending-rank-body span {
    font-size: .82rem;
    font-weight: 800;
}

/* ---------- 季節イベント ---------- */

.season-badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 12px;
    border: 2px solid #111713;
    border-radius: 999px;
    box-shadow: 0 3px 0 #111713;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

.season-halloween .season-badge { background: #ff9a1f; color: #2b1300; }
.season-christmas .season-badge { background: #d6363d; color: #fff; }
.season-spring .season-badge { background: #ffd6e7; color: #6b1d3a; }
.season-newyear .season-badge { background: #fff1c2; color: #6b3d00; }
.season-winter .season-badge { background: #e0f4ff; color: #00435e; }

.ambient i.is-season {
    opacity: .5;
}

.season-fall {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.season-fall i {
    position: absolute;
    top: -40px;
    left: var(--x);
    font-size: var(--s);
    font-style: normal;
    opacity: .75;
    animation: season-fall var(--d) linear var(--delay) infinite;
}

@keyframes season-fall {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(var(--sway), 50vh) rotate(180deg); }
    100% { transform: translate(0, 110vh) rotate(360deg); }
}

.motion-off .season-fall {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .season-fall {
        display: none;
    }
}

/* トロフィー通知のアイコン（記号）は黄色の上でも読める濃い色に */
.achievement-toast .toast-icon {
    color: #4a2f00;
}

/* ========================================
   ヘッダーが窮屈な幅ではロゴの文字を短くする
======================================== */

@media (min-width: 769px) and (max-width: 960px) {
    .header-logo {
        margin-right: 12px;
    }
}

@media (max-width: 768px) {
    .brand-name small {
        display: none;
    }
}

@media (max-width: 360px) {
    .brand-name {
        display: none;
    }
}

/* ========================================
   Timeline：ワールドマップ
======================================== */

.world-map {
    width: min(100%, 1040px);
    margin: 0 auto 36px;
    overflow: hidden;
    border: 2px solid #111713;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 0 #111713, 0 18px 36px rgba(20, 25, 30, .08);
}

.world-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 10px 18px;
    background: #111713;
    color: #fff;
}

.world-map-label {
    color: #ffd54a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2em;
}

.world-map-hint {
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 700;
}

.world-map-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.world-map-scroll:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: -3px;
}

.world-map-field {
    position: relative;
    min-width: 100%;
    background:
        radial-gradient(rgba(17, 23, 19, .07) 1px, transparent 1.4px) 0 0 / 18px 18px;
}

.world-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 2px dashed rgba(17, 23, 19, .12);
}

.world-zone:last-of-type {
    border-right: 0;
}

.world-zone.is-world-1 { background: linear-gradient(180deg, rgba(34, 197, 94, .1), rgba(34, 197, 94, .02)); }
.world-zone.is-world-2 { background: linear-gradient(180deg, rgba(0, 163, 224, .1), rgba(0, 163, 224, .02)); }
.world-zone.is-world-3 { background: linear-gradient(180deg, rgba(139, 92, 246, .1), rgba(139, 92, 246, .02)); }

.world-zone span {
    position: absolute;
    bottom: 8px;
    left: 12px;
    color: rgba(17, 23, 19, .5);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.world-path {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.world-road {
    fill: none;
    stroke: #e8dcc0;
    stroke-linecap: round;
    stroke-width: 16;
}

.world-road-dash {
    fill: none;
    stroke: #b99b5f;
    stroke-dasharray: 2 10;
    stroke-linecap: round;
    stroke-width: 4;
}

.world-node {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.world-node-dot {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 3px solid #111713;
    border-radius: 50%;
    background: var(--node, #22c55e);
    box-shadow: 0 4px 0 #111713;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}

.world-node.is-clear { --node: #15803d; }
.world-node.is-award { --node: #ffb300; }
.world-node.is-award .world-node-dot { color: #4a2f00; }
.world-node.is-now { --node: #d6363d; }

.world-node:hover .world-node-dot,
.world-node:focus-visible .world-node-dot {
    transform: translateY(-3px) scale(1.1);
}

.world-node:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 4px;
    border-radius: 50%;
}

.world-node-code {
    position: absolute;
    top: -4px;
    right: -14px;
    padding: 1px 5px;
    border-radius: 6px;
    background: #111713;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
}

.world-node-name {
    position: absolute;
    left: 50%;
    display: -webkit-box;
    width: 104px;
    overflow: hidden;
    color: #111713;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    transform: translateX(-50%);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.world-node-name.is-above {
    bottom: calc(100% + 6px);
}

.world-node-name.is-below {
    top: calc(100% + 8px);
}

.world-hero {
    position: absolute;
    z-index: 2;
    width: 40px;
    image-rendering: pixelated;
    pointer-events: none;
    transform: translate(-50%, -78%);
    animation: world-hero 1.2s ease-in-out infinite;
}

@keyframes world-hero {
    50% { translate: 0 -6px; }
}

/* マップから移動してきた経歴カードを光らせる */
.timeline-item.is-map-target .timeline-content {
    animation: map-target 1.6s ease;
}

@keyframes map-target {
    0%, 100% { box-shadow: none; }
    20%, 60% { box-shadow: 0 0 0 4px #ffb300, 0 0 24px rgba(255, 179, 0, .45); }
}

@media (max-width: 768px) {
    .world-map {
        margin-bottom: 26px;
        border-radius: 16px;
    }

    .world-map-hint {
        font-size: 10px;
    }
}

/* ========================================
   Other Works：ゲームカセット風のカード
======================================== */

.works-list .work-card,
.works-list .work-card:hover {
    gap: 6px;
    padding: 16px 12px 24px;
    border: 2px solid #7d8794;
    border-radius: 10px 10px 22px 22px;
    background: linear-gradient(180deg, #e6e9ee 0%, #cfd5dd 100%);
    box-shadow: 0 6px 0 #6f7986, inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(0, 0, 0, .08);
}

.works-list .work-card:hover {
    border-color: #5b6672;
    box-shadow: 0 10px 0 #5b6672, 0 20px 34px rgba(30, 45, 70, .14), inset 0 2px 0 rgba(255, 255, 255, .75);
}

/* 上の溝（カセットの差し込み口） */
.works-list .work-card::before {
    display: block;
    z-index: 1;
    top: 5px;
    left: 50%;
    width: 34%;
    height: 6px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 6px);
    content: "";
    text-shadow: none;
    translate: -50% 0;
}

/* 下の刻印 */
.works-list .work-card::after {
    display: block;
    top: auto;
    right: 0;
    bottom: 5px;
    left: 0;
    height: auto;
    background: none;
    color: rgba(17, 23, 19, .34);
    content: "HARU GAMES";
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .34em;
    text-align: center;
    transform: none;
}

/* ラベル（画像と説明）を貼ったシールのように */
.works-list .work-card > .work-thumb {
    overflow: hidden;
    border: 2px solid rgba(17, 23, 19, .18);
    border-radius: 8px;
}

.works-list .work-card > .work-content {
    border: 2px solid rgba(17, 23, 19, .12);
    border-radius: 8px;
    background: #fff;
}

.works-list .work-card .stage-badges {
    top: 22px;
    left: 20px;
}

/* 受賞作は金色のカセット */
.works-list .work-card.is-rare,
.works-list .work-card.is-rare:hover {
    border-color: #b8860b;
    background: linear-gradient(180deg, #ffe9a8 0%, #f2c14b 100%);
    box-shadow: 0 6px 0 #a87a08, 0 0 0 4px rgba(242, 183, 5, .18), inset 0 2px 0 rgba(255, 255, 255, .7);
}

.works-list .work-card.is-rare::after {
    color: rgba(92, 60, 0, .5);
    content: "★ HARU GAMES ★";
}

/* ========================================
   Main Works：押すと再生する動画
======================================== */

.movie-play {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #111713;
    cursor: pointer;
}

.movie-play:hover img,
.movie-play:focus-visible img {
    transform: scale(1.025);
    filter: saturate(1.08) brightness(.92);
}

/* 真ん中の再生ボタン */
.movie-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: clamp(64px, 9vw, 92px);
    height: clamp(64px, 9vw, 92px);
    border: 3px solid #111713;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 0 #111713, 0 16px 30px rgba(0, 0, 0, .25);
    transform: translate(-50%, -50%);
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}

.movie-play-icon::before {
    width: 0;
    height: 0;
    margin-left: 12%;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 22px solid #d6363d;
    content: "";
}

.movie-play:hover .movie-play-icon,
.movie-play:focus-visible .movie-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
}

/* 右下の「PLAY MOVIE 2:54」 */
.movie-play-label {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(17, 23, 19, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
}

.movie-play-label small {
    color: #ffd54a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.movie-play:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: -3px;
}

/* 再生中 */
.featured-video.is-playing video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    transform: none;
    filter: none;
}

.featured-video.is-playing::after {
    display: none;
}

@media (max-width: 600px) {
    .movie-play-icon::before {
        border-top-width: 11px;
        border-bottom-width: 11px;
        border-left-width: 17px;
    }

    .movie-play-label {
        right: 10px;
        bottom: 10px;
        padding: 5px 10px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .movie-play img,
    .movie-play-icon {
        transition: none;
    }
}

/* ========================================
   アイコン（Font Awesome Free の SVG を、使う分だけ埋め込み）
   外部の CSS・フォントを読み込まずに済むので、表示が速くなる
   使い方は今までと同じ：<i class="fa-solid fa-trophy"></i>
   新しいアイコンを使うときは、ここに1行追加する
   Icons: Font Awesome Free (CC BY 4.0) https://fontawesome.com/license/free
======================================== */

.fa-solid, .fa-regular, .fa-brands {
    display: inline-block;
    width: var(--fa-w, 1em);
    height: 1em;
    flex-shrink: 0;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--fa-icon) center / contain no-repeat;
    mask: var(--fa-icon) center / contain no-repeat;
}

.fa-briefcase { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M200 48l112 0c4.4 0 8 3.6 8 8l0 40-128 0 0-40c0-4.4 3.6-8 8-8zm-56 8l0 40-80 0C28.7 96 0 124.7 0 160l0 96 512 0 0-96c0-35.3-28.7-64-64-64l-80 0 0-40c0-30.9-25.1-56-56-56L200 0c-30.9 0-56 25.1-56 56zM512 304l-192 0 0 16c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-16-192 0 0 112c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-112z'/%3E%3C/svg%3E"); }
.fa-calendar-days { --fa-w: 0.875em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 32 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 128C0 92.7 28.7 64 64 64l32 0 0-32c0-17.7 14.3-32 32-32zM64 240l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 368l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E"); }
.fa-code { --fa-w: 1.125em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M360.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm64.6 136.1c-12.5 12.5-12.5 32.8 0 45.3l73.4 73.4-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0zm-274.7 0c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 150.6 182.6c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/svg%3E"); }
.fa-cube { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224.3-2.5c19.8-11.4 44.2-11.4 64 0L464.2 99c19.8 11.4 32 32.6 32 55.4l0 203c0 22.9-12.2 44-32 55.4L288.3 514.5c-19.8 11.4-44.2 11.4-64 0L48.5 413c-19.8-11.4-32-32.6-32-55.4l0-203c0-22.9 12.2-44 32-55.4L224.3-2.5zm207.8 360l0-166.1-143.8 83 0 166.1 143.8-83z'/%3E%3C/svg%3E"); }
.fa-earth-asia { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M50 284.8c4.2 2.1 9 3.2 14 3.2l50.7 0c8.5 0 16.6 3.4 22.6 9.4l13.3 13.3c6 6 14.1 9.4 22.6 9.4l18.7 0c17.7 0 32-14.3 32-32l0-40c0-13.3 10.7-24 24-24s24-10.7 24-24l0-42.7c0-8.5 3.4-16.6 9.4-22.6l13.3-13.3c6-6 9.4-14.1 9.4-22.6L304 57c0-1.2-.1-2.3-.2-3.5-15.4-3.6-31.4-5.5-47.8-5.5-114.9 0-208 93.1-208 208 0 9.8 .7 19.4 2 28.8zm403.3 37.3c-3.2-1.4-6.7-2.1-10.5-2.1L432 320c-8.8 0-16-7.2-16-16s-7.2-16-16-16l-34.7 0c-8.5 0-16.6 3.4-22.6 9.4l-45.3 45.3c-6 6-9.4 14.1-9.4 22.6l0 18.7c0 17.7 14.3 32 32 32l18.7 0c8.5 0 16.6 3.4 22.6 9.4 2.2 2.2 4.7 4.1 7.3 5.5 39.3-25.4 69.5-63.6 84.6-108.8zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zM128 368c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zM272 256c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16s16-7.2 16-16l0-32c0-8.8-7.2-16-16-16zm48-112l0 32c0 8.8 7.2 16 16 16s16-7.2 16-16l0-32c0-8.8-7.2-16-16-16s-16 7.2-16 16z'/%3E%3C/svg%3E"); }
.fa-envelope { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64c-26.5 0-48 21.5-48 48 0 15.1 7.1 29.3 19.2 38.4l208 156c17.1 12.8 40.5 12.8 57.6 0l208-156c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48L48 64zM0 196L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-188-198.4 148.8c-34.1 25.6-81.1 25.6-115.2 0L0 196z'/%3E%3C/svg%3E"); }
.fa-face-grin-squint-tears { --fa-w: 1.125em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M560 35.4c0 25.6-18.8 47.3-44.1 50.9L469.1 93c-10.6 1.5-19.6-7.5-18.1-18.1l6.7-46.7C461.3 2.8 483-16 508.6-16 537-16 560 7 560 35.4zM403.5 68.1c-6 42.2 30.2 78.4 72.4 72.4l37.8-5.4C565.7 232 550.8 355.3 469 437s-205 96.6-301.9 44.7l5.4-37.8c6-42.2-30.2-78.4-72.4-72.4l-37.8 5.4C10.3 280 25.2 156.7 107 75S312-21.7 408.9 30.3l-5.4 37.8zM417.8 201c-19.1 36.4-45.6 72.7-78.9 106s-69.6 59.8-106 78.9c-11.1 5.8-12.4 21.4-1.1 26.6 59.2 27.5 131.8 16.8 180.6-32s59.5-121.4 32-180.6c-5.3-11.3-20.8-10-26.6 1.1zM113.9 270.6c1.7 8 9 13.4 17.1 12.7l43.1-3.9-3.9 43.1c-.7 8.1 4.7 15.5 12.7 17.1s15.9-2.9 18.4-10.6l28-84.6c1.9-5.7 .4-12.1-3.9-16.3s-10.6-5.8-16.3-3.9l-84.6 28c-7.7 2.6-12.3 10.5-10.6 18.5zM315.2 99.1c.7-8.1-4.7-15.5-12.7-17.1s-15.9 2.9-18.5 10.6l-28 84.6c-1.9 5.7-.4 12.1 3.9 16.3s10.6 5.8 16.3 3.9l84.6-28c7.7-2.6 12.3-10.5 10.6-18.4s-9-13.4-17.1-12.7l-43.1 3.9 3.9-43.1zM60.1 425.7l46.7-6.7c10.6-1.5 19.6 7.5 18.1 18.1l-6.7 46.7C114.7 509.2 93 528 67.4 528 39 528 16 505 16 476.6 16 451 34.8 429.3 60.1 425.7z'/%3E%3C/svg%3E"); }
.fa-face-laugh-squint { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM107.7 332.1C102 318 113.4 304 128.6 304l254.9 0c15.2 0 26.6 14 20.9 28.1-23.8 58.6-81.2 99.9-148.3 99.9s-124.6-41.3-148.3-99.9zm15-188.8c4.5-6.8 13.3-9.2 20.6-5.5l79.6 40c5.4 2.7 8.8 8.2 8.8 14.3s-3.4 11.6-8.8 14.3l-79.6 40c-7.3 3.6-16.1 1.3-20.6-5.5s-3.1-15.9 3.1-21.1L159 192 125.8 164.3c-6.2-5.2-7.6-14.3-3.1-21.1zm263.6 21.1L353 192 386.2 219.7c6.2 5.2 7.6 14.3 3.1 21.1s-13.3 9.2-20.6 5.5l-79.6-40c-5.4-2.7-8.8-8.2-8.8-14.3s3.4-11.6 8.8-14.3l79.6-40c7.3-3.6 16.1-1.3 20.6 5.5s3.1 15.9-3.1 21.1z'/%3E%3C/svg%3E"); }
.fa-gamepad { --fa-w: 1.25em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M448 64c106 0 192 86 192 192S554 448 448 448l-256 0C86 448 0 362 0 256S86 64 192 64l256 0zM192 176c-13.3 0-24 10.7-24 24l0 32-32 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l32 0 0 32c0 13.3 10.7 24 24 24s24-10.7 24-24l0-32 32 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-32 0 0-32c0-13.3-10.7-24-24-24zm240 96a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm64-96a32 32 0 1 0 0 64 32 32 0 1 0 0-64z'/%3E%3C/svg%3E"); }
.fa-globe { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M351.9 280l-190.9 0c2.9 64.5 17.2 123.9 37.5 167.4 11.4 24.5 23.7 41.8 35.1 52.4 11.2 10.5 18.9 12.2 22.9 12.2s11.7-1.7 22.9-12.2c11.4-10.6 23.7-28 35.1-52.4 20.3-43.5 34.6-102.9 37.5-167.4zM160.9 232l190.9 0C349 167.5 334.7 108.1 314.4 64.6 303 40.2 290.7 22.8 279.3 12.2 268.1 1.7 260.4 0 256.4 0s-11.7 1.7-22.9 12.2c-11.4 10.6-23.7 28-35.1 52.4-20.3 43.5-34.6 102.9-37.5 167.4zm-48 0C116.4 146.4 138.5 66.9 170.8 14.7 78.7 47.3 10.9 131.2 1.5 232l111.4 0zM1.5 280c9.4 100.8 77.2 184.7 169.3 217.3-32.3-52.2-54.4-131.7-57.9-217.3L1.5 280zm398.4 0c-3.5 85.6-25.6 165.1-57.9 217.3 92.1-32.7 159.9-116.5 169.3-217.3l-111.4 0zm111.4-48C501.9 131.2 434.1 47.3 342 14.7 374.3 66.9 396.4 146.4 399.9 232l111.4 0z'/%3E%3C/svg%3E"); }
.fa-graduation-cap { --fa-w: 1.125em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M48 195.8l209.2 86.1c9.8 4 20.2 6.1 30.8 6.1s21-2.1 30.8-6.1l242.4-99.8c9-3.7 14.8-12.4 14.8-22.1s-5.8-18.4-14.8-22.1L318.8 38.1C309 34.1 298.6 32 288 32s-21 2.1-30.8 6.1L14.8 137.9C5.8 141.6 0 150.3 0 160L0 456c0 13.3 10.7 24 24 24s24-10.7 24-24l0-260.2zm48 71.7L96 384c0 53 86 96 192 96s192-43 192-96l0-116.6-142.9 58.9c-15.6 6.4-32.2 9.7-49.1 9.7s-33.5-3.3-49.1-9.7L96 267.4z'/%3E%3C/svg%3E"); }
.fa-lightbulb { --fa-w: 0.75em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M292.9 384c7.3-22.3 21.9-42.5 38.4-59.9 32.7-34.4 52.7-80.9 52.7-132.1 0-106-86-192-192-192S0 86 0 192c0 51.2 20 97.7 52.7 132.1 16.5 17.4 31.2 37.6 38.4 59.9l201.7 0zM288 432l-192 0 0 16c0 44.2 35.8 80 80 80l32 0c44.2 0 80-35.8 80-80l0-16zM184 112c-39.8 0-72 32.2-72 72 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-66.3 53.7-120 120-120 13.3 0 24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E"); }
.fa-paper-plane { --fa-w: 1.125em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M536.4-26.3c9.8-3.5 20.6-1 28 6.3s9.8 18.2 6.3 28l-178 496.9c-5 13.9-18.1 23.1-32.8 23.1-14.2 0-27-8.6-32.3-21.7l-64.2-158c-4.5-11-2.5-23.6 5.2-32.6l94.5-112.4c5.1-6.1 4.7-15-.9-20.6s-14.6-6-20.6-.9L229.2 276.1c-9.1 7.6-21.6 9.6-32.6 5.2L38.1 216.8c-13.1-5.3-21.7-18.1-21.7-32.3 0-14.7 9.2-27.8 23.1-32.8l496.9-178z'/%3E%3C/svg%3E"); }
.fa-pen-nib { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M368.5 18.3l-50.1 50.1 125.3 125.3 50.1-50.1c21.9-21.9 21.9-57.3 0-79.2L447.7 18.3c-21.9-21.9-57.3-21.9-79.2 0zM279.3 97.2l-.5 .1-144.1 43.2c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-2.9 8.7-1.9 18.2 2.5 26L161.7 316.4c-1.1-4-1.6-8.1-1.6-12.4 0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48c-4.3 0-8.5-.6-12.4-1.6L40.3 505.7c7.8 4.4 17.2 5.4 26 2.5l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 .1-.5-135.5-135.5z'/%3E%3C/svg%3E"); }
.fa-screwdriver-wrench { --fa-w: 1.125em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M70.8-6.7c5.4-5.4 13.8-6.2 20.2-2L209.9 70.5c8.9 5.9 14.2 15.9 14.2 26.6l0 49.6 90.8 90.8c33.3-15 73.9-8.9 101.2 18.5L542.2 382.1c18.7 18.7 18.7 49.1 0 67.9l-60.1 60.1c-18.7 18.7-49.1 18.7-67.9 0L288.1 384c-27.4-27.4-33.5-67.9-18.5-101.2l-90.8-90.8-49.6 0c-10.7 0-20.7-5.3-26.6-14.2L23.4 58.9c-4.2-6.3-3.4-14.8 2-20.2L70.8-6.7zm145 303.5c-6.3 36.9 2.3 75.9 26.2 107.2l-94.9 95c-28.1 28.1-73.7 28.1-101.8 0s-28.1-73.7 0-101.8l135.4-135.5 35.2 35.1zM384.1 0c20.1 0 39.4 3.7 57.1 10.5 10 3.8 11.8 16.5 4.3 24.1L388.8 91.3c-3 3-4.7 7.1-4.7 11.3l0 41.4c0 8.8 7.2 16 16 16l41.4 0c4.2 0 8.3-1.7 11.3-4.7l56.7-56.7c7.6-7.5 20.3-5.7 24.1 4.3 6.8 17.7 10.5 37 10.5 57.1 0 43.2-17.2 82.3-45 111.1l-49.1-49.1c-33.1-33-78.5-45.7-121.1-38.4l-56.8-56.8 0-29.7-.2-5c-.8-12.4-4.4-24.3-10.5-34.9 29.4-35 73.4-57.2 122.7-57.3z'/%3E%3C/svg%3E"); }
.fa-stopwatch { --fa-w: 0.875em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M168.5 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l32 0 0 25.3c-108 11.9-192 103.5-192 214.7 0 119.3 96.7 216 216 216s216-96.7 216-216c0-39.8-10.8-77.1-29.6-109.2l28.2-28.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-23.4 23.4c-32.9-30.2-75.2-50.3-122-55.5l0-25.3 32 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-112 0zm80 184l0 104c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-104c0-13.3 10.7-24 24-24s24 10.7 24 24z'/%3E%3C/svg%3E"); }
.fa-triangle-exclamation { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z'/%3E%3C/svg%3E"); }
.fa-trophy { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M144.3 0l224 0c26.5 0 48.1 21.8 47.1 48.2-.2 5.3-.4 10.6-.7 15.8l49.6 0c26.1 0 49.1 21.6 47.1 49.8-7.5 103.7-60.5 160.7-118 190.5-15.8 8.2-31.9 14.3-47.2 18.8-20.2 28.6-41.2 43.7-57.9 51.8l0 73.1 64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0 0-73.1c-16-7.7-35.9-22-55.3-48.3-18.4-4.8-38.4-12.1-57.9-23.1-54.1-30.3-102.9-87.4-109.9-189.9-1.9-28.1 21-49.7 47.1-49.7l49.6 0c-.3-5.2-.5-10.4-.7-15.8-1-26.5 20.6-48.2 47.1-48.2zM101.5 112l-52.4 0c6.2 84.7 45.1 127.1 85.2 149.6-14.4-37.3-26.3-86-32.8-149.6zM380 256.8c40.5-23.8 77.1-66.1 83.3-144.8L411 112c-6.2 60.9-17.4 108.2-31 144.8z'/%3E%3C/svg%3E"); }
.fa-users { --fa-w: 1.25em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M320 16a104 104 0 1 1 0 208 104 104 0 1 1 0-208zM96 88a72 72 0 1 1 0 144 72 72 0 1 1 0-144zM0 416c0-70.7 57.3-128 128-128 12.8 0 25.2 1.9 36.9 5.4-32.9 36.8-52.9 85.4-52.9 138.6l0 16c0 11.4 2.4 22.2 6.7 32L32 480c-17.7 0-32-14.3-32-32l0-32zm521.3 64c4.3-9.8 6.7-20.6 6.7-32l0-16c0-53.2-20-101.8-52.9-138.6 11.7-3.5 24.1-5.4 36.9-5.4 70.7 0 128 57.3 128 128l0 32c0 17.7-14.3 32-32 32l-86.7 0zM472 160a72 72 0 1 1 144 0 72 72 0 1 1 -144 0zM160 432c0-88.4 71.6-160 160-160s160 71.6 160 160l0 16c0 17.7-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32l0-16z'/%3E%3C/svg%3E"); }
.fa-wand-magic-sparkles { --fa-w: 1.125em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M263.4-27L278.2 9.8 315 24.6c3 1.2 5 4.2 5 7.4s-2 6.2-5 7.4L278.2 54.2 263.4 91c-1.2 3-4.2 5-7.4 5s-6.2-2-7.4-5L233.8 54.2 197 39.4c-3-1.2-5-4.2-5-7.4s2-6.2 5-7.4L233.8 9.8 248.6-27c1.2-3 4.2-5 7.4-5s6.2 2 7.4 5zM110.7 41.7l21.5 50.1 50.1 21.5c5.9 2.5 9.7 8.3 9.7 14.7s-3.8 12.2-9.7 14.7l-50.1 21.5-21.5 50.1c-2.5 5.9-8.3 9.7-14.7 9.7s-12.2-3.8-14.7-9.7L59.8 164.2 9.7 142.7C3.8 140.2 0 134.4 0 128s3.8-12.2 9.7-14.7L59.8 91.8 81.3 41.7C83.8 35.8 89.6 32 96 32s12.2 3.8 14.7 9.7zM464 304c6.4 0 12.2 3.8 14.7 9.7l21.5 50.1 50.1 21.5c5.9 2.5 9.7 8.3 9.7 14.7s-3.8 12.2-9.7 14.7l-50.1 21.5-21.5 50.1c-2.5 5.9-8.3 9.7-14.7 9.7s-12.2-3.8-14.7-9.7l-21.5-50.1-50.1-21.5c-5.9-2.5-9.7-8.3-9.7-14.7s3.8-12.2 9.7-14.7l50.1-21.5 21.5-50.1c2.5-5.9 8.3-9.7 14.7-9.7zM460 0c11 0 21.6 4.4 29.5 12.2l42.3 42.3C539.6 62.4 544 73 544 84s-4.4 21.6-12.2 29.5l-88.2 88.2-101.3-101.3 88.2-88.2C438.4 4.4 449 0 460 0zM44.2 398.5L308.4 134.3 409.7 235.6 145.5 499.8C137.6 507.6 127 512 116 512s-21.6-4.4-29.5-12.2L44.2 457.5C36.4 449.6 32 439 32 428s4.4-21.6 12.2-29.5z'/%3E%3C/svg%3E"); }
.fa-arrow-up-right-from-square { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z'/%3E%3C/svg%3E"); }
.fa-caret-left { --fa-w: 0.5em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M7.7 235.8c-10.3 12.6-9.5 31.1 2.2 42.8l128 128c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-256c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-128 128-2.2 2.4z'/%3E%3C/svg%3E"); }
.fa-caret-right { --fa-w: 0.5em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z'/%3E%3C/svg%3E"); }
.fa-magnifying-glass-plus { --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 112c-13.3 0-24 10.7-24 24l0 48-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0 0 48c0 13.3 10.7 24 24 24s24-10.7 24-24l0-48 48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-48c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E"); }
.fa-xmark { --fa-w: 0.75em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z'/%3E%3C/svg%3E"); }
.fa-chevron-up { --fa-w: 0.875em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E"); }
.fa-chevron-down { --fa-w: 0.875em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E"); }
.fa-unity { --fa-w: 0.875em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M243.6 91.6l80.1 46.8c2.9 1.6 3 6.2 0 7.8l-95.2 55.6c-2.9 1.7-6.3 1.6-9 0l-95.2-55.6c-2.9-1.6-3-6.3 0-7.8l80.1-46.8 0-91.6-204.4 119.4 0 238.8 78.4-45.8 0-93.6c-.1-3.3 3.8-5.7 6.7-3.9l95.2 55.6c2.9 1.7 4.5 4.7 4.5 7.8l0 111.2c.1 3.3-3.8 5.7-6.7 3.9L98 346.8 19.6 392.6 224 512 428.4 392.6 350 346.8 269.9 393.6c-2.8 1.7-6.8-.5-6.7-3.9l0-111.2c0-3.3 1.8-6.3 4.5-7.8L362.9 215c2.8-1.7 6.8 .5 6.7 3.9l0 93.6 78.4 45.8 0-238.8-204.4-119.4 0 91.6z'/%3E%3C/svg%3E"); }
.fa-copy { --fa-w: 0.875em; --fa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l133.5 0c4.2 0 8.3 1.7 11.3 4.7l58.5 58.5c3 3 4.7 7.1 4.7 11.3L400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-197.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-48 0 0 16c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l16 0 0-48-16 0z'/%3E%3C/svg%3E"); }

/* ========================================
   季節の飾り：スマホでは数を半分・うすめにして、トップの文章を読みやすく
======================================== */

@media (max-width: 768px) {
    .season-fall i {
        opacity: .4;
    }

    .season-fall i:nth-child(2n) {
        display: none;
    }
}

/* ========================================
   初回だけ出る吹き出し：⚙ OPTIONS（設定）の案内
======================================== */

.settings-hint {
    position: absolute;
    top: calc(100% + 12px);
    left: var(--hint-left, 12px);
    width: var(--hint-width, 280px);
    display: grid;
    gap: 2px;
    padding: 12px 40px 12px 14px;
    border: 2px solid var(--ui-ink, #111713);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-ink, #111713);
    color: var(--ui-ink, #111713);
    font-size: 13px;
    line-height: 1.6;
    transition: opacity .25s, transform .25s;
}

.settings-hint.is-shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.settings-hint::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(var(--hint-arrow, 50%) - 8px);
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--ui-ink, #111713);
    border-left: 2px solid var(--ui-ink, #111713);
    background: #fff;
    transform: rotate(45deg);
}

.settings-hint b {
    color: #00739e;
    font-size: 12px;
    letter-spacing: .08em;
}

.settings-hint-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.settings-hint-close:hover,
.settings-hint-close:focus-visible {
    background: #eef2f7;
}

.motion-off .settings-hint {
    transition: none;
}

/* ========================================
   Other Works：受賞作のピックアップ（一覧を閉じていても見える）
======================================== */

.works-pickup {
    width: min(100%, 1200px);
    margin: 0 auto 22px;
}

.works-pickup[hidden] {
    display: none;
}

.works-pickup-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--ui-sub);
    font-size: 13px;
    font-weight: 700;
}

.works-pickup-label {
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe066, #f2b705);
    color: #4a3300;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.works-pickup-list {
    display: grid;
    grid-template-columns: repeat(var(--pickup-count, 4), minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.works-pickup-card {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 2px solid #b8860b;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff6d6 0%, #ffe39a 100%);
    box-shadow: 0 5px 0 #a87a08;
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s ease;
}

.works-pickup-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #a87a08, 0 16px 30px rgba(242, 183, 5, .25);
}

.works-pickup-card:focus-visible {
    outline: 3px solid #00a3e0;
    outline-offset: 3px;
}

.works-pickup-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-bottom: 2px solid #b8860b;
}

.works-pickup-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.works-pickup-card.is-previewing .work-preview {
    opacity: 1;
}

.works-pickup-media .work-movie-badge {
    top: 6px;
    right: 6px;
}

.works-pickup-card.is-previewing .work-movie-badge {
    background: var(--red-strong);
}

/* スマホのピックアップは画像が小さいので、印も小さく */
@media (max-width: 768px) {
    .works-pickup-media .work-movie-badge {
        top: 4px;
        right: 4px;
        padding: 2px 6px;
        font-size: 8.5px;
        letter-spacing: .04em;
    }
}

.works-pickup-text {
    display: grid;
    gap: 4px;
    padding: 12px 14px 14px;
}

.works-pickup-award {
    color: #6b4a00;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

.works-pickup-title {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.4;
}

.works-pickup-genre {
    color: #5b4a1f;
    font-size: 12px;
}

/* スマホ：横長のカードを縦に並べる（画像は左、文字は右） */
@media (max-width: 768px) {
    .works-pickup-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .works-pickup-card {
        flex-direction: row;
        align-items: stretch;
    }

    .works-pickup-media {
        width: 42%;
        flex-shrink: 0;
        border-right: 2px solid #b8860b;
        border-bottom: 0;
    }

    .works-pickup-card img {
        height: 100%;
    }

    .works-pickup-text {
        align-content: center;
        padding: 8px 12px;
    }

    .works-pickup-title {
        font-size: 14px;
    }

    .works-pickup-genre {
        font-size: 11px;
    }
}

.motion-off .works-pickup-card {
    transition: none;
}

/* ========================================
   スマホの Main Works：作品情報を2列にまとめて短く
   （概要は横いっぱい、開発期間と開発環境は横に並べる）
======================================== */

@media (max-width: 768px) {
    .featured-works .featured-title {
        margin-bottom: 16px;
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    .featured-works .featured-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 8px;
    }

    .featured-works .info-item:first-child {
        grid-column: 1 / -1;
    }

    .featured-works .info-item,
    .featured-works .featured-point {
        min-width: 0;
        padding: 12px 14px;
    }

    .featured-works .info-item h4,
    .featured-works .featured-point h4 {
        margin-bottom: 6px;
        padding: 3px 10px;
        font-size: 11px;
    }

    .featured-works .info-item p,
    .featured-works .featured-point li {
        font-size: 13px;
        line-height: 1.6;
    }

    .featured-works .featured-point ul {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* トップ：キャッチコピーの上に名前（誰のサイトかすぐ分かるように） */
.hero-name {
    padding-right: 10px;
    border-right: 2px solid var(--ui-line);
    color: var(--ui-ink);
    font-weight: 900;
    letter-spacing: .08em;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .hero-name {
        padding-right: 8px;
        letter-spacing: .02em;
    }
}

/* ========================================
   セクション見出しまわりの余白を詰める（全体をテンポよく読めるように）
======================================== */

section[id] .section-title {
    margin-bottom: clamp(22px, 2.4vw, 32px);
}

section[id] .section-title h2 {
    line-height: 1.15;
}

/* 実績：ゲージの無いカードも、数字の高さを他のカードとそろえる */
.achievement-card[data-no-meter] {
    padding-bottom: 60px;
}

/* ブログ：タイトルの行数が違っても「記事を読む」の位置をそろえる */
.article-card {
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    box-shadow: 0 5px 0 var(--ui-line);
    transition:
        opacity var(--transition),
        transform .3s cubic-bezier(.2, .9, .3, 1.3),
        border-color .25s ease,
        box-shadow .3s ease;
    display: flex;
    flex-direction: column;
}

.article-content {
    padding: 21px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.article-content > a {
    margin-top: auto;
}

.article-content > h3 {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .achievement-card[data-no-meter] {
        padding-bottom: 53px;
    }
}

/* ========================================
   アニメーション「軽量」：常に動いている飾り（ふわふわ・点滅・流れる線など）だけ止める
   表示されるときの動きやボタンの反応、キャラクターの顔出しは残す
   ※ 新しく infinite のアニメーションを足したら、ここにも追加する
======================================== */

.motion-lite .status-state::before,
.motion-lite .timeline-item[data-quest="now"]::before,
.motion-lite .hero-index span,
.motion-lite .blog-logo,
.motion-lite .blog-logo::after,
.motion-lite .article-badges .is-new,
.motion-lite .brand-mark,
.motion-lite .hero-screen,
.motion-lite .hero-eyebrow::before,
.motion-lite .hero-button,
.motion-lite .hero-overlay,
.motion-lite .about-image,
.motion-lite .about-kicker::before,
.motion-lite .achievements .achievement-card i,
.motion-lite .stat-gauge span::after,
.motion-lite .blog-exp .stat-gauge span::after,
.motion-lite .can-do-icon,
.motion-lite .featured-video::before,
.motion-lite .stage-filter-label::before,
.motion-lite .stage-badges .is-wip,
.motion-lite .timeline-container::before,
.motion-lite .timeline-item[data-quest="award"]::before,
.motion-lite .timeline-item[data-quest="now"] .timeline-content::after,
.motion-lite .play-card img,
.motion-lite .play-card span::before,
.motion-lite .sns-card img,
.motion-lite .footer-top span,
.motion-lite .works-toggle-icon,
.motion-lite .mail-card-icon,
.motion-lite .stage-filter button[aria-pressed="true"],
.motion-lite .can-do-category-title > span,
.motion-lite .quest-toggle-icon,
.motion-lite .challenge-pip.is-next,
.motion-lite .like-heart,
.motion-lite .exp-fill::after,
.motion-lite .rare-shine::before,
.motion-lite .ending-kicker span,
.motion-lite .main-tab[aria-selected="true"]::after,
.motion-lite .world-hero {
    animation: none !important;
}

.motion-lite .ambient,
.motion-lite .drifter,
.motion-lite .season-fall {
    display: none !important;
}

/* ========================================
   設定画面（OPTIONS）：ゲームのオプション画面風
======================================== */

.settings-panel {
    position: fixed;
    inset: 0;
    width: min(560px, calc(100vw - 24px));
    height: fit-content;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 2px solid #111713;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 0 #111713, 0 30px 60px rgba(0, 0, 0, .3);
    color: #111713;
}

.settings-panel::backdrop {
    background: rgba(17, 23, 19, .55);
}

.settings-panel[open] {
    animation: settings-open .28s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes settings-open {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }
}

.motion-off .settings-panel[open] {
    animation: none;
}

.settings-head {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 14px 20px;
    background: #111713;
    color: #fff;
}

.settings-head-icon {
    color: #ffd666;
    font-size: 20px;
}

.settings-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .18em;
}

.settings-head-sub {
    color: #b9c2bd;
    font-size: 12px;
    font-weight: 700;
}

.settings-close {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.settings-close:hover,
.settings-close:focus-visible {
    background: rgba(255, 255, 255, .22);
}

.settings-body {
    display: grid;
    gap: 6px;
    padding: 14px 20px 6px;
    background: var(--ui-dots), #fff;
}

.settings-row {
    padding: 14px 0;
    border-bottom: 2px dashed var(--ui-line);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-label {
    margin: 0 0 10px;
    color: var(--ui-ink);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .06em;
}

.settings-label::before {
    margin-right: 8px;
    color: #00a3e0;
    content: "■";
    font-size: 10px;
    vertical-align: 2px;
}

.settings-choices {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 2px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-panel);
}

.settings-choices [role="radio"] {
    position: relative;
    flex: 1;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ui-sub);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.settings-choices [role="radio"]:hover {
    background: #fff;
    color: var(--ui-ink);
}

.settings-choices [role="radio"][aria-checked="true"] {
    background: #111713;
    box-shadow: 0 3px 0 #000;
    color: #fff;
}

/* 選んでいる項目に、ゲームのメニューのような ▶ を出す */
.settings-choices [role="radio"][aria-checked="true"]::before {
    margin-right: 6px;
    color: #ffd666;
    content: "▶";
    font-size: 10px;
    vertical-align: 1px;
}

.settings-choices [role="radio"]:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

.settings-note {
    margin: 8px 2px 0;
    color: var(--ui-sub);
    font-size: 12px;
    line-height: 1.6;
}

.settings-volume {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-mute {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 2px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 0 var(--ui-line);
    cursor: pointer;
    font-size: 18px;
}

.settings-mute[aria-pressed="true"] {
    border-color: #ffc2c5;
    background: #ffe1e2;
}

.settings-mute:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

.settings-volume input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    margin: 0;
    accent-color: #00a3e0;
    cursor: pointer;
}

.settings-panel.is-muted input[type="range"] {
    opacity: .45;
}

.settings-volume-value {
    min-width: 3.4em;
    padding: 6px 8px;
    border-radius: 8px;
    background: #111713;
    color: #ffd666;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: center;
}

.settings-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 20px 18px;
}

.settings-foot button {
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 0 var(--ui-line);
    color: var(--ui-ink);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.settings-foot .settings-done {
    min-width: 96px;
    border-color: #a8262c;
    background: #d6363d;
    box-shadow: 0 3px 0 #a8262c;
    color: #fff;
    letter-spacing: .1em;
}

.settings-foot button:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .settings-body {
        padding: 10px 14px 4px;
    }

    .settings-choices [role="radio"] {
        padding: 8px 4px;
        font-size: 13px;
    }

    .settings-foot {
        padding: 10px 14px 14px;
    }

    .settings-foot button {
        flex: 1;
    }
}

/* 英語に切り替えるとき、訳し終わるまで本文を隠す（ちらつき防止） */
.i18n-wait body {
    visibility: hidden;
}

/* What I Can Do：できることの裏付けになる作品（例） */
.can-do-content .can-do-example {
    margin: -8px 0 18px;
    padding: 8px 10px;
    border-left: 3px solid var(--cat, #00a3e0);
    border-radius: 0 8px 8px 0;
    background: rgba(17, 23, 19, .04);
    color: var(--ui-ink, #111713);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

/* ========================================
   スマホを短く：折りたたみ・スキルセットのタブ（PC では何も変わらない）
======================================== */

.mobile-fold-toggle,
.can-do-tabs,
.nav-mail {
    display: none;
}

@media (max-width: 768px) {
    .is-mobile-folded [data-mobile-fold] {
        display: none !important;
    }

    .mobile-fold-toggle {
        display: flex;
        margin: 12px 0 16px;
    }

    .status-screen .mobile-fold-toggle {
        grid-column: 1 / -1;
        margin: 4px 0 0;
    }

    /* About：写真を少し低くして、名前と自己紹介が早く見えるように */
    #about .about-image img {
        height: clamp(200px, 56vw, 280px);
        object-position: center 30%;
    }

    #about .about-content .mobile-fold-toggle {
        margin: 4px 0 0;
    }

    /* What I Can Do：3つのスキルセットをタブで切り替え */
    .can-do-tabs {
        position: sticky;
        z-index: 5;
        top: 76px;
        display: flex;
        gap: 6px;
        margin: 0 0 14px;
        padding: 4px;
        border: 2px solid var(--ui-line, #e1e7ef);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 4px 0 var(--ui-line, #e1e7ef);
    }

    .can-do-tabs button {
        flex: 1;
        min-height: 42px;
        padding: 6px 4px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--ui-sub, #5b6560);
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .can-do-tabs button[aria-pressed="true"] {
        background: #111713;
        color: #fff;
    }

    .can-do-tabs button:focus-visible {
        outline: 3px solid #ffb300;
        outline-offset: 2px;
    }

    .has-mobile-tabs .can-do-category:not(.is-mobile-current) {
        display: none;
    }

    /* About：BASE / FOCUS を横に並べる */
    .about .about-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Contact：SNS を2列に（説明文は省いて名前だけ） */
    .sns-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sns-card {
        min-height: 64px;
    }

    .sns-card p {
        display: none;
    }

    /* メニューを開いたとき、いちばん下にメールのボタン */
    .header-nav .nav-mail {
        display: block;
        margin-top: 8px;
        border-radius: 14px;
        background: var(--red-strong, #d6363d);
        box-shadow: 0 4px 0 var(--red-edge, #a8262c);
        color: #fff;
        font-weight: 900;
        text-align: center;
    }
}

/* ========================================
   連絡ボタン（画面の左下。読み進めたら出てくる）
======================================== */

.quick-contact {
    position: fixed;
    z-index: 900;
    left: 16px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 16px 6px 6px;
    border: 2px solid #111713;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 0 #111713, 0 12px 24px rgba(17, 23, 19, .18);
    color: #111713;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
}

.quick-contact.is-shown {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.quick-contact:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.quick-contact-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--red-strong, #d6363d);
    color: #fff;
    font-size: 16px;
}

.motion-off .quick-contact {
    transition: none;
}

@media (max-width: 360px) {
    .quick-contact {
        left: 10px;
        padding-right: 12px;
    }
}

/* ---------- 押した手ごたえ：選ぶ・切り替えるボタンを押した瞬間に少し沈む（効果音とセット） ---------- */

:root:not(.motion-off) :is(.stage-filter button, .can-do-tabs button, .settings-choices [role="radio"], .swipe-dot, .world-node):active {
    scale: .94;
}

:root:not(.motion-off) :is(.work-thumb, .works-pickup-card):active {
    scale: .985;
}

/* ---------- アクセシビリティ ---------- */

/* キーボードで最初に Tab を押したときだけ出る「本文へスキップ」 */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ui-ink);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    translate: 0 -160%;
}

.skip-link:focus-visible {
    translate: 0 0;
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* 文字の間隔を広げて読んでいる人でも、SNS の名前がはみ出さないように */
.sns-card h3,
.sns-card p {
    overflow-wrap: anywhere;
}

/* トップの動画を止める・流すボタン */
.hero-screen {
    position: relative;
}

.hero-pause {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: rgba(17, 23, 19, .72);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.hero-pause:hover {
    background: var(--cyan-strong);
}

.hero-pause:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

.motion-off .hero-pause {
    display: none;
}

/* ---------- ゲームパッド操作（js/gamepad.js） ---------- */

/* コントローラーで動かしているカーソル：黄色い枠で、どこを選んでいるかはっきり見せる */
.using-gamepad :focus {
    outline: 3px solid #ffb300 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(255, 179, 0, .28);
}

:root.using-gamepad:not(.motion-off) .is-gamepad-hop {
    animation: gamepad-hop .24s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes gamepad-hop {
    0% { outline-offset: 9px; }
    100% { outline-offset: 3px; }
}

/* 画面左下の操作ガイド（コントローラーを使っているあいだだけ） */
.gamepad-guide {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9000;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    max-width: calc(100% - 120px);
    padding: 10px 16px;
    border: 2px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(17, 23, 19, .88);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
}

.using-gamepad .gamepad-guide {
    display: flex;
}

.gamepad-guide-icon {
    font-size: 16px;
}

.gamepad-guide-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gamepad-guide-item b {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #fff;
    color: var(--ui-ink);
    font-size: 11px;
    text-align: center;
}

:root.using-gamepad:not(.motion-off) .gamepad-guide {
    animation: gamepad-guide-in .3s ease-out;
}

@keyframes gamepad-guide-in {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------- Web Works：制作した Web サイト（Play Games の下） ---------- */

.web-works {
    margin-top: 56px;
}

.web-works-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 700;
}

.web-works-kicker {
    color: var(--accent);
    font-size: 10px;
    letter-spacing: .2em;
}

.web-card {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    overflow: hidden;
    border: 2px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 0 var(--ui-line);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.web-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--ui-line);
}

.web-card:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

/* サイトの画面：ブラウザの窓のような枠に、トップ画面のスクリーンショットを入れる */
.web-card-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    overflow: hidden;
    background: #b8f36b;
}

.web-card-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: #a5dd5c;
}

.web-card-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(17, 23, 19, .35);
}

.web-card-screen img {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: left top;
    transition: scale .4s ease;
}

:root:not(.motion-off) .web-card:hover .web-card-screen img {
    scale: 1.03;
}

.web-card-body {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 32px 36px;
}

.web-card-tag {
    color: #137538;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.web-card-body h4 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 22px;
    font-weight: 800;
}

.web-card-body p {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.8;
}

.web-card-points {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0;
    padding: 0;
    list-style: none;
}

.web-card-points li {
    padding: 4px 10px;
    border: 1px solid #cfe9bd;
    border-radius: 999px;
    background: #f1fbe8;
    color: #1f4d17;
    font-size: 11.5px;
    font-weight: 700;
}

.web-card-body .web-card-note {
    padding-left: 10px;
    border-left: 3px solid #b8f36b;
    color: var(--ui-sub);
    font-size: 12px;
}

.web-card-link {
    justify-self: start;
    margin-top: 6px;
    padding: 8px 16px;
    border-radius: 12px;
    background: #137538;
    box-shadow: 0 4px 0 #0c5226;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .web-works {
        margin-top: 40px;
    }

    .web-card {
        grid-template-columns: 1fr;
    }

    .web-card-screen {
        min-height: 0;
    }

    .web-card-screen img {
        flex: none;
        height: auto;
    }

    .web-card-body {
        padding: 22px;
    }
}

/* ========================================
   AIDMA：見る人を「注意 → 関心 → 欲求 → 記憶 → 行動」へ案内するパーツ
======================================== */

/* ---------- A：トップの実績バッジ（スクロールしなくても強みが伝わるように） ---------- */

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.hero-badges li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--ui-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 0 var(--ui-line);
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 700;
}

.hero-badges li:first-child {
    border-color: #ffd54a;
    background: #fff8db;
    box-shadow: 0 3px 0 #f1c232;
}

.hero-badges b {
    color: var(--cyan-strong);
    font-size: 14px;
}

/* ---------- I：目的別の入口（SELECT MODE） ---------- */

.mode-select {
    width: min(100%, 1200px);
    margin: 0 auto 28px;
}

.mode-select-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 14px;
    color: var(--ui-ink);
    font-size: 15px;
}

.mode-select-label {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.mode-select-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mode-card {
    --mode: #006ea8;
    --mode-soft: #e3f3fb;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    color: var(--ui-ink);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mode-card[data-mode="game"] { --mode: #b42d34; --mode-soft: #fde7e8; }
.mode-card[data-mode="web"] { --mode: #137538; --mode-soft: #e6f6e4; }

.mode-card:hover,
.mode-card.is-selected {
    border-color: var(--mode);
    box-shadow: 0 5px 0 var(--mode);
}

:root:not(.motion-off) .mode-card:hover {
    transform: translateY(-3px);
}

.mode-card:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.mode-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mode-soft);
    font-size: 22px;
}

.mode-card-text {
    display: grid;
    gap: 3px;
}

.mode-card-text b {
    font-size: 14.5px;
}

.mode-card-text small {
    color: var(--ui-sub);
    font-size: 11.5px;
}

.mode-card-go {
    color: var(--mode);
    font-size: 12px;
    transition: translate .2s ease;
}

:root:not(.motion-off) .mode-card:hover .mode-card-go {
    translate: 4px 0;
}

/* ---------- A：代表作を見終わったところに、連絡ボタン ---------- */

.work-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
    width: min(100%, 1200px);
    margin: 48px auto 0;
    padding: 20px 24px;
    border: 2px dashed var(--ui-line);
    border-radius: 18px;
    text-align: center;
}

.work-cta p {
    margin: 0;
    color: var(--color-text);
    font-size: 13.5px;
}

.work-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    background: var(--cyan-strong);
    box-shadow: 0 4px 0 var(--cyan-edge);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.work-cta-button:hover {
    background: var(--cyan-strong-hover);
}

/* ---------- D：一緒に作るなら（強み） ---------- */

.why-me {
    margin-bottom: 36px;
}

.why-me-head,
.contact-purposes-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 16px;
    color: var(--ui-ink);
    font-size: 17px;
}

.why-me-label,
.contact-purposes-label {
    color: #b42d34;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.why-me-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.why-me-list li {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 20px 22px;
    border: 2px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
}

.why-me-num {
    color: #b42d34;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.why-me-list li > b {
    color: var(--ui-ink);
    font-size: 15px;
    line-height: 1.5;
}

.why-me-list p {
    margin: 0;
    color: var(--color-text);
    font-size: 12.5px;
    line-height: 1.85;
}

.why-me-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 14px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--ui-panel);
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.8;
}

.why-me-next span {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ui-ink);
    color: #ffd54a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
}

/* ---------- A：目的別の窓口（メールの件名・本文のひな形つき） ---------- */

.contact-purposes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.purpose-card {
    --mode: #006ea8;
    --mode-soft: #e3f3fb;
    --mode-edge: #004f7a;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 2px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.purpose-card[data-mode="game"] { --mode: #b42d34; --mode-soft: #fde7e8; --mode-edge: #8a1f25; }
.purpose-card[data-mode="web"] { --mode: #137538; --mode-soft: #e6f6e4; --mode-edge: #0c5226; }

.purpose-label {
    justify-self: start;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mode-soft);
    color: var(--mode);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.purpose-card h3 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 16px;
}

.purpose-card p {
    margin: 0;
    color: var(--color-text);
    font-size: 12.5px;
    line-height: 1.8;
}

.purpose-card .purpose-can {
    padding-left: 10px;
    border-left: 3px solid var(--mode-soft);
    color: var(--ui-sub);
    font-size: 12px;
}

.purpose-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--mode);
    box-shadow: 0 4px 0 var(--mode-edge);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.purpose-button:hover {
    filter: brightness(1.08);
}

.purpose-button:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

:root:not(.motion-off) .purpose-button:active {
    translate: 0 3px;
    box-shadow: 0 1px 0 var(--mode-edge);
}

/* 入口で選んだ目的の窓口は「おすすめ」として目立たせる */
.purpose-card.is-recommended {
    border-color: var(--mode);
    box-shadow: 0 5px 0 var(--mode);
}

.purpose-card.is-recommended::before {
    position: absolute;
    top: -12px;
    right: 16px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mode);
    color: #fff;
    content: "▶ あなたにおすすめ";
    font-size: 10.5px;
    font-weight: 700;
}

:root[lang="en"] .purpose-card.is-recommended::before {
    content: "▶ For you";
}

.contact-reply {
    margin: 14px 0 28px;
    color: var(--ui-sub);
    font-size: 12.5px;
}

@media (max-width: 900px) {
    .mode-select-list,
    .why-me-list,
    .contact-purposes {
        grid-template-columns: 1fr;
    }

    .mode-card {
        padding: 12px 14px;
    }

    .mode-card-icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .purpose-card {
        padding: 18px;
    }
}

.contact-purposes-label {
    color: var(--accent);
}

/* 入口からのジャンプ先は、ヘッダーに隠れないように少し下で止める */
#quick-guide,
#web-works {
    scroll-margin-top: 110px;
}

/* ---------- このサイトの技術（What I Can Do の最後） ---------- */

.site-tech {
    margin-top: 48px;
    padding: 28px;
    border: 2px solid var(--ui-line);
    border-radius: 22px;
    background:
        var(--ui-dots),
        var(--ui-panel);
}

.site-tech-head {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
}

.site-tech-label {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.site-tech-head h3 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 20px;
    font-weight: 800;
}

.site-tech-head p {
    max-width: 720px;
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.8;
}

.site-tech-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-tech-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 18px 20px;
    border: 2px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 0 var(--ui-line);
}

.site-tech-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ui-panel);
    font-size: 20px;
}

.site-tech-card h4 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 15px;
    font-weight: 800;
}

.site-tech-card p {
    flex: 1;
    margin: 0;
    color: var(--color-text);
    font-size: 12.5px;
    line-height: 1.8;
}

.site-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.site-tech-tags span {
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef4fb;
    color: #00567f;
    font-size: 11px;
    font-weight: 700;
}

.site-tech-try {
    align-self: flex-start;
    margin-top: 4px;
    padding: 7px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--ui-ink);
    box-shadow: 0 4px 0 #000;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.site-tech-try:hover {
    background: var(--cyan-strong);
}

.site-tech-try:active {
    translate: 0 2px;
    box-shadow: 0 2px 0 #000;
}

.site-tech-try:focus-visible,
.site-tech-source:focus-visible,
.next-stage:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}

.site-tech-hint {
    margin-top: 4px;
    color: var(--ui-sub);
    font-size: 11.5px;
    font-weight: 700;
}

.site-tech-note:empty {
    display: none;
}

.site-tech-note {
    margin: 14px 0 0;
    color: var(--ui-sub);
    font-size: 12.5px;
}

.site-tech-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-top: 14px;
    color: var(--cyan-strong);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.site-tech-source img {
    width: 20px;
    height: auto;
}

.site-tech-source:hover {
    text-decoration: underline;
}

/* ---------- 次のステージへの案内（各セクションの最後） ---------- */

.next-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    width: fit-content;
    max-width: 100%;
    margin: 44px auto 0;
    padding: 10px 20px;
    border: 2px solid var(--ui-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 0 var(--ui-line);
    color: var(--ui-ink);
    font-size: 13px;
    text-decoration: none;
    transition: translate .2s ease, box-shadow .2s ease;
}

.next-stage:hover {
    translate: 0 -2px;
    box-shadow: 0 6px 0 var(--ui-line);
}

.next-stage-label {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.next-stage-num {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--ui-ink);
    color: #fff;
    font-size: 11px;
}

.next-stage-title {
    font-weight: 800;
}

.next-stage-sub {
    color: var(--ui-sub);
    font-size: 12px;
}

.next-stage-left {
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff4d6;
    color: #7a4a00;
    font-size: 11px;
    font-weight: 700;
}

.next-stage-arrow {
    color: var(--ui-sub);
    font-size: 10px;
}

:root:not(.motion-lite):not(.motion-off) .next-stage-arrow {
    animation: next-stage-bob 1.4s ease-in-out infinite;
}

@keyframes next-stage-bob {
    50% { translate: 0 3px; }
}

@media (max-width: 900px) {
    .site-tech-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .site-tech {
        margin-top: 32px;
        padding: 20px 16px;
    }

    /* スマホでは、強み（WHY ME）とこのサイトの技術を横スワイプにして、縦の長さを短くする */
    .why-me-list,
    .site-tech-list {
        display: flex;
        gap: 12px;
        padding: 6px 2px 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        scrollbar-width: none;
    }

    .why-me-list::-webkit-scrollbar,
    .site-tech-list::-webkit-scrollbar {
        display: none;
    }

    .why-me-list > li,
    .site-tech-list > li {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    /* 目的別の窓口：目的を選んだ人には、その窓口だけくわしく出す（ほかは見出しとボタンだけ） */
    :root[data-mode] .purpose-card:not(.is-recommended) > p,
    .purpose-card:not(.is-recommended) .purpose-can {
        display: none;
    }

    /* 代表作のあとの連絡ボタン：スマホでは小さくまとめる */
    .work-cta {
        gap: 8px 12px;
        margin-top: 28px;
        padding: 12px 14px;
    }

    .work-cta p {
        font-size: 12px;
        text-align: center;
    }

    .work-cta-button {
        padding: 8px 16px;
    }

    /* Blog：セクションの見出しと同じ説明文・ロゴは省いて、記事のカードを早く見せる */
    .blog-logo,
    .blog-intro-content > p {
        display: none;
    }

    /* スマホでは1行に収める（見出しの英語名と「連絡先まで あと○」だけ） */
    .next-stage {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 20px;
        padding: 7px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .next-stage-label,
    .next-stage-sub {
        display: none;
    }
}

/* ---------- スマホ：トップの動画と SELECT MODE の間の余白を詰める ---------- */

@media (max-width: 768px) {
    section.hero {
        padding-bottom: 28px;
    }

    main > section.summary {
        padding-top: 36px;
    }
}

/* ---------- 作品カードのプレイ映像（プレビュー） ---------- */

.work-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.work-card.is-previewing .work-preview {
    opacity: 1;
}

.work-thumb-hint {
    z-index: 2;
}

/* 映像のある作品の印（右上） */
.work-movie-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(17, 23, 19, .78);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    pointer-events: none;
    transition: background-color .2s ease;
}

.work-card.is-previewing .work-movie-badge {
    background: var(--red-strong);
}

/* 作品のポップアップ：画像の上で映像を流す */
.work-viewer-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #1d2520;
}

.work-viewer-media video[hidden] {
    display: none;
}

.work-viewer-badges {
    z-index: 1;
}

/* ========================================
   Main Works の最後：受賞作のプレイ映像への入口（js/main.js）
======================================== */

.works-bridge {
    display: flex;
    align-items: center;
    gap: 22px;
    width: min(100%, 1200px);
    margin: 28px auto 0;
    padding: 18px 22px;
    border: 2px solid #b8860b;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff6d6 0%, #ffe39a 100%);
    box-shadow: 0 5px 0 #a87a08;
    color: var(--ui-ink);
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s ease;
}

.works-bridge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #a87a08, 0 16px 30px rgba(242, 183, 5, .25);
}

.works-bridge:focus-visible {
    outline: 3px solid #00a3e0;
    outline-offset: 3px;
}

.works-bridge-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 8px;
    flex-shrink: 0;
}

.works-bridge-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border: 2px solid #b8860b;
    border-radius: 10px;
    background: #1d2520;
}

.works-bridge-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.works-bridge-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding-left: 2px;
    border-radius: 50%;
    background: rgba(17, 23, 19, .78);
    color: #fff;
    font-size: 11px;
    transform: translate(-50%, -50%);
}

.works-bridge-text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.works-bridge-label {
    color: #6b4a00;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}

.works-bridge-title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;
}

.works-bridge-names {
    color: #5b4a1f;
    font-size: 12.5px;
}

.works-bridge-go {
    justify-self: start;
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #1d2520;
    color: #ffd54a;
    font-size: 13px;
    font-weight: 900;
}

/* スマホ：サムネイルを横いっぱいに並べ、文字はその下 */
@media (max-width: 768px) {
    .works-bridge {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 20px;
        padding: 14px;
    }

    .works-bridge-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .works-bridge-title {
        font-size: 16px;
    }

    .works-bridge-go {
        justify-self: stretch;
        text-align: center;
        padding: 9px 14px;
    }
}

.motion-off .works-bridge {
    transition: none;
}

/* ししとうの最後：グランプリ作品 Falien への案内（js/main.js。見た目は上の入口カードと同じ） */
.works-next {
    width: 100%;
    max-width: 1200px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* すぐ下の「受賞作への入口」（金色）と見分けやすいよう、Falien の画面に合わせた青緑にする */
    border-color: #2a9d8f;
    background: linear-gradient(180deg, #ecfaf8 0%, #c6ece7 100%);
    box-shadow: 0 5px 0 #1f7a6f;
}

.works-next:hover {
    box-shadow: 0 8px 0 #1f7a6f, 0 16px 30px rgba(42, 157, 143, .22);
}

.works-next .works-bridge-thumb {
    border-color: #2a9d8f;
}

.works-next .works-bridge-label {
    color: #8a5a00;
}

.works-next .works-bridge-names {
    color: #2f514c;
}

.works-next .works-bridge-thumbs {
    grid-template-columns: 200px;
}

/* タブ：まだ選ばれていない Falien に「GRAND PRIX」の札を付ける（選ぶと「▶ SELECT」に替わる） */
.main-tab.is-grandprix:not([aria-selected="true"])::after {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 3px 10px;
    border: 1px solid #b8860b;
    border-radius: 999px;
    background: #ffd54a;
    color: #4a3300;
    content: "🏆 GRAND PRIX";
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.main-tabs {
    scroll-margin-top: 90px;
}

@media (max-width: 768px) {
    /* スマホ：サムネイルと文字を横に並べて、高さを抑える */
    .works-next {
        flex-direction: row;
        align-items: center;
    }

    .works-next .works-bridge-thumbs {
        width: 38%;
        grid-template-columns: minmax(0, 1fr);
    }

    .works-next .works-bridge-names {
        display: none;
    }

    .works-next .works-bridge-go {
        justify-self: start;
        padding: 6px 12px;
    }
}

@media (max-width: 600px) {
    .main-tab.is-grandprix:not([aria-selected="true"])::after {
        right: 8px;
    }
}

/* ========================================
   PC で読みやすく：本文に近い小さな文字を少し大きく（2026/11）
   PC から見る人（採用担当・学校の先生など）ほど、最後までじっくり読んでいたため。
   英字の小見出し（GAME WORKS など）は飾りなので、そのままにしている
======================================== */

@media (min-width: 1024px) {
    #summary .mode-card-text small { font-size: 12.5px; }
    #summary .summary-item dt { font-size: 13px; }
    #summary .summary-item dd p,
    #summary .summary-tags li,
    #summary li > a > span { font-size: 13.5px; }

    #featured-works .tech-step p code { font-size: 12.5px; }
    #featured-works .tech-note,
    #featured-works .tech-tags li { font-size: 13px; }
    #featured-works .tech-photo-caption,
    #featured-works .tech-review figcaption,
    #featured-works .works-bridge-names { font-size: 13.5px; }

    #other-works .work-description { font-size: 13.5px; }
    #other-works :is(.work-genre, .work-role, .work-tech, .work-period) { font-size: 12px; }
    #other-works .works-pickup-genre { font-size: 13px; }

    #play-games .play-card p,
    #play-games .web-card-note { font-size: 13.5px; }
    #play-games .play-card div > span,
    #play-games .web-card-points li,
    #play-games .web-card-link { font-size: 12.5px; }

    #what-i-can-do .status-class,
    #what-i-can-do .exp-label,
    #what-i-can-do .site-tech-card p { font-size: 13.5px; }
    #what-i-can-do .can-do-example { font-size: 13px; }
    #what-i-can-do .can-do-tags span,
    #what-i-can-do .site-tech-tags span { font-size: 11.5px; }
    #what-i-can-do .site-tech-hint { font-size: 12.5px; }

    #contact .why-me-list li p,
    #contact .purpose-card p { font-size: 14px; }
    #contact .purpose-card p.purpose-can { font-size: 13px; }
    #contact .contact-reply { font-size: 13.5px; }
    #contact .sns-card p { font-size: 12.5px; }

    .next-stage-left { font-size: 12px; }
}

/* ========================================
   スマホの第一印象（2026/11）
   ・開いた最初の画面に「ゲームの画面（ししとうの映像）」が入るように、見出しのすぐ下に映像を出す
     （前は文字とバッジとボタンが続き、映像はスクロールしないと見えなかった）
   ・実績バッジは小さくして横に並べ、縦の長さを詰める
======================================== */

@media (max-width: 600px) {
    .hero {
        gap: 0;
        padding-top: 104px;
    }

    .hero-content {
        display: contents;
    }

    .hero-eyebrow { order: 1; }
    .hero-content h1 { order: 2; }
    .hero-lead { order: 3; }
    .hero-screen {
        order: 4;
        grid-row: auto;
        margin: 18px 0 4px;
    }
    .hero-badges { order: 5; }
    .hero-actions { order: 6; }
    .hero-news { order: 7; }
    .hero-index { order: 8; }

    .hero-lead {
        margin-top: 10px;
        line-height: 1.75;
    }

    .hero-badges {
        gap: 6px;
        margin-top: 14px;
    }

    .hero-badges li {
        padding: 4px 10px;
        font-size: 11px;
        box-shadow: 0 2px 0 var(--ui-line);
    }

    .hero-actions {
        margin-top: 16px;
    }
}


/* ========================================
   NEW の印（OPTIONS のボタンと、OPTIONS の中の「表示モード」）
   ・NEW モードを追加したことを知らせる。ゲームのメニューの「NEW!」のような赤い札
======================================== */

.settings-button {
    position: relative;
}

.settings-new {
    position: absolute;
    top: -9px;
    right: -10px;
    padding: 1px 6px 2px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #c8102e;
    box-shadow: 0 2px 0 #8c0b20;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.4;
    pointer-events: none;
    transform: rotate(8deg);
    animation: settings-new-pop 2.4s ease-in-out infinite;
}

.settings-new.is-inline {
    position: static;
    display: inline-block;
    margin-left: 8px;
    vertical-align: 2px;
    transform: rotate(-4deg);
    animation: none;
}

@keyframes settings-new-pop {
    0%, 84%, 100% { transform: rotate(8deg) scale(1); }
    90% { transform: rotate(8deg) scale(1.18); }
}

html.motion-off .settings-new {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .settings-new {
        animation: none;
    }
}