/* ============================================================
   fnlink 游戏厅 · 复古街机厅门面
   调性：CRT 扫描线 + 霓虹 + 机台海报框
   ============================================================ */
:root{
  --bg:#08080d;
  --paper:#ece6d6;
  --dim:#8b8678;
  --gold:#e0bd72;
  --gold-deep:#c2452d;
  --ghost:#54e6bf;
  --ghost2:#c45bff;
  --fc:#9e2631;
  --fc-bright:#e0524a;
  --fc-cream:#f0e8da;
  --brush:'Ma Shan Zheng','KaiTi','楷体',serif;
  --pixel:'Press Start 2P','Courier New',monospace;
  --serif:'Noto Serif SC','Songti SC',serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #15131f 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, #10161a 0%, transparent 55%),
    var(--bg);
  color:var(--paper);
  font-family:var(--serif);
  overflow-x:hidden;
}

/* CRT 扫描线 + 暗角（不挡点击） */
.crt,.vignette{position:fixed;inset:0;pointer-events:none;z-index:50}
.crt{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
  animation:flick 6s steps(60) infinite;
}
@keyframes flick{0%,97%{opacity:.5}98%{opacity:.42}100%{opacity:.5}}
.vignette{background:radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%)}

/* 布局 */
.hall{
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(28px,5vh,56px);
  padding:clamp(28px,6vh,64px) 20px;
}

/* 标题霓虹牌 */
.marquee{text-align:center;animation:rise .7s ease both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.neon-tag{
  font-family:var(--pixel);font-size:10px;letter-spacing:.35em;
  color:var(--ghost);
  text-shadow:0 0 8px rgba(84,230,191,.8),0 0 18px rgba(84,230,191,.4);
  margin-bottom:18px;
}
.title{display:flex;flex-direction:column;align-items:center;gap:10px;line-height:1}
.title .zh{
  font-family:var(--brush);font-weight:400;
  font-size:clamp(46px,9vw,82px);letter-spacing:.12em;
  color:var(--paper);
  text-shadow:0 0 22px rgba(224,189,114,.25),0 4px 0 rgba(0,0,0,.5);
}
.title .en{
  font-family:var(--pixel);font-size:clamp(13px,2.6vw,20px);letter-spacing:.18em;
  color:var(--gold);
  text-shadow:0 0 10px rgba(224,189,114,.6),0 0 24px rgba(194,69,45,.4);
}
.subtitle{margin-top:14px;font-size:14px;letter-spacing:.4em;color:var(--dim)}

/* 机台墙 */
.cabinets{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);
  justify-content:center;align-items:stretch;
}

/* 单台机子（海报卡） */
.cab{
  position:relative;display:block;text-decoration:none;
  width:clamp(248px,40vw,300px);height:clamp(348px,56vw,420px);
  border-radius:14px;overflow:hidden;
  background:#000;
  box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .28s cubic-bezier(.2,1.2,.3,1),box-shadow .28s;
  animation:rise .7s ease both;
}
.cab:nth-child(2){animation-delay:.12s}
.cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) saturate(1.05) contrast(1.05);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s;
}
.cab-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 45%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.92) 100%);
}
/* 类型角标 */
.tag{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:var(--pixel);font-size:8px;letter-spacing:.12em;
  padding:6px 9px;border-radius:4px;color:#0a0a0f;
  transform:rotate(-3deg);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.tag-gold{background:var(--gold)}
.tag-fc{background:var(--fc);color:var(--fc-cream)}

/* 底部信息 */
.cab-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 20px 22px}
.cab-title{color:#fff;line-height:1.1}
.cab-title.brush{
  font-family:var(--brush);font-weight:400;font-size:clamp(30px,7vw,38px);
  letter-spacing:.06em;text-shadow:0 2px 10px rgba(0,0,0,.85);
}
.cab-title.fc{
  font-family:Impact,"Arial Narrow Bold","Microsoft YaHei",var(--serif);
  font-weight:900;font-size:clamp(26px,6.4vw,34px);letter-spacing:.04em;
  color:var(--fc-cream);
  text-shadow:0 0 14px rgba(224,82,74,.55),0 2px 8px rgba(0,0,0,.9);
}
.cab-sub{margin-top:8px;font-size:12.5px;letter-spacing:.12em;color:rgba(236,230,214,.72)}
.play-pill{
  display:inline-block;margin-top:14px;
  font-family:var(--pixel);font-size:9px;letter-spacing:.1em;
  padding:9px 14px;border-radius:30px;
  border:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.25);
  transition:all .25s;
}

/* 四角机台框线 */
.corner{position:absolute;width:18px;height:18px;z-index:4;opacity:.55;transition:opacity .25s}
.corner.tl{top:8px;left:8px;border-top:2px solid;border-left:2px solid}
.corner.tr{top:8px;right:8px;border-top:2px solid;border-right:2px solid}
.corner.bl{bottom:8px;left:8px;border-bottom:2px solid;border-left:2px solid}
.corner.br{bottom:8px;right:8px;border-bottom:2px solid;border-right:2px solid}
.cab-zhaoyu .corner{border-color:var(--gold)}
.cab-fc .corner{border-color:var(--fc-bright)}

/* hover / focus —— 赵云泛金，fc 泛幽绿 */
.cab:hover,.cab:focus-visible{transform:translateY(-10px) scale(1.02);outline:none}
.cab:hover .cover,.cab:focus-visible .cover{transform:scale(1.07);filter:brightness(.92) saturate(1.15)}
.cab:hover .corner,.cab:focus-visible .corner{opacity:1}
.cab-zhaoyu:hover,.cab-zhaoyu:focus-visible{
  box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 0 1px rgba(224,189,114,.5),0 0 34px rgba(224,189,114,.35);
}
.cab-zhaoyu:hover .play-pill,.cab-zhaoyu:focus-visible .play-pill{
  background:var(--gold-deep);border-color:var(--gold);color:#fff;box-shadow:0 0 18px rgba(194,69,45,.6);
}
.cab-fc:hover,.cab-fc:focus-visible{
  box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 0 1px rgba(224,82,74,.55),0 0 34px rgba(158,38,49,.45);
}
.cab-fc:hover .play-pill,.cab-fc:focus-visible .play-pill{
  background:rgba(158,38,49,.22);border-color:var(--fc-bright);color:var(--fc-cream);box-shadow:0 0 18px rgba(224,82,74,.5);
}
.cab:active{transform:translateY(-4px) scale(.99)}

/* 页脚 */
.foot{
  font-family:var(--pixel);font-size:9px;letter-spacing:.18em;color:var(--dim);
  display:flex;align-items:center;gap:8px;
}
.blink{color:var(--gold-deep);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

@media (max-width:600px){
  .cabinets{flex-direction:column;align-items:center}
  .cab{width:min(86vw,340px);height:min(120vw,460px)}
}
@media (prefers-reduced-motion:reduce){
  .crt,.blink{animation:none}
  .cab,.cover{transition:none}
}

/* ---- 乱世基业 ---- */
.tag-red{background:#c0392b;color:#fff}
.cab-sanguo .corner{border-color:#c0392b}
.cab-sanguo:hover,.cab-sanguo:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(192,57,43,0.35);
}
.cab-sanguo:hover .play-pill,.cab-sanguo:focus-visible .play-pill{
  background:#c0392b;
}
/* ---- 植物大战僵尸 ---- */
.tag-green{background:#27ae60;color:#fff}
.cab-pvz .corner{border-color:#27ae60}
.cab-pvz:hover,.cab-pvz:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(39,174,96,0.35);
}
.cab-pvz:hover .play-pill,.cab-pvz:focus-visible .play-pill{
  background:#27ae60;
}

/* ---- 无名杀 ---- */
.tag-ink{background:#2c3e50;color:#e0bd72}
.cab-noname .corner{border-color:#e0bd72}
.cab-noname:hover,.cab-noname:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(224,189,114,0.3);
}
.cab-noname:hover .play-pill,.cab-noname:focus-visible .play-pill{
  background:#2c3e50;border-color:var(--gold);color:var(--gold);
}

/* ---- 魔塔 ---- */
.tag-purple{background:#8e44ad;color:#fff}
.cab-mota .corner{border-color:#a569bd}
.cab-mota:hover,.cab-mota:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(142,68,173,0.35);
}
.cab-mota:hover .play-pill,.cab-mota:focus-visible .play-pill{
  background:#8e44ad;
}

/* ---- 星际幸存者 ---- */
.tag-cyan{background:#00b8d4;color:#06272e}
.cab-survivor .corner{border-color:#00b8d4}
.cab-survivor:hover,.cab-survivor:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(0,184,212,0.35);
}
.cab-survivor:hover .play-pill,.cab-survivor:focus-visible .play-pill{
  background:#00b8d4;border-color:#00b8d4;color:#06272e;
}

/* ── 暗室 A Dark Room ── */
.tag-ember{background:#e67e22;color:#1a0800}
.cab-adarkroom .corner{border-color:#e67e22}
.cab-adarkroom:hover,.cab-adarkroom:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(230,126,34,0.35);
}
.cab-adarkroom:hover .play-pill,.cab-adarkroom:focus-visible .play-pill{
  background:#e67e22;border-color:#e67e22;color:#1a0800;
}

/* ── 轮回勇者传说 ── */
.tag-arcane{background:#9b59b6;color:#f0e6ff}
.cab-idlerpg .corner{border-color:#9b59b6}
.cab-idlerpg:hover,.cab-idlerpg:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 40px rgba(155,89,182,0.35);
}
.cab-idlerpg:hover .play-pill,.cab-idlerpg:focus-visible .play-pill{
  background:#9b59b6;border-color:#9b59b6;color:#f0e6ff;
}