/* ============================================
   GAME STREET - Dark Cosmos Theme
   pc-onlinegames.com Complete Redesign
   ============================================ */

/* --- SWELL Variable Overrides (CRITICAL) --- */
:root {
  --color_main: #00d4ff !important;
  --color_text: #e8e8f0 !important;
  --color_bg: #0a0a0f !important;
  --color_header_bg: rgba(10, 10, 15, 0.95) !important;
  --color_header_text: #e8e8f0 !important;
  --color_border: rgba(255, 255, 255, 0.06) !important;
  --swl-main_color: #00d4ff !important;
  --swl-text_color: #e8e8f0 !important;
  --swl-bg_color: #0a0a0f !important;
  --body_bg: #0a0a0f !important;
  --article_bg: #161625 !important;
}

/* --- Custom Variables --- */
:root {
  --gs-bg-deep: #0a0a0f;
  --gs-bg-dark: #0f0f1a;
  --gs-bg-card: #1e2040;
  --gs-bg-card-hover: #2a2a55;
  --gs-bg-surface: #222250;
  --gs-bg-header: rgba(10, 10, 15, 0.92);
  --gs-text-primary: #e8e8f0;
  --gs-text-secondary: #9a9ab0;
  --gs-text-muted: #6a6a80;
  --gs-accent-cyan: #00d4ff;
  --gs-accent-purple: #a855f7;
  --gs-accent-pink: #ec4899;
  --gs-accent-gold: #f59e0b;
  --gs-accent-green: #10b981;
  --gs-gradient-main: linear-gradient(135deg, #00d4ff 0%, #a855f7 50%, #ec4899 100%);
  --gs-gradient-card: linear-gradient(145deg, rgba(22,22,37,1) 0%, rgba(26,26,46,1) 100%);
  --gs-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
  --gs-glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);
  --gs-border-subtle: rgba(100, 100, 200, 0.2);
  --gs-border-glow: rgba(0, 212, 255, 0.2);
  --gs-radius: 12px;
  --gs-radius-lg: 16px;
  --gs-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gs-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Global Reset & Base --- */
html {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body,
#body_wrap {
  background: var(--gs-bg-deep) !important;
  color: var(--gs-text-primary) !important;
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animated background particles canvas */
#gs-particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
}

/* Cursor trail canvas */
#gs-cursor-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
}

/* Supernova explosion canvas */
#gs-supernova-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  pointer-events: none;
}

/* --- Selection Color --- */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: #fff;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--gs-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gs-accent-cyan), var(--gs-accent-purple));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gs-accent-purple), var(--gs-accent-pink));
}

/* --- Links --- */
a {
  color: var(--gs-accent-cyan) !important;
  text-decoration: none !important;
  transition: color var(--gs-transition);
}
a:hover {
  color: var(--gs-accent-purple) !important;
}

/* ============================================
   HEADER
   ============================================ */
.l-header {
  background: var(--gs-bg-header) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--gs-border-subtle) !important;
  position: sticky !important;
  top: 0;
  z-index: 1000;
  transition: all 0.4s ease;
}

.l-header.--scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 212, 255, 0.05);
}

.l-header__inner {
  max-width: 1200px !important;
  margin: 0 auto;
  padding: 0 20px;
}

.l-header__bar {
  background: transparent !important;
}

/* Logo - Text based */
.c-headLogo {
  position: relative;
}

.c-headLogo__link {
  font-size: 0 !important; /* Hide original */
}

.c-headLogo__img {
  display: none !important;
}

.c-headLogo__link::after {
  content: 'ゲーム街';
  font-size: 28px !important;
  font-weight: 800;
  letter-spacing: 3px;
  background: var(--gs-gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
  position: relative;
}

.c-headLogo__link::before {
  content: 'ゲーム街';
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: var(--gs-gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(12px);
  opacity: 0.5;
  z-index: -1;
  animation: gs-logo-glow 3s ease-in-out infinite alternate;
}

@keyframes gs-logo-glow {
  0% { opacity: 0.3; filter: blur(10px); }
  100% { opacity: 0.6; filter: blur(15px); }
}

/* Global Navigation */
.c-gnav {
  display: flex !important;
  gap: 0 !important;
  list-style: none !important;
}

.c-gnav > .menu-item > a {
  color: var(--gs-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px;
  padding: 10px 18px !important;
  position: relative;
  transition: color var(--gs-transition) !important;
}

.c-gnav > .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--gs-gradient-main);
  transition: width var(--gs-transition);
  border-radius: 1px;
}

.c-gnav > .menu-item:hover > a,
.c-gnav > .menu-item.current-menu-item > a {
  color: var(--gs-text-primary) !important;
}

.c-gnav > .menu-item:hover > a::after,
.c-gnav > .menu-item.current-menu-item > a::after {
  width: 60%;
}

/* Dropdown menu */
.c-gnav .sub-menu {
  background: rgba(15, 15, 26, 0.97) !important;
  backdrop-filter: blur(20px);
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: var(--gs-radius) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 212, 255, 0.05) !important;
  padding: 8px !important;
  min-width: 220px;
  animation: gs-dropdown-in 0.3s ease;
}

@keyframes gs-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.c-gnav .sub-menu .menu-item a {
  color: var(--gs-text-secondary) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  transition: all var(--gs-transition) !important;
  display: block;
}

.c-gnav .sub-menu .menu-item a:hover {
  color: var(--gs-text-primary) !important;
  background: rgba(0, 212, 255, 0.08) !important;
}

/* Nested sub-menu */
.c-gnav .sub-menu .sub-menu {
  top: 0 !important;
}

/* Fixed header */
.l-fixHeader {
  background: var(--gs-bg-header) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--gs-border-subtle) !important;
}

.l-fixHeader__inner {
  max-width: 1200px !important;
}

/* Header bar (top bar) */
.l-header__bar {
  background: transparent !important;
  border: none !important;
}

/* ============================================
   HERO SECTION (injected via JS for top page)
   ============================================ */
#gs-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gs-bg-deep) 0%, #0d0d1f 50%, var(--gs-bg-dark) 100%);
}

#gs-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 300px at 80% 30%, rgba(168, 85, 247, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 60% 80%, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
  animation: gs-hero-nebula 8s ease-in-out infinite alternate;
}

@keyframes gs-hero-nebula {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.7; transform: scale(0.98); }
}

#gs-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 20px;
  max-width: 800px;
}

#gs-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 16px;
  background: var(--gs-gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gs-hero-title-in 1s ease-out;
}

@keyframes gs-hero-title-in {
  from { opacity: 0; transform: translateY(30px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

#gs-hero p {
  font-size: 16px;
  color: var(--gs-text-secondary);
  margin-bottom: 32px;
  animation: gs-hero-sub-in 1s ease-out 0.2s both;
}

@keyframes gs-hero-sub-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Quick Nav Tags */
#gs-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  animation: gs-hero-tags-in 1s ease-out 0.4s both;
}

@keyframes gs-hero-tags-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.gs-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gs-border-subtle);
  border-radius: 50px;
  color: var(--gs-text-secondary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--gs-transition-bounce) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.gs-hero-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: var(--gs-gradient-main);
  opacity: 0;
  transition: opacity var(--gs-transition);
}

.gs-hero-tag:hover {
  color: #fff !important;
  border-color: transparent;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
}

.gs-hero-tag:hover::before {
  opacity: 0.15;
}

/* Hero search bar */
#gs-hero-search {
  margin-top: 28px;
  animation: gs-hero-search-in 1s ease-out 0.6s both;
}

@keyframes gs-hero-search-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

#gs-hero-search form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gs-border-subtle);
  border-radius: 50px;
  overflow: hidden;
  transition: all var(--gs-transition);
}

#gs-hero-search form:focus-within {
  border-color: var(--gs-accent-cyan);
  box-shadow: var(--gs-glow-cyan);
}

#gs-hero-search input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 24px;
  color: var(--gs-text-primary);
  font-size: 15px;
  outline: none;
}

#gs-hero-search input::placeholder {
  color: var(--gs-text-muted);
}

#gs-hero-search button {
  background: var(--gs-gradient-main);
  border: none;
  padding: 14px 28px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--gs-transition);
}

#gs-hero-search button:hover {
  filter: brightness(1.2);
}

/* ============================================
   CONTENT AREA
   ============================================ */
.l-content {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.l-container {
  max-width: 1200px !important;
}

/* Section headings */
.c-widget__title,
.p-postList__title,
.post-list-title {
  color: var(--gs-text-primary) !important;
}

.c-widget__title.-side,
.c-widget__title {
  color: var(--gs-text-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: var(--gs-radius) !important;
  position: relative;
  overflow: hidden;
}

.c-widget__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gs-gradient-main);
  border-radius: 0 2px 2px 0;
}

/* ============================================
   POST CARDS
   ============================================ */
.p-postList.-type-card .p-postList__item {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: var(--gs-radius-lg) !important;
  overflow: hidden;
  transition: all var(--gs-transition) !important;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.p-postList.-type-card .p-postList__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--gs-radius-lg);
  background: var(--gs-gradient-main);
  opacity: 0;
  z-index: 0;
  transition: opacity var(--gs-transition);
}

.p-postList.-type-card .p-postList__item:hover {
  transform: translateY(-6px) !important;
  border-color: transparent !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 212, 255, 0.08) !important;
}

.p-postList.-type-card .p-postList__item:hover::before {
  opacity: 0.06;
}

.p-postList__link {
  color: var(--gs-text-primary) !important;
  background: transparent !important;
}

/* Thumbnail */
.c-postThumb {
  overflow: hidden;
  border-radius: 0 !important;
}

.c-postThumb__img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.p-postList__item:hover .c-postThumb__img {
  transform: scale(1.08) !important;
}

/* Category badge */
.c-postThumb__cat {
  background: var(--gs-gradient-main) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  box-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
}

/* Post body */
.p-postList__body {
  padding: 16px !important;
  background: var(--gs-bg-card) !important;
}

.p-postList__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--gs-text-primary) !important;
}

.p-postList__meta {
  color: var(--gs-text-muted) !important;
  font-size: 12px !important;
}

/* List type posts */
.p-postList.-type-list .p-postList__item,
.p-postList.-type-simple .p-postList__item {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: var(--gs-radius) !important;
  margin-bottom: 12px !important;
  padding: 12px !important;
  transition: all var(--gs-transition) !important;
}

.p-postList.-type-list .p-postList__item:hover,
.p-postList.-type-simple .p-postList__item:hover {
  border-color: var(--gs-border-glow) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   SIDEBAR
   ============================================ */
.l-sidebar {
  background: transparent !important;
}

.c-widget {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: var(--gs-radius-lg) !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  overflow: hidden;
  transition: all var(--gs-transition);
}

.c-widget:hover {
  border-color: var(--gs-border-glow);
}

/* Tag cloud in sidebar */
.tagcloud a,
.c-iconList__link,
.c-listMenu a {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--gs-text-secondary) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  transition: all var(--gs-transition) !important;
}

.tagcloud a:hover,
.c-iconList__link:hover,
.c-listMenu a:hover {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--gs-accent-cyan) !important;
  border-color: var(--gs-border-glow) !important;
  transform: translateY(-2px);
}

/* Search form */
.c-searchForm {
  display: flex;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid var(--gs-border-subtle);
  margin: 12px;
}

.c-searchForm__s {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--gs-text-primary) !important;
  border: none !important;
  padding: 10px 14px !important;
}

.c-searchForm__submit {
  background: var(--gs-gradient-main) !important;
  color: #fff !important;
  border: none !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.c-pagination {
  gap: 6px;
}

.c-pagination a,
.c-pagination span {
  background: var(--gs-bg-card) !important;
  color: var(--gs-text-secondary) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: 10px !important;
  transition: all var(--gs-transition) !important;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-pagination a:hover {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: var(--gs-accent-cyan) !important;
  color: var(--gs-accent-cyan) !important;
  transform: translateY(-2px);
}

.c-pagination .current {
  background: var(--gs-gradient-main) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

/* ============================================
   FOOTER
   ============================================ */
.l-footer {
  background: var(--gs-bg-deep) !important;
  border-top: 1px solid var(--gs-border-subtle) !important;
  color: var(--gs-text-secondary) !important;
  position: relative;
}

.l-footer a {
  color: var(--gs-text-secondary) !important;
}

.l-footer a:hover {
  color: var(--gs-accent-cyan) !important;
}

.l-footer__foot {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.p-breadcrumb {
  background: transparent !important;
  color: var(--gs-text-muted) !important;
}

.p-breadcrumb a {
  color: var(--gs-text-muted) !important;
}

.p-breadcrumb a:hover {
  color: var(--gs-accent-cyan) !important;
}

/* ============================================
   SP (Mobile) MENU
   ============================================ */
.p-spMenu {
  background: var(--gs-bg-deep) !important;
}

.p-spMenu__inner {
  background: var(--gs-bg-dark) !important;
}

.p-spMenu__body a {
  color: var(--gs-text-primary) !important;
  border-color: var(--gs-border-subtle) !important;
}

/* Hamburger button */
.l-header__menuBtn {
  color: var(--gs-text-primary) !important;
}

/* Mobile overlay */
.c-overlay.-on {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.gs-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.gs-reveal.--visible {
  opacity: 1;
  transform: translateY(0);
}

.gs-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.gs-reveal-left.--visible {
  opacity: 1;
  transform: translateX(0);
}

.gs-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.gs-reveal-scale.--visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered animation delays for cards */
.p-postList__item:nth-child(1) { transition-delay: 0s; }
.p-postList__item:nth-child(2) { transition-delay: 0.08s; }
.p-postList__item:nth-child(3) { transition-delay: 0.16s; }
.p-postList__item:nth-child(4) { transition-delay: 0.24s; }
.p-postList__item:nth-child(5) { transition-delay: 0.32s; }
.p-postList__item:nth-child(6) { transition-delay: 0.4s; }

/* ============================================
   SINGLE ARTICLE PAGES
   ============================================ */
.l-article {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: var(--gs-radius-lg) !important;
  padding: 40px !important;
}

.l-mainContent__inner {
  color: var(--gs-text-primary) !important;
}

.post_content h2 {
  border-color: var(--gs-accent-cyan) !important;
  color: var(--gs-text-primary) !important;
}

.post_content h3 {
  color: var(--gs-text-primary) !important;
}

/* ============================================
   CATEGORY PAGE HEADER
   ============================================ */
.p-ttlArea {
  background: var(--gs-bg-surface) !important;
  border: none !important;
}

.p-ttlArea__ttl {
  color: var(--gs-text-primary) !important;
}

.l-topTitleArea {
  background: linear-gradient(180deg, var(--gs-bg-surface), var(--gs-bg-dark)) !important;
}

/* ============================================
   FIX BUTTON (back to top)
   ============================================ */
.c-fixBtn {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  color: var(--gs-text-secondary) !important;
  border-radius: 12px !important;
  transition: all var(--gs-transition) !important;
}

.c-fixBtn:hover {
  background: var(--gs-bg-card-hover) !important;
  border-color: var(--gs-accent-cyan) !important;
  color: var(--gs-accent-cyan) !important;
  box-shadow: var(--gs-glow-cyan);
  transform: translateY(-3px);
}

/* ============================================
   SWELL TAB BODY
   ============================================ */
.c-tabBody {
  background: transparent !important;
}

/* ============================================
   PICKUP BANNER
   ============================================ */
.p-pickupBanners__item a {
  border-radius: var(--gs-radius) !important;
  overflow: hidden;
  transition: all var(--gs-transition) !important;
}

.p-pickupBanners__item a:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 959px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* No horizontal scroll ever */
  #body_wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .l-content,
  .l-container {
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Hero adjustments */
  #gs-hero {
    min-height: 40vh;
  }

  #gs-hero h1 {
    font-size: 28px;
  }

  #gs-hero p {
    font-size: 14px;
  }

  .gs-hero-tag {
    font-size: 12px;
    padding: 6px 14px;
  }

  /* Card adjustments */
  .p-postList.-type-card .p-postList__item {
    border-radius: var(--gs-radius) !important;
  }

  /* Logo */
  .c-headLogo__link::after,
  .c-headLogo__link::before {
    font-size: 18px !important;
    letter-spacing: 2px;
  }

  /* Article page */
  .l-article {
    padding: 20px 16px !important;
    border-radius: var(--gs-radius) !important;
  }

  /* SP Menu dark theme */
  .p-spMenu {
    background: var(--gs-bg-deep) !important;
  }

  .p-spMenu__inner {
    background: var(--gs-bg-dark) !important;
    color: var(--gs-text-primary) !important;
  }

  .p-spMenu__body {
    color: var(--gs-text-primary) !important;
  }

  .p-spMenu__body a,
  .p-spMenu__body li {
    color: var(--gs-text-primary) !important;
    border-color: var(--gs-border-subtle) !important;
  }
}

@media (max-width: 599px) {
  #gs-hero-content {
    padding: 40px 16px;
  }

  .c-headLogo__link::after,
  .c-headLogo__link::before {
    font-size: 16px !important;
    letter-spacing: 1px;
  }

  #gs-hero-search form {
    flex-direction: column;
    border-radius: var(--gs-radius);
  }

  #gs-hero-search button {
    border-radius: 0;
    padding: 12px;
  }
}

/* ============================================
   GENERIC OVERRIDES
   ============================================ */

/* Remove SWELL default bg colors */
.-bg-main, .u-bg-main {
  background: var(--gs-gradient-main) !important;
}

/* Table */
table, th, td {
  border-color: var(--gs-border-subtle) !important;
  color: var(--gs-text-primary) !important;
}

th {
  background: var(--gs-bg-surface) !important;
}

/* Code blocks */
pre, code {
  background: var(--gs-bg-deep) !important;
  color: var(--gs-accent-cyan) !important;
  border-radius: 8px;
}

/* Blockquote */
blockquote {
  background: var(--gs-bg-surface) !important;
  border-left-color: var(--gs-accent-purple) !important;
  color: var(--gs-text-secondary) !important;
}

/* Input / Textarea */
input, textarea, select {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--gs-text-primary) !important;
  border-color: var(--gs-border-subtle) !important;
  border-radius: 8px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--gs-accent-cyan) !important;
  box-shadow: var(--gs-glow-cyan) !important;
  outline: none !important;
}

/* Buttons generic */
.wp-block-button__link,
button[type="submit"] {
  background: var(--gs-gradient-main) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all var(--gs-transition) !important;
}

.wp-block-button__link:hover,
button[type="submit"]:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

/* SWELL specific overrides */
.swell-block-tab__btn {
  color: var(--gs-text-secondary) !important;
  background: var(--gs-bg-card) !important;
  border-color: var(--gs-border-subtle) !important;
}

.swell-block-tab__btn.-active,
.swell-block-tab__btn:hover {
  color: var(--gs-text-primary) !important;
  background: var(--gs-bg-card-hover) !important;
}

/* SWELLアコーディオン */
.swell-block-accordion__title {
  background: var(--gs-bg-card) !important;
  color: var(--gs-text-primary) !important;
}

.swell-block-accordion__body {
  background: var(--gs-bg-surface) !important;
  color: var(--gs-text-primary) !important;
}

/* SWELL Step block */
.swell-block-step__body {
  color: var(--gs-text-primary) !important;
}

/* Blog card */
.p-blogCard {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  border-radius: var(--gs-radius) !important;
  transition: all var(--gs-transition) !important;
}

.p-blogCard:hover {
  border-color: var(--gs-border-glow) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.p-blogCard__title {
  color: var(--gs-text-primary) !important;
}

.p-blogCard__excerpt {
  color: var(--gs-text-secondary) !important;
}

/* SWELLのカテゴリー表示部分 */
.c-iconList {
  gap: 8px;
}

.c-iconList__item {
  transition: all var(--gs-transition);
}

/* Section dividers */
.gs-section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gs-border-glow), transparent);
  margin: 40px 0;
}

/* ============================================
   SWELL CUSTOMIZER NUCLEAR OVERRIDES
   These override SWELL's wp_head inline styles
   ============================================ */

/* SWELL uses --color_bg everywhere via its customizer */
[style*="--color_bg"],
[style*="--color_header_bg"],
[style*="--color_text"],
#body_wrap,
.l-fixHeader,
.l-fixHeader__inner,
.l-header,
.l-header__inner,
.l-header__bar,
.l-header__barInner,
.l-content,
.l-mainContent,
.l-mainContent__inner,
.l-sidebar,
.l-footer,
.l-footer__inner,
.l-footer__foot,
.l-article,
.p-spMenu,
.p-spMenu__inner,
.p-spMenu__body,
.c-modal,
.c-overlay {
  --color_bg: #0a0a0f !important;
  --color_header_bg: rgba(10, 10, 15, 0.95) !important;
  --color_text: #e8e8f0 !important;
  --color_header_text: #e8e8f0 !important;
}

/* Force ALL potential white backgrounds to dark */
/* Only apply card bg to single article pages, not top/category */
.single .l-mainContent,
.page .l-mainContent {
  background: var(--gs-bg-card) !important;
  color: var(--gs-text-primary) !important;
  border-radius: var(--gs-radius-lg) !important;
}
.home .l-mainContent,
.archive .l-mainContent,
.category .l-mainContent {
  background: transparent !important;
  color: var(--gs-text-primary) !important;
}

/* SWELL frame mode might add white margins */
.-frame-on .l-content,
.-body-solid .l-content {
  background: transparent !important;
}

/* SWELL sidebar widget bg overrides */
.w-fixSide,
.w-fixSide .c-widget {
  background: var(--gs-bg-card) !important;
}

/* SWELL search modal */
.c-modal {
  background: rgba(10, 10, 15, 0.95) !important;
}

.c-modal__inner {
  background: var(--gs-bg-dark) !important;
  color: var(--gs-text-primary) !important;
}

/* SWELL tab navigation (front page tabs) */
.p-postListTabBody,
.c-tabBody {
  background: transparent !important;
}

/* Nuclear: ANY remaining white backgrounds */
*[style*="background-color: #fdfdfd"],
*[style*="background-color:#fdfdfd"],
*[style*="background: #fdfdfd"],
*[style*="background:#fdfdfd"],
*[style*="color: #333"],
*[style*="color:#333"] {
  background-color: var(--gs-bg-deep) !important;
  color: var(--gs-text-primary) !important;
}

/* ============================================
   SIDEBAR - Dark Theme Reinforcement
   ============================================ */

/* Force sidebar area dark */
.l-sidebar,
.l-sidebar * {
  color: var(--gs-text-primary) !important;
}

.l-sidebar .c-widget {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border-subtle) !important;
  color: var(--gs-text-primary) !important;
}

.l-sidebar .c-widget__title,
.l-sidebar .c-widget__title.-side {
  background: rgba(0, 212, 255, 0.06) !important;
  color: var(--gs-accent-cyan) !important;
  border-bottom: 1px solid var(--gs-border-subtle) !important;
}

/* Sidebar text widget */
.l-sidebar .textwidget,
.l-sidebar .textwidget * {
  color: var(--gs-text-primary) !important;
  background: transparent !important;
}

/* Sidebar search */
.l-sidebar .c-searchForm {
  border: 1px solid var(--gs-border-subtle) !important;
  background: transparent !important;
}

.l-sidebar .c-searchForm__s {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--gs-text-primary) !important;
}

.l-sidebar .c-searchForm__s::placeholder {
  color: var(--gs-text-muted) !important;
}

/* Sidebar links and list items */
.l-sidebar a {
  color: var(--gs-text-secondary) !important;
}

.l-sidebar a:hover {
  color: var(--gs-accent-cyan) !important;
}

.l-sidebar .c-listMenu__item {
  border-color: var(--gs-border-subtle) !important;
}

/* Sidebar post list thumbnails */
.l-sidebar .p-postList__item {
  background: transparent !important;
  border-bottom: 1px solid var(--gs-border-subtle) !important;
}

/* Widget inner padding */
.l-sidebar .c-widget__body,
.l-sidebar .widget_text .textwidget {
  padding: 12px 16px !important;
}

/* Accordion/toggle widgets in sidebar */
.l-sidebar details,
.l-sidebar summary {
  color: var(--gs-text-primary) !important;
}

/* Fix sticky sidebar bg */
.w-fixSide,
.w-fixSide .c-widget,
.w-fixSide * {
  background-color: transparent;
}
.w-fixSide > .c-widget {
  background: var(--gs-bg-card) !important;
}

/* ============================================================
   DARK OVERRIDE: Custom classes from inline style cleanup
   These override any remaining light-theme styles
   ============================================================ */

/* Accent text classes */
.post_content .gs-accent { color: #ff8c42 !important; font-weight: bold; }
.post_content strong.gs-accent { color: #ff8c42 !important; }
.post_content .gs-accent-red { color: #ff6b6b !important; }
.post_content strong.gs-accent-red { color: #ff6b6b !important; }
.post_content .gs-accent-blue { color: #5ebbf7 !important; }
.post_content strong.gs-accent-blue { color: #5ebbf7 !important; }
.post_content .gs-accent-green { color: #66bb6a !important; }
.post_content strong.gs-accent-green { color: #66bb6a !important; }

/* Text size */
.post_content .gs-text-lg { font-size: 1.15em; }
.post_content .gs-text-xl { font-size: 1.3em; }
.post_content .gs-text-sm { font-size: 0.85em; color: #8a90b0; }
.post_content .gs-text-muted { color: #8a90b0 !important; }

/* Box */
.post_content .gs-box {
  background: rgba(25, 28, 50, 0.7) !important;
  border: 1px solid rgba(100, 110, 160, 0.25) !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  border-radius: 10px !important;
  color: #c0c4d8 !important;
}
.post_content .gs-box * { color: inherit !important; }
.post_content .gs-box a { color: #60a5fa !important; }

.post_content .gs-box-quote {
  background: rgba(20, 25, 50, 0.6) !important;
  border-left: 4px solid rgba(120, 130, 180, 0.5) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 15px 20px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c0c4d8 !important;
}

/* Callouts */
.post_content .gs-callout-info {
  background: rgba(20, 35, 70, 0.7) !important;
  border: 1px solid rgba(74, 144, 217, 0.3) !important;
  border-left: 4px solid #4a9edd !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c8d8f0 !important;
}

.post_content .gs-callout-success {
  background: rgba(16, 45, 30, 0.7) !important;
  border: 1px solid rgba(76, 175, 80, 0.3) !important;
  border-left: 4px solid #4caf50 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c0e8c4 !important;
}

.post_content .gs-callout-warning {
  background: rgba(50, 35, 15, 0.7) !important;
  border: 1px solid rgba(255, 152, 0, 0.3) !important;
  border-left: 4px solid #ffa726 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #f0dcc0 !important;
}

.post_content .gs-callout-danger {
  background: rgba(50, 20, 20, 0.7) !important;
  border: 1px solid rgba(217, 74, 74, 0.3) !important;
  border-left: 4px solid #e55555 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #f0c8c8 !important;
}

.post_content .gs-callout-info *,
.post_content .gs-callout-success *,
.post_content .gs-callout-warning *,
.post_content .gs-callout-danger * {
  color: inherit !important;
}

.post_content .gs-callout-info a,
.post_content .gs-callout-success a,
.post_content .gs-callout-warning a,
.post_content .gs-callout-danger a {
  color: #60a5fa !important;
}

/* CTA box */
.post_content .gs-cta-box {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  background: rgba(16, 45, 30, 0.6) !important;
  border: 1px solid rgba(76, 175, 80, 0.3) !important;
  border-radius: 10px !important;
  margin: 20px 0;
  color: #a0e8a4 !important;
}

/* Box title */
.post_content .gs-box-title {
  font-weight: bold !important;
  font-size: 1.05em;
  margin-bottom: 10px;
  margin-top: 0;
  color: #e0e4ee !important;
}

/* Caption */
.post_content .gs-caption {
  color: #7a80a0 !important;
  font-size: 0.85em;
  text-align: right;
  margin-top: 8px;
}

/* Separator */
.post_content .gs-separator {
  border-bottom: 1px solid rgba(100, 110, 160, 0.2) !important;
  padding: 12px 0;
}

/* Italic */
.post_content .gs-italic { font-style: italic; margin: 0; }

/* Layout */
.post_content .gs-center-block { max-width: 800px; margin: 2em auto; text-align: center; }
.post_content .gs-video-wrap { max-width: 560px; margin: 0 auto; }
.post_content .gs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Steam button */
.post_content .gs-steam-btn {
  background: linear-gradient(135deg, #1b2838, #2a475e) !important;
  color: #66c0f4 !important;
  border: 1px solid rgba(102, 192, 244, 0.3) !important;
  border-radius: 6px !important;
  padding: 12px 30px !important;
  display: inline-block;
  transition: all 0.3s ease;
}
.post_content .gs-steam-btn:hover {
  background: linear-gradient(135deg, #2a475e, #3d6a8e) !important;
  box-shadow: 0 0 15px rgba(102, 192, 244, 0.3);
}

/* ============================================================
   GLOBAL SAFETY NET: Force override ANY remaining inline styles
   ============================================================ */
.post_content *[style*="background:#f"] {
  background: rgba(25, 28, 50, 0.5) !important;
}
.post_content *[style*="background: #f"] {
  background: rgba(25, 28, 50, 0.5) !important;
}
.post_content *[style*="background-color: #fff"] {
  background-color: transparent !important;
}
.post_content *[style*="background-color:#fff"] {
  background-color: transparent !important;
}
.post_content *[style*="color: #333"] {
  color: #e0e4ee !important;
}
.post_content *[style*="color:#333"] {
  color: #e0e4ee !important;
}
.post_content *[style*="color: #000"] {
  color: #e0e4ee !important;
}
.post_content *[style*="color:#000"] {
  color: #e0e4ee !important;
}
.post_content *[style*="color: #666"] {
  color: #8a90b0 !important;
}
.post_content *[style*="color:#666"] {
  color: #8a90b0 !important;
}
.post_content *[style*="color: #888"] {
  color: #8a90b0 !important;
}
.post_content *[style*="color:#888"] {
  color: #8a90b0 !important;
}
.post_content *[style*="color: #999"] {
  color: #8a90b0 !important;
}
.post_content *[style*="color:#999"] {
  color: #8a90b0 !important;
}
.post_content *[style*="color: #ff6600"] {
  color: #ff8c42 !important;
}
.post_content *[style*="color:#ff6600"] {
  color: #ff8c42 !important;
}
.post_content *[style*="color: #ff0000"] {
  color: #ff6b6b !important;
}
.post_content *[style*="color:#ff0000"] {
  color: #ff6b6b !important;
}
.post_content *[style*="background-color: #ffff99"] {
  background-color: transparent !important;
}
.post_content *[style*="background-color:#ffff99"] {
  background-color: transparent !important;
}
.post_content *[style*="background:#ffff99"] {
  background: none !important;
}
.post_content *[style*="background: linear-gradient(transparent 60%"] {
  background: none !important;
}
.post_content *[style*="font-family:"] {
  font-family: inherit !important;
}

/* ============================================================
   TAG LIST - Dark Mode
   ============================================================ */
.c-tagList__link {
  background: rgba(20, 25, 50, 0.8) !important;
  border: 1px solid rgba(100, 140, 220, 0.25) !important;
  color: #9ab0d0 !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
}

.c-tagList__link:hover {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}

/* Tag list wrapper */
.p-postMeta .c-tagList {
  gap: 6px;
}

/* ============================================================
   CATEGORY & TAG BADGES - Dark Mode Redesign
   ============================================================ */

/* --- Category Badge --- */
.c-categoryList__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(168, 85, 247, 0.08)) !important;
  border: 1px solid rgba(0, 212, 255, 0.25) !important;
  color: #7cc4fa !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

/* Hide folder icon */
.c-categoryList__link::before {
  display: none !important;
}

.c-categoryList__link:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.15)) !important;
  border-color: rgba(0, 212, 255, 0.5) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.15) !important;
  transform: translateY(-1px);
}

/* Category wrapper spacing */
.p-articleMetas__termList.c-categoryList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

/* --- Tag Badges --- */
.c-tagList__link {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(20, 25, 50, 0.8) !important;
  border: 1px solid rgba(100, 140, 220, 0.2) !important;
  color: #8a9cc0 !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

/* Hide tag icon */
.c-tagList__link::before {
  display: none !important;
}

.c-tagList__link:hover {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.1) !important;
}

/* Tag wrapper */
.p-articleMetas__termList.c-tagList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Tag/Category icon (SWELL default icons) - hide */
.p-articleMetas__termIcon {
  display: none !important;
}

/* Also hide the term icon SVGs */
.p-articleMetas .c-categoryList::before,
.p-articleMetas .c-tagList::before,
.p-articleMetas__termIcon svg {
  display: none !important;
}

/* ============================================
   TITLE SPLIT - Game name / Article title separation
   ============================================ */

/* Hide original text (SEO preserved) */
.gs-title-split__original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* Split wrapper */
.gs-title-split {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tag badges (【2026年最新】【PC版】etc) */
.gs-title-split__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 2px;
}

.gs-title-split__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(120, 80, 255, 0.15));
  color: #7dd3fc;
  border: 1px solid rgba(0, 212, 255, 0.25);
  line-height: 1.4;
  white-space: nowrap;
}

/* Game name - hero treatment */
.gs-title-split__game {
  display: block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(90deg, #00d4ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  margin-bottom: 0;
}

/* Subtitle (～霧の王国～ etc) */
.gs-title-split__subtitle {
  display: block;
  font-size: 0.7em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
  margin-top: -4px;
}

/* Article title - compact description */
.gs-title-split__article {
  display: block;
  font-size: 0.78em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card layout adjustments */
.-type-card .gs-title-split__game {
  font-size: 1.1em;
}

.-type-card .gs-title-split__article {
  font-size: 0.75em;
  -webkit-line-clamp: 2;
}

/* List layout */
.-type-list .gs-title-split__game {
  font-size: 1em;
}

.-type-list .gs-title-split__article {
  font-size: 0.8em;
}

/* Thumb layout (small cards) */
.-type-thumb .gs-title-split__game {
  font-size: 0.9em;
}

.-type-thumb .gs-title-split__article {
  font-size: 0.72em;
  -webkit-line-clamp: 2;
}

/* Mobile adjustments */
@media (max-width: 599px) {
  .gs-title-split__game {
    font-size: 1em;
  }
  .gs-title-split__article {
    font-size: 0.75em;
    -webkit-line-clamp: 2;
  }
  .gs-title-split__tag {
    font-size: 9px;
    padding: 1px 6px;
  }
}

/* Hover effect on game name */
.p-postList__item:hover .gs-title-split__game {
  background: linear-gradient(90deg, #38bdf8, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
}

.p-postList__item:hover .gs-title-split__article {
  color: rgba(255, 255, 255, 0.85);
}