*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --px: 3px;
  --gold:   #f0c040;
  --gold2:  #c89020;
  --gold3:  #7a5010;
  --accent: #7cffd4;
  --red:    #c03020;
  --parchment: #1a140a;
  --panel:  #12100a;
  --panel2: #1e1a10;
  --border: #4a3810;
  --border2:#6a5020;
  --text:   #e8d080;
  --muted:  #8a7040;
  --dark:   #0a0806;
  --stone:  #2a2418;
  --stone2: #3a3020;
  --green:  #507830;
  --green2: #7cffd4;
}

html{scroll-behavior:smooth;}
body{
  background: var(--dark);
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 18px;
  overflow-x: hidden;
  image-rendering: pixelated;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23f0c040'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23f0c040'/%3E%3Crect x='8' y='8' width='4' height='4' fill='%23f0c040'/%3E%3C/svg%3E") 8 8, crosshair;
}


/* ═══════════════════════════════
   SCANLINE OVERLAY
═══════════════════════════════ */
body::before{
  content:'';
  position:fixed;inset:0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,.12) 2px,
    rgba(0,0,0,.12) 4px
  );
  pointer-events:none;
  z-index:8000;
}

/* ═══════════════════════════════
   BACKGROUND HERO
═══════════════════════════════ */
.hero-bg{
  position:fixed;inset:0;
  background: var(--dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index:0;
  image-rendering: pixelated;
  transition: background-image .3s;
}
.hero-bg::after{
  content:'';
  position:absolute;inset:0;
  background: linear-gradient(
    to bottom,
    rgba(10,8,6,.35) 0%,
    rgba(10,8,6,.55) 50%,
    rgba(10,8,6,.92) 100%
  );
}

/* SOUNDTRACK */
.soundtrack {
  position: absolute;
  top: 100px;   /* desce 100px */
  left: 20px;   /* ajusta horizontalmente */
}
.seta {
  position: absolute;
  top: 104px;   /* desce 100px */
  left: 65px;   /* ajusta horizontalmente */
}


.soundtrack button {
  position: relative;
  z-index: 9999;
  cursor: pointer;
  background-color: var(--stone2);
  border-radius: 45%;

}

/* ═══════════════════════════════
   STAR PARTICLES
═══════════════════════════════ */
.stars{
  position:fixed;inset:0;z-index:1;pointer-events:none;
}
.star{
  position:absolute;
  width:3px;height:3px;
  background:var(--gold);
  animation: twinkle var(--d,2s) var(--del,0s) infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.8;transform:scale(1);}
  50%{opacity:.1;transform:scale(.4);}
}

/* ═══════════════════════════════
   NAVIGATION — scroll of parchment
═══════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 36px;
  background: linear-gradient(to bottom, #1e1808, #16120a);
  border-bottom: 3px solid var(--gold3);
  box-shadow: 0 3px 0 var(--gold2), 0 6px 0 #3a2a00, 0 9px 20px rgba(0,0,0,.8);
}
.nav-logo{
  font-family:'Press Start 2P',monospace;
  font-size:.7rem;
  color:var(--gold);
  text-shadow: 2px 2px 0 var(--gold3), 4px 4px 0 rgba(0,0,0,.6);
  letter-spacing:.05em;
}
.nav-logo span{color:var(--accent);}
.nav-links{display:flex;gap:28px;}
.nav-links a{
  font-family:'Press Start 2P',monospace;
  font-size:.45rem;
  color:var(--muted);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.1em;
  transition:color .15s;
  position:relative;
}
.nav-links a:hover{color:var(--gold);}
.nav-links a::before{
  content:'▶';
  position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  font-size:.5rem;color:var(--gold);
  opacity:0;transition:opacity .15s;
}
.nav-links a:hover::before{opacity:1;}

/* ═══════════════════════════════
   HERO SECTION
═══════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding:100px 48px 48px;
  position:relative;z-index:10;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:48px;
  align-items:center;
  width:100%;max-width:1100px;margin:0 auto;
}

/* ── Hero text panel ── */
.hero-panel{
  background: linear-gradient(135deg, rgba(26,20,10,.95), rgba(18,14,6,.98));
  border: 3px solid var(--border);
  padding: 32px 36px;
  position:relative;
}
.hero-panel::before{
  content:'';
  position:absolute;inset:0;
  background: repeating-linear-gradient(
    45deg,
    transparent,transparent 4px,
    rgba(255,200,60,.015) 4px,rgba(255,200,60,.015) 5px
  );
  pointer-events:none;
}
/* pixel corners */
.hero-panel::after{
  content:'';
  position:absolute;
  top:-6px;left:-6px;right:-6px;bottom:-6px;
  border:3px solid var(--gold3);
  pointer-events:none;
}
.corner{
  position:absolute;
  width:12px;height:12px;
  background:var(--gold2);
  z-index:2;
}
.corner.tl{top:-6px;left:-6px;}
.corner.tr{top:-6px;right:-6px;}
.corner.bl{bottom:-6px;left:-6px;}
.corner.br{bottom:-6px;right:-6px;}

.hero-tag{
  font-family:'Press Start 2P',monospace;
  font-size:.45rem;
  color:var(--accent);
  letter-spacing:.12em;
  margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.hero-tag::before{content:'✦';animation:spin 4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.hero-name{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1.2rem,2.8vw,2rem);
  color:var(--gold);
  text-shadow: 3px 3px 0 var(--gold3), 6px 6px 0 rgba(0,0,0,.7);
  line-height:1.6;
  margin-bottom:20px;
  letter-spacing:.04em;
}
.hero-name span{color:var(--accent);display:block;font-size:.7em;margin-top:6px;}

.hero-desc{
  font-family:'VT323',monospace;
  font-size:1.2rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:28px;
  border-left:3px solid var(--gold3);
  padding-left:14px;
}

.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.px-btn{
  font-family:'Press Start 2P',monospace;
  font-size:.42rem;
  letter-spacing:.08em;
  text-decoration:none;
  padding:10px 18px;
  position:relative;
  display:inline-block;
  cursor:pointer;
  border:none;
  transition:transform .1s;
}
.px-btn:active{transform:translate(2px,2px);}
.px-btn.primary{
  background:var(--gold2);
  color:#1a0800;
  box-shadow:
    3px 3px 0 var(--gold3),
    6px 6px 0 rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.2);
}
.px-btn.primary:hover{background:var(--gold);}
.px-btn.ghost{
  background:var(--stone2);
  color:var(--text);
  box-shadow:
    3px 3px 0 #1a1408,
    6px 6px 0 rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.05);
}
.px-btn.ghost:hover{background:var(--stone);color:var(--gold);}

/* ── Right column: photo + bg upload ── */
.hero-right{
  display:flex;flex-direction:column;gap:20px;
  align-items:center;
}



/* gold outer border */
.avatar-wrap::before{
  content:'';
  position:absolute;
  top:-6px;left:-6px;right:-6px;bottom:-6px;
  border:3px solid var(--gold3);
  pointer-events:none;
  z-index:2;
}
.av-corner{
  position:absolute;
  width:10px;height:10px;
  background:var(--gold2);
  z-index:3;
}
.av-corner.tl{top:-6px;left:-6px;}
.av-corner.tr{top:-6px;right:-6px;}
.av-corner.bl{bottom:-6px;left:-6px;}
.av-corner.br{bottom:-6px;right:-6px;}

/*Avatar*/
#avatarImg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  border: 3px solid var(--gold3);
  box-shadow: 0 3px 0 var(--gold2), 0 6px 0 #3a2a00, 0 9px 20px rgba(0,0,0,.8);
}

.avatar-frame img {
  width: 250px; /* ajuste aqui */
  height: auto;
}

/* ═══════════════════════════════
   SECTION COMMON
═══════════════════════════════ */
.section{
  padding:80px 48px;
  position:relative;z-index:10;
}
.section-inner{max-width:1100px;margin:0 auto;}

.section-header{
  display:flex;align-items:center;gap:16px;
  margin-bottom:48px;
}
.section-ornament{
  font-size:1.6rem;
  color:var(--gold2);
  line-height:1;
}
.section-title{
  font-family:'Press Start 2P',monospace;
  font-size:.85rem;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--gold3);
  letter-spacing:.06em;
}
.section-line{
  flex:1;
  height:3px;
  background: linear-gradient(to right, var(--gold3), transparent);
}

/* ═══════════════════════════════
   ABOUT
═══════════════════════════════ */
.about{
  background: linear-gradient(to bottom, rgba(18,14,6,.95), rgba(12,10,4,.98));
  border-top:3px solid var(--border);
  border-bottom:3px solid var(--border);
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.about-scroll{
  background:rgba(10,8,4,.6);
  border:3px solid var(--border);
  padding:24px;
  position:relative;
}
.about-scroll::after{
  content:'';
  position:absolute;
  top:-3px;left:-3px;right:-3px;bottom:-3px;
  border:3px solid var(--gold3);
  pointer-events:none;
}
.about-scroll p{
  font-size:1.1rem;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:14px;
}
.about-scroll p strong{color:var(--text);font-weight:normal;}
.about-scroll p:last-child{margin-bottom:0;}

.stat-panel{
  background:rgba(10,8,4,.6);
  border:3px solid var(--border);
  position:relative;
}
.stat-panel::after{
  content:'';
  position:absolute;
  top:-3px;left:-3px;right:-3px;bottom:-3px;
  border:3px solid var(--gold3);
  pointer-events:none;
}
.stat-row{
  display:flex;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:3px solid var(--border);
  position:relative;
  transition:background .15s;
}
.stat-row:last-child{border-bottom:none;}
.stat-row:hover{background:rgba(240,192,64,.04);}
.stat-row::before{
  content:'▸';
  color:var(--gold3);
  margin-right:8px;
  font-size:1rem;

}
.stat-k{
  font-size:.95rem;
  color:var(--muted);
  text-align:left;
  flex:1;
}
.stat-v{
  font-family:'Press Start 2P',monospace;
  font-size:.55rem;
  color:var(--accent);
  text-shadow:1px 1px 0 rgba(0,0,0,.8);
}

/* ═══════════════════════════════
   SKILLS
═══════════════════════════════ */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}
.skill-card{
  background: linear-gradient(135deg,rgba(26,20,10,.97),rgba(16,12,6,.99));
  border:3px solid var(--border);
  padding:24px;
  position:relative;
  transition:border-color .2s,transform .1s;
  cursor:default;
}
.skill-card::after{
  content:'';
  position:absolute;
  top:-3px;left:-3px;right:-3px;bottom:-3px;
  border:3px solid var(--gold3);
  pointer-events:none;
  opacity:0;
  transition:opacity .2s;
}
.skill-card:hover{border-color:var(--gold2);transform:translateY(-3px);}
.skill-card:hover::after{opacity:1;}

.skill-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;
}
.skill-icon{font-size:1.6rem;line-height:1;image-rendering:pixelated;}
.skill-name{
  font-family:'Press Start 2P',monospace;
  font-size:.55rem;
  color:var(--gold);
  letter-spacing:.06em;
}

/* pixel progress bar */
.px-bar-bg{
  height:12px;
  background:var(--stone);
  border:2px solid var(--border2);
  display:flex;
  gap:3px;
  padding:2px 3px;
  margin-bottom:10px;
}
.px-bar-segment{
  flex:1;
  height:100%;
  background:var(--border);
  transition:background .4s;
}
.px-bar-segment.filled{background:var(--accent);}
.px-bar-segment.filled.dim{background:var(--gold2);}

.skill-lvl{
  font-family:'Press Start 2P',monospace;
  font-size:.38rem;
  color:var(--muted);
  letter-spacing:.1em;
  text-align:right;
}
.skill-desc{
  font-size:.95rem;
  color:var(--muted);
  line-height:1.7;
  border-top:2px solid var(--border);
  padding-top:12px;
  margin-top:4px;
}


/* FRASES PERSONAGEM */
.character-ft {
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.character-ft:hover {
  transform: scale(1.02);
}

.character-ft .balao {
  display: none;
  position: absolute;
  bottom: 110%;
  right: 10px;
  background-color: #1a1a1a;
  color: #c9a84c;
  border: 1px solid #c9a84c;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
}

.character-ft .balao::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 20px;
  border: 6px solid transparent;
  border-top-color: #c9a84c;
}

.character-ft:hover .balao {
  display: block;
}



/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
footer{
  background: linear-gradient(to bottom,#16120a,#0e0c06);
  border-top:3px solid var(--gold3);
  box-shadow:0 -3px 0 var(--gold2), 0 -6px 0 #3a2a00;
  padding:24px 48px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:10;
}
.ft-logo{
  font-family:'Press Start 2P',monospace;
  font-size:.55rem;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--gold3);
}
.ft-logo span{color:var(--accent);}
.ft-copy{font-size:.85rem;color:var(--muted);}
.ft-links{display:flex;gap:24px;}
.ft-links a{
  font-family:'Press Start 2P',monospace;
  font-size:.4rem;
  color:var(--muted);
  text-decoration:none;
  letter-spacing:.1em;
  transition:color .15s;
}
.ft-links a:hover{color:var(--gold);}

/* ═══════════════════════════════
   SCROLL REVEAL
═══════════════════════════════ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.05s;}.d2{transition-delay:.12s;}.d3{transition-delay:.19s;}
.d4{transition-delay:.26s;}.d5{transition-delay:.33s;}

/* ═══════════════════════════════
   PIXEL DIVIDER
═══════════════════════════════ */
.px-divider{
  height:6px;
  background: repeating-linear-gradient(
    to right,
    var(--gold3) 0,var(--gold3) 6px,
    var(--gold2) 6px,var(--gold2) 12px,
    var(--border) 12px,var(--border) 18px
  );
  position:relative;z-index:10;
}

/* ANIMATED TORCHES */
.torch{
  display:inline-block;
  animation:flicker 1.2s infinite alternate;
}
@keyframes flicker{
  0%{color:#f0c040;text-shadow:0 0 8px #f0c040,0 0 16px #c08010;}
  33%{color:#ffaa00;text-shadow:0 0 12px #ffaa00,0 0 24px #cc6600;}
  66%{color:#f0c040;text-shadow:0 0 6px #f0c040,0 0 12px #c08010;}
  100%{color:#ffe060;text-shadow:0 0 10px #ffe060,0 0 20px #cc8800;}
}

/* RESPONSIVE */
@media(max-width:860px){
  nav{padding:10px 18px;}
  .hero{padding:80px 18px 36px;}
  .hero-inner{grid-template-columns:1fr;gap:28px;}
  .hero-right{flex-direction:row;flex-wrap:wrap;justify-content:center;}
  .section{padding:60px 18px;}
  .about-grid{grid-template-columns:1fr;gap:24px;}
  .skills-grid{grid-template-columns:1fr;}
  footer{flex-direction:column;gap:14px;text-align:center;padding:18px;}
}