/* ============================================================
   DRAW SHOOTER — ゲーム紹介・ライセンスのページ（日英共通・style.css の上に重ねる）
   素材：../image/ui/*.webp（Adobe Stock の UI 素材から切り出したもの）
   ============================================================ */

/* iPhone で背景が白くなった ( 2026-10-07 本人のスクショ。パネルの外が白 )。背景を body だけに置き、輪 ( ::after ) を z-index:-1 でページの一番下の層に
   置いていたため、iPhone の WebKit で body の背景が画面全体に広がらず、下地の白が見えていた ( Mac の WebKit では再現しない )。
   下地 ( html ) に暗い色を敷き、輪は body の中に閉じこめる ( isolation ) ので、body の背景の上・本文の下に出る。この CSS は紹介・ライセンスの4ページだけが読む */
html {
    background-color: #020306;
    color-scheme: dark;
}

body.about-page {
    isolation: isolate;
}

html.ds-page body.about-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(84, 245, 255, .1), transparent 34rem),
        linear-gradient(180deg, #050a12, #020306 70%);
}

html.ds-page body.about-page::before {
    opacity: .5;
    background-image:
        radial-gradient(circle, rgba(84, 245, 255, .16) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

/* 背景の大きなスキャンの輪 */
html.ds-page body.about-page::after {
    content: '';
    position: fixed;
    left: 50%;
    top: 46%;
    z-index: -1;
    width: min(150vw, 1300px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url('../image/ui/scan-ring.webp') center / contain no-repeat;
    opacity: .05;
    pointer-events: none;
    animation: ds-page-spin 120s linear infinite;
}

@keyframes ds-page-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

html.ds-page #about-container {
    position: relative;
    z-index: 0;
}

/* ---------- 共通：四隅のブラケット枠 ---------- */
html.ds-page .ds-corners,
html.ds-page #about-container .guide-section,
html.ds-page #about-container .sound-credit,
html.ds-page #about-container .license-card {
    --bc: 84, 245, 255;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) left top / 16px 1.5px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) left top / 1.5px 16px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) right top / 16px 1.5px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) right top / 1.5px 16px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) left bottom / 16px 1.5px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) left bottom / 1.5px 16px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) right bottom / 16px 1.5px no-repeat,
        linear-gradient(rgba(var(--bc), .85), rgba(var(--bc), .85)) right bottom / 1.5px 16px no-repeat,
        linear-gradient(180deg, rgba(7, 22, 36, .86), rgba(2, 8, 18, .78));
    box-shadow: inset 0 0 0 1px rgba(var(--bc), .14);
}

/* ---------- ヒーロー ---------- */
html.ds-page #about-container .about-hero {
    min-height: 0;
    padding: clamp(28px, 6vw, 54px) clamp(18px, 5vw, 56px) clamp(26px, 5vw, 44px);
    border-style: solid;
    border-color: transparent;
    border-width: clamp(14px, 3vw, 24px) clamp(24px, 5.4vw, 43px);
    border-radius: 0;
    border-image: url('../image/ui/hud-frame.webp') 50 90 / clamp(14px, 3vw, 24px) clamp(24px, 5.4vw, 43px) stretch;
    background: radial-gradient(ellipse at 50% 40%, rgba(5, 32, 48, .92), rgba(1, 7, 16, .92) 72%) padding-box;
    box-shadow: none;
    text-align: center;
}

html.ds-page .about-hero::before,
html.ds-page .about-hero::after,
html.ds-page .about-hero__visual {
    display: none;
}

html.ds-page .about-hero__status {
    position: static;
    justify-content: space-between;
    margin-bottom: clamp(14px, 3vw, 22px);
}

html.ds-page .about-hero__copy {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    justify-items: center;
}

html.ds-page #about-container .about-hero__eyebrow {
    display: grid;
    place-items: center;
    width: min(100%, 340px);
    aspect-ratio: 558 / 129;
    margin: 0 auto 6px;
    padding: 1.06% 0 0;
    background: url('../image/ui/hud-banner.webp') center / 100% 100% no-repeat;
    color: #c8faff;
    font-family: 'Courier New', monospace;
    font-size: clamp(10px, 2.6vw, 13px);
    line-height: 1;
    letter-spacing: .2em;
    text-indent: .2em;
    white-space: nowrap;
}

html.ds-page #about-container .about-hero h1.has-logo {
    width: min(100%, 560px);
    margin: clamp(10px, 2.4vw, 18px) auto clamp(12px, 2.6vw, 20px);
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
    animation: none;
}

html.ds-page #about-container .about-hero h1.has-logo > span,
html.ds-page #about-container .about-hero h1.has-logo::before {
    display: none;
}

html.ds-page #about-container .about-hero__label {
    color: rgba(160, 238, 255, .78);
}

html.ds-page #about-container .about-intro {
    max-width: 34em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- ボタン（ゲーム本体と同じ plate） ---------- */
html.ds-page .back-link,
html.ds-page .about-hero__play {
    --c: 84, 245, 255;
    --cut: 12px;
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    gap: 3px;
    min-width: min(100%, 300px);
    height: 64px;
    padding: 0 44px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(rgba(var(--c), .6), rgba(var(--c), .6)) left center / 1px 54% no-repeat,
        linear-gradient(rgba(var(--c), .6), rgba(var(--c), .6)) right center / 1px 54% no-repeat;
    box-shadow: none;
    color: #f2feff;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(var(--c), .85);
    filter: drop-shadow(0 0 12px rgba(var(--c), .28));
    transition: filter .2s, transform .2s;
}

html.ds-page .back-link::before,
html.ds-page .back-link::after,
html.ds-page .about-hero__play::before,
html.ds-page .about-hero__play::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

html.ds-page .back-link::before,
html.ds-page .about-hero__play::before {
    inset: 0 7px;
    background: rgb(var(--c));
}

html.ds-page .back-link::after,
html.ds-page .about-hero__play::after {
    --cut: 11.4px;
    inset: 1.5px 8.5px;
    background:
        linear-gradient(rgb(var(--c)), rgb(var(--c))) left 12px center / 4px 36% no-repeat,
        linear-gradient(rgba(var(--c), .55), rgba(var(--c), .55)) left 20px center / 2px 36% no-repeat,
        linear-gradient(rgb(var(--c)), rgb(var(--c))) right 12px center / 4px 36% no-repeat,
        linear-gradient(rgba(var(--c), .55), rgba(var(--c), .55)) right 20px center / 2px 36% no-repeat,
        linear-gradient(180deg, rgba(var(--c), .24), rgba(var(--c), .07) 62%, rgba(var(--c), .12)),
        #03121e;
}

html.ds-page .back-link:hover,
html.ds-page .back-link:focus-visible,
html.ds-page .about-hero__play:hover,
html.ds-page .about-hero__play:focus-visible {
    transform: translateY(-2px);
    background:
        linear-gradient(rgba(var(--c), .6), rgba(var(--c), .6)) left center / 1px 54% no-repeat,
        linear-gradient(rgba(var(--c), .6), rgba(var(--c), .6)) right center / 1px 54% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 20px rgba(var(--c), .55)) brightness(1.12);
    outline: none;
}

html.ds-page .back-link span,
html.ds-page .about-hero__play span {
    font-size: 20px;
    line-height: 1;
    letter-spacing: .12em;
    text-indent: .12em;
}

html.ds-page .back-link small,
html.ds-page .about-hero__play small {
    line-height: 1;
}

/* ---------- 目次 ---------- */
html.ds-page .manual-nav {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 14px;
    border: 0;
    background: none;
    box-shadow: none;
}

html.ds-page .manual-nav a {
    border: 0;
    background: rgba(4, 18, 30, .78);
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .28);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

@media (max-width: 640px) {
    html.ds-page .manual-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

html.ds-page .manual-nav a:hover,
html.ds-page .manual-nav a:focus-visible {
    background: rgba(84, 245, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .7);
}

/* ---------- 節 ---------- */
html.ds-page #about-container .guide-section {
    margin-top: 16px;
    padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 34px);
    overflow: visible;
}

html.ds-page .guide-section::after {
    display: none;
}

html.ds-page #about-container .guide-section > h2 {
    gap: 12px;
}

html.ds-page .guide-section > h2::before {
    padding: 3px 7px 2px;
    background: rgba(255, 209, 102, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .45);
    border: 0;
}

/* 中の札：左だけの太線をやめ、四辺同じ細枠＋角の印 */
html.ds-page #about-container .control-steps li,
html.ds-page #about-container .weapon-card,
html.ds-page #about-container .mode-card,
html.ds-page #about-container .train-steps li {
    --wc: var(--weapon-color, #54f5ff);
    position: relative;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(var(--wc), var(--wc)) left top / 10px 1.5px no-repeat,
        linear-gradient(var(--wc), var(--wc)) left top / 1.5px 10px no-repeat,
        linear-gradient(var(--wc), var(--wc)) right bottom / 10px 1.5px no-repeat,
        linear-gradient(var(--wc), var(--wc)) right bottom / 1.5px 10px no-repeat,
        linear-gradient(160deg, color-mix(in srgb, var(--wc) 9%, transparent), rgba(0, 0, 0, .22) 60%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc) 24%, transparent);
}

html.ds-page #about-container .weapon-card::after,
html.ds-page #about-container .mode-card::after {
    display: none;
}

html.ds-page #about-container .weapon-card:hover,
html.ds-page #about-container .mode-card:hover {
    transform: none;
}

/* 武器の札：形のアイコン（ゲーム内の判定札と同じ図） */
html.ds-page .weapon-card .ds-shape {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    fill: none;
    stroke: var(--weapon-color);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px var(--weapon-color));
}

/* 補足の一文：左の線をやめて、札＋細枠 */
html.ds-page #about-container .tip-line {
    position: relative;
    padding: 12px 14px 12px 64px;
    border: 0;
    background: rgba(255, 209, 102, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .3);
}

html.ds-page #about-container .tip-line::before {
    content: 'TIP';
    position: absolute;
    left: 14px;
    top: 13px;
    padding: 2px 7px 1px;
    background: rgba(255, 209, 102, .16);
    color: #ffd166;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* 練習モードの手順 */
html.ds-page .train-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: train;
}

html.ds-page #about-container .train-steps li {
    counter-increment: train;
    padding: 14px 12px 12px;
    --weapon-color: #62ff9b;
}

html.ds-page .train-steps li::before {
    content: counter(train, decimal-leading-zero);
    display: block;
    margin-bottom: 4px;
    color: #62ff9b;
    font-family: var(--display-font);
    font-size: 17px;
    letter-spacing: .06em;
}

html.ds-page .train-steps b {
    display: block;
    margin-bottom: 3px;
    color: #eaffff;
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .08em;
}

@media (max-width: 760px) {
    html.ds-page .train-steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    html.ds-page .train-steps {
        grid-template-columns: 1fr;
    }
}

/* クレジット */
html.ds-page #about-container .sound-credit {
    --bc: 255, 209, 102;
    margin-top: 16px;
    padding: clamp(22px, 4vw, 30px);
}

html.ds-page .sound-credit::after {
    display: none;
}

/* ---------- フッター（他のゲームと同じ形） ---------- */
html.ds-page .about-footer {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-top: 30px;
}

html.ds-page #about-container .about-footer .credit-line,
html.ds-page #about-container .about-footer .link-line {
    margin: 0;
    color: rgba(189, 248, 255, .66);
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

html.ds-page #about-container .about-footer .credit-line {
    margin-top: 6px;
}

html.ds-page #about-container .about-footer a:not(.back-link) {
    color: #bdf8ff;
    text-decoration: none;
}

html.ds-page #about-container .about-footer a:not(.back-link):hover,
html.ds-page #about-container .about-footer a:not(.back-link):focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- ライセンス ---------- */
html.ds-page .license-hero {
    text-align: center;
    padding: clamp(28px, 6vw, 48px) 16px clamp(18px, 4vw, 30px);
}

html.ds-page .license-hero .ds-tag {
    display: inline-grid;
    place-items: center;
    width: min(80vw, 300px);
    aspect-ratio: 558 / 129;
    padding: 1.06% 0 0;
    background: url('../image/ui/hud-banner.webp') center / 100% 100% no-repeat;
    color: #c8faff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .2em;
    text-indent: .2em;
}

html.ds-page #about-container .license-hero h1 {
    margin: 14px 0 10px;
    color: #eaffff;
    font-size: clamp(30px, 7vw, 44px);
    letter-spacing: .12em;
    text-indent: .12em;
    text-shadow: 0 0 18px rgba(84, 245, 255, .6);
}

html.ds-page .license-hero p {
    color: rgba(214, 246, 250, .78);
    font-size: 14px;
}

html.ds-page #about-container .license-card {
    margin-top: 14px;
    padding: 20px clamp(18px, 4vw, 28px);
}

html.ds-page #about-container .license-card h2 {
    margin: 0 0 10px;
    color: #54f5ff;
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .12em;
}

html.ds-page #about-container .license-card h3 {
    margin: 12px 0 4px;
    color: #eaffff;
    font-size: 15px;
    letter-spacing: .04em;
    text-shadow: none;
}

html.ds-page #about-container .license-card p {
    margin: 0 0 6px;
    color: rgba(214, 246, 250, .82);
    font-size: 13px;
    line-height: 1.8;
}

html.ds-page #about-container .license-card a {
    color: #8ff6ff;
    text-underline-offset: 3px;
}

html.ds-page .license-thanks {
    margin: 22px 0 0;
    line-height: 1.8;
    color: rgba(214, 246, 250, .78);
    font-size: 13px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    html.ds-page body.about-page::after {
        animation: none;
    }
}