/*
Theme Name: Hapebon Game Center
Theme URI: https://rikyumanju.com
Author: HapebonCorr
Author URI: https://rikyumanju.com
Description: レトロアーケード風のファミリー向けゲームセンター&ブログテーマ。ネオン装飾とCRTスキャンラインが特徴。カスタム投稿タイプ「ゲーム」でカードを自動生成。
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hapebon-gc
*/

/* ==========================================================
   0. トークン
   ========================================================== */
:root {
  --hgc-bg-deep: #05070f;
  --hgc-bg-mid: #0a0e1a;
  --hgc-panel-a: #1a2140;
  --hgc-panel-b: #10142a;
  --hgc-neon-cyan: #2de2e6;
  --hgc-neon-magenta: #f924a5;
  --hgc-neon-amber: #ffb800;
  --hgc-text: #e8ecf7;
  --hgc-text-dim: #9aa4c7;
  --hgc-border: rgba(255,255,255,0.08);
  --hgc-radius: 14px;
  --hgc-radius-sm: 8px;
  --hgc-font-display: 'Press Start 2P', monospace;
  --hgc-font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --hgc-maxw: 1080px;
}

/* ==========================================================
   1. リセット & ベース
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--hgc-panel-a) 0%, var(--hgc-bg-mid) 55%, var(--hgc-bg-deep) 100%) fixed;
  color: var(--hgc-text);
  font-family: var(--hgc-font-body);
  line-height: 1.8;
  position: relative;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hgc-neon-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.4em; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* CRTスキャンライン & ビネット(画面全体の固定オーバーレイ) */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 140px 50px rgba(0,0,0,0.55);
}

.hgc-wrap { max-width: var(--hgc-maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 3; }

/* ==========================================================
   2. ヘッダー / ナビ
   ========================================================== */
.hgc-site-header {
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--hgc-border);
  position: relative; z-index: 5;
}
.hgc-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.hgc-brand { display: flex; align-items: center; gap: 12px; }
.hgc-brand img { max-height: 44px; border-radius: 6px; }
.hgc-brand-text { display: flex; flex-direction: column; }
.hgc-site-title {
  font-size: 18px; font-weight: 900; color: #fff; letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(45,226,230,.8), 0 0 18px rgba(45,226,230,.45);
}
.hgc-site-title a { color: inherit; }
.hgc-site-title a:hover { text-decoration: none; }
.hgc-site-desc { font-size: 11px; color: var(--hgc-text-dim); margin-top: 2px; }

.hgc-nav-toggle {
  display: none; background: var(--hgc-panel-b); border: 1px solid var(--hgc-border);
  color: var(--hgc-text); font-size: 20px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.hgc-primary-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.hgc-primary-nav a {
  color: var(--hgc-text); font-size: 13px; font-weight: 700; letter-spacing: .5px;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.hgc-primary-nav a:hover, .hgc-primary-nav .current-menu-item > a {
  color: var(--hgc-neon-cyan); border-color: var(--hgc-neon-cyan); text-decoration: none;
}

@media (max-width: 760px) {
  .hgc-nav-toggle { display: inline-block; }
  .hgc-primary-nav { width: 100%; display: none; }
  .hgc-primary-nav.is-open { display: block; }
  .hgc-primary-nav ul { flex-direction: column; gap: 4px; padding-top: 14px; }
}

/* ==========================================================
   3. マーキー(見出し) / ライト演出
   ========================================================== */
.hgc-marquee { text-align: center; padding: 34px 0 6px; }
.hgc-eyebrow {
  display: inline-block; font-family: var(--hgc-font-display); font-size: 9px; letter-spacing: 3px;
  color: var(--hgc-neon-amber); text-shadow: 0 0 8px rgba(255,184,0,.7); margin-bottom: 12px;
}
.hgc-marquee-title {
  font-size: clamp(22px, 5vw, 34px); font-weight: 900; letter-spacing: 3px; color: #fff; margin: 0;
  text-shadow: 0 0 6px rgba(45,226,230,.9), 0 0 18px rgba(45,226,230,.6), 0 0 34px rgba(45,226,230,.35);
  animation: hgc-flicker 4.5s infinite;
}
@keyframes hgc-flicker { 0%,3%,6%,100% { opacity:1; } 4% { opacity:.4; } 5% { opacity:.85; } }
.hgc-marquee-sub { font-size: 13px; color: var(--hgc-text-dim); margin-top: 10px; }
.hgc-lights { display: flex; justify-content: center; gap: 8px; margin: 18px 0 8px; }
.hgc-light {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hgc-neon-cyan);
  box-shadow: 0 0 6px 2px rgba(45,226,230,.8); animation: hgc-blink 1.6s infinite ease-in-out;
}
.hgc-light:nth-child(3n+2) { background: var(--hgc-neon-magenta); box-shadow: 0 0 6px 2px rgba(249,36,165,.8); animation-delay: .3s; }
.hgc-light:nth-child(3n+3) { background: var(--hgc-neon-amber); box-shadow: 0 0 6px 2px rgba(255,184,0,.8); animation-delay: .6s; }
@keyframes hgc-blink { 0%,100% { opacity:.3; } 50% { opacity:1; } }

/* ==========================================================
   4. カード共通(ゲーム筐体 / ブログ記事カード)
   ========================================================== */
.hgc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
  margin: 26px 0 40px;
}
.hgc-card {
  display: flex; flex-direction: column; background: linear-gradient(180deg, var(--hgc-panel-a) 0%, var(--hgc-panel-b) 100%);
  border: 1px solid var(--hgc-border); border-radius: var(--hgc-radius); padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
.hgc-card:hover, .hgc-card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.5); }

.hgc-card-screen {
  display: flex; align-items: center; justify-content: center; height: 120px; border-radius: var(--hgc-radius-sm);
  margin-bottom: 12px; font-size: 38px; position: relative; overflow: hidden; border: 2px solid rgba(0,0,0,.4);
  background-size: cover; background-position: center;
}
.hgc-card-screen::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.15) 0 2px, transparent 2px 4px);
}
.hgc-card[data-accent="cyan"] .hgc-card-screen    { background-color:#123a52; box-shadow: inset 0 0 24px rgba(45,226,230,.5); }
.hgc-card[data-accent="magenta"] .hgc-card-screen { background-color:#521242; box-shadow: inset 0 0 24px rgba(249,36,165,.5); }
.hgc-card[data-accent="amber"] .hgc-card-screen   { background-color:#523d12; box-shadow: inset 0 0 24px rgba(255,184,0,.5); }

.hgc-card-title { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 6px; letter-spacing: .5px; }
.hgc-card-title a { color: inherit; }
.hgc-card-desc { font-size: 12px; color: var(--hgc-text-dim); margin: 0 0 14px; flex-grow: 1; }
.hgc-badge {
  position: absolute; top: 10px; right: 10px; font-family: var(--hgc-font-display); font-size: 8px;
  padding: 4px 6px; border-radius: 4px; background: var(--hgc-neon-amber); color: #10142a; letter-spacing: 1px;
}
.hgc-btn {
  display: inline-block; text-align: center; font-family: var(--hgc-font-display); font-size: 10px; letter-spacing: 2px;
  padding: 10px 14px; border-radius: 6px; color: #10142a; font-weight: 700; cursor: pointer; border: 0;
}
.hgc-card[data-accent="cyan"] .hgc-btn    { background: var(--hgc-neon-cyan); }
.hgc-card[data-accent="magenta"] .hgc-btn { background: var(--hgc-neon-magenta); }
.hgc-card[data-accent="amber"] .hgc-btn   { background: var(--hgc-neon-amber); }

.hgc-card.hgc-soon { opacity: .55; }
.hgc-card.hgc-soon .hgc-card-screen { background-color: #161b30; box-shadow: none; }
.hgc-card.hgc-soon .hgc-btn { background: #2a3050; color: #8892b8; cursor: default; }

/* ==========================================================
   5. フルスクリーン・ゲームオーバーレイ
   ========================================================== */
.hgc-overlay { display: none; position: fixed; inset: 0; background: var(--hgc-bg-deep); z-index: 999999; }
.hgc-overlay.hgc-open { display: block; }
.hgc-overlay-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  background: var(--hgc-panel-b); border-bottom: 1px solid var(--hgc-border);
}
.hgc-overlay-title { font-family: var(--hgc-font-display); font-size: 10px; color: var(--hgc-neon-cyan); letter-spacing: 1px; }
.hgc-overlay-close {
  cursor: pointer; font-family: var(--hgc-font-display); font-size: 10px; color: #10142a;
  background: var(--hgc-neon-magenta); padding: 8px 12px; border-radius: 6px; letter-spacing: 1px; border: 0;
}
.hgc-overlay iframe { display: block; width: 100%; height: calc(100% - 42px); border: 0; }

/* ==========================================================
   6. コンテンツ共通(ブログ・固定ページ)
   ========================================================== */
.hgc-content { max-width: 760px; margin: 0 auto 60px; }
.hgc-page-title {
  font-size: clamp(20px, 4vw, 28px); font-weight: 900; color: #fff; margin: 30px 0 20px;
  text-shadow: 0 0 6px rgba(45,226,230,.7);
}
.hgc-entry { background: linear-gradient(180deg, var(--hgc-panel-a) 0%, var(--hgc-panel-b) 100%);
  border: 1px solid var(--hgc-border); border-radius: var(--hgc-radius); padding: 26px 26px 30px; }
.hgc-entry h1, .hgc-entry h2, .hgc-entry h3 { color: #fff; }
.hgc-entry img { border-radius: var(--hgc-radius-sm); }
.hgc-entry blockquote {
  border-left: 3px solid var(--hgc-neon-cyan); margin: 16px 0; padding: 6px 16px; color: var(--hgc-text-dim);
}
.hgc-entry a { text-decoration: underline; }
.hgc-meta { font-size: 12px; color: var(--hgc-text-dim); margin-bottom: 10px; }

.hgc-post-list { display: grid; gap: 18px; margin: 26px 0 40px; }
.hgc-post-card {
  background: linear-gradient(180deg, var(--hgc-panel-a) 0%, var(--hgc-panel-b) 100%);
  border: 1px solid var(--hgc-border); border-radius: var(--hgc-radius); padding: 18px 20px; display: flex; gap: 16px;
}
.hgc-post-card-thumb { width: 96px; height: 96px; border-radius: var(--hgc-radius-sm); flex-shrink: 0; overflow: hidden;
  background: var(--hgc-panel-b); display:flex; align-items:center; justify-content:center; font-size: 30px; }
.hgc-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hgc-post-card-body { flex: 1; min-width: 0; }
.hgc-post-card-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.hgc-post-card-title a { color: inherit; }
.hgc-post-card-excerpt { font-size: 13px; color: var(--hgc-text-dim); margin: 0; }

.hgc-pagination { display: flex; gap: 10px; justify-content: center; margin: 30px 0 50px; }
.hgc-pagination a, .hgc-pagination span {
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--hgc-border); color: var(--hgc-text);
  font-size: 12px; background: var(--hgc-panel-b);
}
.hgc-pagination .current { background: var(--hgc-neon-cyan); color: #10142a; font-weight: 700; }

/* コメント */
.hgc-comments { margin-top: 30px; }
.hgc-comments ol.comment-list { list-style: none; padding: 0; margin: 0 0 20px; }
.hgc-comments .comment { background: var(--hgc-panel-b); border: 1px solid var(--hgc-border); border-radius: var(--hgc-radius-sm); padding: 14px; margin-bottom: 12px; }
.hgc-comments .comment-form input[type=text], .hgc-comments .comment-form input[type=email], .hgc-comments .comment-form textarea {
  width: 100%; background: var(--hgc-bg-mid); border: 1px solid var(--hgc-border); color: var(--hgc-text);
  padding: 10px; border-radius: 6px; margin-bottom: 12px; font-family: var(--hgc-font-body);
}
.hgc-comments .comment-form textarea { min-height: 100px; }

/* ==========================================================
   7. お問い合わせフォーム
   ========================================================== */
.hgc-form-group { margin-bottom: 18px; }
.hgc-form-group label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--hgc-text-dim); }
.hgc-form-group input, .hgc-form-group textarea {
  width: 100%; background: var(--hgc-bg-mid); border: 1px solid var(--hgc-border); color: var(--hgc-text);
  padding: 11px 12px; border-radius: 8px; font-family: var(--hgc-font-body); font-size: 14px;
}
.hgc-form-group textarea { min-height: 140px; resize: vertical; }
.hgc-form-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; }
.hgc-form-notice.success { background: rgba(45,226,230,.12); border: 1px solid var(--hgc-neon-cyan); }
.hgc-form-notice.error { background: rgba(249,36,165,.12); border: 1px solid var(--hgc-neon-magenta); }

/* ==========================================================
   8. フッター
   ========================================================== */
.hgc-site-footer { border-top: 1px solid var(--hgc-border); padding: 26px 0 40px; margin-top: 40px; position: relative; z-index: 5; }
.hgc-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.hgc-footer-nav ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.hgc-footer-nav a { font-size: 12px; color: var(--hgc-text-dim); }
.hgc-footer-text { font-size: 12px; color: var(--hgc-text-dim); }

@media (max-width: 640px) {
  .hgc-post-card { flex-direction: column; }
  .hgc-post-card-thumb { width: 100%; height: 140px; }
}