/*
 * Y2K 補助ページ（遊び方・ライセンス）2026-10-01
 * 各ページの <style> の後に読み込んで上書きする。素材は sprites/ui/（y2k.css と共通）。
 * 配色：紺 #030716 / シアン #62f6ff / マゼンタ #ff3fd0 / 紫 #b07bff / 黄 #fff36b / 銀 #dfe7f2
 */

:root {
    --y2k-navy: #030716;
    --y2k-ink: #041026;
    --y2k-cyan: #62f6ff;
    --y2k-magenta: #ff3fd0;
    --y2k-violet: #b07bff;
    --y2k-yellow: #fff36b;
    --y2k-silver: #dfe7f2;
    --y2k-chrome: linear-gradient(180deg, #ffffff 0%, #e3ebf7 34%, #7e8ba4 49%, #f6f9ff 58%, #a9b6cc 78%, #eef3fb 100%);
}

body.y2k-page {
    position: relative;
    padding: 46px clamp(12px, 3vw, 24px) 54px;
    background:
        linear-gradient(rgba(98, 246, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(98, 246, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(circle at 50% 0%, rgba(98, 246, 255, 0.12), transparent 48%),
        radial-gradient(circle at 10% 100%, rgba(255, 63, 208, 0.12), transparent 40%),
        var(--y2k-navy);
    color: #cfeeff;
    text-shadow: none;
    overflow-x: hidden;
}

/* 上下の流れる文字帯 */
.y2k-page-ticker {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 20;
    height: 22px;
    overflow: hidden;
    border-block: 1px solid rgba(98, 246, 255, 0.45);
    background: rgba(3, 7, 22, 0.94);
    color: var(--y2k-cyan);
    font: 10px/20px 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.16em;
    white-space: nowrap;
    pointer-events: none;
}
.y2k-page-ticker.top { top: 0; }
.y2k-page-ticker.bottom { bottom: 0; background: var(--y2k-cyan); color: var(--y2k-ink); }
.y2k-page-ticker b { color: var(--y2k-magenta); font-weight: normal; }
.y2k-page-ticker.bottom b { color: var(--y2k-ink); }
.y2k-page-ticker span { display: inline-block; animation: y2kp-ticker 80s linear infinite; }
.y2k-page-ticker.bottom span { animation-direction: reverse; animation-duration: 70s; }

/* 余白の装飾（PCで左右、スマホでは見出しのまわりだけ） */
.y2k-page-deco {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.y2k-page-deco i {
    position: absolute;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.y2k-page-deco .mask {
    background: var(--tone, var(--y2k-cyan));
    -webkit-mask: var(--src) center / contain no-repeat;
    mask: var(--src) center / contain no-repeat;
}
.pd-globe { left: -6vw; top: 12vh; width: 30vw; max-width: 380px; aspect-ratio: 700 / 666; background-image: url("sprites/ui/cy-globe.webp"); opacity: 0.35; animation: y2kp-float 10s ease-in-out infinite; }
.pd-torus { right: -4vw; top: 9vh; width: 24vw; max-width: 340px; aspect-ratio: 650 / 417; background-image: url("sprites/ui/cy-torus.webp"); opacity: 0.6; animation: y2kp-float 8s ease-in-out infinite reverse; }
.pd-kx19 { left: 3vw; top: 52vh; width: 13vw; max-width: 180px; aspect-ratio: 650 / 545; --src: url("sprites/ui/hd-kx19.webp"); opacity: 0.5; }
.pd-radar { right: 4vw; top: 46vh; width: 9vw; max-width: 120px; aspect-ratio: 524 / 650; --src: url("sprites/ui/hd-radar.webp"); opacity: 0.45; }
.pd-cubes { left: 2vw; bottom: 6vh; width: 18vw; max-width: 260px; aspect-ratio: 650 / 386; background-image: url("sprites/ui/cy-cubes.webp"); opacity: 0.55; }
.pd-planet { right: 2vw; bottom: 5vh; width: 16vw; max-width: 230px; aspect-ratio: 600 / 596; background-image: url("sprites/ui/cy-planet.webp"); opacity: 0.6; }
.pd-chrome {
    width: var(--s);
    height: var(--s);
    background-image: url("sprites/chrome-atlas.webp?v=20261001");
    background-size: calc(var(--s) * 2048 / var(--fw)) auto;
    background-position: calc(var(--s) * var(--fx) / var(--fw) * -1) calc(var(--s) * var(--fy) / var(--fw) * -1);
    filter: drop-shadow(0 0 10px rgba(98, 246, 255, 0.5));
}
.pd-chrome.c24 { --fx: 870; --fy: 0; --fw: 448; --s: clamp(70px, 9vw, 130px); left: 7vw; top: 30vh; animation: y2kp-spin 32s linear infinite; }
.pd-chrome.c22 { --fx: 440; --fy: 0; --fw: 448; --s: clamp(60px, 7vw, 110px); right: 9vw; top: 30vh; animation: y2kp-spin 40s linear infinite reverse; }
.pd-chrome.c13 { --fx: 944; --fy: 853; --fw: 192; --s: 34px; animation: y2kp-twinkle 3s ease-in-out infinite; }
.pd-chrome.t1 { left: 18vw; top: 20vh; }
.pd-chrome.t2 { right: 16vw; top: 70vh; animation-delay: -1.2s; }

/* 本文のウィンドウ */
body.y2k-page .about-container {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 0;
    border: 2px solid var(--y2k-cyan);
    border-radius: 0;
    background: rgba(3, 7, 22, 0.93);
    box-shadow: 6px 6px 0 var(--y2k-magenta), 0 0 34px rgba(98, 246, 255, 0.2);
}
.y2k-page-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0 6px 0 10px;
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    font: 11px/1 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.14em;
}
.y2k-page-titlebar .ctrl { display: flex; gap: 4px; }
.y2k-page-titlebar .ctrl i {
    display: grid;
    width: 15px;
    height: 15px;
    place-items: center;
    border: 1px solid var(--y2k-ink);
    font-style: normal;
    font-size: 10px;
}
.y2k-page-body {
    padding: 26px clamp(18px, 4.5vw, 40px) 30px;
}

/* 見出しまわりのステッカー */
.y2k-page-hero {
    position: relative;
    padding: 18px 0 8px;
    text-align: center;
}
.y2k-page-hero .tag {
    display: inline-block;
    padding: 5px 12px 5px 28px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, var(--y2k-ink) 0 1px, transparent 1px 3px, var(--y2k-ink) 3px 5px, transparent 5px 6px) 8px 50% / 13px 60% no-repeat,
        var(--y2k-cyan);
    color: var(--y2k-ink);
    font: 10px/1.2 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.22em;
    box-shadow: 3px 3px 0 var(--y2k-magenta);
    transform: rotate(-2deg);
}
.y2k-page-hero .stk {
    position: absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.y2k-page-hero .stk-aa { left: -8px; top: -6px; width: clamp(54px, 11vw, 84px); aspect-ratio: 1; background-image: url("sprites/ui/st-aa.webp"); transform: rotate(-10deg); }
.y2k-page-hero .stk-11 { right: 6px; top: 0; width: clamp(34px, 6vw, 52px); aspect-ratio: 450 / 421; background: var(--y2k-magenta); -webkit-mask: url("sprites/ui/hd-11.webp") center / contain no-repeat; mask: url("sprites/ui/hd-11.webp") center / contain no-repeat; }
.y2k-page-hero .stk-sparkle { right: 12%; bottom: 0; width: clamp(18px, 3.4vw, 28px); aspect-ratio: 215 / 375; background-image: url("sprites/ui/pk-sparkle.webp"); transform: rotate(8deg); }

body.y2k-page h1 {
    margin: 14px 0 18px;
    color: transparent;
    background: var(--y2k-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(30px, 7vw, 48px);
    line-height: 1;
    letter-spacing: 0.05em;
    text-shadow: none;
    filter: drop-shadow(3px 0 0 rgba(255, 63, 208, 0.85)) drop-shadow(-3px 0 0 rgba(98, 246, 255, 0.85));
    animation: none;
}
body.y2k-page h1 .ja {
    display: block;
    margin-top: 8px;
    font-family: 'DotGothic16', Arial, sans-serif;
    font-size: 0.42em;
    letter-spacing: 0.2em;
}

/* 節の見出し：番号付きの札 */
body.y2k-page {
    counter-reset: y2kp-section;
}
body.y2k-page section {
    position: relative;
    margin-top: 30px;
    padding: 18px 18px 6px;
    border: 1px dashed rgba(98, 246, 255, 0.3);
    background: rgba(1, 4, 14, 0.6);
}
body.y2k-page section::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 52px;
    height: 5px;
    background: repeating-linear-gradient(90deg, var(--y2k-magenta) 0 5px, transparent 5px 8px);
}
body.y2k-page h2 {
    counter-increment: y2kp-section;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: -32px 0 14px -6px;
    padding: 6px 12px;
    border: 0;
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    font-size: clamp(15px, 3.4vw, 19px);
    letter-spacing: 0.08em;
    text-shadow: none;
    box-shadow: 3px 3px 0 var(--y2k-magenta);
}
body.y2k-page h2::before {
    content: counter(y2kp-section, decimal-leading-zero);
    padding: 2px 5px;
    background: var(--y2k-ink);
    color: var(--y2k-cyan);
    font-size: 0.72em;
}
body.y2k-page section:nth-of-type(even) h2 {
    background: var(--y2k-silver);
    box-shadow: 3px 3px 0 var(--y2k-cyan);
}

body.y2k-page p,
body.y2k-page li {
    color: #d7f1ff;
    font-size: 15px;
    line-height: 1.85;
}
body.y2k-page ul {
    padding-left: 2px;
}
body.y2k-page li {
    padding-left: 24px;
}
body.y2k-page li::before {
    content: "▶";
    top: 2px;
    color: var(--y2k-magenta);
    font-size: 11px;
    text-shadow: none;
}
body.y2k-page strong {
    color: var(--y2k-yellow);
    text-shadow: none;
}
body.y2k-page a {
    color: var(--y2k-cyan);
    text-underline-offset: 3px;
}

/* 特殊な敵の行：敵と同じクロームの形を添える */
body.y2k-page li.enemy {
    min-height: 54px;
    padding-left: 66px;
}
body.y2k-page li.enemy::before {
    content: "";
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    background-image: url("sprites/chrome-atlas.webp?v=20261001");
    background-repeat: no-repeat;
    background-size: calc(52px * 2048 / var(--fw)) auto;
    background-position: calc(52px * var(--fx) / var(--fw) * -1) calc(52px * var(--fy) / var(--fw) * -1);
    filter: drop-shadow(0 0 7px var(--tone));
}
body.y2k-page li.enemy.bomb { --fx: 662; --fy: 450; --fw: 256; --tone: #ff6b3d; }
body.y2k-page li.enemy.shield { --fx: 234; --fy: 853; --fw: 256; --tone: #55b9ff; }
body.y2k-page li.enemy.spark { --fx: 1177; --fy: 450; --fw: 256; --tone: #ffe45e; }
body.y2k-page li.enemy.magnet { --fx: 870; --fy: 0; --fw: 448; --tone: #ff67d7; }
body.y2k-page li.enemy strong { color: var(--tone); }

/* 区切りのステッカー帯 */
.y2k-page-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 24px);
    margin: 30px 0 4px;
    pointer-events: none;
}
.y2k-page-strip i {
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.y2k-page-strip .s-caution { width: clamp(110px, 28vw, 170px); aspect-ratio: 650 / 408; background-image: url("sprites/ui/st-caution.webp"); transform: rotate(-4deg); }
.y2k-page-strip .s-future { width: clamp(120px, 30vw, 190px); aspect-ratio: 800 / 499; background-image: url("sprites/ui/st-future.webp"); transform: rotate(3deg); }
.y2k-page-strip .s-danger { width: clamp(70px, 18vw, 110px); aspect-ratio: 700 / 580; background-image: url("sprites/ui/st-danger.webp"); transform: rotate(-8deg); }
.y2k-page-strip .s-error { width: clamp(110px, 28vw, 170px); aspect-ratio: 650 / 353; background-image: url("sprites/ui/cy-error.webp"); transform: rotate(-3deg); }
.y2k-page-strip .s-wave { width: clamp(130px, 32vw, 210px); aspect-ratio: 700 / 390; background-image: url("sprites/ui/st-wave.webp"); transform: rotate(3deg); }

/* クレジット欄：銀のステッカー */
body.y2k-page .sound-credit,
body.y2k-page .credit-card {
    border: 2px solid var(--y2k-ink);
    border-radius: 14px;
    background: var(--y2k-silver);
    box-shadow: 0 0 0 2px var(--y2k-silver), 4px 5px 0 2px rgba(0, 0, 0, 0.5);
}
body.y2k-page .sound-credit h2 {
    margin-top: -32px;
}
body.y2k-page .sound-credit p,
body.y2k-page .credit-card p,
body.y2k-page .credit-card strong {
    color: var(--y2k-ink);
}
body.y2k-page .sound-credit strong {
    color: var(--y2k-ink);
}
body.y2k-page .sound-credit a,
body.y2k-page .credit-card a {
    color: #6a12a8;
}
body.y2k-page .credit-thanks {
    color: #33415a !important;
}
body.y2k-page .credit-card {
    margin: 0 0 14px;
    padding: 12px 16px;
}
body.y2k-page .credit-card strong {
    display: block;
    font-family: 'Tiny5', Arial, sans-serif;
    font-weight: normal;
    letter-spacing: 0.08em;
}
body.y2k-page .credit-card p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
}

/* 戻る操作とフッター */
body.y2k-page .navigation-links {
    margin: 34px 0 10px;
}
body.y2k-page .button-style {
    position: relative;
    min-width: 230px;
    border: 2px solid var(--y2k-ink);
    border-radius: 3px;
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    letter-spacing: 0.1em;
    box-shadow: inset 0 -5px 0 rgba(4, 16, 38, 0.22), 0 0 0 1px var(--y2k-cyan), 4px 4px 0 1px var(--y2k-magenta);
}
body.y2k-page .button-style::before {
    content: "◀";
    margin-right: 10px;
    font-size: 0.8em;
}
body.y2k-page .button-style:hover,
body.y2k-page .button-style:focus-visible {
    background: var(--y2k-ink);
    color: var(--y2k-cyan);
}
.y2k-page-footer {
    margin: 18px 0 0;
    padding: 12px 0 0;
    border-top: 1px dashed rgba(98, 246, 255, 0.3);
    color: rgba(191, 230, 245, 0.85);
    font: 12px/1.8 'DotGothic16', Arial, sans-serif;
    text-align: center;
}
.y2k-page-footer p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.y2k-page-footer a {
    color: var(--y2k-cyan);
    text-decoration: none;
}
.y2k-page-footer a:hover,
.y2k-page-footer a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

@keyframes y2kp-ticker { to { transform: translateX(-50%); } }
@keyframes y2kp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes y2kp-spin { to { transform: rotate(360deg); } }
@keyframes y2kp-twinkle { 0%, 100% { scale: 0.55; opacity: 0.5; rotate: 0deg; } 50% { scale: 1.1; opacity: 1; rotate: 45deg; } }

/* 狭い画面では余白の装飾を減らし、本文を読みやすく */
@media (max-width: 900px) {
    .pd-kx19, .pd-radar, .pd-cubes, .pd-planet, .pd-chrome.t1, .pd-chrome.t2 { display: none; }
    .pd-globe { width: 70vw; left: -20vw; top: 4vh; opacity: 0.18; }
    .pd-torus { width: 46vw; right: -14vw; top: 3vh; opacity: 0.35; }
    .pd-chrome.c24, .pd-chrome.c22 { opacity: 0.35; }
}

@media (max-width: 600px) {
    body.y2k-page { padding: 34px 8px 40px; }
    body.y2k-page section { padding: 18px 12px 4px; }
    body.y2k-page li.enemy { padding-left: 58px; }
    body.y2k-page li.enemy::before { width: 46px; height: 46px; background-size: calc(46px * 2048 / var(--fw)) auto; background-position: calc(46px * var(--fx) / var(--fw) * -1) calc(46px * var(--fy) / var(--fw) * -1); }
}

@media (prefers-reduced-motion: reduce) {
    .y2k-page-ticker span,
    .y2k-page-deco i {
        animation: none !important;
    }
}

/* 銀のクレジット欄の見出しは、札が地に埋もれないようシアンに固定 */
body.y2k-page section.sound-credit h2 {
    background: var(--y2k-cyan);
    box-shadow: 3px 3px 0 var(--y2k-magenta);
}