:root { --ink:#070a0f; --panel:#151a20; --muted:#8d929b; --line:rgba(255,255,255,.15); --cyan:#21d8ff; --lime:#d8ff28; --red:#ff3b26; --orange:#ff733c; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow-x:clip; overflow-y:hidden; }
body { color:#f7f8f9; background:#0a0c10; font-family:'Noto Sans SC',Arial,sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.game-shell { position:relative; isolation:isolate; min-height:100vh; overflow:hidden; background:linear-gradient(135deg,#101720 0%,#121016 45%,#07090d 100%); }
.game-shell::before, .game-shell::after { position:absolute; z-index:-2; content:''; pointer-events:none; }
.game-shell::before { inset:-10%; background:radial-gradient(circle at 19% 22%,rgba(50,218,208,.18),transparent 22%),radial-gradient(circle at 75% 21%,rgba(255,78,89,.15),transparent 20%),linear-gradient(110deg,transparent 0 38%,rgba(253,170,48,.1) 38.1% 38.5%,transparent 38.6% 100%); filter:blur(22px); }
.game-shell::after { inset:0; opacity:.35; background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent 0 58%,rgba(39,229,220,.08) 58% 59%,transparent 59%); mix-blend-mode:screen; }
/* 官方遮罩语言增强：顶栏上沿压黑黄斜纹警示细带；底栏叠颗粒噪点层（z-index:0 低于 nav-row 内容层） */
.topbar::before { display:none; }
.bottom-nav::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scanlines { position:absolute; inset:0; z-index:5; opacity:.12; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.07) 3px 4px); animation:scanDrift 6s linear infinite; }
@keyframes scanDrift { to { background-position:0 24px; } }
html.is-page-hidden .scanlines,
html.is-page-hidden .signal span,
html.is-page-hidden .event-card.is-active,
html.is-page-hidden .game-shell::after {
  animation-play-state: paused !important;
}
.signal span { animation:signalPulse 1.2s ease-in-out infinite; }
.signal span:nth-child(2){animation-delay:.15s}.signal span:nth-child(3){animation-delay:.3s}
@keyframes signalPulse { 0%,100%{opacity:.45} 50%{opacity:1} }
/* 顶栏刻意比底栏薄：垂直 padding 压到最小，高度下限由玩家卡（--player-card-height，默认 82px）撑着。
   毛玻璃要真透出背景，底色 alpha 必须低，且不能再叠第二层高不透明黑渐变，否则 backdrop-filter 白做。 */
.topbar { position:fixed; top:0; right:0; left:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,2vw,28px); min-height:0; padding:8px clamp(20px,4vw,64px); border-bottom:1px solid rgba(255,255,255,.14); background-color:rgba(9,12,16,.48); background-image:url("assets/ui/noise.png"),radial-gradient(circle,rgba(255,255,255,.1) 0 1px,transparent 1.3px),linear-gradient(180deg,rgba(6,9,13,.32),rgba(6,9,13,.14)); background-position:0 0,0 0,0 0; background-size:128px 128px,8px 8px,100% 100%; box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 -1px rgba(255,255,255,.06); backdrop-filter:blur(24px) saturate(1.1); }
.topbar-left { display:flex; align-items:center; gap:clamp(14px,2vw,28px); position:relative; z-index:1; }
.resource-bar { position:relative; z-index:1; display:flex; align-items:center; gap:clamp(8px,1.1vw,14px); padding:0; border:0; background:transparent; }
.resource-chip { position:relative; display:grid; grid-template-columns:25px auto; grid-template-rows:auto auto; align-items:center; column-gap:7px; min-width:132px; padding:7px 13px 7px 9px; border:1px solid rgba(255,255,255,.18); border-radius:5px 14px 5px 14px; background:rgba(4,6,8,.9); box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 0 rgba(0,0,0,.2); transition:transform .14s cubic-bezier(.16,1,.3,1); }
.resource-chip:active { transform:translateY(2px); }
.resource-chip:not(:active) { transition:transform .42s cubic-bezier(.22,1,.36,1); }
.resource-chip::after { content:'+'; position:absolute; left:26px; top:24px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#ffcf1a; color:#131313; font:900 12px/1 Arial; box-shadow:0 0 0 2px #101114; animation:plusPulse 1.8s ease-in-out infinite; }
@keyframes plusPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
/* 三个图标用游戏原图素材（丁尼/菲林官方透明图标、Battery 取自官方 HUD 原件），不再用字符替代 */
.resource-icon { grid-row:1 / span 2; width:24px; height:24px; border:0; background:center/contain no-repeat; }
.battery-icon { background-image:url("assets/icons/battery.png"); }
.dennies-icon { background-image:url("assets/icons/dennies.png"); }
.film-icon { background-image:url("assets/icons/film.png"); }
.resource-label { color:#9ca2aa; font:700 9px/1 'Barlow Condensed',Arial; letter-spacing:1px; white-space:nowrap; }
.resource-chip strong { margin-top:3px; color:#f8fafb; font:700 14px/1 'Barlow Condensed',Arial; letter-spacing:.5px; }
/* 返回键用游戏原图素材（含红描边、暗底斜纹与箭头），不再用 CSS 描画 */
.back-button { width:64px; aspect-ratio:124/83; padding:0; border:0; background:url("assets/icons/back.png") center/contain no-repeat; transition:transform .14s cubic-bezier(.16,1,.3,1),filter .14s; }
.back-button:hover { transform:translateY(-2px); filter:brightness(1.15) drop-shadow(0 0 7px rgba(255,59,38,.5)); }
.back-button:active { transform:translateY(2px) scale(.94); }
.back-button:not(:active) { transition:transform .42s cubic-bezier(.22,1,.36,1),filter .42s; }
.player-card { display:flex; align-items:center; min-width:300px; width:var(--player-card-width,320px); height:var(--player-card-height,56px); padding:5px 16px 5px 8px; border:2px solid #080a0c; border-radius:45px; background:linear-gradient(110deg,#33373b,#121519 72%); box-shadow:0 0 0 2px rgba(255,255,255,.12),inset 0 2px 3px rgba(255,255,255,.12); }
.avatar { display:grid; place-items:center; flex:0 0 44px; height:44px; border:2px solid #d8f5ff; border-radius:50%; color:#fff; font-size:22px; font-weight:900; background:radial-gradient(circle at 35% 25%,#c6fd65,#a63e91 35%,#263e74 67%,#111522 68%); box-shadow:inset 0 0 8px #62e0ed,0 0 0 3px #07090c; }
.player-copy { min-width:0; flex:1; margin-left:9px; }
.player-copy strong { display:block; font-size:18px; line-height:1.15; letter-spacing:-1px; }
.xp-line { position:relative; display:flex; align-items:center; overflow:hidden; width:min(230px,100%); height:13px; margin-top:3px; border-radius:12px; background:#1f7fd6; color:#fff; box-shadow:inset 0 0 0 2px rgba(0,0,0,.3); }
.xp-line span { position:relative; z-index:1; padding-left:8px; font-size:11px; font-weight:900; line-height:1; letter-spacing:1px; text-shadow:1px 1px 1px rgba(0,0,0,.35); }
.xp-line i { position:absolute; inset:0; overflow:hidden; background:linear-gradient(90deg,#1e86e0,#54c8ff); }
.xp-line i::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); animation:xpShine 2.4s ease-in-out infinite; }
@keyframes xpShine { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
.level { padding-left:10px; text-align:center; border-left:1px solid rgba(255,255,255,.12); }
.level b { display:block; color:#fff; font:800 30px/.9 'Barlow Condensed',Arial; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.level span { display:block; margin-top:3px; color:#9ca1aa; font:700 10px/1 'Barlow Condensed',Arial; letter-spacing:1px; }
.signal { display:flex; align-items:end; gap:4px; margin-left:auto; opacity:.65; }
.signal span { width:4px; border-radius:3px; background:var(--lime); }
.signal span:nth-child(1){height:8px}.signal span:nth-child(2){height:13px}.signal span:nth-child(3){height:18px}
.content-grid { display:grid; grid-template-columns:minmax(120px,1fr) minmax(260px,min(21vw,400px)); gap:clamp(20px,4vw,72px); align-items:center; width:min(100% - 6vw,1560px); margin:clamp(88px,11vh,128px) auto 0; padding-bottom:clamp(110px,14vh,170px); }
.events-panel { width:100%; padding:0; border:0; background:transparent; box-shadow:none; transform:rotate(var(--panel-tilt,1deg)); }
.events-frame { position:relative; padding:0 8px; }
.events-cap { position:relative; z-index:2; border:2px solid #08090c; background-color:rgba(13,15,18,.96); box-shadow:0 4px 0 rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.1); }
.events-cap--top { min-height:76px; padding:18px 24px 13px; border-radius:17px 17px 9px 9px; }
.events-cap--bottom { height:34px; margin-top:-2px; border-radius:9px 9px 17px 17px; }
.new-badge { position:absolute; top:1px; left:-9px; z-index:3; padding:2px 7px 1px; color:#111; background:var(--lime); font:900 18px/.95 Impact,'Arial Black',sans-serif; letter-spacing:-.5px; transform:rotate(-4deg); }
.events-heading { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; }
.slash { color:var(--red); font:900 21px 'Barlow Condensed'; }.events-heading h2 { margin:0; color:#f2f0e4; font:900 31px/.9 Impact,'Arial Black',sans-serif; letter-spacing:2px; text-shadow:1px 1px 0 rgba(255,255,255,.06); }.events-count { position:absolute; right:0; bottom:-8px; color:#848a90; font:500 11px 'Barlow Condensed'; }
.cap-dots { position:absolute; top:26px; width:38px; height:27px; opacity:.85; background:radial-gradient(circle,#020304 0 2px,transparent 2.4px); background-size:9px 9px; }.cap-dots--left { left:18px; }.cap-dots--right { right:18px; }
/* 三张活动卡固定完整展示，不自动滚动。胶片高度跟随视口，保证整条胶片在顶栏与底栏之间放得下。 */
.film-strip { position:relative; display:grid; grid-template-columns:29px minmax(0,1fr) 29px; height:var(--stage-h,clamp(300px,46vh,468px)); padding:0; border-right:2px solid #08090c; border-left:2px solid #08090c; background:#100f11; }
.film-sprockets { z-index:1; background-color:#19191c; background-image:url("assets/ui/film-sprocket-vertical.png"); background-position:center; background-size:100% auto; background-repeat:repeat-y; opacity:.98; }
/* 定高而非 min-height：卡片图是 1080×2160 的竖图，min-height 会被图片比例撑破，三张卡就会溢出屏幕。 */
/* 视口 + 胶片卷：一次只显示一张卡，JS 定时 translateY 向上卷动；clone 卡（event-card--loop）保证第3→第1张无缝回卷 */
.event-stage { position:relative; height:var(--stage-h,clamp(300px,46vh,468px)); overflow:hidden; padding:12px 8px; background:url("assets/ui/film-sprocket-horizontal.png") left top/100% 15px repeat-y #090a0c; }
.event-reel { display:flex; flex-direction:column; gap:var(--ev-gap,15px); height:100%; will-change:transform; }
.event-card { position:relative; flex:0 0 calc((100% - (var(--ev-gap,15px) * 2))/3); min-height:0; overflow:hidden; opacity:1; transform:none; border:2px solid #0b0c0f; background:#14161a; box-shadow:0 0 0 1px rgba(255,255,255,.08); pointer-events:auto; transition:border-color .2s,filter .2s; }.event-card.is-active { border-color:var(--lime); filter:brightness(1.08); }.event-card img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }.event-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,9,12,.94),transparent 58%),linear-gradient(90deg,rgba(4,8,12,.25),transparent 70%); }.event-meta { position:absolute; z-index:2; right:9px; bottom:9px; left:9px; text-align:center; }.event-meta span { display:none; }.event-meta h3 { margin:0; font-size:13px; line-height:1.2; }.event-meta h3 i { font-style:normal; font-weight:800; color:#c9c9c9; text-shadow:0 1px 3px rgba(0,0,0,.7); }.event-meta h3 b { display:none; }.event-meta p { display:none; }
/* 官方复刻：橄榄棕胶片底 + 暗齿孔竖槽 + 3:2 帧 + 标题内嵌图底黑色标签条 */
.film-strip { background:#23221a; }
.event-stage { background-color:#23221a; background-image:none; padding:8px 4px; }
.film-sprockets { filter:none; background-color:#23221a; background-image:radial-gradient(7px 12px at 50% 50%, #0f0e09 95%, transparent 100%); background-size:100% 52px; background-position:50% 0; }
.event-card { flex:0 0 auto; aspect-ratio:3/2; border:2px solid #0d0c08; border-radius:3px; background:#0d0c08; box-shadow:none; overflow:hidden; }
.event-card img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.event-card.is-active { border-color:#0d0c08; filter:none; }
.event-shade { display:block; background:linear-gradient(180deg,transparent 62%,rgba(4,4,3,.9) 92%); }
.event-meta { position:absolute; z-index:2; left:5px; right:5px; bottom:5px; height:26px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:#000; border-radius:2px; text-align:center; }
.event-meta h3 { font-size:15px; font-weight:800; letter-spacing:2px; color:#f3f1e8; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.event-meta h3 i { transform:none; font-style:normal; margin:0; color:inherit; }
.event-meta h3 br { display:none; }
/* 官方侧栏卡样式：红色类型章 + 底部斜条纹警示带 */
.event-stamp { display:none; position:absolute; z-index:2; top:10px; left:10px; padding:4px 8px 3px; color:#fff; background:var(--red); border:2px solid #0b0c0f; box-shadow:2px 2px 0 #0b0c0f; font:900 11px/1 'Arial Black',Impact,sans-serif; letter-spacing:1.2px; transform:rotate(-3deg); }

.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:4; padding:7px clamp(12px,5vw,70px) 0; background-color:rgba(26,30,36,.48); background-image:url("assets/ui/noise.png"),radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1.3px),radial-gradient(circle at 50% 0,rgba(255,255,255,.09) 0 .5px,transparent 1px),linear-gradient(180deg,rgba(14,18,26,.3),rgba(26,30,36,.42)); background-position:0 0,0 0,0 0,0 0; background-size:128px 128px,6px 6px,100% 3px,100% 100%; box-shadow:0 -9px 22px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(24px) saturate(1.15); }.bottom-nav::after { position:absolute; right:0; bottom:0; left:0; height:var(--nav-label-h,22px); content:''; background:rgba(8,8,9,.55); pointer-events:none; }.nav-row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(4px,1.3vw,20px); max-width:1370px; margin:0 auto; }.nav-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:0 2px; border:0; background:transparent; opacity:.78; transition:opacity .15s; }.nav-item img { position:relative; z-index:1; width:clamp(27px,3.1vw,49px); height:clamp(27px,3.1vw,49px); object-fit:contain; filter:brightness(1.05) contrast(1.1) drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,255,255,.15)); transition:transform .15s,filter .15s; }.nav-item span { display:flex; align-items:center; justify-content:center; width:100%; height:var(--nav-label-h,22px); max-width:100%; overflow:hidden; color:#f4f5f6; font-size:clamp(10px,1vw,14px); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.nav-item:hover { opacity:1; }.nav-item:hover img { transform:translateY(-4px); }.nav-item.is-active { opacity:1; }.nav-item.is-active img { filter:brightness(1.15) contrast(1.15) drop-shadow(0 0 7px rgba(216,255,40,.7)) drop-shadow(0 0 2px rgba(216,255,40,.5)); }.nav-item.is-active span { color:var(--lime); }.nav-item:active img { transform:translateY(1px) scale(.94); }.nav-item .zap { position:absolute; top:0; right:0; left:0; height:calc(100% - var(--nav-label-h,22px)); border-radius:6px; background:var(--lime); opacity:0; pointer-events:none; }.nav-item.is-zap .zap { animation:zapFlash .34s steps(1,end) 1; }.nav-item.is-zap img { filter:brightness(0) saturate(0); }@keyframes zapFlash { 0%{opacity:.92}18%{opacity:0}34%{opacity:.8}52%{opacity:0}70%{opacity:.6}100%{opacity:0} }.badge { position:absolute; top:-4px; left:8%; z-index:2; display:grid; place-items:start center; padding-top:2px; width:21px; height:19px; color:#fff; background:var(--red); font:900 11px/1 Arial; clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); animation:badgeSpring 1.6s ease-in-out infinite; }@keyframes badgeSpring { 0%,62%,100%{transform:scale(1,1)}70%{transform:scale(1.22,.72)}78%{transform:scale(.86,1.2)}86%{transform:scale(1.08,.94)}94%{transform:scale(.97,1.03)} }
.nav-item img { transition:transform .14s cubic-bezier(.16,1,.3,1),filter .14s; }
.nav-item:not(:active) img { transition:transform .42s cubic-bezier(.22,1,.36,1),filter .42s; }
.nav-item.is-active:not(.is-zap) img { animation:navGlow 1.8s ease-in-out infinite; }
@keyframes navGlow { 0%,100%{filter:brightness(1.15) contrast(1.15) drop-shadow(0 0 7px rgba(216,255,40,.7)) drop-shadow(0 0 2px rgba(216,255,40,.5))} 50%{filter:brightness(1.3) contrast(1.2) drop-shadow(0 0 14px rgba(216,255,40,.95)) drop-shadow(0 0 5px rgba(216,255,40,.8))} }
/* 上下边栏标志下方官方打孔皮革纹理（assets/ui/纹理.png，按官方截图实测参数生成） */
.topbar,.bottom-nav{background-color:rgba(96,88,78,.2);background-image:url("assets/ui/纹理.png"),url("assets/ui/noise.png"),linear-gradient(180deg,rgba(40,36,32,.1),rgba(40,36,32,.03));background-size:auto,128px 128px,100% 100%}

@media (max-width:850px) { .topbar{min-height:0;padding:5px 14px 6px}.topbar-left{gap:8px}.back-button{width:66px}.player-card{min-width:0;flex:1;height:65px;padding-right:10px}.avatar{flex-basis:48px;height:48px;font-size:23px}.player-copy{margin-left:10px}.player-copy strong{font-size:18px}.xp-line{height:14px}.xp-line span{font-size:11px}.level{padding-left:10px}.level b{font-size:32px}.resource-bar{gap:6px;padding:6px 8px}.resource-chip{grid-template-columns:20px auto;min-width:0}.resource-icon{width:18px;height:18px;font-size:11px}.resource-label{font-size:7px}.resource-chip strong{font-size:11px}.content-grid{display:block;width:calc(100% - 28px);margin-top:110px;padding-bottom:104px}.events-panel{max-width:470px;margin:0 0 18px auto}.film-strip{height:var(--stage-h,330px)}.event-stage{height:var(--stage-h,330px)}.signal{display:none}.bottom-nav{--nav-label-h:19px;padding:7px 6px 0}.nav-row{gap:0}.nav-item img{width:clamp(24px,7vw,38px);height:clamp(24px,7vw,38px)}.nav-item span{font-size:clamp(8px,2.2vw,11px)}.badge{left:2%;width:15px;height:15px;font-size:10px} }
@media (max-width:480px) { .topbar{gap:8px;align-items:flex-start}.topbar-left{min-width:0;flex:1}.resource-bar{position:absolute;top:77px;right:10px;left:10px;justify-content:space-around;border-radius:0 0 5px 5px}.player-card{border-radius:30px}.content-grid{margin-top:150px}.events-panel{padding:12px;margin-bottom:86px}.events-heading{margin-bottom:9px}.events-heading h2{font-size:23px}.film-strip{height:var(--stage-h,294px)}.event-stage{height:var(--stage-h,294px)}.event-meta{right:12px;bottom:16px;left:12px}.event-meta h3{font-size:22px}.event-meta p{font-size:10px}.bottom-nav{--nav-label-h:17px}.nav-item img{width:25px;height:25px}.nav-item span{font-size:8px}.badge{top:-3px;left:0;width:13px;height:13px;border-width:1px;font-size:9px} }


/* 可视化编辑器支持：以下为追加规则，未改动上方任何一行。全部变量默认值与原始外观等价。 */
[data-edit] { translate:var(--dx,0px) var(--dy,0px); }
.nav-item img { scale:var(--icon-scale,1); }
.events-panel { transform:rotate(var(--panel-tilt,1deg)); }

/* 返回键、玩家卡与头像使用三个独立尺寸变量，编辑器滑块不会互相牵连。 */
.player-card { min-width:0; width:calc(320px * var(--player-card-scale,1)); height:calc(56px * var(--player-card-scale,1)); }
.avatar { flex:0 0 var(--avatar-size,44px); width:var(--avatar-size,44px); height:var(--avatar-size,44px); font-size:calc(var(--avatar-size,44px) * .5); }
.back-button { width:var(--back-w,64px); }
@media (max-width:850px) {
  .player-card { width:min(calc(100% * var(--player-card-scale,1)),calc(350px * var(--player-card-scale,1))); height:calc(65px * var(--player-card-scale,1)); }
  .avatar { flex:0 0 var(--avatar-size,48px); width:var(--avatar-size,48px); height:var(--avatar-size,48px); font-size:calc(var(--avatar-size,48px) * .48); }
  .back-button { width:var(--back-w,66px); }
}

/* EVENTS 胶片尺寸：对照官方主界面，面板窄而高（约21vw × 60vh），一次完整显示 3 张横版海报卡。 */
/* 舞台纵贯屏幕：面板顶≈55px + 标题栏与底杆约 155px，剩余全给舞台，底杆贴屏幕下缘 */
.events-panel { --stage-h:clamp(380px, calc(100vh - 210px), 980px); max-width:var(--events-w,none); }
@media (max-width:850px) { .events-panel { --stage-h:clamp(280px,42vh,440px); } }
@media (max-width:480px) { .events-panel { --stage-h:clamp(240px,38vh,400px); } }

/* NEW! 逐字弹跳：四个字母依次起跳，循环播放 */
.new-badge { display:inline-flex; gap:1px; }
.new-badge i { display:inline-block; font-style:normal; animation:newHop 1.5s ease-in-out infinite; }
.new-badge i:nth-child(2) { animation-delay:.1s; }
.new-badge i:nth-child(3) { animation-delay:.2s; }
.new-badge i:nth-child(4) { animation-delay:.3s; }
@keyframes newHop { 0%,58%,100%{transform:translateY(0) scale(1,1)}64%{transform:translateY(0) scale(1.16,.82)}72%{transform:translateY(-6px) scale(.9,1.14)}84%{transform:translateY(0) scale(1.06,.95)} }

/* 切换背景按钮：官方在左侧偏下的圆形键位 */
/* 官方「替换壁纸」胶囊：深色哑光圆角药丸 + 人像与双侧弧形切换箭头 */
.bg-switch { position:fixed; bottom:calc(var(--nav-h,96px) + 5vh); left:clamp(14px,4.4vw,74px); z-index:5; display:grid; place-items:center; width:clamp(62px,4.7vw,78px); height:clamp(42px,3.2vw,52px); padding:0; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:radial-gradient(circle at 42% 26%,rgba(66,71,76,.96),rgba(23,26,30,.97) 68%); box-shadow:0 5px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18); transition:transform .15s,border-color .15s,box-shadow .15s; }
.bg-switch span { position:relative; width:66%; height:70%; border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3Cmarker id='ah' viewBox='0 0 10 10' refX='4.5' refY='5' markerWidth='4.2' markerHeight='4.2' orient='auto-start-reverse'%3E%3Cpath d='M0 0L10 5L0 10z' fill='%23eef3f6'/%3E%3C/marker%3E%3C/defs%3E%3Cpath d='M20.9 29.3A14.5 14.5 0 0 1 20.9 10.7' fill='none' stroke='%23eef3f6' stroke-width='4' stroke-linecap='round' marker-end='url(%23ah)'/%3E%3Cpath d='M43.1 29.3A14.5 14.5 0 0 0 43.1 10.7' fill='none' stroke='%23eef3f6' stroke-width='4' stroke-linecap='round' marker-end='url(%23ah)'/%3E%3Ccircle cx='32' cy='12.5' r='5.6' fill='%23eef3f6'/%3E%3Cpath d='M20.4 35.5c0-6.8 5.2-11.4 11.6-11.4s11.6 4.6 11.6 11.4a1.7 1.7 0 0 1-1.7 1.7H22.1a1.7 1.7 0 0 1-1.7-1.7z' fill='%23eef3f6'/%3E%3C/svg%3E") center/contain no-repeat; }
.bg-switch:hover { transform:scale(1.06); border-color:var(--lime); box-shadow:0 5px 16px rgba(0,0,0,.55),0 0 12px rgba(216,255,40,.45),inset 0 1px 0 rgba(255,255,255,.18); }
.bg-switch:active { transform:scale(.93); }
@media (max-width:850px) { .bg-switch { bottom:calc(var(--nav-h,80px) + 12px); left:12px; width:52px; height:36px; } }

/* 背景循环视频。仅在启用时铺满视口并置于内容之下；未启用时页面沿用原有 CSS 场景。 */
#bg-video { position:fixed; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; pointer-events:none; }
body.has-bg-video .game-shell { background:transparent; }
body.has-bg-video .game-shell::before { opacity:.35; }
#bg-shade { position:fixed; inset:0; z-index:-1; background:#05070a; opacity:var(--bg-dim,.35); pointer-events:none; }

/* 顶栏其他元素独立尺寸变量，默认值与原始外观等价。 */
.content-grid .events-panel { grid-column:2; align-self:start; margin-top:-64px; }
.topbar { padding-top:var(--topbar-pad,clamp(7px,.8vw,10px)); padding-bottom:var(--topbar-pad,clamp(7px,.8vw,10px)); }
.resource-bar { scale:var(--resource-scale,1); transform-origin:100% 50%; }
.player-copy strong { font-size:var(--nickname-size,18px); }
.level b { font-size:var(--level-size,30px); }
@media (max-width:850px) {
  .topbar { padding-top:var(--topbar-pad,5px); padding-bottom:var(--topbar-pad,6px); }
  .player-copy strong { font-size:var(--nickname-size,18px); }
  .level b { font-size:var(--level-size,32px); }
}

/* ================= 仓库界面（材料道具 / 驱动仓库） ================= */
body.wh-open { font-family:'ZzzZH','Noto Sans SC',system-ui,sans-serif; }
/* 浮层铺满视口（含顶栏后方），内容从顶栏下开始；置于顶栏（z6）之下、底栏（z4）之上。 */
.wh-overlay { position:fixed; z-index:5; inset:0; padding-top:var(--wh-top,60px); display:flex; flex-direction:column; background-color:#121416; background-image:url("assets/ui/wh-graffiti-top.webp"),url("assets/ui/wh-graffiti-bot.webp"),linear-gradient(180deg,rgba(8,10,13,.18) 0%,rgba(8,10,13,.34) 48%,rgba(8,10,13,.22) 100%),url("assets/ui/wh-graffiti.webp"); background-size:100% auto,100% auto,auto,cover; background-position:center top,center bottom,center top,center center; background-repeat:no-repeat; font-family:'ZzzZH','Noto Sans SC',system-ui,sans-serif; }
.wh-overlay::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.32; background-image:url("assets/ui/wh-hex.webp"); background-size:56px 48px; animation:wh-hex-breathe 5.6s ease-in-out infinite; }
.wh-overlay > * { position:relative; z-index:1; }
.wh-overlay[hidden] { display:none; }
.wh-overlay:not([hidden]) { animation:wh-wall 10s ease-in-out infinite; }
.wh-overlay.is-enter { transform-origin:50% 0; animation:wh-in .4s cubic-bezier(.16,1,.3,1), wh-wall 10s ease-in-out infinite; }
@keyframes wh-in { from { opacity:0; transform:translateY(32px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes wh-hex-breathe { 0%,100% { opacity:.16; } 50% { opacity:.62; } }
@keyframes wh-wall {
  0%,100% { background-position:center top, center bottom, center top, center center; }
  50% { background-position:46% top, 54% bottom, center top, 52% 48%; }
}
.wh-grid.is-in .wh-cell:nth-child(-n+24) { animation:wh-cell-in .36s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--i,0) * 24ms); }
@keyframes wh-cell-in { from { opacity:0; transform:translateY(16px) scale(.9); } to { opacity:1; transform:none; } }
.wh-detail.is-swap { animation:wh-detail-in .3s cubic-bezier(.16,1,.3,1); }
@keyframes wh-detail-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
/* 浮层打开时底栏置其上,避免点击落空 */
body.wh-open .bottom-nav, body.wh-inspect-open .bottom-nav { visibility:hidden; pointer-events:none; }
body.wh-open .content-grid, body.wh-open .bg-switch { visibility:hidden; }
body.wh-open .topbar,
body.wh-inspect-open .topbar {
  background-color: transparent;
  background-image: none;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.wh-titlebar { flex:0 0 auto; padding:10px clamp(14px,3vw,38px) 4px; background:transparent; }
.wh-titlebar h2 { margin:0; font-family:'ZzzZH',sans-serif; font-size:16px; font-weight:400; letter-spacing:.12em; color:#c9ccd2; text-shadow:0 1px 0 #000; }
.wh-titlebar h2 i { font-style:normal; font-family:'ZzzEN','ZzzZH',sans-serif; color:#9aa0a8; font-size:14px; letter-spacing:.04em; }
.wh-body { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,24vw,340px); gap:clamp(10px,1.2vw,18px); padding:6px clamp(16px,2.4vw,34px) 0; }

/* --- 左侧格子网格 --- */
.wh-grid-wrap { min-width:0; min-height:0; padding-right:10px; border-right:2px solid rgba(255,255,255,.08); }
.wh-grid { height:100%; overflow-y:auto; overflow-x:hidden; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:10px 8px; align-content:start; padding:6px 8px 16px 4px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
.wh-grid::-webkit-scrollbar { width:6px; }
.wh-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:3px; }
.wh-cell { display:block; position:relative; padding:3px 3px 12px; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .14s cubic-bezier(.16,1,.3,1); }
.wh-cell:hover:not(.is-sel) { transform:translateY(-5px) scale(1.04); }
.wh-cell:active { transform:scale(.94); }
.wh-cell:not(:active) { transition:transform .42s cubic-bezier(.22,1,.36,1); }
.wh-slot { display:block; position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#0a0b0e; box-shadow:inset 0 0 0 2.5px #4a4e56; transition:filter .15s cubic-bezier(.16,1,.3,1); }
.wh-cell:hover .wh-slot { filter:brightness(1.1); }
.wh-slot::before { content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; opacity:.1; background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px); pointer-events:none; }
.wh-slot::after { content:''; position:absolute; z-index:1; right:0; bottom:0; left:0; height:18%; background:#9db4a8; }
.wh-slot[data-rank="4"]::after { background:#12a7ff; }
.wh-slot[data-rank="5"]::after { background:#f0c14a; }
.wh-slot--disc[data-rank="4"]::after,
.wh-slot--engine[data-rank="4"]::after { background:#a56bff; }
.wh-cell.is-sel .wh-slot { filter:none; box-shadow:inset 0 0 0 2.5px #4a4e56, 0 0 0 3px var(--lime); animation:wh-sel-pulse 1.2s ease-in-out infinite; }
.wh-cell.is-sel .wh-wicon, .wh-cell.is-sel .wh-case { animation:wh-icon-idle 2.4s ease-in-out infinite; }
@keyframes wh-sel-pulse {
  0%,100% { box-shadow:inset 0 0 0 2.5px #4a4e56, 0 0 0 3px var(--lime); }
  50% { box-shadow:inset 0 0 0 2.5px #4a4e56, 0 0 0 4px var(--lime), 0 0 22px rgba(216,255,40,.55); }
}
@keyframes wh-icon-idle { 0%,100% { translate:-50% -50%; } 50% { translate:-50% calc(-50% - 5px); } }
.wh-qty { position:absolute; z-index:5; left:10%; right:10%; bottom:4px; padding:3px 0 2px; border-radius:9px; background:#0a0a0c; font-family:'ZzzZH',sans-serif; font-size:13px; font-weight:400; line-height:1; text-align:center; color:#f4f6f8; letter-spacing:.02em; }

/* --- 格内道具图形：纯 CSS 近似参考图的等轴块件 --- */
.wh-art { position:absolute; top:50%; left:50%; width:62%; height:62%; translate:-50% -54%; background:linear-gradient(148deg,color-mix(in srgb,var(--c) 62%,#fff) 0 12%,var(--c) 38%,color-mix(in srgb,var(--c) 74%,#000) 78%,color-mix(in srgb,var(--c) 46%,#000) 100%); filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
/* 深色嵌片 + 白色符号：对齐参考图芯片中央的印记 */
.wh-art::after { content:''; position:absolute; top:50%; left:50%; width:36%; height:36%; translate:-50% -50%; border-radius:2px; background:linear-gradient(160deg,#1b2027,#0c0f14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.5); }
.wh-art::before { content:attr(data-g); position:absolute; z-index:1; top:50%; left:50%; translate:-50% -52%; font-size:min(2.1vw,15px); line-height:1; color:#f4f7fa; text-shadow:0 0 3px rgba(255,255,255,.55); }
.wh-art--tri { clip-path:polygon(50% 4%,97% 92%,3% 92%); }
.wh-art--tri::after { translate:-50% -30%; }
.wh-art--tri::before { translate:-50% -30%; }
.wh-art--sq { border-radius:5px; }
.wh-art--bag { clip-path:polygon(14% 0,86% 0,100% 26%,86% 100%,14% 100%,0 26%); }
.wh-art--gear { border-radius:50%; background:conic-gradient(from 20deg,var(--c),color-mix(in srgb,var(--c) 60%,#000) 25%,var(--c) 50%,color-mix(in srgb,var(--c) 60%,#000) 75%,var(--c)); }
.wh-art--tube { width:52%; border-radius:999px 999px 6px 6px; }
.wh-art--disc { border-radius:50%; background:radial-gradient(circle,#12161c 0 22%,var(--c) 22% 46%,color-mix(in srgb,var(--c) 65%,#000) 46% 62%,var(--c) 62% 100%); }
.wh-art--disc::after, .wh-art--disc::before { display:none; }
/* 驱动盘：倾斜的浅灰厚板（左下见板厚）+ 盘面螺旋 + 右下金色 RARITY 标牌 */
.wh-art--drive { width:74%; height:74%; translate:-50% -52%; rotate:-8deg; border-radius:11%; background:linear-gradient(150deg,#eef0f3 0 26%,#c9ccd2 56%,#a8adb5 100%); box-shadow:-3px 4px 0 #5d626b, -4px 5px 0 #43474e, -4px 7px 6px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.9); filter:none; }
/* 盘面螺旋：正圆，避免被托板压扁 */
.wh-art--drive::before { content:''; position:absolute; z-index:0; top:50%; left:50%; width:84%; aspect-ratio:1; height:auto; translate:-50% -50%; border-radius:50%; background:conic-gradient(from 200deg,#fff,color-mix(in srgb,var(--c) 55%,#fff) 22%,#f3eefa 46%,color-mix(in srgb,var(--c) 70%,#fff) 72%,#fff); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), inset 0 0 6px rgba(120,110,140,.35); }
/* 中心轴孔 */
.wh-art--drive::after { top:50%; left:50%; width:17%; height:17%; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle,#3b414a 0 52%,#6e747d 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
/* 驱动盘：浅灰厚板斜放，盘面贴在板上；标牌跟板一起转 */
.wh-drive { position:absolute; z-index:2; top:50%; left:50%; width:74%; height:74%; translate:-50% -52%; rotate:-12deg; border-radius:12%; background:linear-gradient(150deg,#eef0f3 0 26%,#c9ccd2 56%,#a8adb5 100%); box-shadow:-3px 4px 0 #5d626b, -4px 5px 0 #43474e, -4px 7px 6px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.9); }
.wh-drive .wh-wicon { position:absolute; z-index:1; top:50%; left:50%; width:86%; height:86%; translate:-50% -50%; rotate:0deg; border-radius:50%; object-fit:cover; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.wh-drive .wh-art--drive { position:absolute; top:50%; left:50%; width:86%; height:86%; translate:-50% -50%; rotate:0deg; }
.wh-drive .wh-tag { position:absolute; z-index:3; right:4%; bottom:8%; width:36%; height:28%; rotate:0deg; border-radius:2px; background:linear-gradient(165deg,#ffd94a,#e8a913); box-shadow:0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.45); font-size:min(1.5vw,11px); font-weight:800; font-style:normal; line-height:1; color:#3a2a05; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; }
.wh-drive .wh-tag small { font-size:.42em; font-weight:800; letter-spacing:.04em; }
.wh-slot--disc[data-rank="4"] .wh-tag { background:linear-gradient(165deg,#e6b3ff,#a05fe0); color:#2a0b3d; }
.wh-slot--disc { overflow:hidden; }
.wh-drive .wh-wicon { display:block; }
/* 珠宝盒 3D 渲染：格子/侧栏/全屏直接用 wiki 盒图，不再叠 CSS 假板 */
.wh-case { position:absolute; z-index:2; top:50%; left:50%; width:90%; height:90%; translate:-50% -50%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.wh-dt-art--disc .wh-case { position:relative; top:auto; left:auto; width:88px; height:88px; translate:none; }

/* 驱动盘格子角标 */
/* 位置编号：游戏是左上深色六边形标 */
.wh-pos { position:absolute; top:5px; left:5px; z-index:3; display:flex; align-items:center; justify-content:center; width:22px; height:24px; padding:0; background:#161a20; clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%); font-size:12px; font-style:normal; font-weight:800; line-height:1; color:#eef1f4; text-shadow:0 1px 2px #000; }
.wh-owner { position:absolute; top:3px; right:4px; z-index:4; width:17px; height:17px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.6); }
.wh-owner::after { content:''; position:absolute; inset:26%; border-radius:50%; background:rgba(0,0,0,.28); }
.wh-dot { position:absolute; top:19px; right:3px; z-index:3; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 1.5px #0d1014; }
.wh-lock { position:absolute; right:6px; bottom:24%; z-index:4; width:9px; height:11px; border-radius:1px 1px 2px 2px; background:#dfe3e8; box-shadow:0 1px 2px rgba(0,0,0,.6); }
.wh-lock::before { content:''; position:absolute; bottom:100%; left:50%; width:9px; height:6px; translate:-50% 1px; border:2px solid #dfe3e8; border-bottom:0; border-radius:5px 5px 0 0; }

/* --- 右侧：分类页签 + DETAIL --- */
.wh-side { display:flex; flex-direction:column; gap:9px; min-height:0; }
.wh-tabs { display:flex; justify-content:space-evenly; align-items:center; gap:clamp(6px,.7vw,12px); padding:7px 14px; border-radius:999px; background:rgba(10,12,16,.92); box-shadow:inset 0 0 0 2px #0b0d11, inset 0 1px 2px rgba(255,255,255,.14); }
.wh-tab { position:relative; width:clamp(42px,3.8vw,52px); aspect-ratio:1; border:0; border-radius:50%; background:#14181e url("assets/ui/wh-tabs/engine.webp") center/86% no-repeat; box-shadow:inset 0 0 0 2px #0d1014; cursor:pointer; transition:transform .12s cubic-bezier(.16,1,.3,1), filter .12s; }
.wh-tab:not(:active) { transition:transform .42s cubic-bezier(.22,1,.36,1), filter .42s; }
.wh-tab::before, .wh-tab::after { content:none; }
.wh-tab[data-tab="engine"] { background-image:url("assets/ui/wh-tabs/engine.webp"); }
.wh-tab[data-tab="disc"] { background-image:url("assets/ui/wh-tabs/disc.webp"); }
.wh-tab[data-tab="mat"] { background-image:url("assets/ui/wh-tabs/mat.webp"); }
.wh-tab[data-tab="key"] { background-image:url("assets/ui/wh-tabs/key.webp"); }
.wh-tab:hover:not(:disabled) { transform:translateY(-3px) scale(1.06); filter:brightness(1.12); }
.wh-tab:active:not(:disabled) { transform:translateY(1px) scale(.94); }
.wh-tab:disabled { opacity:.55; cursor:default; }
.wh-tab.is-active { background-color:transparent; background-size:100%; filter:none; box-shadow:none; animation:wh-tab-pop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes wh-tab-pop { from { transform:scale(.82); } to { transform:none; } }
.wh-tab.is-active[data-tab="engine"] { background-image:url("assets/ui/wh-tabs/engine-on.webp"); }
.wh-tab.is-active[data-tab="disc"] { background-image:url("assets/ui/wh-tabs/disc-on.webp"); }
.wh-tab.is-active[data-tab="mat"] { background-image:url("assets/ui/wh-tabs/mat-on.webp"); }
.wh-tab.is-active[data-tab="key"] { background-image:url("assets/ui/wh-tabs/key-on.webp"); }

.wh-detail-frame { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:16px 13px 13px; border-radius:10px; background:rgba(17,20,25,.95); box-shadow:inset 0 1px 2px rgba(255,255,255,.12), inset 0 0 0 2px #0b0d11, inset 0 0 0 3px rgba(255,255,255,.06); }
.wh-dt-label { position:absolute; top:5px; left:11px; font-family:'ZzzEN','ZzzZH',sans-serif; font-size:10px; font-weight:400; letter-spacing:.22em; color:var(--muted); }
.wh-detail { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.wh-detail::-webkit-scrollbar { width:5px; }
.wh-detail::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:3px; }
.wh-dt-head { position:relative; min-height:88px; padding-right:108px; }
.wh-dt-head h3 { margin:0 0 5px; font-family:'ZzzZH',sans-serif; font-size:clamp(16px,1.25vw,20px); font-weight:400; line-height:1.15; color:#fff; }
.wh-dt-head h3 i { font-style:normal; font-weight:700; color:#c2c7cd; }
.wh-dt-art { position:absolute; top:-2px; right:0; width:96px; height:84px; border-radius:5px; background:linear-gradient(150deg,#333a44,#191d23); box-shadow:inset 0 0 0 2px #0c0f13; }
.wh-dt-art .wh-art { width:70%; height:70%; }
.wh-dt-art .wh-art--drive { width:74%; height:74%; }
.wh-rank, .wh-badges { display:inline-flex; align-items:center; gap:5px; }
.wh-rank { width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 2px #dfe3e8; }
.wh-rank[data-rank="4"] { box-shadow:inset 0 0 0 2px #e0459b; }
.wh-rank[data-rank="5"] { box-shadow:inset 0 0 0 2px #f0b52a; }
.wh-badges .wh-pos, .wh-badges .wh-owner { position:relative; width:16px; height:16px; padding:0; border-radius:50%; clip-path:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); display:inline-grid; place-items:center; font-size:10px; }
.wh-own { margin:10px 0 7px; font-family:'ZzzZH',sans-serif; font-size:14px; font-weight:400; color:#fff; }
.wh-desc { margin:0; font-size:13px; line-height:1.62; color:#a9aeb6; }
.wh-links { margin-top:14px; display:grid; gap:7px; }
.wh-link { position:relative; padding:9px 26px 8px 11px; text-align:left; font:inherit; font-size:13px; color:#dfe3e8; border:0; border-radius:6px; background:rgba(30,35,42,.95); box-shadow:inset 0 1px 1px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.09); cursor:pointer; transition:background .12s, transform .12s cubic-bezier(.16,1,.3,1); }
.wh-link:hover { background:rgba(44,51,60,.98); }
.wh-link:active { transform:translateY(1px); }
.wh-link i { position:absolute; top:50%; right:9px; width:7px; height:7px; translate:0 -50%; rotate:45deg; border-top:2px solid #dfe3e8; border-right:2px solid #dfe3e8; }

/* 驱动盘 DETAIL 专属 */
.wh-lv-row { display:flex; align-items:center; gap:8px; margin:9px 0 12px; }
.wh-lv { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 4px; font-family:'ZzzZH',sans-serif; font-size:13px; font-weight:400; color:#fff; border-radius:6px; background:rgba(30,35,42,.95); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.wh-lv i { display:grid; place-items:center; width:16px; height:16px; font-size:10px; font-style:normal; color:#141414; border-radius:50%; background:var(--lime); }
.wh-empty { flex:1; padding:6px 0 5px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.1em; color:#5e646d; border-radius:3px; background:rgba(24,28,34,.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.wh-sec { margin:11px 0 6px; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--muted); }
.wh-sec--more { position:relative; text-align:left; }
.wh-caret { position:absolute; top:50%; left:50%; width:0; height:0; translate:-50% -50%; border:6px solid transparent; border-top-color:#c2c7cd; }
.wh-sec--more { width:100%; padding:0; border:0; background:none; cursor:pointer; color:var(--muted); }
.wh-sec--more.is-open .wh-caret { rotate:180deg; margin-top:-2px; }
.wh-set-body { margin:0 0 8px; }
.wh-fx { margin:0; padding:7px 2px 8px; font-size:12.5px; line-height:1.62; color:#a9aeb6; border-bottom:1px solid rgba(255,255,255,.07); }
.wh-fx b { display:block; margin-bottom:3px; font-size:11px; font-weight:700; letter-spacing:.04em; color:#dfe3e8; }
.wh-spec { display:inline-block; margin-left:6px; font-size:11px; font-weight:700; letter-spacing:.06em; color:#c2c7cd; }
.wh-slot--engine::before { opacity:.18; }
.wh-wicon { position:absolute; z-index:2; top:44%; left:50%; width:92%; height:92%; translate:-50% -50%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) saturate(1.1) contrast(1.06) brightness(1.05); }
.wh-slot--engine .wh-wicon { width:100%; height:100%; top:45%; }
.wh-slot--disc .wh-case { width:96%; height:96%; }
.wh-dt-art { overflow:hidden; display:grid; place-items:center; }
.wh-dt-art .wh-wicon { position:static; width:92%; height:92%; translate:none; }
.wh-dt-art--disc { position:relative; overflow:visible; background:transparent; box-shadow:none; width:104px; height:88px; }
.wh-dt-art--disc .wh-drive { position:relative; top:auto; left:auto; width:84px; height:84px; translate:none; }
.wh-dt-art--disc .wh-drive .wh-wicon { position:absolute; width:86%; height:86%; translate:-50% -50%; }
.wh-stat { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0; padding:6px 2px 5px; font-size:13px; color:#dfe3e8; border-bottom:1px solid rgba(255,255,255,.07); }
.wh-stat i { margin-left:5px; font-style:normal; font-weight:700; color:var(--lime); }
.wh-stat b { font-weight:800; color:#fff; }
.wh-dt-foot { display:flex; align-items:center; gap:8px; margin-top:14px; }
.wh-icon-btn { position:relative; width:34px; height:34px; border:0; border-radius:50%; background:rgba(30,35,42,.95); box-shadow:inset 0 1px 2px rgba(255,255,255,.12), inset 0 0 0 2px #0d1014; cursor:pointer; transition:background .12s, transform .12s cubic-bezier(.16,1,.3,1); }
.wh-icon-btn:hover { background:rgba(46,53,62,.98); }
.wh-icon-btn:active { transform:translateY(1px) scale(.96); }
.wh-icon-btn::before { content:''; position:absolute; inset:0; margin:auto; }
.wh-icon-btn--trash::before { width:13px; height:14px; border:2px solid #dfe3e8; border-top-width:4px; border-radius:1px 1px 3px 3px; }
.wh-icon-btn--lock::before { width:11px; height:9px; margin-top:19px; border-radius:1px; background:#dfe3e8; box-shadow:0 -8px 0 -3px transparent, -4px -8px 0 -3px #dfe3e8, 4px -8px 0 -3px #dfe3e8, 0 -12px 0 -3px #dfe3e8; }
.wh-view { flex:1; padding:9px 0 8px; font:inherit; font-size:13px; font-weight:400; color:#dfe3e8; border:0; border-radius:999px; background:rgba(30,35,42,.95); box-shadow:inset 0 0 0 2px #0d1014, inset 0 1px 2px rgba(255,255,255,.12); cursor:pointer; transition:background .12s, transform .12s cubic-bezier(.16,1,.3,1); }
.wh-view:hover { background:rgba(48,55,64,.98); }
.wh-view:active:not(:disabled) { transform:translateY(1px) scale(.98); }
.wh-view:disabled { color:#5e646d; cursor:default; }
.wh-view:disabled:hover { background:rgba(30,35,42,.95); }
/* 强化模拟：满级按钮用主色区分，与「强化 +3」区分层级 */
.wh-view--max:not(:disabled) { color:#141414; background:var(--lime); }
.wh-view--max:not(:disabled):hover { background:#d4f04a; }
.wh-dt-foot--sim { margin-top:8px; flex-wrap:wrap; }
/* 本次强化命中的那条副词条闪一下，让变化可见 */
.wh-stat.is-bump { animation:wh-bump 1s ease-out; }
@keyframes wh-bump {
  0% { background:rgba(198,240,74,.34); }
  100% { background:transparent; }
}

/* --- 底部操作条 --- */
.wh-footbar { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px clamp(14px,3vw,38px) 22px; }
.wh-funnel { position:relative; width:34px; height:34px; border:0; border-radius:50%; background:rgba(24,28,34,.95); box-shadow:inset 0 0 0 2px #0d1014; cursor:pointer; }
.wh-funnel::before { content:''; position:absolute; inset:0; margin:auto; width:14px; height:12px; background:#dfe3e8; clip-path:polygon(0 0,100% 0,58% 42%,58% 100%,42% 100%,42% 42%); }
.wh-action { display:inline-flex; align-items:center; gap:9px; padding:7px 30px 6px 8px; font:inherit; font-size:14px; font-weight:400; color:#e8ebef; border:0; border-radius:999px; background:rgba(24,28,34,.95); box-shadow:inset 0 0 0 2px #0d1014, inset 0 1px 2px rgba(255,255,255,.12); cursor:pointer; transition:background .12s, transform .12s cubic-bezier(.16,1,.3,1); }
.wh-action:hover { background:rgba(40,46,54,.98); }
.wh-action:active { transform:translateY(1px); }
.wh-action i { position:relative; width:22px; height:22px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px rgba(33,216,255,.5); }
.wh-action i::before { content:''; position:absolute; inset:0; margin:auto; width:9px; height:9px; border:2px solid #0a1015; border-radius:50%; border-right-color:transparent; }
.wh-uid { margin-left:auto; font-size:10px; letter-spacing:.06em; color:#5a6068; }
.wh-action[hidden], .wh-funnel[hidden] { display:none; }
.wh-new { position:absolute; z-index:4; left:4px; top:6px; padding:1px 5px 0; font-family:'ZzzEN','ZzzZH',sans-serif; font-size:10px; font-weight:400; letter-spacing:.04em; color:#141414; background:var(--lime); transform:rotate(-8deg); animation:wh-new-bounce .9s ease-in-out infinite; }
@keyframes wh-new-bounce { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
.wh-stars { display:inline-flex; gap:3px; margin:4px 0 0; }
.wh-stars i { width:11px; height:11px; background:#3a4048; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.wh-stars i.is-on { background:#f0c14a; }
.wh-stars-mini { position:absolute; z-index:4; left:50%; bottom:22%; display:flex; gap:1px; translate:-50% 0; pointer-events:none; }
.wh-stars-mini i { width:8px; height:8px; background:#3a4048; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.wh-stars-mini i.is-on { background:#f0c14a; }
.wh-fx-lead { margin:0 0 6px; font-size:12px; color:#c2c7cd; }
.wh-fx-lead b { color:#fff; }
.wh-fx-name { margin:0 0 6px; padding:6px 8px; font-size:13px; font-weight:800; color:#fff; background:#14181e; border-radius:3px; }
.wh-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.wh-stat--empty { justify-content:center; color:#5e646d; letter-spacing:.12em; font-size:10px; font-weight:700; }
/* 查看详情全屏：盖住仓库列表与底栏，顶栏保留 */
.wh-inspect { position:fixed; z-index:5; inset:0; padding-top:var(--wh-top,60px); display:flex; flex-direction:column; background-color:#121416; background-image:url("assets/ui/wh-graffiti-top.webp"),url("assets/ui/wh-graffiti-bot.webp"),linear-gradient(180deg,rgba(8,10,13,.14),rgba(8,10,13,.3)),url("assets/ui/wh-graffiti.webp"); background-size:100% auto,100% auto,auto,cover; background-position:center top,center bottom,center top,center center; background-repeat:no-repeat; font-family:'ZzzZH','Noto Sans SC',system-ui,sans-serif; }
.wh-inspect[hidden] { display:none; }
.wh-inspect:not([hidden]) { transform-origin:50% 0; animation:wh-in .4s cubic-bezier(.16,1,.3,1); }
body.wh-inspect-open .bottom-nav { visibility:hidden; pointer-events:none; }
body.wh-inspect-open .content-grid, body.wh-inspect-open .bg-switch { visibility:hidden; }
.wh-ins-title { flex:0 0 auto; margin:0; padding:10px clamp(16px,3vw,38px) 8px; font-family:'ZzzZH',sans-serif; font-size:20px; font-weight:400; color:#eef1f4; }
.wh-ins-body { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,38vw); gap:12px; padding:0 clamp(16px,3vw,38px) 18px; }
.wh-ins-left { position:relative; min-height:0; border-radius:8px; background:rgba(12,14,18,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.wh-ins-art { position:absolute; inset:12% 10% 18%; display:grid; place-items:center; }
.wh-ins-art .wh-wicon { position:static; width:min(78%,520px); height:auto; translate:none; filter:drop-shadow(0 16px 28px rgba(0,0,0,.55)); }
.wh-ins-art .wh-anim { width:min(82%,560px); }
.wh-ins-art--disc { inset:8% 6% 10%; overflow:visible; }
.wh-ins-art--disc .wh-drive { position:relative; top:auto; left:auto; width:min(82%,420px); height:min(82%,420px); aspect-ratio:1; translate:none; overflow:visible; }
.wh-ins-art--disc .wh-case { position:relative; top:auto; left:auto; width:min(86%,560px); height:auto; translate:none; animation:wh-case-idle 4.8s ease-in-out infinite; }
@keyframes wh-case-idle { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
.wh-max { margin-left:6px; padding:2px 7px 1px; border-radius:3px; background:#2a3038; font-size:10px; font-weight:800; letter-spacing:.08em; color:#dfe3e8; font-style:normal; }
.wh-switch { position:relative; display:inline-block; width:30px; height:16px; border-radius:999px; background:#3a4048; vertical-align:middle; }
.wh-switch::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#dfe3e8; }
.wh-ins-new.is-on .wh-switch { background:var(--lime); }
.wh-ins-new.is-on .wh-switch::after { left:16px; background:#141414; }
.wh-ins-slot { position:absolute; z-index:2; top:16px; left:16px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#1a1e24; box-shadow:inset 0 0 0 2px #0d1014; font-weight:800; }
.wh-ins-spec { position:absolute; z-index:2; top:16px; left:16px; padding:4px 8px; font-size:12px; font-weight:800; color:#dfe3e8; background:#1a1e24; border-radius:4px; }
.wh-ins-owner { position:absolute; z-index:2; top:58px; left:20px; }
.wh-ins-tools { position:absolute; z-index:2; top:16px; right:16px; display:flex; gap:14px; }
.wh-ins-lock { position:absolute; z-index:2; top:16px; right:16px; }
.wh-ins-tools .wh-icon-btn, .wh-ins-lock { width:38px; height:38px; }
.wh-ins-tools .wh-icon-btn b, .wh-ins-lock b { position:absolute; top:100%; left:50%; translate:-50% 4px; font-size:10px; font-weight:800; color:#9aa0a8; }
.wh-ins-new { position:absolute; z-index:2; left:18px; bottom:52px; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--lime); }
.wh-ins-blurb { position:absolute; z-index:2; left:18px; right:18px; bottom:16px; margin:0; font-size:12px; color:#c2c7cd; }
.wh-ins-right { min-height:0; overflow-y:auto; padding:14px 14px 16px; border-radius:8px; background:rgba(17,20,25,.95); box-shadow:inset 0 0 0 2px #0b0d11, inset 0 0 0 3px rgba(255,255,255,.06); }
.wh-ins-right .wh-stat { margin:0; padding:8px 10px; background:#14181e; border:0; border-radius:4px; }

@media (max-width:850px) {
  .wh-overlay { inset:0; padding-top:var(--wh-top,52px); }
  .wh-body { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:8px; }
  .wh-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .wh-grid-wrap { padding-right:0; border-right:0; border-bottom:2px solid rgba(255,255,255,.08); padding-bottom:8px; }
  .wh-side { max-height:44vh; }
  .wh-tabs { justify-content:center; }
}
@media (max-width:480px) {
  .wh-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .wh-qty { font-size:11px; }
}

.home-wallpaper { position:fixed; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; pointer-events:none; }
body.has-home-wallpaper #bg-video,
body.has-home-wallpaper #bg-shade { display:none; }

.wip-mask { position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:rgba(4,6,8,.78); }
.wip-mask[hidden] { display:none; }
.wip-tv { position:relative; width:min(540px,88vw); padding:0; border:2px solid #d8ff28; background:#0b0c0f; box-shadow:0 22px 48px rgba(0,0,0,.62), 8px 8px 0 rgba(216,255,40,.28); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); transform-origin:50% 50%; animation:wipOpen .26s cubic-bezier(.16,1,.3,1); }
.wip-tv::before, .wip-tv::after { content:''; position:absolute; z-index:3; width:16px; height:16px; pointer-events:none; border:2px solid #d8ff28; }
.wip-tv::before { top:22px; right:10px; border-left:0; border-bottom:0; }
.wip-tv::after { left:10px; bottom:22px; border-right:0; border-top:0; }
.wip-mask.is-closing .wip-tv { animation:wipClose .4s cubic-bezier(.22,1,.36,1) forwards; }
.wip-hazard { height:16px; background:repeating-linear-gradient(-22deg,#111 0 9px,#d8ff28 9px 18px); background-size:34px 16px; animation:wipStripe .7s linear infinite; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.wip-hazard--bottom { animation-direction:reverse; }
.wip-screen { position:relative; overflow:hidden; display:grid; gap:10px; padding:14px 16px 16px; background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(180deg,rgba(216,255,40,.08),transparent 28%),#101318; color:#f4f5f6; text-align:left; }
.wip-scan { position:absolute; inset:0 auto auto 0; width:100%; height:22%; background:linear-gradient(180deg,transparent,rgba(216,255,40,.16),transparent); animation:wipScan 1.8s linear infinite; pointer-events:none; }
.wip-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid rgba(216,255,40,.28); }
.wip-kicker { margin:0; color:#d8ff28; font:700 11px/1 'Barlow Condensed',Arial; letter-spacing:.18em; }
.wip-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.wip-copy { display:grid; gap:3px; min-width:0; }
.wip-num { font:900 64px/.8 Impact,'Arial Black',sans-serif; color:rgba(216,255,40,.32); letter-spacing:.04em; }
.wip-title { margin:0; font:900 32px/.9 Impact,'Arial Black',sans-serif; letter-spacing:.04em; text-shadow:0 0 18px rgba(216,255,40,.24); }
.wip-title-en { margin:0; color:#9aa0a8; font:700 11px/1 'Barlow Condensed',Arial; letter-spacing:.2em; }
.wip-desc { margin:4px 0 0; display:grid; gap:2px; color:#c9ccd2; font-size:13px; }
.wip-en { color:#8d929b; font-size:12px; }
.wip-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0; padding:0; border:1px solid rgba(216,255,40,.28); background:rgba(216,255,40,.16); }
.wip-board > div { display:grid; gap:4px; min-width:0; padding:8px 9px; background:#101318; }
.wip-board dt { color:#8d929b; font:800 9px/1 'Barlow Condensed',Arial; letter-spacing:.14em; }
.wip-board dd { margin:0; color:#d8ff28; font:800 13px/1 'Barlow Condensed',Arial; letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wip-log { margin:0; padding:8px 10px; border:1px dashed rgba(216,255,40,.28); background:rgba(0,0,0,.28); color:#b7c48a; font:12px/1.4 Consolas,'Courier New',monospace; white-space:pre-wrap; }
.wip-foot { display:flex; align-items:center; gap:12px; }
.wip-progress { flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.wip-progress > span, .wip-progress > b { color:#d8ff28; font:800 10px/1 'Barlow Condensed',Arial; letter-spacing:.14em; }
.wip-bar { position:relative; overflow:hidden; height:8px; background:#1b1f24; box-shadow:inset 0 0 0 1px rgba(216,255,40,.18); }
.wip-bar i { position:absolute; inset:0 auto 0 0; width:34%; background:var(--lime); animation:wipBar 1.1s ease-in-out infinite; }
.wip-close { flex:none; display:inline-flex; flex-direction:column; gap:3px; min-width:108px; padding:9px 18px 7px; border:0; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); background:#d8ff28; color:#111; font:800 14px/1 Impact,'Arial Black',sans-serif; letter-spacing:.1em; box-shadow:4px 4px 0 rgba(0,0,0,.45); }
.wip-close .wip-en { color:#333; font:700 9px/1 'Barlow Condensed',Arial; }
.wip-close:hover { filter:brightness(1.08); }
.wip-close:active { transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.45); }
@media (max-width:560px) {
  .wip-hero { grid-template-columns:minmax(0,1fr) auto; }
  .wip-num { font-size:40px; }
  .wip-board { grid-template-columns:1fr 1fr; }
  .wip-foot { flex-wrap:wrap; }
  .wip-close { width:100%; }
}
@keyframes wipOpen { from { opacity:0; transform:scaleY(.02); } to { opacity:1; transform:none; } }
@keyframes wipClose { to { opacity:0; transform:scaleY(.02); } }
@keyframes wipStripe { to { background-position:28px 0; } }
@keyframes wipSpin { to { transform:rotate(360deg); } }
@keyframes wipScan { from { transform:translateY(-120%); } to { transform:translateY(360%); } }
@keyframes wipBar { 0%,100% { transform:translateX(-10%); } 50% { transform:translateX(210%); } }
@media (prefers-reduced-motion:reduce) {
  .wip-tv, .wip-mask.is-closing .wip-tv, .wip-hazard, .wip-scan, .wip-gear, .wip-bar i { animation:none; }
}

/* 2026-09-09 首轮：HUD 入场、可视卡荧光绿框、按压缩一下、跳页 CRT 切场。
   不改上方几何；入场用 backwards，播完回到原有 transform。
   本轮：入场错开、绿框呼吸、开机扫描、CRT 强化；不抢游戏壳图层。 */
.topbar { animation:hudSlideTop .5s cubic-bezier(.16,1,.3,1) backwards; }
.bottom-nav { animation:hudSlideBot .52s cubic-bezier(.16,1,.3,1) .12s backwards; }
.events-panel { animation:hudSlidePanel .56s cubic-bezier(.16,1,.3,1) .22s backwards; }
.bg-switch { animation:hudFadeSwitch .4s cubic-bezier(.16,1,.3,1) .32s backwards; }
.resource-chip { animation:hudChipIn .42s cubic-bezier(.16,1,.3,1) backwards; }
.resource-chip:nth-child(1) { animation-delay:.18s; }
.resource-chip:nth-child(2) { animation-delay:.24s; }
.resource-chip:nth-child(3) { animation-delay:.3s; }
.nav-item { animation:hudNavIn .4s cubic-bezier(.16,1,.3,1) backwards; }
.nav-item:nth-child(1) { animation-delay:.16s; }
.nav-item:nth-child(2) { animation-delay:.2s; }
.nav-item:nth-child(3) { animation-delay:.24s; }
.nav-item:nth-child(4) { animation-delay:.28s; }
.nav-item:nth-child(5) { animation-delay:.32s; }
.nav-item:nth-child(6) { animation-delay:.36s; }
.nav-item:nth-child(7) { animation-delay:.4s; }
.nav-item:nth-child(8) { animation-delay:.44s; }
.nav-item:nth-child(9) { animation-delay:.48s; }
.nav-item:nth-child(10) { animation-delay:.52s; }
.nav-item:nth-child(11) { animation-delay:.56s; }
.nav-item:nth-child(12) { animation-delay:.6s; }
@keyframes hudSlideTop { from { transform:translateY(-18px); opacity:0; } }
@keyframes hudSlideBot { from { transform:translateY(22px); opacity:0; } }
@keyframes hudSlidePanel { from { transform:rotate(var(--panel-tilt,1deg)) translateX(28px); opacity:0; } }
@keyframes hudFadeSwitch { from { transform:scale(.92); opacity:0; } }
@keyframes hudChipIn { from { transform:translateY(-8px); opacity:0; } }
@keyframes hudNavIn { from { transform:translateY(10px); opacity:0; } }
.event-card.is-active {
  border-color:var(--lime);
  box-shadow:0 0 0 1px var(--lime),0 0 12px rgba(216,255,40,.38);
  filter:brightness(1.06);
  animation:hudLimeBreath 1.8s ease-in-out infinite;
}
.event-card.is-active .event-meta { outline:1px solid rgba(216,255,40,.55); }
@keyframes hudLimeBreath {
  0%,100% { box-shadow:0 0 0 1px var(--lime),0 0 10px rgba(216,255,40,.28); filter:brightness(1.04); }
  50% { box-shadow:0 0 0 2px var(--lime),0 0 18px rgba(216,255,40,.55); filter:brightness(1.1); }
}
.event-card:hover { filter:brightness(1.05); }
.game-shell.is-press .topbar,
.game-shell.is-press .bottom-nav { filter:contrast(1.08) saturate(1.08); }
.game-shell.is-press .events-panel { transform:rotate(var(--panel-tilt,1deg)) scale(.992); }
.game-shell::after { animation:hudBootScan 1.15s cubic-bezier(.16,1,.3,1) both, hudCrtIdle 5.6s ease-in-out 1.2s infinite; }
@keyframes hudBootScan {
  0% { opacity:.7; clip-path:inset(0 0 100% 0); }
  28% { opacity:.55; clip-path:inset(0 0 42% 0); }
  100% { opacity:.35; clip-path:inset(0 0 0 0); }
}
@keyframes hudCrtIdle {
  0%,100% { opacity:.35; }
  46% { opacity:.42; }
  50% { opacity:.26; }
  54% { opacity:.38; }
}
.hud-cut {
  position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:0; visibility:hidden;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.62) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,#c8c8c8 0 14.28%,#c8c81e 14.28% 28.56%,#1ec8c8 28.56% 42.84%,#1ec81e 42.84% 57.12%,#c81ec8 57.12% 71.4%,#c81e1e 71.4% 85.68%,#1e1ec8 85.68% 100%);
  background-size:100% 100%,100% 8px;
}
.hud-cut::before, .hud-cut::after { content:''; position:absolute; inset:0; pointer-events:none; }
.hud-cut::before {
  background:linear-gradient(180deg,transparent 46%,rgba(216,255,40,.55) 50%,transparent 54%);
  opacity:0;
}
.hud-cut::after {
  box-shadow:inset 0 0 80px rgba(0,0,0,.55);
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);
  mix-blend-mode:multiply;
}
.hud-cut.is-on { visibility:visible; animation:hudCut .48s steps(2,end) forwards; }
.hud-cut.is-on::before { animation:hudCutSweep .48s linear forwards; }
@keyframes hudCut {
  0%{opacity:0;transform:scaleY(1)}
  10%{opacity:1;filter:contrast(2.1) saturate(1.4)}
  22%{opacity:.4;transform:scaleY(.08)}
  38%{opacity:1;transform:scaleY(1);filter:contrast(1.6)}
  58%{opacity:.25;transform:scaleY(.04)}
  78%{opacity:1;filter:contrast(1.9)}
  100%{opacity:0;transform:scaleY(1)}
}
@keyframes hudCutSweep {
  0%{opacity:0;transform:translateY(-40%)}
  18%{opacity:1}
  100%{opacity:0;transform:translateY(40%)}
}
@media (prefers-reduced-motion:reduce) {
  .topbar, .bottom-nav, .events-panel, .bg-switch, .resource-chip, .nav-item { animation:none; }
  .event-card.is-active { animation:none; }
  .game-shell::after { animation:none; }
  .hud-cut, .hud-cut.is-on { display:none; animation:none; }
  .hud-cut.is-on::before { animation:none; }
  .game-shell.is-press .events-panel { transform:rotate(var(--panel-tilt,1deg)); }
}