:root{
  --bg:#07090f; --bg2:#0d1220; --panel:rgba(18,24,40,.72); --line:rgba(120,150,220,.18);
  --ink:#eef2ff; --ink-dim:#8fa0c8; --neon:#4de1ff; --neon2:#c86bff; --gold:#ffd166; --alarm:#ff5a40;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(77,225,255,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(200,107,255,.12), transparent 55%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  color:var(--ink); min-height:100%;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 90px}

/* CRT 扫描线氛围 */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}

/* 顶部 */
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.logo{display:flex;align-items:center;gap:14px}
.logo .coin{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#fff8 0 8%,transparent 40%),linear-gradient(135deg,var(--neon),var(--neon2));
  box-shadow:0 0 22px rgba(77,225,255,.55);font-size:26px;font-weight:900;color:#04101a;
  animation:coinpulse 2.6s ease-in-out infinite}
@keyframes coinpulse{0%,100%{box-shadow:0 0 22px rgba(77,225,255,.55)}50%{box-shadow:0 0 40px rgba(200,107,255,.8)}}
.logo h1{font-size:clamp(26px,4vw,40px);letter-spacing:.02em;margin:0;font-weight:900}
.logo h1 b{background:linear-gradient(90deg,var(--neon),var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .sub{font-size:12px;color:var(--ink-dim);letter-spacing:.22em;margin-top:2px}
.count{margin-left:auto;font-size:13px;color:var(--ink-dim);letter-spacing:.06em}

/* 氛围线 */
.marquee{height:34px;overflow:hidden;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);display:flex;align-items:center;margin:16px 0 22px;position:relative}
.marquee .track{white-space:nowrap;display:inline-block;padding-left:100%;
  animation:scroll 28s linear infinite;font-size:13px;color:var(--ink-dim)}
.marquee .track i{font-style:normal;margin:0 26px;color:var(--gold)}
@keyframes scroll{to{transform:translateX(-100%)}}

/* 搜索 + 分类 */
.controls{margin-bottom:18px}
.search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);max-width:520px}
.search:focus-within{border-color:rgba(77,225,255,.55);box-shadow:0 0 18px rgba(77,225,255,.15)}
.s-icon{opacity:.7}
.search input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-size:14px}
.search input::placeholder{color:#5a6b8c}
.s-clear{display:none;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.1);color:var(--ink-dim);align-items:center;justify-content:center;font-size:11px}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cat{height:32px;padding:0 15px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--ink-dim);cursor:pointer;font-size:13px;letter-spacing:.03em;transition:all .15s}
.cat:hover{border-color:rgba(77,225,255,.4);color:var(--ink)}
.cat.on{background:linear-gradient(90deg,rgba(77,225,255,.18),rgba(200,107,255,.18));
  border-color:var(--neon);color:var(--ink);box-shadow:0 0 14px rgba(77,225,255,.25)}

/* 标题 */
.sec-title{font-size:20px;font-weight:800;letter-spacing:.04em;margin:26px 0 18px;display:flex;align-items:center;gap:10px}
.sec-title::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--neon);box-shadow:0 0 12px var(--neon)}
.sec-note{font-size:13px;font-weight:400;color:var(--ink-dim);letter-spacing:.05em}

/* 街机机柜墙 */
.arcade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.cab{position:relative;cursor:pointer;transition:transform .18s ease;--h:200}
.cab:hover{transform:translateY(-6px)}
.cab:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.cabinet{position:relative;border-radius:16px 16px 10px 10px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#1a2238,#0c1220);
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.03)}
.cab:hover .cabinet{border-color:rgba(77,225,255,.55);box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 30px rgba(77,225,255,.18)}

/* 机柜顶部灯箱 */
.marquee-top{height:44px;display:flex;align-items:center;justify-content:center;padding:0 10px;
  background:linear-gradient(180deg,hsla(var(--h),80%,45%,.9),hsla(var(--h),80%,28%,.9));
  border-bottom:2px solid rgba(0,0,0,.4);position:relative;overflow:hidden}
.marquee-top::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 6px)}
.m-title{font-weight:900;font-size:15px;letter-spacing:.06em;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.6);position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 屏幕 */
.screen{position:relative;aspect-ratio:16/10;background:#04060d center/cover no-repeat;
  border-bottom:3px solid #000;display:flex;align-items:center;justify-content:center}
.screen::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 0%,hsla(var(--h),90%,60%,.28),transparent 60%),
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.25))}
.screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);pointer-events:none}
.s-emoji{font-size:52px;position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}

/* 控制台 */
.deck{position:relative;padding:12px 14px 14px;background:linear-gradient(180deg,#11182c,#0a0f1d)}
.d-name{font-weight:800;font-size:15px;letter-spacing:.02em}
.d-tag{margin-top:3px;font-size:12px;color:var(--ink-dim);letter-spacing:.08em}
.controls-row{display:flex;align-items:center;gap:10px;margin-top:11px}
.stick{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a4560,#141b2c);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5)}
.stick::after{content:"";display:block;width:10px;height:10px;border-radius:50%;background:#0a0f1d;margin:12px auto 0;box-shadow:inset 0 1px 2px #000}
.btn{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 -4px 6px rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.5)}
.btn.red{background:radial-gradient(circle at 35% 30%,#ff8a80,#d32f2f)}
.btn.blue{background:radial-gradient(circle at 35% 30%,#82b1ff,#1565c0)}

/* 状态角标 */
.cab-badge{position:absolute;top:52px;right:10px;z-index:3;font-size:10px;padding:3px 8px;border-radius:99px;
  background:rgba(0,0,0,.55);color:#7dffb0;letter-spacing:.05em;border:1px solid rgba(125,255,176,.4)}
.cab-badge.off{color:var(--gold);border-color:rgba(255,209,102,.4)}
.cab-badge.coming{color:#e6b3ff;border-color:rgba(200,107,255,.4)}
.cab.disabled{cursor:not-allowed;opacity:.55}
.cab.disabled:hover{transform:none}
.cab.disabled:hover .cabinet{border-color:var(--line);box-shadow:0 12px 30px rgba(0,0,0,.5)}

.empty{text-align:center;color:var(--ink-dim);padding:60px 0;font-size:15px}

/* 灯箱 */
.lightbox{position:fixed;inset:0;background:rgba(4,6,12,.96);display:none;z-index:100;flex-direction:column;backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lb-bar{height:56px;display:flex;align-items:center;gap:12px;padding:0 14px;flex-shrink:0;background:rgba(10,14,26,.95);border-bottom:1px solid var(--line)}
.lb-back{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid rgba(77,225,255,.4);background:rgba(77,225,255,.1);color:var(--neon);cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap}
.lb-back:hover{background:rgba(77,225,255,.2)}
.lb-bar .t{font-weight:800;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-bar .x{margin-left:auto;width:34px;height:34px;flex-shrink:0;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
.lb-bar .x:hover{background:rgba(255,80,80,.18)}
.lb-frame{flex:1;border:0;width:100%;background:#000}

.footer{margin-top:50px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-dim);font-size:12px;line-height:1.9}
.footer b{color:#cdd8f2}

@media(max-width:560px){
  .arcade{grid-template-columns:repeat(2,1fr);gap:12px}
  .count{display:none}
  .m-title{font-size:13px}
  .s-emoji{font-size:36px}
  .stick{width:26px;height:26px}
  .btn{width:19px;height:19px}
  .lb-bar .t{font-size:12px}
  .lb-back{padding:0 10px;font-size:12px}
}

/* ============ 街机真实动效 ============ */
/* 摇杆：杆 + 球头，hover 倾斜、按压回中 */
.stick{position:relative;transition:transform .12s ease}
.stick::after{content:"";display:block;width:10px;height:10px;border-radius:50%;background:#0a0f1d;
  margin:12px auto 0;box-shadow:inset 0 1px 2px #000;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.cab:hover .stick{transform:translateY(1px)}
.cab:hover .stick::after{transform:translate(-4px,-4px) rotate(-32deg)}
.cab:active .stick{transform:translateY(3px)}
.cab:active .stick::after{transform:translate(5px,3px) rotate(28deg) scale(.9)}

/* 按钮：悬停发光、按压下沉 + 亮起 */
.btn{position:relative;transition:transform .08s ease, box-shadow .15s ease, filter .15s ease}
.cab:hover .btn.red{filter:brightness(1.4);box-shadow:0 0 16px rgba(255,82,82,.75), inset 0 -3px 5px rgba(0,0,0,.5)}
.cab:hover .btn.blue{filter:brightness(1.4);box-shadow:0 0 16px rgba(82,140,255,.75), inset 0 -3px 5px rgba(0,0,0,.5)}
.cab:active .btn{transform:translateY(3px) scale(.88);filter:brightness(1.7)}
.cab:active .btn.red{box-shadow:0 0 22px rgba(255,60,60,.9), inset 0 -2px 3px rgba(0,0,0,.6)}
.cab:active .btn.blue{box-shadow:0 0 22px rgba(60,120,255,.9), inset 0 -2px 3px rgba(0,0,0,.6)}

/* 屏幕：悬停增亮 + 开机扫描线加速 */
.screen{transition:filter .2s ease}
.cab:hover .screen{filter:brightness(1.12) saturate(1.08)}

/* 投币开机过场：整机短暂震动 + 灯箱爆闪 */
.cab.starting .cabinet{animation:coinShake .32s ease}
.cab.starting .marquee-top{animation:flashTop .32s ease}
.cab.starting .screen{animation:screenBoot .32s ease}
@keyframes coinShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,1px)}
  40%{transform:translate(3px,-1px)}
  60%{transform:translate(-2px,0)}
  80%{transform:translate(2px,1px)}
}
@keyframes flashTop{
  0%,100%{filter:brightness(1)}
  30%{filter:brightness(2.4) saturate(1.3)}
  60%{filter:brightness(1.6)}
}
@keyframes screenBoot{
  0%{filter:brightness(1)}
  35%{filter:brightness(2.6) contrast(1.2)}
  70%{filter:brightness(1.4)}
  100%{filter:brightness(1.12)}
}

/* 需代理状态角标 */
.cab-badge.proxy{color:#ffa94d;border-color:rgba(255,169,77,.5);background:rgba(80,40,0,.5)}

/* 非在线但可点的卡片（需代理/维护中）：轻度暗化，仍可交互 */
.cab.dim{cursor:pointer;opacity:.75}
.cab.dim:hover{opacity:1}
.cab.dim .screen{filter:saturate(.7)}
.cab.dim:hover .screen{filter:saturate(1)}

/* ============ 打赏 ============ */
.donate-link{background:rgba(22,119,255,.12);border:1px solid rgba(22,119,255,.4);color:#5c9dff;
  padding:4px 12px;border-radius:8px;cursor:pointer;font-size:12px;transition:all .15s}
.donate-link:hover{background:rgba(22,119,255,.22);box-shadow:0 0 12px rgba(22,119,255,.3)}

.donate-modal{position:fixed;inset:0;background:rgba(4,6,12,.85);display:none;z-index:200;
  align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.donate-modal.open{display:flex}
.donate-box{position:relative;background:linear-gradient(160deg,#141b2e,#0b1020);
  border:1px solid rgba(22,119,255,.35);border-radius:16px;padding:30px 34px 26px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 30px rgba(22,119,255,.15);max-width:320px;width:88%}
.donate-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink-dim);cursor:pointer;font-size:14px}
.donate-close:hover{background:rgba(255,80,80,.15);color:var(--ink)}
.donate-title{font-size:18px;font-weight:800;color:var(--ink)}
.donate-sub{margin-top:6px;font-size:12px;color:var(--ink-dim)}
.donate-qr{width:200px;height:200px;margin:18px auto 10px;border-radius:12px;display:block;background:#fff}
.donate-hint{font-size:12px;color:#5c9dff;letter-spacing:.05em}