/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%}

/* BODY */
body{
  font-family:'Special Elite','Staatliches','Orbitron',sans-serif;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.85)),
    url('/images/background.png') center/cover no-repeat;
  color:#000;
  overflow-x:hidden;
}

/* ================= LAYOUT ================= */
.center{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.layout{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ================= PANEL MENU ================= */
.panel-menu{
  position:relative;
  width:460px;
  max-width:95vw;
  min-height:640px;
  padding:190px 40px 50px;

  background:#f3e7c9;
  border:2px solid #111;
  box-shadow:0 12px 35px rgba(0,0,0,.5);
}

/* LOGO */
.logo{
  position:absolute;
  top:-170px;
  left:50%;
  transform:translateX(-50%);
}
.logo img{
  width:320px;
  max-width:90vw;
  filter:sepia(30%) contrast(1.05)
         drop-shadow(0 8px 25px rgba(0,0,0,.4));
}
.top-weapons .medal-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.weapon-row {
  display: flex;
  align-items: center;
  gap: 8px;          /* mais respiro */
  margin-left: 12px;
  line-height: 1.4;  /* evita texto colado */
}

/* MENU */
.menu a{
  display:flex;
  justify-content:center;
  margin:18px 0;
  padding:18px;

  font-size:18px;
  letter-spacing:3px;
  text-decoration:none;
  color:#000;

  background:#e9dcc0;
  border:2px dashed #000;
  transform:rotate(-1deg);
  transition:.2s;
}
.menu a:hover{
  background:#d6c8a6;
  transform:scale(1.03) rotate(0deg);
}

/* ================= HUD ================= */
.hud{
  width:860px;
  max-width:95vw;
  height:640px;
  max-height:90vh;

  background:#f3e7c9;
  border:2px solid #111;
  box-shadow:0 12px 35px rgba(0,0,0,.5);
}

/* HUD FRAME */
.hud-frame{
  width:100%;
  height:100%;
  padding:26px;
  border:1px solid #222;

  display:flex;
  flex-direction:column;
  overflow:hidden;

  background:
    linear-gradient(transparent 96%, rgba(0,0,0,.05) 100%),
    #f3e7c9;
}

/* HEADER */
.hud-header{
  display:flex;
  justify-content:center;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:2px solid #000;
}
.hud-title{
  font-size:14px;
  letter-spacing:4px;
  color:#000;
}
.status-dot{display:none}

/* ================= FORM ================= */
.form-box{
  margin-top:10px;
  padding:20px;

  background:#e9dcc0;
  border:1px dashed #000;
}
.form-box label{
  display:block;
  margin:8px 0 4px;
  font-size:13px;
}
.form-box input,
.form-box textarea{
  width:100%;
  padding:8px 10px;

  background:#f3e7c9;
  border:1px solid #000;
  color:#000;
  font-family:'Special Elite',monospace;
}
.form-box button{
  margin-top:12px;
  width:100%;
  padding:10px;

  font-size:14px;
  background:#d6c8a6;
  border:2px solid #000;
  cursor:pointer;
}
.form-box button:hover{
  background:#c9b98f;
}

/* ================= STATS ================= */
.stats-container{
  padding:12px;
  background:#e9dcc0;
  border:1px dashed #000;
}

.stats-title{
  font-size:15px;
  letter-spacing:4px;
  margin-bottom:10px;
  color:#000;
}

/* GRID */
.stats-table{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 12px;
}

/* ITEM */
.stats-row{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:8px 10px;
  background:rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.35);
}

.stats-row.highlight{
  grid-column:1 / -1;
  justify-content:center;
  gap:12px;
}

/* TEXTO */
.stats-label{
  font-size:14px;
  letter-spacing:2px;
  color:#000;
}
.stats-value{
  font-weight:700;
  color:#0b4ea2;
}

/* ================= LOADING ================= */
.stats-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:18px;
}
.stats-loading-title{
  font-size:12px;
  letter-spacing:4px;
}
.stats-loading-nick{
  font-size:16px;
}
.stats-loading-wait{
  font-size:11px;
  opacity:.7;
}

/* BARRA */
.stats-loading-bar{
  width:120px;
  height:3px;
  background:#c9b98f;
  overflow:hidden;
}
.stats-loading-bar::after{
  content:"";
  display:block;
  width:40%;
  height:100%;
  background:#000;
  animation:loadingMove 1.2s infinite linear;
}

@keyframes loadingMove{
  from{transform:translateX(-100%)}
  to{transform:translateX(250%)}
}

/* ================= MODAL ================= */
#modalAviso{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:9999;
  align-items:center;
  justify-content:center;
}

.modal-hud{
  width:420px;
  padding:26px;
  background:#f3e7c9;
  border:2px solid #000;
  text-align:center;
}

.modal-frame{
  border:1px dashed #000;
  padding:22px;
}

.modal-title{
  font-size:14px;
  letter-spacing:4px;
  margin-bottom:14px;
}

.modal-text{
  font-size:13px;
  line-height:1.6;
  margin-bottom:18px;
}

.modal-btn{
  padding:10px 22px;
  background:#d6c8a6;
  border:2px solid #000;
  cursor:pointer;
}
.modal-btn:hover{
  background:#c9b98f;
}

/* ================= CARIMBO CONFIDENTIAL ================= */

.ficha-militar{
  position:relative;
  overflow:hidden;
}

/* BORDA (efeito carimbo) */
.ficha-militar::before{
  content:"CONFIDENCIAL";
  position:absolute;

  bottom:110px;
  left:60%;
  transform:translateX(-50%) rotate(-18deg);

  font-family:'Staatliches','Orbitron',sans-serif;
  font-size:46px;
  letter-spacing:4px;
  font-weight:900;

  color:transparent;
  -webkit-text-stroke:1.5px rgba(120,0,0,.25);
  text-stroke:1.5px rgba(120,0,0,.25);

  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}


/* ================= FICHA MILITAR ================= */

.ficha-militar{
  background:#f3ead2;
  padding:30px 40px;
  border:2px solid #222;
  font-family:'Special Elite','Staatliches',monospace;
  color:#111;
}

/* HEADER */
.ficha-header{
  text-align:center;
  margin-bottom:25px
}
.ficha-small{
  font-size:11px;
  letter-spacing:3px;
}
.ficha-title{
  font-size:22px;
  font-weight:bold;
  margin:6px 0;
}
.ficha-conf{
  font-size:11px;
  letter-spacing:2px;
}

/* IDENTIFICAÇÃO */
.ficha-identificacao{
  display:flex;
  gap:30px;
  margin-bottom:20px;
}

/* FOTO */
.foto-box{
  width:180px;
  background:#fff;
  padding:8px;
  border:1px solid #000;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.foto-box img{
  width:100%;
  display:block;
}

/* DADOS */
.dados-pessoais{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 30px;
  font-size:13px;
}
.dados-pessoais b{
  letter-spacing:1px;
}

/* SEÇÕES */
.sec-title{
  font-size:14px;
  letter-spacing:3px;
  margin-bottom:10px;
}

/* COMBATE */
.ficha-combate .grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px 20px;
  font-size:13px;
}

/* Ajuste para caneta azul */
.grid b:not(.handwritten) {
  color: #ff3b3b;   /* vermelho HUD para b que NÃO são handwritten */
  font-weight: 700;
}

/* HANDWRITTEN - caneta azul */
.handwritten {
  font-family: 'Special Elite', 'Courier New', monospace;
  color: #0044cc;          /* azul caneta */
  font-weight: 700;
  text-shadow: 0.5px 0.5px 0 rgba(0,0,0,0.1); /* irregularidade da tinta */
  display:inline-block;
  transition: transform 0.2s;
}

/* OBS */
.ficha-observacoes{
  margin-top:25px;
}
.ficha-observacoes p {
  margin: 4px 0;
}

.ficha-observacoes p.alert {
  color: #ff0000;
  font-weight: 600;
}

.ficha-observacoes p.note {
  color: #9affff;
}

.redacted{
  margin-top:10px;
  height:14px;
  background:#000;
}

/* HR */
.ficha-militar hr{
  margin:25px 0;
  border:none;
  border-top:1px solid #000;
}

/* SCROLL */
#resultado{
  overflow-y:auto;
  max-height:100%;
}

/* ================= SCROLL ================= */
#resultado,
.stats-container{
  overflow-y:auto;
  max-height:100%;
}

#resultado::-webkit-scrollbar,
.stats-container::-webkit-scrollbar{
  width:6px;
}
#resultado::-webkit-scrollbar-thumb,
.stats-container::-webkit-scrollbar-thumb{
  background:#000;
}
#resultado::-webkit-scrollbar-track,
.stats-container::-webkit-scrollbar-track{
  background:#e9dcc0;
}

/* ================= RESPONSIVO ================= */
/* ================= RESPONSIVO REAL ================= */

@media (max-width:1024px){
  .hud,
  .panel-menu{
    width:95vw;
    height:auto;        /* ⬅️ remove altura fixa */
    min-height:auto;
  }

  .panel-menu{
    padding:140px 20px 30px;
  }
}

@media (max-width:768px){
  .layout{
    flex-direction:column;
    gap:30px;
  }

  .panel-menu{
    padding:120px 16px 20px;
  }

  .hud{
    padding:0;
  }

  .hud-frame{
    padding:18px;
  }

  /* FORM */
  .form-box{
    padding:16px;
  }

  /* STATS */
  .stats-table{
    grid-template-columns:1fr; /* ⬅️ uma coluna */
  }

  /* FICHA MILITAR */
  .ficha-militar{
    padding:20px;
  }

  .ficha-identificacao{
    flex-direction:column;     /* ⬅️ empilha */
    align-items:center;
  }

  .foto-box{
    width:160px;
  }

  .dados-pessoais{
    grid-template-columns:1fr; /* ⬅️ uma coluna */
    width:100%;
    text-align:left;
  }

  /* COMBATE */
  .ficha-combate .grid{
    grid-template-columns:1fr;
  }

  /* CARIMBO */
  .ficha-militar::before{
    font-size:32px;
    bottom:60px;
    left:50%;
  }
}

@media (max-width:480px){
  .logo img{
    width:200px;
  }

  .menu a{
    font-size:16px;
    padding:14px;
    margin:30px 0;
  }

  .hud-title{
    font-size:12px;
    letter-spacing:3px;
  }

  .stats-label{
    font-size:13px;
  }

  .stats-value{
    font-size:13px;
  }
}
.postit {
  position: absolute;
  width: 140px;
  padding: 10px;
  font-size: 12px;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  transform: rotate(-5deg);
  border: 1px solid #ccc;
  z-index: 10;
}