@font-face{font-family:GalleryPixel;src:url('air-beats/fonts/fusion-pixel-12px-proportional-zh_hans.ttf.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:dark;--ink:#1c2037;--panel:#242940;--line:#3f455e;--warm:#f4dfb6;--muted:#afb2c8;--accent:#e5bb88}
body{margin:0;background:var(--ink);color:var(--warm);font:16px/1.5 GalleryPixel,monospace;background-image:repeating-conic-gradient(#22263c 0% 25%,transparent 0% 100%);background-size:8px 8px;-webkit-user-select:none;user-select:none}
main{position:relative;z-index:1;max-width:1320px;margin:auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,52px) 34px}
.masthead{border-bottom:2px solid var(--line);margin-bottom:20px}
.series{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:12px;letter-spacing:.12em}
.series span{width:4px;height:4px;background:var(--accent)}
h1{margin:18px 0 0;font-size:clamp(30px,4.5vw,58px);line-height:1.32;font-weight:400;letter-spacing:.025em;text-shadow:3px 3px #121628}
h1 span{display:inline-block}
.title-glyph{display:inline-block;font:inherit;letter-spacing:inherit;color:inherit;text-shadow:inherit;background:transparent;border:0;padding:0;margin:0;box-shadow:none;cursor:var(--pixel-hand);vertical-align:baseline}
.title-glyph:hover{color:#fff0c8}
.title-glyph:focus-visible{outline:1px dashed #c3b49e;outline-offset:3px}
.title-particles{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;image-rendering:pixelated}
article[data-home-reveal=pending]{visibility:hidden}
article[data-home-reveal=revealing]{mask-size:100% 100%;mask-repeat:no-repeat}
.masthead p{margin:8px 0 0;color:#d3c3c6;font-size:16px;letter-spacing:.02em}
#gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
article{min-width:0;background:var(--panel);border:2px solid var(--line);box-shadow:4px 4px #13172a}
article[data-active]{border-color:#8d796e}
.card-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 10px}
.card-head span{font-size:12px;color:var(--accent)}
h2{font-size:18px;margin:0;font-weight:400}
a,.play{display:grid;place-items:center;color:var(--warm);background:#2a3048;border:1px solid #666984;text-decoration:none}
a{width:28px;height:26px;font-size:19px}
a:hover,a:focus-visible,.play:hover,.play:focus-visible{color:#fff2cf;border-color:var(--warm);outline-offset:2px}
.screen{position:relative;aspect-ratio:16/9;background:#14172b;overflow:hidden;border-block:1px solid #4b506b}
.screen img,.screen iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
.screen img{object-fit:cover;image-rendering:pixelated}
.play{position:absolute;right:8px;bottom:8px;width:30px;height:26px;cursor:pointer}
.play span{width:9px;height:11px;background:currentColor;clip-path:polygon(0 0,22% 0,22% 18%,44% 18%,44% 36%,66% 36%,66% 45%,100% 45%,100% 55%,66% 55%,66% 64%,44% 64%,44% 82%,22% 82%,22% 100%,0 100%)}
article[data-active] .play{display:none}
article p{margin:0;padding:8px 10px;color:var(--muted);font-size:13px}
footer{margin-top:20px;color:var(--muted);font-size:13px}
@media(max-width:900px){#gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#gallery{grid-template-columns:1fr;gap:16px}.masthead{margin-bottom:17px}}
.gesture{display:grid;grid-template-columns:25px minmax(0,1fr);gap:8px;align-items:start;padding:7px 10px 10px;border-top:1px solid #3c425a}
.gesture svg{width:21px;height:21px;fill:var(--accent);shape-rendering:crispEdges;margin-top:2px}
.gesture strong{display:block;font-size:13px;font-weight:400;color:var(--warm)}
.gesture p{padding:1px 0 0;font-size:12px;line-height:1.45}
.preview-note{display:none}
article[data-game="air-beats"]{position:relative}
article[data-game="air-beats"][data-active] .preview-note{display:block;position:absolute;right:8px;top:43px;z-index:1;padding:2px 5px;background:#14172b;color:var(--warm);font-size:11px;pointer-events:none}

body.game-open{overflow:hidden}.pixel-game-stage{position:fixed;inset:0;width:100%;height:100%;display:block;border:0;background:#1c2037;z-index:30;mask-size:100% 100%;mask-repeat:no-repeat;outline:0}
.masthead{position:relative}
.runner-strip{position:relative;height:64px;margin-top:12px;pointer-events:none;--runner-x:72%}
.runner-strip canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
#runner-revive{position:absolute;left:var(--runner-x);bottom:32px;transform:translateX(-50%);pointer-events:auto;white-space:nowrap;padding:5px 8px;color:#ffe3ad;background:#30334c;border:2px solid #8a7581;font:14px/1 GalleryPixel,monospace;box-shadow:3px 3px #16192c;cursor:var(--pixel-hand)}
#runner-revive::after{position:absolute;left:calc(50% - 4px);bottom:-6px;width:6px;height:6px;background:#30334c;border-right:2px solid #8a7581;border-bottom:2px solid #8a7581;content:""}
#runner-revive:hover,#runner-revive:focus-visible{border-color:#ffe3ad}
@media(max-width:750px){.runner-strip{--runner-x:60%}}
#runner-score{position:absolute;left:calc(var(--runner-x) - 44px);bottom:41px;transform:translateX(-100%);font:22px/1 GalleryPixel,monospace;color:#ffe3ad;text-shadow:2px 2px #16192c;pointer-events:none;font-variant-numeric:tabular-nums}
#invincible-toggle{flex-shrink:0;display:flex;align-items:center;gap:7px;min-height:30px;padding:4px 9px;color:#f4dfb6;background:#272c45;border:2px solid #686680;box-shadow:3px 3px #13172a;font:14px/1 GalleryPixel,monospace}
#invincible-toggle span{width:8px;height:8px;background:#a69aae;clip-path:polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%)}
#invincible-toggle:hover,#invincible-toggle:focus-visible,#invincible-toggle[aria-pressed=true]{border-color:#e4b8d2}
#invincible-toggle[aria-pressed=true] span{background:linear-gradient(135deg,#f6b5bd,#f5d2a0,#b1e2cc,#c6b9ee)}
#gallery{position:relative}
.rainbow-card{position:relative}
.rainbow-border{display:none;position:absolute;top:-14px;left:-14px;width:calc(100% + 28px);height:calc(100% + 28px);z-index:2;pointer-events:none;image-rendering:pixelated}
.rainbow-card>.rainbow-border{display:block}
.rainbow-sweep{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;image-rendering:pixelated}
.masthead-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:30px}
.home-note{display:flex;align-items:center;gap:8px;margin-top:13px;color:#959fb9;font-size:12px;line-height:1.7}
.home-note>span{width:5px;height:5px;flex-shrink:0;background:#b1cabd;box-shadow:2px 2px #354650}
.gallery-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 14px;font-size:16px;color:#e4cdaa}
.gallery-heading small{font-size:12px;color:#929cb6}
.gallery-ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:pixelated}
@media(max-width:520px){
  .series{font-size:10px;letter-spacing:.06em;gap:6px}
  #invincible-toggle{font-size:12px;padding:4px 7px;min-height:28px}
  .masthead-top{gap:10px}
  h1{max-width:100%;font-size:clamp(30px,8.4vw,40px);line-height:1.35;margin-top:17px}
  .home-note{font-size:11px;max-width:100%}
  .gallery-heading{font-size:14px;gap:8px}
  .gallery-heading small{font-size:10px}
}

.site-footer{padding-top:22px;margin-top:30px;border-top:2px solid var(--line);font-size:12px;line-height:1.9}.site-footer>p{margin:7px 0;color:var(--muted)}.site-footer .info-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 0}.site-footer a{display:inline;width:auto;height:auto;background:none;border:0;padding:0;font-size:13px;line-height:1.9;color:#d0c4ce;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--warm);text-decoration:underline;text-underline-offset:4px}

/* ---- bento 15 格 · 静态，只在鼠标放上去时动 ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.filters button{padding:5px 11px;font:14px/1.2 GalleryPixel,monospace;color:#d9d3e2;background:#272c45;border:2px solid #4c5170;box-shadow:2px 2px #13172a;cursor:var(--pixel-hand,pointer)}
.filters button:hover{border-color:#b9a99a;color:var(--warm)}
.filters button[aria-pressed=true]{color:#1c2037;background:var(--accent);border-color:#f3d2a6}
#gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:18px}
#gallery>article,#gallery>.soon{display:flex;flex-direction:column}
#gallery>article{position:relative;transition:transform .12s steps(2),box-shadow .12s steps(2)}
#gallery>article .screen{flex:1 0 auto}
#gallery>.L{grid-column:span 2;grid-row:span 2}
#gallery>.W{grid-column:span 2}
#gallery>.W .screen{aspect-ratio:32/9}
#gallery>.L .screen{aspect-ratio:auto;min-height:0;flex:1 1 0}
#gallery>.L h2{font-size:22px}
/* 文案：字号、对比度提一档 */
.gesture{grid-template-columns:27px minmax(0,1fr);padding:9px 11px 12px;border-top-color:#4a506b}
.gesture svg{width:23px;height:23px}
.gesture strong{font-size:16px;color:#ffe9c4}
.gesture p{font-size:14px;line-height:1.5;color:#d2d4e4}
.card-head span{font-size:13px;color:#f0c690}
/* 悬停：抬起 + 走动的虚线边 + 图片放大；不放上去完全静止 */
#gallery>article::after{content:"";position:absolute;inset:-2px;z-index:3;pointer-events:none;opacity:0;
  background:
   repeating-linear-gradient(90deg,#f4dfb6 0 6px,transparent 6px 12px) 0 0/100% 2px no-repeat,
   repeating-linear-gradient(90deg,#f4dfb6 0 6px,transparent 6px 12px) 0 100%/100% 2px no-repeat,
   repeating-linear-gradient(0deg,#f4dfb6 0 6px,transparent 6px 12px) 0 0/2px 100% no-repeat,
   repeating-linear-gradient(0deg,#f4dfb6 0 6px,transparent 6px 12px) 100% 0/2px 100% no-repeat}
#gallery>article:hover{transform:translate(-3px,-3px);box-shadow:7px 7px #13172a}
#gallery>article:hover::after{opacity:1;animation:ants .6s steps(4) infinite}
@keyframes ants{to{background-position:12px 0,-12px 100%,0 -12px,100% 12px}}
#gallery>article .screen img{transition:transform .25s steps(4)}
#gallery>article:hover .screen img{transform:scale(1.05)}
/* 制作中占位：静态 */
.soon{background:#20243a;border:2px dashed #454b66;box-shadow:none}
.soon h2{color:#8f93ad;font-size:16px}
.soon .card-head span{color:#7e8299}
.soon .screen{flex:1 0 auto;display:grid;place-items:center;background:repeating-conic-gradient(#1a1d31 0% 25%,#1e2236 0% 50%) 0 0/10px 10px}
.soon .screen b{font:400 34px/1 GalleryPixel,monospace;color:#5c6180}
.soon p{color:#7e8299;font-size:13px}
/* 筛选时统一成小卡，避免空洞 */
#gallery.filtering>.L,#gallery.filtering>.W{grid-column:auto;grid-row:auto}
#gallery.filtering>.L .screen,#gallery.filtering>.W .screen{aspect-ratio:16/9;flex:1 0 auto}
#gallery.filtering>.soon,#gallery>article.hidden{display:none}

/* 中英切换 */
.masthead-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#invincible-toggle b{font-weight:400}
.lang-toggle{flex-shrink:0;min-height:30px;min-width:44px;padding:4px 9px;color:#f4dfb6;background:#272c45;border:2px solid #686680;box-shadow:3px 3px #13172a;font:14px/1 GalleryPixel,monospace;cursor:pointer}
.lang-toggle:hover,.lang-toggle:focus-visible{border-color:#e4b8d2}
.info-nav .lang-toggle{min-height:26px;font-size:13px;padding:3px 8px;margin-left:auto}
@media(max-width:640px){.lang-toggle{font-size:12px;padding:4px 7px;min-height:28px;min-width:38px}.masthead-actions{gap:6px}}
html.lang-en h1{letter-spacing:.01em}
.home-note em.note-text{font-style:normal}
/* 窄屏：大卡片网格改成两列 / 一列 */
@media(max-width:900px){#gallery{grid-template-columns:repeat(2,minmax(0,1fr))}#gallery>.L{grid-row:auto}#gallery>.L .screen{aspect-ratio:16/9;flex:1 0 auto}#gallery>.W .screen{aspect-ratio:32/11}}
@media(max-width:560px){#gallery{grid-template-columns:1fr}#gallery>.L,#gallery>.W{grid-column:auto}#gallery>.W .screen{aspect-ratio:16/9}}