@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --bg: #150b24;
  --bg-deep: #0c0616;
  --panel: #1f1033;
  --panel-edge: #35205a;
  --neon-pink: #ff2e88;
  --neon-cyan: #29f1e0;
  --amber: #ffc857;
  --text: #f5f0ff;
  --text-dim: #b7a8d6;
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Space Grotesk', sans-serif;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100%;
}

body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,46,136,.18), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(41,241,224,.14), transparent 50%),
    var(--bg);
}

/* CRT走査線オーバーレイ(サイト全体の署名要素) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.14) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:overlay;
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,96%,100%{opacity:1;}
  97%{opacity:.85;}
  98%{opacity:1;}
  99%{opacity:.9;}
}

a{color:inherit;text-decoration:none;}

.wrap{max-width:1080px;margin:0 auto;padding:32px 20px 80px;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--panel-edge);
}
.topbar .logo{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:1px;
  color:var(--amber);
  text-shadow:0 0 8px rgba(255,200,87,.6);
}
.back-link{
  font-family:var(--font-display);
  font-size:10px;
  color:var(--neon-cyan);
  border:1px solid var(--neon-cyan);
  padding:8px 12px;
  border-radius:4px;
  box-shadow:0 0 10px rgba(41,241,224,.25) inset;
}
.back-link:hover{background:rgba(41,241,224,.12);}

.hero{
  text-align:center;
  padding:56px 20px 40px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(22px,4.5vw,40px);
  line-height:1.6;
  margin:0 0 14px;
  color:var(--text);
  text-shadow:
    0 0 6px var(--neon-pink),
    0 0 22px rgba(255,46,136,.5);
}
.hero p{
  color:var(--text-dim);
  font-size:15px;
  max-width:520px;
  margin:0 auto;
}
.coin{
  display:inline-block;
  margin-top:22px;
  font-family:var(--font-display);
  font-size:10px;
  color:var(--amber);
  animation:blink 1.4s steps(1) infinite;
}
@keyframes blink{50%{opacity:.15;}}

.toolbar{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:28px 0 8px;
}
.searchBox{
  position:relative;
  display:flex;
  align-items:center;
}
.searchIcon{
  position:absolute;
  left:14px;
  font-size:14px;
  opacity:.6;
  pointer-events:none;
}
.searchBox input{
  width:260px;
  max-width:60vw;
  padding:12px 16px 12px 38px;
  border-radius:24px;
  border:1px solid var(--panel-edge);
  background:var(--panel);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.searchBox input:focus{
  border-color:var(--neon-cyan);
  box-shadow:0 0 0 3px rgba(41,241,224,.15);
}
.searchBox input::placeholder{color:var(--text-dim);}
.random-btn{
  font-family:var(--font-display);
  font-size:11px;
  padding:12px 18px;
  border-radius:24px;
  border:1px solid var(--amber);
  background:transparent;
  color:var(--amber);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s, transform .1s;
}
.random-btn:hover{background:var(--amber); color:var(--bg-deep);}
.random-btn:active{transform:scale(.96);}

@keyframes cabEnter{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.cab-enter{
  opacity:0;
  animation:cabEnter .45s ease forwards;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;
  margin-top:40px;
}

.cab{
  background:linear-gradient(180deg,var(--panel),var(--bg-deep));
  border:1px solid var(--panel-edge);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cab:hover{
  transform:translateY(-4px);
  border-color:var(--accent,var(--neon-cyan));
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6), 0 0 0 1px var(--accent,var(--neon-cyan)) inset;
}
.cab .marquee{
  font-family:var(--font-display);
  font-size:11px;
  padding:10px 12px;
  color:var(--bg-deep);
  background:var(--accent,var(--neon-cyan));
  letter-spacing:.5px;
}
.cab .screen{
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent,var(--neon-cyan)) 22%, transparent), transparent 70%),
    var(--bg-deep);
}
.cab .screen img{
  width:40px;
  height:40px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.cab .info{padding:14px 14px 18px;}
.cab .info p{
  margin:0 0 12px;
  font-size:13px;
  color:var(--text-dim);
  line-height:1.5;
}
.play-btn{
  display:inline-block;
  font-family:var(--font-display);
  font-size:10px;
  padding:9px 14px;
  border:1px solid var(--accent,var(--neon-cyan));
  color:var(--accent,var(--neon-cyan));
  border-radius:4px;
}
.cab:hover .play-btn{
  background:var(--accent,var(--neon-cyan));
  color:var(--bg-deep);
}

footer{
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  padding:40px 20px 10px;
}

/* ゲーム個別ページ共通 */
.game-stage{
  max-width:640px;
  margin:24px auto 0;
  padding:0 16px;
  text-align:center;
}
.game-stage h1{
  font-family:var(--font-display);
  font-size:18px;
  margin-bottom:6px;
}
.game-stage .desc{color:var(--text-dim);font-size:13px;margin-bottom:18px;}
canvas{
  background:var(--bg-deep);
  border:1px solid var(--panel-edge);
  border-radius:8px;
  max-width:100%;
  touch-action:none;
}
.hud{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--amber);
  margin:12px 4px;
}
.btn{
  font-family:var(--font-display);
  font-size:11px;
  padding:10px 16px;
  margin-top:16px;
  border-radius:6px;
  border:1px solid var(--neon-pink);
  color:var(--neon-pink);
  background:transparent;
  cursor:pointer;
}
.btn:hover{background:var(--neon-pink);color:var(--bg-deep);}
.tip{color:var(--text-dim);font-size:12px;margin-top:10px;}

.lb-box{
  max-width:420px;
  margin:22px auto 0;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:8px;
  padding:14px 16px;
  text-align:left;
}
.lb-box h3{
  font-family:var(--font-display);
  font-size:11px;
  color:var(--amber);
  margin:0 0 10px;
  text-align:center;
}
.lb-list{display:flex;flex-direction:column;gap:2px;}
.lb-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  padding:6px 4px;
  font-size:12px;
  border-bottom:1px dashed var(--panel-edge);
  align-items:center;
}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-family:var(--font-display);font-size:10px;color:var(--neon-cyan);}
.lb-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-score{font-family:var(--font-display);font-size:11px;color:var(--amber);}
.lb-empty, .lb-loading{color:var(--text-dim);font-size:12px;text-align:center;padding:8px 0;}