/*
 * Y2K UI（2026-10-01）
 * upgrade.css の上に重ねる。素材は ★開発用_WIRESHOOTER/image/（公開フォルダ外）の int〜int4 から切り出して配色を合わせたもの（sprites/ui/）。
 * 元SVGは公開しない。装飾は aria-hidden の .y2k-deco に入れ、押せる部分と文字は画像にしない。
 * 配色：紺 #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%);
    --y2k-shadow: 4px 4px 0 var(--y2k-magenta);
}

/* ---------- 装飾レイヤー（タイトル・リザルト） ---------- */

body.y2k-ui #startScreen {
    z-index: 250;
    background: transparent;
}

.y2k-deco {
    position: absolute;
    inset: 0;
    z-index: 245;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}

body.menu-open .y2k-deco {
    opacity: 1;
}

.y2k-deco .tint {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 26%, rgba(98, 246, 255, 0.12), transparent 42%),
        radial-gradient(circle at 12% 88%, rgba(255, 63, 208, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(3, 7, 22, 0.55), rgba(3, 7, 22, 0.78));
}

.y2k-deco .dk {
    position: absolute;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 白い線画（int2）は形だけなので mask で色を付ける */
.y2k-deco .mask {
    background: var(--tone, var(--y2k-cyan));
    -webkit-mask: var(--src) center / contain no-repeat;
    mask: var(--src) center / contain no-repeat;
}

.dk-globe { left: 13%; top: 6%; width: 74%; aspect-ratio: 700 / 666; background-image: url("sprites/ui/cy-globe.webp"); opacity: 0.26; animation: y2k-float 9s ease-in-out infinite; }
.dk-crosshair { left: 19%; top: 9%; width: 62%; aspect-ratio: 1; --src: url("sprites/ui/hd-crosshair.webp"); --tone: var(--y2k-cyan); opacity: 0.16; animation: y2k-spin 60s linear infinite; }
.dk-aa { left: -3%; top: 4.4%; width: 16%; aspect-ratio: 1; background-image: url("sprites/ui/st-aa.webp"); transform: rotate(-10deg); filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.45)); }
.dk-11 { right: 5%; top: 5.2%; width: 11%; aspect-ratio: 450 / 421; --src: url("sprites/ui/hd-11.webp"); --tone: var(--y2k-magenta); }
.dk-reticles { right: 4%; top: 12.4%; width: 31%; aspect-ratio: 800 / 137; --src: url("sprites/ui/hd-reticles.webp"); opacity: 0.85; }
.dk-error { right: -7%; top: 64%; width: 27%; aspect-ratio: 650 / 353; background-image: url("sprites/ui/cy-error.webp"); transform: rotate(5deg); animation: y2k-blink-in 6s steps(1) infinite; }
.dk-sparkle { right: 15%; top: 21%; width: 6.4%; aspect-ratio: 215 / 375; background-image: url("sprites/ui/pk-sparkle.webp"); transform: rotate(8deg); }
.dk-icons { right: 2.8%; top: 25%; width: 5.4%; aspect-ratio: 83 / 450; background-image: url("sprites/ui/cy-icons.webp"); opacity: 0.85; }
.dk-diamonds { left: 2.5%; top: 47%; width: 12%; aspect-ratio: 525 / 93; --src: url("sprites/ui/hd-diamonds.webp"); --tone: var(--y2k-yellow); animation: y2k-blink 1.6s steps(2) infinite; }
.dk-danger { left: -9%; top: 52%; width: 25%; aspect-ratio: 700 / 580; background-image: url("sprites/ui/st-danger.webp"); transform: rotate(-14deg); filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.5)); }
.dk-future { right: -12%; top: 47%; width: 34%; aspect-ratio: 800 / 499; background-image: url("sprites/ui/st-future.webp"); transform: rotate(9deg); filter: drop-shadow(-3px 4px 0 rgba(0, 0, 0, 0.5)); }
.dk-cube { left: 3%; bottom: 12%; width: 15%; aspect-ratio: 378 / 450; background-image: url("sprites/ui/pk-cube.webp"); transform: rotate(9deg); filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5)); }
.dk-ring { right: 1%; bottom: 14%; width: 24%; aspect-ratio: 450 / 240; background-image: url("sprites/ui/cy-ring.webp"); animation: y2k-float 7s ease-in-out infinite reverse; }
.dk-tape {
    right: -16%;
    bottom: 7%;
    width: 62%;
    height: 22px;
    transform: rotate(-24deg);
    background:
        repeating-linear-gradient(-45deg, var(--y2k-yellow) 0 10px, var(--y2k-ink) 10px 20px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
    opacity: 0.92;
}
.dk-tape::after {
    content: "CAUTION ✦ WIRE ZONE ✦ CAUTION ✦ WIRE ZONE";
    position: absolute;
    inset: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--y2k-yellow);
    color: var(--y2k-ink);
    font: 9px/1 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.12em;
    white-space: nowrap;
    clip-path: inset(0 18% 0 18%);
}

/* クロームの形（敵と同じアトラス） */
.y2k-deco .chrome {
    position: absolute;
    width: var(--s);
    height: var(--s);
    background-image: url("sprites/chrome-atlas.webp?v=20261001");
    background-repeat: no-repeat;
    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 8px var(--glow, rgba(98, 246, 255, 0.55)));
}
.chrome.c24 { --fx: 870; --fy: 0; --fw: 448; --s: 92px; left: -6%; top: 33%; --glow: rgba(255, 63, 208, 0.6); animation: y2k-spin 26s linear infinite; }
.chrome.c22 { --fx: 440; --fy: 0; --fw: 448; --s: 74px; right: -4%; top: 36%; animation: y2k-spin 34s linear infinite reverse; }
.chrome.c13 { --fx: 944; --fy: 853; --fw: 192; --s: 30px; animation: y2k-twinkle 2.8s ease-in-out infinite; }
.chrome.c16 { --fx: 1138; --fy: 853; --fw: 192; --s: 24px; animation: y2k-twinkle 3.4s ease-in-out infinite; }
.chrome.s1 { left: 21%; top: 19%; animation-delay: -0.6s; }
.chrome.s2 { right: 22%; top: 30.5%; animation-delay: -1.7s; }
.chrome.s3 { left: 13%; top: 41%; animation-delay: -2.2s; }
.chrome.s4 { right: 10%; top: 58%; animation-delay: -0.2s; }

/* 流れる文字帯 */
.y2k-ticker {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    overflow: hidden;
    border-block: 1px solid rgba(98, 246, 255, 0.4);
    background: rgba(3, 7, 22, 0.86);
    color: var(--y2k-cyan);
    font: 9px/18px 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.14em;
    white-space: nowrap;
}
.y2k-ticker.top { top: env(safe-area-inset-top); }
.y2k-ticker.bottom { bottom: env(safe-area-inset-bottom); color: var(--y2k-ink); background: var(--y2k-cyan); border-color: var(--y2k-cyan); }
/* 同じ文言を偶数回並べ、半分ずらしでループさせる（つなぎ目で途切れない） */
.y2k-ticker .track { display: inline-block; animation: y2k-ticker 54s linear infinite; }
.y2k-ticker.bottom .track { animation-duration: 44s; animation-direction: reverse; }
.y2k-ticker b { color: var(--y2k-magenta); font-weight: normal; }
.y2k-ticker.bottom b { color: var(--y2k-ink); }

/* ---------- タイトル ---------- */

body.y2k-ui .menu-panel {
    padding: 26px 0 30px;
}

body.y2k-ui .eyebrow {
    position: relative;
    margin: 0 0 12px;
    padding: 5px 10px 5px 26px;
    border-radius: 3px;
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-shadow: none;
    box-shadow: 3px 3px 0 var(--y2k-magenta);
    transform: rotate(-2deg);
}
body.y2k-ui .eyebrow::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 13px;
    background: repeating-linear-gradient(90deg, var(--y2k-ink) 0 1px, transparent 1px 3px, var(--y2k-ink) 3px 5px, transparent 5px 6px);
}

body.y2k-ui #startScreen h1 {
    position: relative;
    margin: 0 0 14px;
    color: transparent;
    background: var(--y2k-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(38px, min(11.2vw, 7.4vh), 60px);
    line-height: 0.92;
    letter-spacing: 0.05em;
    text-shadow: none;
    /* text-shadow は背景（クロームの塗り）より上に描かれるので、色ずれは filter で後ろに出す */
    filter:
        drop-shadow(3px 0 0 rgba(255, 63, 208, 0.85))
        drop-shadow(-3px 0 0 rgba(98, 246, 255, 0.85))
        drop-shadow(0 0 14px rgba(98, 246, 255, 0.35));
    animation: y2k-glitch 5s steps(1) infinite;
}

body.y2k-ui .best-score {
    position: relative;
    margin-bottom: 14px;
    padding: 5px 16px;
    color: var(--y2k-yellow);
    font-size: 12px;
    letter-spacing: 0.16em;
    background:
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) left top / 8px 1px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) left top / 1px 8px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) right top / 8px 1px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) right top / 1px 8px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) left bottom / 8px 1px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) left bottom / 1px 8px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) right bottom / 8px 1px no-repeat,
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) right bottom / 1px 8px no-repeat,
        rgba(3, 7, 22, 0.78);
    text-shadow: 0 0 8px rgba(255, 243, 107, 0.6);
}

/* OS風ウィンドウ（int4 の Error! ダイアログの作法） */
.y2k-window {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 318px);
    margin-inline: auto;
    border: 2px solid var(--y2k-cyan);
    background: rgba(3, 7, 22, 0.94);
    box-shadow: var(--y2k-shadow), 0 0 26px rgba(98, 246, 255, 0.22);
    text-align: left;
}
.y2k-window.is-alert { border-color: var(--y2k-magenta); box-shadow: 4px 4px 0 var(--y2k-cyan), 0 0 26px rgba(255, 63, 208, 0.28); }
.y2k-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 20px;
    padding: 0 4px 0 8px;
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    font: 10px/1 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.12em;
    user-select: none;
}
.y2k-window.is-alert .y2k-titlebar { background: var(--y2k-magenta); }
.y2k-titlebar .ctrl { display: flex; gap: 3px; }
.y2k-titlebar .ctrl i {
    display: grid;
    width: 13px;
    height: 13px;
    place-items: center;
    border: 1px solid var(--y2k-ink);
    font-style: normal;
    font-size: 9px;
    line-height: 1;
}
.y2k-window-body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

body.y2k-ui .menu-actions {
    width: 100%;
    gap: 10px;
}

body.y2k-ui #startScreen button,
body.y2k-ui #pauseScreen button,
body.y2k-ui #shareBtn {
    border-radius: 3px;
    font-family: 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.1em;
}

body.y2k-ui #startBtn,
body.y2k-ui #retryBtn {
    position: relative;
    min-height: 58px;
    border: 2px solid var(--y2k-ink) !important;
    background:
        repeating-linear-gradient(90deg, transparent 0 78%, rgba(4, 16, 38, 0.18) 78% 80%, transparent 80% 83%, rgba(4, 16, 38, 0.18) 83% 85%),
        var(--y2k-cyan) !important;
    color: var(--y2k-ink);
    font-size: 23px;
    text-shadow: none;
    box-shadow: inset 0 -5px 0 rgba(4, 16, 38, 0.22), 0 0 0 1px var(--y2k-cyan), 0 0 22px rgba(98, 246, 255, 0.45) !important;
}
body.y2k-ui #startBtn::before,
body.y2k-ui #retryBtn::before {
    content: "▶";
    margin-right: 10px;
    font-size: 15px;
    animation: y2k-blink 1s steps(2) infinite;
}
body.y2k-ui #startBtn:hover,
body.y2k-ui #startBtn:focus-visible,
body.y2k-ui #retryBtn:hover,
body.y2k-ui #retryBtn:focus-visible {
    background: var(--y2k-ink) !important;
    color: var(--y2k-cyan);
    border-color: var(--y2k-cyan) !important;
    filter: none;
}

/* 押す場所が一目で分かるように：外へ広がる光の輪・表面を走る光・PRESS START! の札
   （box-shadow は upgrade.css で !important 指定のため、輪は outline で描く） */
body.y2k-ui #startBtn,
body.y2k-ui #retryBtn {
    overflow: visible;
    outline: 2px solid rgba(98, 246, 255, 0);
    outline-offset: 2px;
    animation: y2k-cta-ring 1.8s ease-out infinite;
}
body.y2k-ui #startBtn::after,
body.y2k-ui #retryBtn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 255, 255, 0.2) 54%, transparent 62%) 160% 0 / 260% 100% no-repeat;
    pointer-events: none;
    animation: y2k-cta-shine 2.8s ease-in-out infinite;
}
body.y2k-ui #startBtn:hover::after,
body.y2k-ui #retryBtn:hover::after {
    animation: none;
    background: none;
}
.y2k-press {
    position: absolute;
    right: -12px;
    top: -15px;
    z-index: 2;
    padding: 4px 8px 3px;
    border: 2px solid var(--y2k-ink);
    border-radius: 3px;
    background: var(--y2k-magenta);
    color: var(--y2k-ink);
    font: 10px/1 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.1em;
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--y2k-ink);
    rotate: 7deg;
    pointer-events: none;
    animation: y2k-cta-tag 1.1s ease-in-out infinite;
}
.y2k-press::before {
    content: "";
    position: absolute;
    left: -15px;
    top: -9px;
    width: 18px;
    height: 18px;
    background: url("sprites/chrome-atlas.webp?v=20261001") calc(18px * -944 / 192) calc(18px * -853 / 192) / calc(18px * 2048 / 192) auto no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
    animation: y2k-twinkle 1.4s ease-in-out infinite;
}
@keyframes y2k-cta-ring {
    0% { outline-color: rgba(98, 246, 255, 0.85); outline-offset: 2px; }
    70%, 100% { outline-color: rgba(98, 246, 255, 0); outline-offset: 14px; }
}
@keyframes y2k-cta-shine {
    0%, 50% { background-position: 160% 0; }
    80%, 100% { background-position: -60% 0; }
}
@keyframes y2k-cta-tag {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

/* 銀のステッカー（int のラベルの作法） */
body.y2k-ui #howBtn,
body.y2k-ui #shareBtn {
    position: relative;
    min-height: 48px;
    border: 2px solid var(--y2k-ink) !important;
    border-radius: 12px;
    background: var(--y2k-silver) !important;
    color: var(--y2k-ink);
    font-size: 17px;
    text-shadow: none;
    box-shadow: 0 0 0 2px var(--y2k-silver), 3px 4px 0 2px rgba(0, 0, 0, 0.5) !important;
}
body.y2k-ui #howBtn::after,
body.y2k-ui #shareBtn::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 10px;
    bottom: 10px;
    width: 18px;
    background: repeating-linear-gradient(90deg, var(--y2k-ink) 0 2px, transparent 2px 3px, var(--y2k-ink) 3px 4px, transparent 4px 6px);
    opacity: 0.85;
}
body.y2k-ui #howBtn:hover,
body.y2k-ui #howBtn:focus-visible,
body.y2k-ui #shareBtn:hover,
body.y2k-ui #shareBtn:focus-visible {
    background: #ffffff !important;
}

body.y2k-ui .y2k-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(98, 246, 255, 0.3);
}
body.y2k-ui #startScreen #titleSoundBtn {
    width: auto;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid rgba(98, 246, 255, 0.55);
    border-radius: 2px;
    background: transparent;
    color: var(--y2k-cyan);
    font-size: 10px;
}
body.y2k-ui .control-side-setting {
    margin: 0;
    color: rgba(159, 224, 255, 0.8);
}
/* 2行目の「操作ボタン位置」は行いっぱいに */
body.y2k-ui .y2k-settings .control-side-setting:not(.gfx-setting) {
    flex: 1 0 100%;
    justify-content: space-between;
}
body.y2k-ui .control-side-options {
    border-radius: 2px;
    border-color: rgba(98, 246, 255, 0.55);
}
body.y2k-ui .control-side-option span {
    min-width: 40px;
    padding: 9px 9px;
}
body.y2k-ui .control-side-option input:checked + span {
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    box-shadow: none;
}

/* 端末風の SYSTEM.LOG */
.y2k-log {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 318px);
    margin: 16px auto 0;
    padding: 18px 12px 10px;
    border: 1px solid rgba(98, 246, 255, 0.35);
    background: rgba(1, 4, 14, 0.86);
    text-align: left;
}
.y2k-log::before {
    content: attr(data-label);
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    background: rgba(98, 246, 255, 0.85);
    color: var(--y2k-ink);
    font: 8px/1 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.16em;
}
.y2k-log::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 46px;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--y2k-magenta) 0 4px, transparent 4px 7px);
}
body.y2k-ui .y2k-log #instructions {
    margin: 0;
    padding: 0;
}
body.y2k-ui .y2k-log .game-instruction {
    margin: 2px 0;
    color: #cfeeff;
    font-size: 12px;
    text-shadow: none;
}
body.y2k-ui .y2k-log .game-instruction::before,
body.y2k-ui .y2k-log .quick-control::before,
body.y2k-ui .y2k-log .pc-control-hint::before {
    content: "> ";
    color: var(--y2k-magenta);
}
body.y2k-ui .y2k-log .quick-control {
    margin-top: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--y2k-yellow);
    font-size: 10px;
}
body.y2k-ui .y2k-log .pc-control-hint {
    margin-top: 4px;
}
body.y2k-ui .y2k-log .quick-control::after {
    content: "_";
    animation: y2k-blink 1s steps(2) infinite;
}

/* フッター：制作：AMIX｜トミナガハルキ ／ 遊び方・ライセンス・ゲーム一覧（英語版は一覧なし） */
body.y2k-ui.menu-open,
body.y2k-ui #startScreen {
    touch-action: pan-y;
}
body.y2k-ui .game-footer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 14px;
    padding: 6px 12px;
    background: rgba(3, 7, 22, 0.78);
    color: rgba(191, 230, 245, 0.85);
    font: 11px/1.6 'DotGothic16', Arial, sans-serif;
    letter-spacing: 0.04em;
}
body.y2k-ui .game-footer-nav p {
    margin: 0;
    white-space: nowrap;
}
body.y2k-ui .game-footer-nav a,
body.y2k-ui .game-footer-nav #copyright {
    position: static;
    color: var(--y2k-cyan);
    font: inherit;
    opacity: 1;
    text-decoration: none;
    text-shadow: none;
}
body.y2k-ui .game-footer-nav a:hover,
body.y2k-ui .game-footer-nav a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- リザルト ---------- */

body.y2k-ui #resultPanel {
    width: min(100%, 318px);
}
body.y2k-ui #resultPanel .y2k-window-body {
    justify-items: center;
    text-align: center;
}
body.y2k-ui #resultPanel .eyebrow {
    background: var(--y2k-magenta);
    box-shadow: 3px 3px 0 var(--y2k-cyan);
}
body.y2k-ui #resultHeading {
    margin: 2px 0 0;
    color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #ffd1f4 40%, #ff3fd0 52%, #ffe6f9 64%, #ff8ae3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: clamp(34px, 10vw, 46px);
    font-weight: normal;
    letter-spacing: 0.06em;
    text-shadow: none;
    filter: drop-shadow(3px 0 0 rgba(98, 246, 255, 0.7)) drop-shadow(-2px 0 0 rgba(255, 243, 107, 0.5));
}
body.y2k-ui .result-score {
    width: 100%;
    margin: 4px 0 6px;
    padding: 10px 0;
    border-block: 1px dashed rgba(98, 246, 255, 0.4);
    color: var(--y2k-cyan);
    font-size: clamp(20px, 6vw, 27px);
    text-shadow: 0 0 10px rgba(98, 246, 255, 0.55);
}
body.y2k-ui .new-best {
    margin: 0 0 4px;
    color: var(--y2k-yellow);
}
body.y2k-ui #resultPanel #shareBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    font-size: 14px;
}
.y2k-stamp {
    position: absolute;
    right: -26px;
    top: -30px;
    width: 104px;
    aspect-ratio: 650 / 408;
    background: url("sprites/ui/st-caution.webp") center / contain no-repeat;
    transform: rotate(13deg);
    filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.5));
    pointer-events: none;
}
#resultPanel.is-visible .y2k-stamp {
    animation: y2k-stamp 420ms cubic-bezier(0.2, 1.6, 0.4, 1) both 180ms;
}

/* ---------- ポーズ ---------- */

body.y2k-ui #pauseScreen {
    background:
        repeating-linear-gradient(0deg, rgba(98, 246, 255, 0.04) 0 1px, transparent 1px 4px),
        rgba(3, 7, 22, 0.86);
}
body.y2k-ui #pauseScreen .y2k-window-body {
    justify-items: center;
    text-align: center;
}
body.y2k-ui #pauseScreen h2 {
    margin: 4px 0 0;
    color: transparent;
    background: var(--y2k-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(3px 0 0 rgba(255, 63, 208, 0.7)) drop-shadow(-3px 0 0 rgba(98, 246, 255, 0.7));
}
body.y2k-ui .pause-subtitle {
    margin: 0;
    color: #bfe9ff;
}
body.y2k-ui .pause-actions {
    display: grid;
    width: 100%;
    gap: 10px;
}
body.y2k-ui #pauseScreen button {
    min-height: 48px;
    border: 2px solid var(--y2k-ink);
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
    font-size: 17px;
    text-shadow: none;
    box-shadow: inset 0 -4px 0 rgba(4, 16, 38, 0.2);
}
body.y2k-ui #pauseScreen button + button {
    border-radius: 12px;
    background: var(--y2k-silver);
}
/* タイトルへ：RESUMEから離して一番下に。1回目で確認表示（マゼンタ）に変わる */
body.y2k-ui #pauseScreen .y2k-quit {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    border: 1px dashed rgba(255, 63, 208, 0.75);
    border-radius: 3px;
    background: transparent;
    color: var(--y2k-magenta);
    font-size: 13px;
    box-shadow: none;
}
body.y2k-ui #pauseScreen .y2k-quit:hover,
body.y2k-ui #pauseScreen .y2k-quit:focus-visible {
    border-style: solid;
    background: rgba(255, 63, 208, 0.12);
}
body.y2k-ui #pauseScreen .y2k-quit.is-armed {
    border: 2px solid var(--y2k-ink);
    background: var(--y2k-magenta);
    color: var(--y2k-ink);
    animation: y2k-blink 0.8s steps(2) infinite;
}
body.y2k-ui #pauseScreen .y2k-quit:lang(ja) {
    font-family: 'DotGothic16', Arial, sans-serif;
}

.y2k-loader {
    width: 74%;
    aspect-ratio: 525 / 205;
    background: url("sprites/ui/cy-loader.webp") center / contain no-repeat;
    opacity: 0.9;
    animation: y2k-blink 1.2s steps(2) infinite;
}

/* ---------- HUD ---------- */

body.y2k-ui .hud-line {
    width: max-content;
    max-width: 100%;
    padding: 5px 12px 6px 9px;
    background: linear-gradient(90deg, rgba(3, 7, 22, 0.82), rgba(3, 7, 22, 0.5));
    border-left: 3px solid var(--y2k-cyan);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
body.y2k-ui .hud-stat small {
    color: var(--y2k-magenta);
    font-family: 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.2em;
}
body.y2k-ui .hud-stat span {
    color: #e9fdff;
    text-shadow: 2px 0 0 rgba(255, 63, 208, 0.45), -1px 0 0 rgba(98, 246, 255, 0.6), 0 0 8px rgba(98, 246, 255, 0.6);
}
body.y2k-ui #healthBar {
    height: 9px;
    border-radius: 0;
    border-color: var(--y2k-cyan);
    background: rgba(3, 7, 22, 0.85);
}
body.y2k-ui #healthBar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(3, 7, 22, 0.95) 9px 11px);
    pointer-events: none;
}
body.y2k-ui #healthFill {
    background: linear-gradient(90deg, var(--y2k-cyan), #b7fbff);
    box-shadow: 0 0 10px var(--y2k-cyan);
}
body.y2k-ui #stageProgressBar,
body.y2k-ui #slamMeter {
    border-radius: 0;
}
body.y2k-ui #stageProgressFill {
    background: linear-gradient(90deg, var(--y2k-violet), var(--y2k-magenta));
}
body.y2k-ui #bossHealthBar {
    border-radius: 0;
    border-color: var(--y2k-magenta);
    background: rgba(30, 0, 22, 0.85);
}
body.y2k-ui #bossHealthBar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(3, 7, 22, 0.9) 7px 9px);
}
body.y2k-ui #bossHealthFill {
    background: linear-gradient(90deg, var(--y2k-magenta), var(--y2k-yellow));
}

body.y2k-ui .utility-btn {
    overflow: hidden;
    padding-top: 12px;
    border: 1px solid var(--y2k-cyan);
    border-radius: 2px;
    background: rgba(3, 7, 22, 0.88);
    color: var(--y2k-cyan);
    font-size: 12px;
    letter-spacing: 0.12em;
    box-shadow: 3px 3px 0 rgba(255, 63, 208, 0.75);
}
body.y2k-ui .utility-btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background:
        linear-gradient(90deg, transparent calc(100% - 22px), var(--y2k-ink) calc(100% - 22px) calc(100% - 20px), transparent calc(100% - 20px) calc(100% - 14px), var(--y2k-ink) calc(100% - 14px) calc(100% - 12px), transparent calc(100% - 12px) calc(100% - 6px), var(--y2k-ink) calc(100% - 6px) calc(100% - 4px), transparent calc(100% - 4px)),
        var(--y2k-cyan);
}
body.y2k-ui .utility-btn:hover,
body.y2k-ui .utility-btn:focus-visible {
    background: var(--y2k-cyan);
    color: var(--y2k-ink);
}

body.y2k-ui #wireActionBtn {
    border-color: var(--y2k-cyan);
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.32), transparent 30%),
        radial-gradient(circle, rgba(3, 7, 22, 0.55) 0 54%, rgba(98, 246, 255, 0.22) 55% 58%, rgba(3, 7, 22, 0.9) 59%);
    box-shadow: inset 0 0 16px rgba(98, 246, 255, 0.25), 3px 3px 0 rgba(255, 63, 208, 0.7), 0 0 22px rgba(98, 246, 255, 0.35);
}
body.y2k-ui #wireActionBtn::before {
    inset: 3px;
    border: 0;
    border-radius: 0;
    background: rgba(170, 255, 255, 0.55);
    -webkit-mask: url("sprites/ui/hd-crosshair.webp") center / contain no-repeat;
    mask: url("sprites/ui/hd-crosshair.webp") center / contain no-repeat;
    animation-duration: 12s;
}
body.y2k-ui #wireActionBtn span {
    color: #ffffff;
    text-shadow: 2px 0 0 rgba(255, 63, 208, 0.6), -1px 0 0 rgba(98, 246, 255, 0.8);
}
body.y2k-ui #wireActionBtn.is-throw {
    border-color: var(--y2k-magenta);
}
body.y2k-ui #wireActionBtn.is-throw::before {
    background: rgba(255, 150, 236, 0.7);
}

/* 新しい敵やWAVEの案内：OSのポップアップ */
body.y2k-ui #missionBanner {
    padding-top: 6px;
}
body.y2k-ui #missionBanner::before {
    inset: -22px max(0px, calc(50% - 160px)) -10px;
    border: 2px solid var(--y2k-cyan);
    border-radius: 0;
    background:
        linear-gradient(var(--y2k-cyan), var(--y2k-cyan)) top / 100% 14px no-repeat,
        rgba(3, 7, 22, 0.92);
    box-shadow: 4px 4px 0 var(--y2k-magenta);
}
body.y2k-ui #missionBanner::after {
    content: "SYSTEM_MSG.EXE ✕";
    position: absolute;
    top: -21px;
    left: max(0px, calc(50% - 160px));
    right: max(0px, calc(50% - 160px));
    height: 14px;
    padding: 0 8px;
    overflow: hidden;
    color: var(--y2k-ink);
    font: 8px/14px 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.14em;
    text-align: justify;
    text-align-last: justify;
    text-shadow: none;
    white-space: nowrap;
}
body.y2k-ui #missionBanner strong {
    color: #ffffff;
    text-shadow: 2px 0 0 rgba(255, 63, 208, 0.6), -2px 0 0 rgba(98, 246, 255, 0.7);
}
body.y2k-ui #missionBanner.is-overdrive::before {
    border-color: var(--y2k-magenta);
    background:
        linear-gradient(var(--y2k-magenta), var(--y2k-magenta)) top / 100% 14px no-repeat,
        rgba(22, 2, 22, 0.94);
    box-shadow: 4px 4px 0 var(--y2k-yellow);
}

/* BOSS!! は DANGER ステッカーの作法で */
/* 操作する中央〜下をふさがないよう、ボスが現れる位置のすぐ下（上から3分の1）に出し、2割ほど小さく */
body.y2k-ui #bossAlert {
    top: 33%;
    padding: 11px 16px 9px;
    font-size: clamp(28px, 9.6vw, 50px);
    background: var(--y2k-magenta);
    color: var(--y2k-ink);
    text-shadow: 3px 0 0 rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 3px var(--y2k-ink), 0 0 0 6px var(--y2k-magenta), 6px 8px 0 6px rgba(0, 0, 0, 0.45);
    rotate: -4deg;
}
body.y2k-ui #bossAlert::before,
body.y2k-ui #bossAlert::after {
    content: "";
    position: absolute;
    left: -32px;
    right: -32px;
    height: 9px;
    background: repeating-linear-gradient(-45deg, var(--y2k-yellow) 0 8px, var(--y2k-ink) 8px 16px);
}
body.y2k-ui #bossAlert.is-slam {
    animation: y2k-boss-slam 260ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes y2k-boss-slam {
    from { scale: 2.4; filter: brightness(2.2); }
    to { scale: 1; filter: brightness(1); }
}
body.y2k-ui #bossAlert::before { top: -21px; }
body.y2k-ui #bossAlert::after { bottom: -21px; }

body.y2k-ui #comboDisplay {
    padding: 4px 14px;
    border: 2px solid var(--y2k-ink);
    border-radius: 3px;
    background: var(--y2k-magenta);
    color: var(--y2k-ink);
    text-shadow: 2px 0 0 rgba(255, 255, 255, 0.5);
    box-shadow: 3px 3px 0 var(--y2k-cyan);
    rotate: -3deg;
}

body.y2k-ui #statusPrompt {
    color: rgba(207, 238, 255, 0.86);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
body.y2k-ui #statusPrompt::before {
    content: "> ";
    color: var(--y2k-magenta);
}
body.y2k-ui #statusPrompt.is-ready {
    color: var(--y2k-yellow);
}

/* ---------- 起動画面 ----------
   新しいUIは upgrade.js が組み立てるので、それまでの一瞬（素のメニューと以前の線画の背景）を隠す。
   組み立て後に body.y2k-ready が付いたら消える。スクリプトが動かない場合も4秒後には消してメニューを使えるようにする */
#startScreen::before {
    content: "WIRE ACTION SHOOTER\A BOOTING…";
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8%;
    background:
        linear-gradient(90deg, #62f6ff, #62f6ff) 50% calc(50% + 34px) / 0 3px no-repeat,
        linear-gradient(90deg, rgba(98, 246, 255, 0.18), rgba(98, 246, 255, 0.18)) 50% calc(50% + 34px) / 160px 3px no-repeat,
        #030716;
    color: #62f6ff;
    font: 12px/2 'Tiny5', Arial, sans-serif;
    letter-spacing: 0.24em;
    text-align: center;
    white-space: pre;
    opacity: 1;
    pointer-events: none;
    transition: opacity 220ms ease;
    animation:
        y2k-boot-bar 900ms ease-out forwards,
        y2k-boot-fallback 0s linear 4s forwards;
}
body.y2k-ready #startScreen::before {
    opacity: 0;
    animation: none;
    background-size: 160px 3px, 160px 3px, auto;
}
@keyframes y2k-boot-bar {
    to { background-size: 150px 3px, 160px 3px, auto; }
}
@keyframes y2k-boot-fallback {
    to { opacity: 0; visibility: hidden; }
}

/* ---------- ページを開いたときの登場演出 ---------- */

.y2k-deco.is-booting .dk,
.y2k-deco.is-booting .chrome,
.y2k-side.is-booting .dk,
.y2k-side.is-booting .chrome {
    opacity: 0;
}
/* 終わりの値は各ステッカー自身の不透明度・角度（from だけ指定して元の値へ戻す） */
.y2k-deco.is-entering .dk,
.y2k-deco.is-entering .chrome,
.y2k-side.is-entering .dk,
.y2k-side.is-entering .chrome {
    animation: y2k-slap 320ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
    animation-delay: calc(var(--enter, 0) * 45ms);
}
@keyframes y2k-slap {
    from { opacity: 0; scale: 1.6; filter: brightness(2.2); }
    65% { scale: 0.95; }
}
.y2k-titlebar span.is-loading {
    animation: y2k-blink 0.6s steps(2) infinite;
}

/* ---------- 動き ---------- */

@keyframes y2k-ticker { to { transform: translateX(-50%); } }
@keyframes y2k-spin { to { transform: rotate(360deg); } }
@keyframes y2k-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes y2k-blink { 50% { opacity: 0.25; } }
@keyframes y2k-blink-in { 0%, 92% { opacity: 1; } 93%, 96% { opacity: 0; } 97% { opacity: 1; } }
@keyframes y2k-twinkle { 0%, 100% { scale: 0.55; opacity: 0.55; rotate: 0deg; } 50% { scale: 1.1; opacity: 1; rotate: 45deg; } }
@keyframes y2k-stamp { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }
@keyframes y2k-glitch {
    0%, 88%, 100% { translate: 0 0; clip-path: none; }
    89% { translate: -3px 0; clip-path: inset(10% 0 52% 0); }
    90% { translate: 4px 0; clip-path: inset(48% 0 12% 0); }
    91% { translate: 0 0; clip-path: none; }
}

@media (max-height: 650px) {
    body.y2k-ui .menu-panel { padding: 22px 0 26px; }
    body.y2k-ui #startScreen h1 { font-size: clamp(32px, 9vw, 44px); }
    .y2k-window-body { gap: 8px; padding: 10px; }
    body.y2k-ui #startBtn, body.y2k-ui #retryBtn { min-height: 48px; font-size: 20px; }
    .y2k-log { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .y2k-deco *,
    body.y2k-ui #startScreen h1,
    body.y2k-ui #startBtn,
    body.y2k-ui #startBtn::after,
    body.y2k-ui #retryBtn,
    body.y2k-ui #retryBtn::after,
    .y2k-press,
    .y2k-press::before,
    body.y2k-ui #bossAlert.is-slam {
        animation: none !important;
    }
    body.y2k-ui #startBtn,
    body.y2k-ui #retryBtn {
        outline-color: rgba(98, 246, 255, 0.6);
    }
}

/* ---------- PCの左右の余白（ゲーム枠の外） ---------- */

.y2k-side {
    display: none;
}

@media (min-aspect-ratio: 1 / 1) and (min-width: 900px) {
    .y2k-side {
        position: fixed;
        inset: 0;
        z-index: 0;
        display: block;
        overflow: hidden;
        pointer-events: none;
        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;
    }

    body.y2k-ui #gameContainer {
        z-index: 1;
    }

    .y2k-side .col {
        position: absolute;
        top: 0;
        bottom: 0;
        width: calc((100vw - min(100vw, var(--game-viewport-height) * 0.5625)) / 2);
    }
    .y2k-side .col.l { left: 0; }
    .y2k-side .col.r { right: 0; }

    /* 余白は黒を薄く重ねてトーンを落とし、ゲーム画面を主役にする。早見表と図鑑は黒の上に出して読みやすく保つ */
    .y2k-side .col::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(1, 3, 10, 0.42);
        pointer-events: none;
    }
    .y2k-side .y2k-window {
        z-index: 2;
        filter: brightness(0.9);
    }

    .y2k-side .dk {
        position: absolute;
        display: block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .y2k-side .mask {
        background: var(--tone, var(--y2k-cyan));
        -webkit-mask: var(--src) center / contain no-repeat;
        mask: var(--src) center / contain no-repeat;
    }

    /* 縦に流れる文字帯 */
    .y2k-side .vtape {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 22px;
        overflow: hidden;
        border-inline: 1px solid rgba(98, 246, 255, 0.35);
        background: rgba(3, 7, 22, 0.86);
        color: var(--y2k-cyan);
        font: 10px/20px 'Tiny5', Arial, sans-serif;
        letter-spacing: 0.2em;
        white-space: nowrap;
        writing-mode: vertical-rl;
    }
    .y2k-side .col.l .vtape { left: 14px; }
    .y2k-side .col.r .vtape { right: 14px; background: var(--y2k-magenta); color: var(--y2k-ink); border-color: var(--y2k-magenta); }
    /* 同じ文言を偶数回並べて半分ずらしでループさせる（流れ始めに空の帯を見せない） */
    .y2k-side .vtape span { display: inline-block; animation: y2k-vtape 48s linear infinite; }
    .y2k-side .col.r .vtape span { animation-direction: reverse; }

    .y2k-side .y2k-window {
        position: absolute;
        left: 50%;
        width: min(78%, 340px);
        transform: translateX(-50%);
    }
    .y2k-side .y2k-window-body { gap: 0; padding: 6px 12px 10px; }
    .side-controls { top: 36%; }
    .side-enemies { top: 31%; }

    .side-row {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px dashed rgba(98, 246, 255, 0.22);
        color: #cfeeff;
        font: 12px/1.45 'DotGothic16', Arial, sans-serif;
    }
    .side-row:last-child { border-bottom: 0; }
    .side-row kbd {
        min-width: 64px;
        padding: 4px 6px;
        border: 1px solid var(--y2k-cyan);
        border-bottom-width: 3px;
        border-radius: 3px;
        background: rgba(98, 246, 255, 0.1);
        color: var(--y2k-cyan);
        font: 10px/1.2 'Tiny5', Arial, sans-serif;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .side-row b {
        display: block;
        color: var(--tone, var(--y2k-cyan));
        font: 13px/1.2 'Tiny5', Arial, sans-serif;
        font-weight: normal;
        letter-spacing: 0.12em;
    }
    .side-row .icon {
        width: 46px;
        height: 46px;
        background-image: url("sprites/chrome-atlas.webp?v=20261001");
        background-repeat: no-repeat;
        background-size: calc(46px * 2048 / var(--fw)) auto;
        background-position: calc(46px * var(--fx) / var(--fw) * -1) calc(46px * var(--fy) / var(--fw) * -1);
        filter: drop-shadow(0 0 6px var(--tone));
    }
    .side-row.bomb { --tone: #ff6b3d; }
    .side-row.bomb .icon { --fx: 662; --fy: 450; --fw: 256; }
    .side-row.shield { --tone: #55b9ff; }
    .side-row.shield .icon { --fx: 234; --fy: 853; --fw: 256; }
    .side-row.spark { --tone: #ffe45e; }
    .side-row.spark .icon { --fx: 1177; --fy: 450; --fw: 256; }
    .side-row.magnet { --tone: #ff67d7; }
    .side-row.magnet .icon { --fx: 870; --fy: 0; --fw: 448; }

    .sd-kx19 { left: 22%; top: 5%; width: 40%; aspect-ratio: 650 / 545; --src: url("sprites/ui/hd-kx19.webp"); opacity: 0.85; }
    .sd-futurewin { right: 7%; top: 7%; width: 22%; aspect-ratio: 400 / 525; background-image: url("sprites/ui/cy-futurewin.webp"); transform: rotate(4deg); }
    .sd-3109 { right: 30%; top: 23%; width: 22%; aspect-ratio: 600 / 459; --src: url("sprites/ui/hd-3109.webp"); --tone: var(--y2k-yellow); opacity: 0.8; }
    .sd-sliders { left: 18%; top: 72%; width: 18%; aspect-ratio: 450 / 207; --src: url("sprites/ui/hd-sliders.webp"); --tone: var(--y2k-magenta); }
    .sd-planet { left: 14%; bottom: 3%; width: 34%; aspect-ratio: 600 / 596; background-image: url("sprites/ui/cy-planet.webp"); }
    .sd-futurenow { right: 6%; top: 67%; width: 32%; aspect-ratio: 650 / 410; background-image: url("sprites/ui/cy-futurenow.webp"); transform: rotate(5deg); }
    .sd-memory { right: 12%; bottom: 3%; width: 26%; aspect-ratio: 580 / 600; background-image: url("sprites/ui/st-memory.webp"); transform: rotate(-6deg); filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.5)); }
    .sd-hazard { left: 20%; top: 31%; width: 30%; aspect-ratio: 525 / 106; background-image: url("sprites/ui/pk-hazard.webp"); transform: rotate(-4deg); }

    .sd-brutal { right: 18%; top: 4%; width: 26%; aspect-ratio: 700 / 672; --src: url("sprites/ui/hd-brutal.webp"); --tone: var(--y2k-magenta); }
    .sd-torus { left: 6%; top: 8%; width: 40%; aspect-ratio: 650 / 417; background-image: url("sprites/ui/cy-torus.webp"); animation: y2k-float 8s ease-in-out infinite; }
    .sd-collision { left: 10%; top: 66%; width: 34%; aspect-ratio: 800 / 546; --src: url("sprites/ui/hd-collision.webp"); --tone: var(--y2k-yellow); opacity: 0.85; }
    .sd-wave { right: 5%; top: 64%; width: 36%; aspect-ratio: 700 / 390; background-image: url("sprites/ui/st-wave.webp"); transform: rotate(-5deg); filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.5)); }
    .sd-synergy { left: 8%; bottom: 3%; width: 36%; aspect-ratio: 700 / 416; background-image: url("sprites/ui/st-synergy.webp"); transform: rotate(6deg); filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.5)); }
    .sd-cubes { right: 7%; bottom: 4%; width: 34%; aspect-ratio: 650 / 386; background-image: url("sprites/ui/cy-cubes.webp"); }
    .sd-radar { right: 8%; top: 20%; width: 15%; aspect-ratio: 524 / 650; --src: url("sprites/ui/hd-radar.webp"); opacity: 0.7; }
    .sd-checker { left: 18%; top: 27%; width: 30%; aspect-ratio: 525 / 81; background-image: url("sprites/ui/pk-checker.webp"); }

    .y2k-side .chrome {
        position: absolute;
        width: var(--s);
        height: var(--s);
        background-image: url("sprites/chrome-atlas.webp?v=20261001");
        background-repeat: no-repeat;
        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 var(--glow, rgba(98, 246, 255, 0.5)));
    }
    .y2k-side .chrome.c10 { --fx: 1320; --fy: 0; --fw: 448; --s: 120px; left: 6%; top: 52%; --glow: rgba(255, 63, 208, 0.55); animation: y2k-spin 40s linear infinite; }
    .y2k-side .chrome.c7 { --fx: 0; --fy: 0; --fw: 448; --s: 110px; right: 4%; top: 46%; animation: y2k-spin 30s linear infinite reverse; }
    .y2k-side .chrome.c13 { --fx: 944; --fy: 853; --fw: 192; --s: 34px; animation: y2k-twinkle 3s ease-in-out infinite; }
    .y2k-side .chrome.t1 { left: 70%; top: 30%; }
    .y2k-side .chrome.t2 { left: 30%; top: 92%; animation-delay: -1.4s; }
    .y2k-side .chrome.t3 { right: 64%; top: 60%; animation-delay: -0.8s; }

    @keyframes y2k-vtape { to { transform: translateY(-50%); } }
}

@media (min-aspect-ratio: 1 / 1) and (min-width: 900px) and (max-height: 760px) {
    .side-row { padding: 5px 0; font-size: 11px; }
    .side-row .icon { width: 34px; height: 34px; background-size: calc(34px * 2048 / var(--fw)) auto; background-position: calc(34px * var(--fx) / var(--fw) * -1) calc(34px * var(--fy) / var(--fw) * -1); }
}