/* =============================================
   C64 ZONE — Estilos compartidos
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Press+Start+2P&family=VT323:wght@400&display=swap');

/* ===== VARIABLES ===== */
:root {
  --c64-blue: #3333AA;
  --c64-light-blue: #6666FF;
  --c64-bg: #0000AA;
  --c64-text: #AAAAFF;
  --c64-white: #FFFFFF;
  --c64-yellow: #FFFF55;
  --c64-cyan: #55FFFF;
  --c64-green: #55FF55;
  --c64-red: #FF5555;
  --c64-orange: #FF8800;
  --c64-purple: #8800aa;
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== BODY & CRT EFFECT ===== */
body {
  background-color: #000;
  color: var(--c64-text);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: crosshair;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}

body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.crt-wrapper {
  background-color: var(--c64-bg);
  min-height: 100vh;
  padding: 0;
  position: relative;
}

/* ===== HEADER ===== */
.site-header {
  background: var(--c64-blue);
  border-bottom: 4px solid var(--c64-yellow);
  padding: 0;
}

.header-top {
  background: var(--c64-yellow);
  color: #000;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  padding: 4px;
  letter-spacing: 2px;
  animation: marqueeGlow 2s ease-in-out infinite alternate;
}

@keyframes marqueeGlow {
  from { background: var(--c64-yellow); }
  to { background: var(--c64-orange); }
}

.header-main {
  padding: 30px 40px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.logo-area { display: flex; flex-direction: column; }

.logo-petscii {
  font-family: 'VT323', monospace;
  font-size: 4rem;
  color: var(--c64-white);
  line-height: 1;
  text-shadow: 3px 3px 0 var(--c64-light-blue), -1px -1px 0 #0000FF;
  letter-spacing: 4px;
}

.logo-sub {
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  color: var(--c64-cyan);
  letter-spacing: 3px;
  margin-top: -5px;
}

.header-stats {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: var(--c64-text);
  text-align: right;
  line-height: 1.8;
}

.header-stats span { color: var(--c64-yellow); }

/* ===== NAV ===== */
nav {
  background: #000033;
  border-top: 2px solid var(--c64-light-blue);
  border-bottom: 2px solid var(--c64-light-blue);
  padding: 10px 40px;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 10000;
}

nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--c64-cyan);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid transparent;
  transition: all 0.1s;
  letter-spacing: 1px;
}

nav a:hover { color: #000; background: var(--c64-cyan); border-color: var(--c64-white); }
nav a.active { color: #000; background: var(--c64-yellow); }

/* ===== BREADCRUMB ===== */
.breadcrumb {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--c64-text);
  padding: 8px 40px;
  background: #000022;
  border-bottom: 1px solid #0000CC;
}

.breadcrumb a { color: var(--c64-cyan); text-decoration: none; }
.breadcrumb a:hover { color: var(--c64-yellow); }
.breadcrumb span { color: var(--c64-yellow); margin: 0 6px; }

/* ===== PETSCII BORDER ===== */
.petscii-border {
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: var(--c64-light-blue);
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 2px;
}

/* ===== MAIN LAYOUT ===== */
.main-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* ===== ARTICLE CARD ===== */
.article-card {
  background: #00008B;
  border: 2px solid var(--c64-light-blue);
  margin-right: 30px;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.article-header {
  background: var(--c64-light-blue);
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-header span {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: #000;
  letter-spacing: 2px;
}

.window-btns { display: flex; gap: 6px; }
.window-btns div { width: 12px; height: 12px; border: 1px solid #000; }
.btn-close { background: var(--c64-red); }
.btn-min { background: var(--c64-yellow); }
.btn-max { background: var(--c64-green); }

.article-body { padding: 30px; }

.game-badge {
  display: inline-block;
  color: var(--c64-white);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  padding: 5px 10px;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.article-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  color: var(--c64-yellow);
  line-height: 1.6;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #000;
}

.article-meta {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--c64-cyan);
  margin-bottom: 25px;
  border-bottom: 1px dashed var(--c64-light-blue);
  padding-bottom: 15px;
  letter-spacing: 1px;
}

.article-meta span { color: var(--c64-text); margin-right: 20px; }

/* ===== GAME INFOBOX ===== */
.game-infobox {
  float: right;
  margin: 0 0 20px 25px;
  background: #000055;
  border: 2px solid var(--c64-cyan);
  width: 220px;
  font-family: 'VT323', monospace;
}

.infobox-header {
  background: var(--c64-cyan);
  color: #000;
  text-align: center;
  padding: 6px;
  font-size: 1rem;
  letter-spacing: 2px;
  font-weight: bold;
}

.infobox-body { padding: 12px; }

.game-cover {
  width: 100%;
  height: 280px;
  border: 2px solid var(--c64-light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.game-cover-art {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.35rem;
  color: var(--c64-white);
  text-align: center;
  line-height: 2;
  z-index: 1;
}

.infobox-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #0000CC;
  padding: 5px 0;
  font-size: 0.95rem;
}

.infobox-row:last-child { border-bottom: none; }
.infobox-label { color: var(--c64-cyan); }
.infobox-value { color: var(--c64-white); text-align: right; max-width: 120px; }

.rating-box {
  background: #000;
  border: 2px solid var(--c64-yellow);
  padding: 10px;
  margin-top: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rating-label { color: var(--c64-yellow); font-size: 0.8rem; letter-spacing: 2px; line-height: 1.2; }

.rating-number {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  color: var(--c64-yellow);
  display: block;
  line-height: 1.3;
  text-shadow: 2px 2px 0 #884400;
}

.rating-stars { font-size: 1.1rem; color: var(--c64-yellow); line-height: 1.2; }

/* ===== ARTICLE TEXT ===== */
.article-text h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: var(--c64-cyan);
  margin: 25px 0 12px;
  padding: 8px 12px;
  background: #000033;
  border-left: 4px solid var(--c64-cyan);
  letter-spacing: 1px;
}

.article-text p {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  color: var(--c64-text);
  line-height: 1.7;
  margin-bottom: 15px;
}

.article-text p strong { color: var(--c64-yellow); }

.highlight-box {
  background: #000033;
  border: 1px dashed var(--c64-light-blue);
  padding: 15px 20px;
  margin: 20px 0;
  position: relative;
}

.highlight-box::before { content: '► '; color: var(--c64-yellow); }

.highlight-box p {
  display: inline;
  color: var(--c64-cyan) !important;
  font-size: 1.15rem !important;
}

/* ===== SCREENSHOT GALLERY ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.gallery-item {
  background: #000;
  border: 2px solid var(--c64-light-blue);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: var(--c64-text);
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
  overflow: hidden;
}

.gallery-item:hover { border-color: var(--c64-yellow); }

.gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.85);
  color: var(--c64-yellow);
  font-size: 0.75rem;
  padding: 3px 6px;
  text-align: center;
}

/* ===== VERDICT BOX ===== */
.verdict-box {
  background: #001100;
  border: 3px solid var(--c64-green);
  padding: 20px;
  margin: 25px 0;
  clear: both;
}

.verdict-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--c64-green);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.verdict-pros, .verdict-cons {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  line-height: 1.8;
}

.verdict-pros { color: var(--c64-green); }
.verdict-cons { color: var(--c64-red); }

.verdict-pros h4, .verdict-cons h4 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

/* ===== LINKS SECTION ===== */
.links-section {
  background: #000033;
  border: 1px solid var(--c64-light-blue);
  padding: 15px 20px;
  margin-top: 20px;
}

.links-section h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--c64-yellow);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.links-section a {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--c64-cyan);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.1s;
}

.links-section a:hover { color: var(--c64-yellow); }
.links-section a::before { content: '> '; color: var(--c64-green); }

/* ===== REVIEW NAV ===== */
.review-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  gap: 15px;
}

.review-nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: #000;
  background: var(--c64-cyan);
  text-decoration: none;
  padding: 10px 15px;
  border: 2px solid var(--c64-white);
  transition: all 0.1s;
  letter-spacing: 1px;
  flex: 1;
  text-align: center;
}

.review-nav a:hover { background: var(--c64-yellow); }

/* ===== SIDEBAR ===== */
.sidebar { }

.sidebar-widget {
  background: #00008B;
  border: 2px solid var(--c64-light-blue);
  margin-bottom: 20px;
}

.widget-header {
  background: var(--c64-light-blue);
  color: #000;
  padding: 6px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 1px;
}

.widget-body { padding: 15px; }

.sidebar-game-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #0000CC;
  align-items: center;
}

.sidebar-game-item:last-child { border-bottom: none; }

.game-icon {
  width: 40px; height: 40px;
  background: #000;
  border: 1px solid var(--c64-light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.game-info-small { font-family: 'VT323', monospace; }
.game-info-small .gtitle { color: var(--c64-yellow); font-size: 1rem; display: block; }
.game-info-small .gyear { color: var(--c64-text); font-size: 0.9rem; }

.stat-row {
  display: flex;
  justify-content: space-between;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  padding: 6px 0;
  border-bottom: 1px dashed #0000CC;
  color: var(--c64-text);
}

.stat-row:last-child { border-bottom: none; }
.stat-row span:last-child { color: var(--c64-yellow); }

.chip-tag {
  display: inline-block;
  background: #000033;
  border: 1px solid var(--c64-light-blue);
  color: var(--c64-cyan);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  padding: 3px 10px;
  margin: 3px;
  cursor: pointer;
  transition: all 0.1s;
}

.chip-tag:hover { background: var(--c64-light-blue); color: #000; }

/* ===== FOOTER ===== */
footer {
  background: #000033;
  border-top: 4px solid var(--c64-light-blue);
  padding: 25px 40px;
  text-align: center;
  font-family: 'VT323', monospace;
}

footer .footer-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: var(--c64-yellow);
  margin-bottom: 10px;
}

footer p { color: var(--c64-text); font-size: 1rem; line-height: 1.8; }
footer p span { color: var(--c64-cyan); }

.footer-petscii {
  font-size: 1.5rem;
  color: var(--c64-light-blue);
  margin: 10px 0;
  letter-spacing: 5px;
}

.cursor-blink {
  display: inline-block;
  background: var(--c64-text);
  width: 12px; height: 20px;
  animation: blink 0.5s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 4px;
}

@keyframes blink { 50% { opacity: 0; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .main-container { grid-template-columns: 1fr; }
  .article-card { margin-right: 0; margin-bottom: 20px; }
  .game-infobox { float: none; width: 100%; margin: 0 0 20px 0; }
  .logo-petscii { font-size: 2.5rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .verdict-grid { grid-template-columns: 1fr; }
  .header-main { padding: 20px; }
  .petscii-border { white-space: normal; }
}