/* ============================================================
   马戏团 · CIRCUS CHARLIE — 样式 v2
   街机厅暗房 + FC 卡带年代感, 界面文字走像素风
   ============================================================ */

:root{
  --ink:#0a0812;
  --gold:#f8b800;
  --red:#d82800;
  --white:#fcfcfc;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  background:
    radial-gradient(100% 80% at 50% 0%, #241436 0%, #120a20 55%, #07040e 100%);
  color:var(--white);
  font-family:"Courier New","PingFang SC","Microsoft YaHei",monospace;
  display:flex; align-items:center; justify-content:center;
  min-height:100%;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#app{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; }

/* ---- 街机屏外框 ---- */
#stage-frame{
  position:relative;
  padding:8px;
  background:#1a1424;
  border:3px solid #3a2c50;
  border-radius:8px;
  box-shadow:
    0 0 0 3px #0a0812,
    0 16px 48px rgba(0,0,0,.7),
    inset 0 0 24px rgba(0,0,0,.8);
}

canvas#game{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#000;
}

/* ---- CRT 滤镜 ---- */
#crt{ position:absolute; inset:8px; pointer-events:none; z-index:5; opacity:0; transition:opacity .2s; }
#crt.crt-on{ opacity:1; }
#crt::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
#crt::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 115% at 50% 50%, transparent 65%, rgba(0,0,0,.5) 100%);
}

/* ---- 覆盖界面 ---- */
.overlay{
  position:absolute; inset:8px;
  z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  background:rgba(4,2,10,.86);
  padding:16px;
}
.overlay.hidden{ display:none; }

.tm{ font-size:10px; letter-spacing:2px; color:#8878a8; }

.logo{
  font-size:64px; line-height:1;
  color:var(--gold);
  letter-spacing:8px;
  font-weight:900;
  text-shadow:
    3px 3px 0 var(--red),
    6px 6px 0 #501000;
}
.logo-sub{
  font-size:14px; letter-spacing:6px; color:var(--white);
  font-weight:700;
}

.hi-line{ font-size:12px; letter-spacing:2px; color:#b8a8d8; }
.hi-line b{ color:var(--gold); }

.banner{
  font-size:34px; letter-spacing:6px; font-weight:900;
  color:var(--gold);
  text-shadow:2px 2px 0 #503000;
}
.banner-red{ color:#f85838; text-shadow:2px 2px 0 #500800; }

.score-box{ font-size:14px; line-height:2; letter-spacing:2px; }
.score-box b{ color:var(--gold); }
.record{
  color:#f878b8; font-size:14px; letter-spacing:3px; margin-top:4px;
  animation:blink .6s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:.15; } }
.record.hidden{ display:none; }

.how{ display:flex; flex-direction:column; gap:5px; font-size:11px; color:#9888b8; margin-top:4px; }

kbd{
  display:inline-block; padding:0 5px; border-radius:3px;
  background:#241a3a; border:1px solid #4a3870; border-bottom-width:2px;
  font-size:10px; color:#fff; font-family:inherit;
}

/* ---- 按钮: 街机红按钮 ---- */
.btn{
  cursor:pointer; border:none;
  font-family:inherit; font-weight:900; letter-spacing:3px;
  font-size:15px;
  color:#fff;
  background:linear-gradient(#f85838,#c81800);
  padding:11px 26px; border-radius:6px;
  border:2px solid #300400;
  box-shadow:0 4px 0 #700c00, 0 8px 18px rgba(0,0,0,.5);
  transition:transform .05s, box-shadow .05s;
  animation:btnPulse 1.2s steps(2) infinite;
}
@keyframes btnPulse{ 50%{ filter:brightness(1.18); } }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #700c00; animation:none; }

/* ---- 工具按钮 ---- */
#tools{ position:absolute; top:14px; right:14px; z-index:12; display:flex; gap:6px; }
.tool{
  cursor:pointer; width:30px; height:30px; border-radius:6px;
  border:1px solid #4a3870;
  background:rgba(16,10,30,.7); color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.tool:hover{ background:rgba(80,50,120,.5); }
.tool.off{ opacity:.35; }

.footer{ font-size:11px; color:#7868a0; letter-spacing:1px; text-align:center; }
.footer kbd{ font-size:9px; }