/* ============================================================
   DRAW SHOOTER — HUD skin（日英共通・style.css の上に重ねる）
   素材：../image/ui/*.webp（Adobe Stock の UI 素材から切り出したもの）
   ============================================================ */

#game-container {
    container-type: size;
}

html.ds-hud .hide {
    display: none !important;
}

/* ---------- 起動時：装飾の画像がそろうまで、装飾だけ待つ ---------- */
.ds-banner,
#drawModeBtn,
#aboutBtn,
#trainingBtn,
.quick-guide span {
    transition: opacity .35s ease, transform .35s ease;
}

body:not(.ds-ready) .ds-banner,
body:not(.ds-ready) .quick-guide span {
    opacity: 0;
}

/* ============================================================
   タイトル
   ============================================================ */
html.ds-hud #instructions {
    top: 6.4cqh;
    transform: translateX(-50%);
    width: 93cqw;
    max-height: 66cqh;
    padding: 1.4cqh 1.4cqw 1.4cqh;
    border-style: solid;
    border-color: transparent;
    border-width: 3cqw 5.4cqw;
    border-image: url('../image/ui/hud-frame.webp') 50 90 / 3cqw 5.4cqw stretch;
    clip-path: none;
    background: radial-gradient(ellipse at 50% 34%, rgba(4, 30, 46, .9), rgba(1, 7, 16, .9) 74%) padding-box;
    box-shadow: none;
    overflow: visible;
}

html.ds-hud #instructions h1.draw-title.has-logo {
    position: relative;
    margin: 1.6cqh auto 2cqh;
    width: 94%;
    animation: none;
}

html.ds-hud .draw-title.has-logo > span,
html.ds-hud .draw-title.has-logo::before {
    display: none;
}

html.ds-hud .draw-title.has-logo {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-shadow: none !important;
}

/* ---------- ロゴ（点と線） ---------- */
.ds-logo svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.ds-logo__line {
    fill: none;
    stroke: #bff9ff;
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 2.5px rgba(84, 245, 255, .9));
}

.ds-logo__line:not(.is-hand) {
    stroke: #8dffd8;
    filter: drop-shadow(0 0 2.5px rgba(98, 255, 200, .9));
}

.ds-logo__line.is-hand {
    stroke: #eaffff;
    stroke-width: 1.35;
}

.ds-logo__dot {
    fill: var(--c);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--c));
}

.ds-logo.is-play .ds-logo__line {
    animation: ds-logo-line var(--t) var(--d) cubic-bezier(.45, .1, .3, 1) forwards;
}

.ds-logo.is-play .ds-logo__dot {
    animation: ds-logo-dot .42s var(--d) cubic-bezier(.2, 1.6, .4, 1) forwards;
}

.ds-logo.is-idle .ds-logo__line {
    animation: none;
    stroke-dashoffset: 0;
}

.ds-logo.is-idle .ds-logo__dot {
    opacity: 1;
    animation: ds-logo-glint 5.2s calc(var(--x) * 1.4s) ease-in-out infinite;
}

@keyframes ds-logo-line {
    to { stroke-dashoffset: 0; }
}

@keyframes ds-logo-dot {
    0% { opacity: 0; transform: scale(0); fill: #fff; }
    55% { opacity: 1; transform: scale(1.9); fill: #fff; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes ds-logo-glint {
    0%, 84%, 100% { transform: scale(1); fill: var(--c); }
    90% { transform: scale(1.55); fill: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-logo .ds-logo__line { animation: none !important; stroke-dashoffset: 0; }
    .ds-logo .ds-logo__dot { animation: none !important; opacity: 1; }
}

/* ---------- タイトルの見出し札・案内 ---------- */
/* 六角の札（hud-banner）：六角の中心は高さの 52% にあるので、上に少しだけ詰め物をして文字を中心に置く */
html.ds-hud #instructions .eyebrow.ds-banner {
    display: grid;
    place-items: center;
    width: min(70cqw, 330px);
    aspect-ratio: 558 / 129;
    margin: 0 auto 1cqh;
    padding: 1.06% 0 0;
    background: url('../image/ui/hud-banner.webp') center / 100% 100% no-repeat;
    color: #c8faff;
    font-size: clamp(9px, 2.75cqw, 13px);
    line-height: 1;
    letter-spacing: .2em;
    text-indent: .2em;
    white-space: nowrap;
}

html.ds-hud .intro-lead {
    font-size: clamp(13px, 4cqw, 18px);
    letter-spacing: .04em;
}

html.ds-hud .quick-guide {
    gap: 2.2cqw;
    margin: 2.2cqh 0 1.6cqh;
}

html.ds-hud .quick-guide span {
    position: relative;
    padding: 1.3cqh 1cqw 1.2cqh;
    border: 0;
    background:
        linear-gradient(rgba(84, 245, 255, .85), rgba(84, 245, 255, .85)) left top / 8px 1.5px no-repeat,
        linear-gradient(rgba(84, 245, 255, .85), rgba(84, 245, 255, .85)) left top / 1.5px 8px no-repeat,
        linear-gradient(rgba(84, 245, 255, .85), rgba(84, 245, 255, .85)) right bottom / 8px 1.5px no-repeat,
        linear-gradient(rgba(84, 245, 255, .85), rgba(84, 245, 255, .85)) right bottom / 1.5px 8px no-repeat,
        linear-gradient(180deg, rgba(84, 245, 255, .09), rgba(84, 245, 255, .025));
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .16);
    font-size: clamp(9px, 2.8cqw, 12px);
}

html.ds-hud .quick-guide b {
    font-size: clamp(14px, 4.4cqw, 20px);
    color: #ffd166;
}

html.ds-hud .control-hint {
    font-size: clamp(8px, 2.5cqw, 11px);
}

/* 背景のスキャンの輪 */
.ds-title-ring {
    position: absolute;
    left: 50%;
    top: 31%;
    width: 112cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url('../image/ui/scan-ring.webp') center / contain no-repeat;
    opacity: .1;
    animation: ds-spin 48s linear infinite;
}

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

/* ---------- メニューのボタン（素材の意匠を左右対称に組み直したもの） ----------
   plate：外側の細い目盛り＋四隅を切った枠＋左右の縦棒＋中央の下線
   tag  ：左右の角かっこ＋内側の細枠＋左右の点列 */
html.ds-hud #game-container #drawModeBtn,
html.ds-hud .result-action--primary,
html.ds-hud .ds-train-stop__btn,
html.ds-hud #game-container #helpBtn {
    --c: 84, 245, 255;
    --cut: 12px;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 0 38px;
    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-shadow: 0 0 12px rgba(var(--c), .85);
    filter: drop-shadow(0 0 12px rgba(var(--c), .28));
    white-space: nowrap;
    cursor: pointer;
}

html.ds-hud #game-container #drawModeBtn::before,
html.ds-hud #game-container #drawModeBtn::after,
html.ds-hud .result-action--primary::before,
html.ds-hud .result-action--primary::after,
html.ds-hud .ds-train-stop__btn::before,
html.ds-hud .ds-train-stop__btn::after,
html.ds-hud #game-container #helpBtn::before,
html.ds-hud #game-container #helpBtn::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-hud #game-container #drawModeBtn::before,
html.ds-hud .result-action--primary::before,
html.ds-hud .ds-train-stop__btn::before,
html.ds-hud #game-container #helpBtn::before {
    inset: 0 7px;
    background: rgb(var(--c));
}

html.ds-hud #game-container #drawModeBtn::after,
html.ds-hud .result-action--primary::after,
html.ds-hud .ds-train-stop__btn::after,
html.ds-hud #game-container #helpBtn::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(90deg, transparent, rgba(var(--c), .55), transparent) center bottom 20% / 58% 1px no-repeat,
        linear-gradient(180deg, rgba(var(--c), .24), rgba(var(--c), .07) 62%, rgba(var(--c), .12)),
        #03121e;
}

html.ds-hud #game-container #drawModeBtn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8.6cqh);
    left: 50%;
    transform: translateX(-50%);
    width: min(74cqw, 350px);
    height: clamp(48px, 10cqh, 64px);
    min-width: 0;
    min-height: 0;
    font-size: clamp(15px, 4.7cqw, 21px);
    font-weight: 700;
    letter-spacing: .16em;
    text-indent: .16em;
}

html.ds-hud #game-container #drawModeBtn:hover:not(:disabled),
html.ds-hud #game-container #drawModeBtn:focus-visible {
    transform: translateX(-50%) scale(1.03);
    filter: drop-shadow(0 0 20px rgba(var(--c), .55)) brightness(1.12);
    outline: none;
}

html.ds-hud #game-container #drawModeBtn:disabled {
    transform: translateX(-50%);
}

/* ゲーム中の「自機を描き直す」は小さく下に */
html.ds-hud body:not(.ds-title) #game-container #drawModeBtn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2cqh);
    width: min(54cqw, 250px);
    height: clamp(40px, 7.4cqh, 50px);
    --cut: 10px;
    font-size: clamp(12px, 3.7cqw, 16px);
    letter-spacing: .1em;
    text-indent: .1em;
}

html.ds-hud body:not(.ds-title) #game-container #drawModeBtn::after {
    --cut: 9.4px;
}

html.ds-hud .result-action--primary {
    --c: 98, 255, 155;
    position: relative;
    width: 100%;
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #effff5;
}

html.ds-hud .ds-train-stop__btn {
    --c: 98, 255, 155;
    position: relative;
    width: min(62cqw, 240px);
    height: 50px;
    margin: 0 auto;
    font-size: clamp(14px, 4.2cqw, 17px);
    font-weight: 700;
    letter-spacing: .14em;
    text-indent: .14em;
    color: #effff5;
    transition: opacity .2s, filter .2s;
}

html.ds-hud .result-action:not(.result-action--primary):not(.result-action--quiet) {
    position: relative;
    width: 100%;
    height: 48px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

/* tag：TRAINING と ゲームの説明 */
html.ds-hud #game-container #aboutBtn,
html.ds-hud #game-container #trainingBtn,
html.ds-hud .result-action:not(.result-action--primary):not(.result-action--quiet) {
    --c: 84, 245, 255;
    isolation: isolate;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(rgba(var(--c), .9), rgba(var(--c), .9)) left top / 2px 100% no-repeat,
        linear-gradient(rgba(var(--c), .9), rgba(var(--c), .9)) left top / 9px 2px no-repeat,
        linear-gradient(rgba(var(--c), .9), rgba(var(--c), .9)) left bottom / 9px 2px no-repeat,
        linear-gradient(rgba(var(--c), .9), rgba(var(--c), .9)) right top / 2px 100% no-repeat,
        linear-gradient(rgba(var(--c), .9), rgba(var(--c), .9)) right top / 9px 2px no-repeat,
        linear-gradient(rgba(var(--c), .9), rgba(var(--c), .9)) right bottom / 9px 2px no-repeat;
    box-shadow: none;
    color: #dffcff;
    text-align: center;
    text-shadow: 0 0 8px rgba(var(--c), .6);
    cursor: pointer;
    transform: none;
}

html.ds-hud #game-container #aboutBtn::before,
html.ds-hud #game-container #trainingBtn::before,
html.ds-hud .result-action:not(.result-action--primary):not(.result-action--quiet)::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 6px 12px;
    pointer-events: none;
    border: 1px solid rgba(var(--c), .7);
    background:
        linear-gradient(to bottom, rgba(98, 255, 200, .9) 0 3px, transparent 3px 6px) left 6px center / 3px 15px no-repeat,
        linear-gradient(to bottom, rgba(98, 255, 200, .9) 0 3px, transparent 3px 6px) right 6px center / 3px 15px no-repeat,
        linear-gradient(180deg, rgba(var(--c), .12), rgba(var(--c), .04));
}

html.ds-hud #game-container #aboutBtn,
html.ds-hud #game-container #trainingBtn {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20.6cqh);
    width: min(calc((74cqw - 3cqw) / 2), 167px);
    height: clamp(44px, 8.6cqh, 58px);
    display: none;
    place-content: center;
    gap: 3px;
    z-index: 201;
    text-decoration: none;
    font-family: var(--display-font);
    font-weight: 400;
    font-size: clamp(13px, 4cqw, 18px);
    line-height: 1;
    letter-spacing: .14em;
    text-indent: .14em;
}

html.ds-hud #game-container #aboutBtn {
    left: calc(50% + 1.5cqw);
}

html.ds-hud #game-container #trainingBtn {
    right: calc(50% + 1.5cqw);
}

html.ds-hud #game-container #aboutBtn small,
html.ds-hud #game-container #trainingBtn small {
    display: block;
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    font-size: clamp(8px, 2.4cqw, 11px);
    font-weight: 600;
    letter-spacing: .1em;
    text-indent: .1em;
    color: rgba(214, 246, 250, .74);
    text-shadow: none;
}

html:lang(en) #game-container #aboutBtn small,
html:lang(en) #game-container #trainingBtn small {
    font-family: 'Courier New', monospace;
    letter-spacing: .06em;
}

html.ds-hud #game-container #aboutBtn[style*="block"] {
    display: grid !important;
}

html.ds-hud #game-container #aboutBtn[style*="block"] + #trainingBtn {
    display: grid;
}

html.ds-hud #game-container #aboutBtn:hover,
html.ds-hud #game-container #aboutBtn:focus-visible,
html.ds-hud #game-container #trainingBtn:hover,
html.ds-hud #game-container #trainingBtn:focus-visible,
html.ds-hud .result-action:not(.result-action--primary):not(.result-action--quiet):hover,
html.ds-hud .result-action:not(.result-action--primary):not(.result-action--quiet):focus-visible {
    transform: none;
    color: #fff;
    filter: brightness(1.22) drop-shadow(0 0 10px rgba(var(--c), .45));
    outline: none;
}

/* ---------- フッター（他のゲームと同じ形） ---------- */
html.ds-hud #copyright {
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.4cqh);
    text-align: center;
    font-size: clamp(9px, 2.6cqw, 12px);
    line-height: 1.6;
    color: rgba(189, 248, 255, .66);
    text-shadow: none;
}

html.ds-hud #copyright p {
    margin: 0;
    white-space: nowrap;
}

html:lang(ja) #copyright {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

html.ds-hud #copyright a {
    color: #bdf8ff;
    text-decoration: none;
    padding: 2px 1px;
}

html.ds-hud #copyright a:hover,
html.ds-hud #copyright a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   ゲーム中 HUD
   ============================================================ */
html.ds-hud #ui {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: 8px;
    right: 88px;
    grid-template-columns: 1.4fr .7fr .8fr;
    gap: 4px;
    text-shadow: none;
}

html.ds-hud .hud-stat {
    position: relative;
    min-height: 28px;
    align-items: center;
    padding: 4px 7px 4px 8px;
    border: 0;
    background: rgba(3, 18, 30, .74);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .32);
}

html.ds-hud .hud-stat::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, #54f5ff, transparent);
}

html.ds-hud .hud-stat span,
html.ds-hud .hud-hp > span {
    font-size: 8px;
    color: rgba(160, 238, 255, .7);
}

html.ds-hud .hud-stat strong {
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .04em;
}

html.ds-hud .hud-score strong {
    font-size: 17px;
}

html.ds-hud .hud-weapon strong {
    font-size: 14px;
    text-shadow: 0 0 8px currentColor;
}

html.ds-hud .hud-weapon {
    grid-column: 1 / span 1;
}

html.ds-hud .hud-hp {
    grid-column: 2 / span 2;
    min-height: 28px;
    padding: 4px 7px;
    background: rgba(3, 18, 30, .74);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .32);
}

/* 分割ゲージ */
html.ds-hud .hp-track {
    height: 7px;
    background: repeating-linear-gradient(90deg, rgba(84, 245, 255, .14) 0 5px, transparent 5px 7px);
}

html.ds-hud #hp-fill {
    background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 7px);
    color: #54f5ff;
    box-shadow: none;
    filter: drop-shadow(0 0 3px currentColor);
}

html.ds-hud .hud-hp strong {
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 14px;
}

html.ds-hud #adrenaline-status {
    display: block;
    justify-self: start;
    padding: 6px 14px 6px 34px;
    color: #ffb54f;
    font-size: 10px;
    letter-spacing: .16em;
    text-shadow: 0 0 8px rgba(255, 181, 79, .8);
    background: url('../image/ui/caution-box.webp') left center / auto 100% no-repeat;
    min-height: 28px;
    animation: ds-warn .5s steps(2, jump-none) infinite;
}

html.ds-hud #top-controls {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: 8px;
    gap: 4px;
}

html.ds-hud #top-controls button {
    width: 76px;
    white-space: nowrap;
    min-height: 28px;
    padding: 3px 6px;
    font-size: 10px;
    letter-spacing: .06em;
    background: rgba(3, 18, 30, .78);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .45);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

html.ds-hud #pauseBtn {
    color: #bdf8ff;
}

html.ds-hud #game-container #helpBtn {
    --c: 255, 181, 79;
    /* 援軍（HELP）は「自機を描き直す」の上、中央に。点滅アニメが transform を使うので位置は left/right/margin で決める */
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2cqh + clamp(40px, 7.4cqh, 50px) + 12px);
    margin: 0 auto;
    width: 132px;
    height: 46px;
    padding: 0;
    font-size: 18px;
    letter-spacing: .12em;
    text-indent: .12em;
    color: #fff3d6;
    animation: help-pulse 1s infinite;
}

/* ============================================================
   演出の文字
   ============================================================ */
html.ds-hud .warning {
    top: 33%;
    width: 96cqw;
    aspect-ratio: 707 / 125;
    display: grid;
    place-items: center;
    padding-bottom: .5%;
    background: url('../image/ui/warning-banner.webp') center / 100% 100% no-repeat;
    color: #ffb54f;
    font-size: clamp(22px, 7.4cqw, 40px);
    letter-spacing: .12em;
    text-indent: .12em;
    text-shadow: 0 0 18px rgba(255, 140, 40, .9);
    filter: drop-shadow(0 0 18px rgba(255, 120, 40, .4));
    animation: ds-warn .5s steps(2, jump-none) infinite;
}

@keyframes ds-warn {
    0% { opacity: 1; }
    100% { opacity: .55; }
}

html.ds-hud .danger {
    top: 50%;
    width: 72cqw;
    aspect-ratio: 434 / 201;
    display: grid;
    place-items: center;
    background: url('../image/ui/alert-plate.webp') center / 100% 100% no-repeat;
    color: #ff6b7a;
    font-size: clamp(28px, 9.5cqw, 48px);
    letter-spacing: .1em;
    text-shadow: 0 0 16px rgba(255, 60, 80, .95);
    animation: ds-warn .3s steps(2, jump-none) infinite;
}

html.ds-hud .lockOnSight {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: url('../image/ui/brackets.webp') center / 100% 100% no-repeat;
    filter: hue-rotate(160deg) saturate(3) brightness(1.2) drop-shadow(0 0 8px #ff3b5c);
}

html.ds-hud .lockOnSight::before,
html.ds-hud .lockOnSight::after {
    background: #ff496c;
    box-shadow: 0 0 8px #ff496c;
}

html.ds-hud .lockOnSight::before { width: 22px; height: 1.5px; }
html.ds-hud .lockOnSight::after { width: 1.5px; height: 22px; }

/* TAKEOFF!!：矢印が流れる帯 */
html.ds-hud #takeoffText {
    font-size: clamp(54px, 19cqw, 100px);
    letter-spacing: .04em;
    padding-bottom: 46px;
    background: url('../image/ui/chevrons.webp') center bottom / min(80cqw, 380px) auto no-repeat;
}

html.ds-hud #burstText {
    font-size: clamp(60px, 22cqw, 120px);
}

/* 強化武装・BOSS DOWN の帯：左右対称（素材の帯は右端に飾りがあり文字と重なったので CSS で組む） */
html.ds-hud .loadout-text {
    width: 88cqw;
    padding: 2.4cqh 0 2.2cqh;
    font-size: clamp(30px, 10.5cqw, 60px);
    line-height: 1;
    background:
        linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent) center top / 86% 1px no-repeat,
        linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent) center bottom / 86% 1px no-repeat,
        linear-gradient(currentColor, currentColor) left 7% top / 10px 3px no-repeat,
        linear-gradient(currentColor, currentColor) right 7% top / 10px 3px no-repeat,
        linear-gradient(currentColor, currentColor) left 7% bottom / 10px 3px no-repeat,
        linear-gradient(currentColor, currentColor) right 7% bottom / 10px 3px no-repeat,
        linear-gradient(90deg, transparent, rgba(3, 14, 26, .88) 16%, rgba(3, 14, 26, .88) 84%, transparent);
}

html.ds-hud .loadout-text small {
    margin-top: 1.1cqh;
}

html.ds-hud .wave-text {
    padding: 4cqh 0 3cqh;
    background: url('../image/ui/hud-banner.webp') center 42% / 100% 46% no-repeat;
}

/* ---------- 自機の認証 ---------- */
.ds-verify {
    position: absolute;
    left: 50%;
    top: 15cqh;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(80cqw, 330px);
    padding: 10px 14px 10px 12px;
    transform: translateX(-50%);
    border-style: solid;
    border-color: transparent;
    border-width: 18px;
    border-image: url('../image/ui/frame-h-d.webp') 56 / 18px stretch;
    background: rgba(2, 12, 24, .82) padding-box;
    color: #eaffff;
    pointer-events: none;
    opacity: 0;
}

.ds-verify.is-in {
    animation: ds-verify-in .26s ease-out forwards;
}

.ds-verify.is-out {
    animation: ds-verify-out .3s ease-in forwards;
}

@keyframes ds-verify-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%); }
}

@keyframes ds-verify-out {
    from { opacity: 1; }
    to { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

.ds-verify__scan {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    background: url('../image/ui/scan-ring.webp') center / 100% 100% no-repeat;
}

.ds-verify__scan canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ds-verify__print {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 26px;
    height: 26px;
    background: url('../image/ui/print-ok.webp') center / contain no-repeat;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}

.ds-verify.is-ok .ds-verify__print {
    opacity: 1;
    transform: scale(1);
}

.ds-verify__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ds-verify__state {
    color: rgba(160, 238, 255, .78);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .14em;
}

.ds-verify.is-ok .ds-verify__state {
    color: #62ff9b;
}

.ds-verify__weapon {
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--weapon);
    text-shadow: 0 0 14px var(--weapon);
}

.ds-verify__sub {
    color: rgba(225, 253, 255, .76);
    font-size: 10px;
    letter-spacing: .12em;
}

html:lang(ja) .ds-verify__sub {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

/* ---------- 撃墜 ---------- */
.ds-signal {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 70;
    display: grid;
    place-items: center;
    width: min(84cqw, 380px);
    aspect-ratio: 703 / 297;
    padding-top: 3%;
    transform: translate(-50%, -50%);
    background: url('../image/ui/error-popup.webp') center / 100% 100% no-repeat;
    color: #ff6b7a;
    text-align: center;
    pointer-events: none;
    animation: ds-signal-in .5s steps(5, jump-none) both;
}

.ds-signal__label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(255, 140, 150, .82);
}

.ds-signal strong {
    font-family: var(--display-font);
    font-weight: 400;
    font-size: clamp(30px, 10cqw, 48px);
    letter-spacing: .1em;
    line-height: 1;
    text-shadow: 0 0 16px rgba(255, 60, 80, .9);
}

.ds-signal small {
    color: rgba(255, 220, 224, .72);
    font-size: 10px;
    letter-spacing: .08em;
}

html:lang(ja) .ds-signal small {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

@keyframes ds-signal-in {
    0% { opacity: 0; }
    20% { opacity: 1; }
    40% { opacity: .3; }
    60%, 100% { opacity: 1; }
}

/* ============================================================
   強化武装の選択
   ============================================================ */
html.ds-hud .upgrade-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9em;
    padding: 1.06% 0 0;
    white-space: nowrap;
    width: min(70cqw, 320px);
    aspect-ratio: 558 / 129;
    margin: 0 auto 6px;
    background: url('../image/ui/hud-banner.webp') center / 100% 100% no-repeat;
}

html.ds-hud .upgrade-kicker::after {
    display: none;
}

html.ds-hud .upgrade-card {
    border: 0;
    border-radius: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 22px;
    border-image: url('../image/ui/frame-h-a.webp') 66 / 22px stretch;
    background: rgba(4, 18, 32, .82) padding-box;
    box-shadow: none;
    clip-path: none;
}

html.ds-hud .upgrade-card::after {
    display: none;
}

html.ds-hud .upgrade-card:hover,
html.ds-hud .upgrade-card.is-focused,
html.ds-hud .upgrade-card:focus-visible {
    border-style: solid;
    border-color: transparent;
    border-width: 22px;
    border-image: url('../image/ui/frame-h-a.webp') 66 / 22px stretch;
    background: linear-gradient(90deg, color-mix(in srgb, var(--module-color) 22%, transparent), rgba(4, 18, 32, .82)) padding-box;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--module-color) 55%, transparent));
}

/* ============================================================
   リザルト
   ============================================================ */
html.ds-hud .result-shell {
    border: 0;
    border-radius: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 16px;
    border-image: url('../image/ui/frame-sq-d.webp') 42 / 16px stretch;
    background: rgba(2, 10, 22, .88) padding-box;
    box-shadow: none;
    clip-path: none;
    padding: 26px 22px 22px;
}

html.ds-hud .result-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.06% 0 0;
    white-space: nowrap;
    width: min(62cqw, 270px);
    aspect-ratio: 558 / 129;
    background: url('../image/ui/hud-banner.webp') center / 100% 100% no-repeat;
}

html.ds-hud .result-action--quiet {
    height: 42px;
    border: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(84, 245, 255, .4), transparent) center bottom 6px / 60% 1px no-repeat !important;
    box-shadow: none !important;
    font-weight: 600;
}

html.ds-hud #shareBtn.result-share {
    min-height: 0;
    height: 40px;
    margin-top: 10px;
    border: 0;
    background: rgba(84, 245, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .4);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    color: #bdf8ff;
    font-size: 13px;
    letter-spacing: .08em;
    text-shadow: none;
}

html.ds-hud #shareBtn.result-share:hover,
html.ds-hud #shareBtn.result-share:focus-visible {
    background: rgba(84, 245, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .8);
    outline: none;
}

html.ds-hud .result-action:hover,
html.ds-hud .result-action:focus-visible {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(84, 245, 255, .4));
    outline: none;
}

/* ============================================================
   TRAINING
   ============================================================ */
.ds-train-hud {
    position: absolute;
    left: 50%;
    top: calc(max(8px, env(safe-area-inset-top, 0px)) + 78px);
    z-index: 90;
    width: min(90cqw, 400px);
    padding: 12px 18px 13px;
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) left top / 12px 1.5px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) left top / 1.5px 12px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) right top / 12px 1.5px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) right top / 1.5px 12px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) left bottom / 12px 1.5px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) left bottom / 1.5px 12px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) right bottom / 12px 1.5px no-repeat,
        linear-gradient(rgba(98, 255, 155, .9), rgba(98, 255, 155, .9)) right bottom / 1.5px 12px no-repeat,
        rgba(2, 12, 24, .86);
    box-shadow: inset 0 0 0 1px rgba(98, 255, 155, .2);
    color: #eaffff;
    text-align: left;
}

.ds-train-hud.is-draw {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.6cqh);
}

.ds-train-hud.is-away {
    visibility: hidden;
}

.ds-train-hud__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.ds-train-hud__step {
    color: #62ff9b;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.ds-train-quit {
    padding: 3px 9px;
    border: 0;
    background: rgba(255, 73, 108, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 122, .55);
    color: #ffb3bd;
    font-size: 10px;
    cursor: pointer;
}

.ds-train-hud__task {
    font-size: clamp(11px, 3.4cqw, 14px);
    line-height: 1.5;
}

html:lang(ja) .ds-train-hud,
html:lang(ja) .ds-train-stop,
html:lang(ja) .ds-train-quit {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

.ds-train-hud__meter {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.ds-train-hud__meter i {
    width: 22px;
    height: 5px;
    background: rgba(98, 255, 155, .16);
}

.ds-train-hud__meter i.is-on {
    background: #62ff9b;
    box-shadow: 0 0 8px #62ff9b;
}

body.ds-train-redraw #drawModeBtn:not(:disabled) {
    animation: ds-redraw-call 1s ease-in-out infinite;
}

@keyframes ds-redraw-call {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(84, 245, 255, .4)); }
    50% { filter: drop-shadow(0 0 22px rgba(84, 245, 255, 1)) brightness(1.3); }
}

.ds-train-stop {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 5, 14, .62);
}

.ds-train-stop__panel {
    position: relative;
    width: min(88cqw, 380px);
    padding: 18px 14px 18px;
    border-style: solid;
    border-color: transparent;
    border-width: 14px;
    border-image: url('../image/ui/frame-sq-d.webp') 42 / 14px stretch;
    background: rgba(2, 12, 24, .92) padding-box;
    text-align: center;
    color: #eaffff;
    animation: ds-verify-in .28s ease-out both;
    --tx: 0;
}

@keyframes ds-stop-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.ds-train-stop__panel {
    animation-name: ds-stop-in;
}

.ds-train-stop__kicker {
    color: rgba(160, 238, 255, .78);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .16em;
}

.ds-train-stop__clear {
    display: block;
    margin: 6px 0 8px;
    color: #62ff9b;
    font-family: var(--display-font);
    font-weight: 400;
    font-size: clamp(40px, 13cqw, 60px);
    line-height: 1;
    letter-spacing: .08em;
    text-shadow: 0 0 18px rgba(98, 255, 155, .85);
}

.ds-train-stop__praise {
    font-size: clamp(12px, 3.5cqw, 15px);
    line-height: 1.6;
}

.ds-train-stop__next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 12px;
    color: rgba(214, 246, 250, .82);
    font-size: 12px;
}

.ds-train-stop__next span {
    padding: 2px 6px;
    background: rgba(84, 245, 255, .14);
    color: #54f5ff;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

html:lang(ja) .ds-train-stop__btn {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

.ds-train-stop__btn:disabled {
    opacity: .35;
    cursor: default;
}

.ds-train-stop__btn:not(:disabled):hover,
.ds-train-stop__btn:not(:disabled):focus-visible {
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(98, 255, 155, .6));
    outline: none;
}

.ds-train-stop__panel.is-complete .ds-train-stop__clear {
    font-size: clamp(34px, 11cqw, 52px);
}

html:lang(ja) .ds-train-stop__panel.is-complete .ds-train-stop__clear {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    font-weight: 800;
    letter-spacing: .12em;
}

.ds-train-stop__print {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 6px;
    background: url('../image/ui/print-ok.webp') center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(98, 255, 155, .6));
}

.ds-train-stop__list {
    display: grid;
    gap: 4px;
    margin: 12px auto 16px;
    padding: 0;
    width: fit-content;
    list-style: none;
    text-align: left;
    font-size: 13px;
}

.ds-train-stop__list li span {
    display: inline-block;
    width: 1.6em;
    color: #62ff9b;
    font-weight: 700;
}

/* ============================================================
   PC 左右の装飾（左：ロゴ／右：操作方法）
   ============================================================ */
.ds-side-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none;
}

html.ds-side-on .ds-side-bg {
    display: block;
    background:
        linear-gradient(rgba(84, 245, 255, .05) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(84, 245, 255, .05) 1px, transparent 1px) 0 0 / 46px 46px;
    mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 100%);
}

.ds-side {
    position: fixed;
    top: 50%;
    left: var(--cx);
    z-index: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #bdf8ff;
}

.ds-side[hidden] {
    display: none !important;
}

.ds-side--left {
    width: var(--w);
    text-align: center;
    container-type: inline-size;
}

.ds-side__logo {
    position: relative;
    z-index: 1;
}

.ds-side__banner {
    display: grid;
    place-items: center;
    width: 78%;
    aspect-ratio: 558 / 129;
    margin: 22px auto 10px;
    padding-top: 1.06%;
    background: url('../image/ui/hud-banner.webp') center / 100% 100% no-repeat;
    font-family: 'Courier New', monospace;
    font-size: min(13px, 3.5cqw);
    line-height: 1;
    letter-spacing: .2em;
    text-indent: .2em;
    white-space: nowrap;
}

.ds-side__lead {
    color: #f1feff;
    font-size: clamp(13px, 1.1vw, 17px);
    font-weight: 700;
    letter-spacing: .06em;
}

html:lang(ja) .ds-side__lead,
html:lang(ja) .ds-guide {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

.ds-side__ring {
    position: absolute;
    left: 50%;
    top: 26%;
    z-index: 0;
    width: 118%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url('../image/ui/scan-ring.webp') center / contain no-repeat;
    opacity: .12;
    animation: ds-spin 60s linear infinite;
}

.ds-side--right {
    display: grid;
    gap: 14px;
    width: 286px;
}

.ds-guide {
    padding: 16px 16px 14px;
    border-style: solid;
    border-color: transparent;
    border-width: 16px;
    border-image: url('../image/ui/frame-sq-d.webp') 42 / 16px stretch;
    background: rgba(2, 12, 24, .72) padding-box;
    font-size: 12px;
}

.ds-guide__head {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(84, 245, 255, .2);
    color: #54f5ff;
    font-family: var(--display-font);
    font-size: 17px;
    letter-spacing: .14em;
}

.ds-guide__row {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    line-height: 1.35;
}

.ds-guide__keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
}

.ds-guide kbd {
    min-width: 19px;
    padding: 2px 5px 1px;
    font-family: var(--display-font);
    font-size: 12px;
    letter-spacing: .04em;
    text-align: center;
    color: #eaffff;
    background: rgba(84, 245, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(84, 245, 255, .45);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.ds-guide__note {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(84, 245, 255, .16);
    color: rgba(214, 246, 250, .7);
    font-size: 11px;
    text-align: center;
}

.ds-guide__weapon {
    display: grid;
    grid-template-columns: 34px 64px 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.ds-guide__weapon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--w);
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px var(--w));
}

.ds-guide__weapon b {
    color: var(--w);
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .06em;
}

.ds-guide__weapon span {
    color: rgba(214, 246, 250, .8);
    font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .ds-title-ring,
    .ds-side__ring {
        animation: none;
    }
}

/* 描き終えた直後（課題1の CLEAR 待ち）は案内を引っ込める */
.ds-train-hud.is-done {
    visibility: hidden;
}

/* 練習の文は句読点の位置で改行する */
.ds-train-hud__task,
.ds-train-stop__praise {
    white-space: pre-line;
}

html:lang(en) .ds-train-hud__task,
html:lang(en) .ds-train-stop__praise {
    white-space: normal;
}

/* 左の余白のロゴは静止表示 */
.ds-logo.is-static .ds-logo__line {
    stroke-dashoffset: 0;
}

.ds-logo.is-static .ds-logo__dot {
    opacity: 1;
}

/* 左の余白のロゴは全体を SHOOTER と同じグリーンに */
.ds-logo--side .ds-logo__dot {
    fill: #62ffc8;
    filter: drop-shadow(0 0 3px #62ffc8);
}

.ds-logo--side .ds-logo__line,
.ds-logo--side .ds-logo__line.is-hand {
    stroke: #8dffd8;
    filter: drop-shadow(0 0 2.5px rgba(98, 255, 200, .9));
}

/* 英語版：等幅だと横に広がりすぎるので、メニューの主ボタンは Anton で組む */
html:lang(en).ds-hud #game-container #drawModeBtn,
html:lang(en).ds-hud .ds-train-stop__btn,
html:lang(en).ds-hud .result-action {
    font-family: var(--display-font);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em;
}

html:lang(en).ds-hud #game-container #drawModeBtn {
    font-size: clamp(17px, 5.2cqw, 24px);
}

/* 描画中は上の指示と同じ内容なので、練習の案内は見出しの1行だけにする */
.ds-train-hud.is-draw {
    padding-top: 9px;
    padding-bottom: 9px;
}

.ds-train-hud.is-draw .ds-train-hud__head {
    margin-bottom: 0;
}

.ds-train-hud.is-draw .ds-train-hud__task,
.ds-train-hud.is-draw .ds-train-hud__meter {
    display: none;
}

/* 狭い画面：武器名（HOMING など）と MOD が1行に収まるよう、WEAPON の見出しを省く */
@container (max-width: 420px) {
    html.ds-hud .hud-weapon > span {
        display: none;
    }

    html.ds-hud .hud-weapon strong {
        font-size: 13px;
    }
}

html.ds-hud .hud-weapon small {
    white-space: nowrap;
}

.ds-verify__state {
    white-space: nowrap;
}

/* 強化カード：説明文をレベルの札の下まで広げて、1文字だけ次の行に落ちないようにする（札は上にあるので重ならない） */
html.ds-hud .upgrade-card__copy small {
    margin-right: -78px;
}

html.ds-hud .upgrade-card__level {
    white-space: nowrap;
}

/* リザルト：右上の SOUND ボタンに結果の枠がかからないよう、少し下げて始める */
html.ds-hud .result-overlay {
    padding-top: calc(max(16px, env(safe-area-inset-top, 0px)) + 30px);
}

/* 強化武装の選択中は、幕の後ろで操作できない HUD・右上のボタン・描き直すボタンを隠す（選択画面と重なって見えるため） */
body.upgrade-selecting #ui,
body.upgrade-selecting #top-controls,
body.upgrade-selecting #drawModeBtn,
body.upgrade-selecting #helpBtn {
    visibility: hidden;
}