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

/* ========================================
   BASE RESET
======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0D1117;
  --sky1:     #060B18;
  --sky2:     #0D1B35;
  --gold:     #F5D060;
  --gold2:    #C8A830;
  --red:      #C0392B;
  --parchment:#E8DCC8;
  --dim:      #9E8C78;
  --box-bg:   #0A1A0E;
  --box-border:#2E6B3E;
  --box-glow: #4DFF91;
  --select:   #1A4D2A;
  --cursor:   #F5D060;
  --blue-box: #091526;
  --blue-border:#1E4F7A;
  --px: 4px; /* 1 game pixel */
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--parchment);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.8;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* ========================================
   RPG DIALOG BOX
======================================== */
.rpg-box {
  position: relative;
  background: var(--box-bg);
  border: 3px solid var(--box-border);
  box-shadow:
    inset 0 0 0 2px var(--bg),
    0 0 20px rgba(77,255,145,0.15),
    0 0 60px rgba(0,0,0,0.8);
  padding: 20px 24px;
  image-rendering: pixelated;
}
.rpg-box::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(77,255,145,0.08);
  pointer-events: none;
}

/* corners */
.rpg-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(135deg, var(--box-border) 3px, transparent 3px) top left,
    linear-gradient(225deg, var(--box-border) 3px, transparent 3px) top right,
    linear-gradient(315deg, var(--box-border) 3px, transparent 3px) bottom left,
    linear-gradient(45deg,  var(--box-border) 3px, transparent 3px) bottom right;
  background-size: 10px 10px;
  background-repeat: no-repeat;
  pointer-events: none;
}

.rpg-box-blue {
  background: var(--blue-box);
  border-color: var(--blue-border);
  box-shadow:
    inset 0 0 0 2px var(--bg),
    0 0 20px rgba(30,79,122,0.3),
    0 0 60px rgba(0,0,0,0.8);
}
.rpg-box-blue::before { border-color: rgba(30,79,122,0.15); }
.rpg-box-blue::after {
  background:
    linear-gradient(135deg, var(--blue-border) 3px, transparent 3px) top left,
    linear-gradient(225deg, var(--blue-border) 3px, transparent 3px) top right,
    linear-gradient(315deg, var(--blue-border) 3px, transparent 3px) bottom left,
    linear-gradient(45deg,  var(--blue-border) 3px, transparent 3px) bottom right;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}

/* ========================================
   TYPOGRAPHY
======================================== */
.text-gold   { color: var(--gold); }
.text-dim    { color: var(--dim); }
.text-red    { color: var(--red); }
.text-green  { color: var(--box-glow); }
.text-white  { color: #fff; }

/* ========================================
   BLINK ANIMATION
======================================== */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.blink { animation: blink 1s step-end infinite; }

@keyframes blink-slow {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
.blink-slow { animation: blink-slow 1.4s step-end infinite; }

/* ========================================
   SCANLINE OVERLAY
======================================== */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.03) 0px,
    rgba(0,0,0,0.03) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* ========================================
   TRANSITIONS
======================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes typewriter {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.fade-in { animation: fadeIn 0.8s ease forwards; }
.slide-up { animation: slideUp 0.5s ease forwards; }

/* ========================================
   PROGRESS BAR
======================================== */
.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: #0a1a0e;
  border: 2px solid var(--box-border);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--box-glow);
  transition: width 0.3s ease;
  image-rendering: pixelated;
}

/* ========================================
   BUTTON BASE
======================================== */
.rpg-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--gold);
  background: var(--box-bg);
  border: 2px solid var(--box-border);
  padding: 12px 20px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.1s, color 0.1s;
  image-rendering: pixelated;
  white-space: nowrap;
}
.rpg-btn:hover, .rpg-btn.active {
  background: var(--select);
  color: #fff;
}
.rpg-btn:active {
  transform: translate(1px, 1px);
}

/* ========================================
   PIXEL DIVIDER
======================================== */
.px-divider {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--box-border) 0px, var(--box-border) 4px,
    transparent 4px, transparent 8px
  );
  margin: 12px 0;
}