:root{
  --anchor:#0b5394;
  --bg-1:#eaf4ff;
  --bg-2:#d7ebff;
  --paper:#f7fbff;
  --ink:#16324f;
  --font-display:'Press Start 2P', monospace;
  --font-body:'VT323', monospace;
  --brand-1:#2f80ed;
  --brand-2:#56ccf2;
  --brand-solid:#2f80ed;
  --pixel-black:#16324f;
}

body{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:var(--bg-1);
  image-rendering:pixelated;
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background-image:
    linear-gradient(90deg, rgba(11,83,148,.12) 2px, transparent 2px),
    linear-gradient(0deg, rgba(11,83,148,.12) 2px, transparent 2px);
  background-size:32px 32px;
  animation:pixelScroll 1s linear infinite;
  pointer-events:none;
}
@keyframes pixelScroll{
  from{ background-position:0 0; }
  to{ background-position:32px 32px; }
}

.noise{display:none;}

.btn-voltar{
  position:fixed; top:20px; left:20px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border:3px solid var(--pixel-black);
  background:var(--paper); color:var(--ink); text-decoration:none;
  box-shadow:4px 4px 0 0 var(--pixel-black); transition:.08s;
}
.btn-voltar:hover{background:var(--brand-2); color:#ffffff;}
.btn-voltar:active{transform:translate(4px,4px); box-shadow:0 0 0 0 var(--pixel-black);}

.btn-voltar .arrow-box{
  position:relative; width:21px; height:21px;
}
.btn-voltar .arrow{
  position:absolute; top:9px; left:0;
  width:3px; height:3px; background:currentColor;
  box-shadow:
    12px -9px 0 0 currentColor,
    9px -6px 0 0 currentColor,
    12px -6px 0 0 currentColor,
    6px -3px 0 0 currentColor,
    9px -3px 0 0 currentColor,
    12px -3px 0 0 currentColor,
    3px 0 0 0 currentColor,
    6px 0 0 0 currentColor,
    9px 0 0 0 currentColor,
    12px 0 0 0 currentColor,
    15px 0 0 0 currentColor,
    18px 0 0 0 currentColor,
    6px 3px 0 0 currentColor,
    9px 3px 0 0 currentColor,
    12px 3px 0 0 currentColor,
    9px 6px 0 0 currentColor,
    12px 6px 0 0 currentColor,
    12px 9px 0 0 currentColor;
}

.pixel-field{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.pixel-star{
  position:absolute; width:6px; height:6px; background:var(--brand-2);
  box-shadow:
    0 -6px 0 0 var(--brand-2),
    0 6px 0 0 var(--brand-2),
    -6px 0 0 0 var(--brand-2),
    6px 0 0 0 var(--brand-2);
  opacity:0;
  animation:starBlink 4s ease-in-out infinite;
}
@keyframes starBlink{
  0%{ opacity:0; }
  8%{ opacity:1; }
  40%{ opacity:1; }
  50%{ opacity:0; }
  100%{ opacity:0; }
}
.pixel-star.c1{ background:var(--brand-solid); box-shadow:0 -6px 0 0 var(--brand-solid),0 6px 0 0 var(--brand-solid),-6px 0 0 0 var(--brand-solid),6px 0 0 0 var(--brand-solid); }
.pixel-star.c2{ background:var(--anchor); box-shadow:0 -6px 0 0 var(--anchor),0 6px 0 0 var(--anchor),-6px 0 0 0 var(--anchor),6px 0 0 0 var(--anchor); }

.logo{
  font-size:1.6rem;
  letter-spacing:2px;
  text-shadow:3px 3px 0 var(--brand-solid);
}
.logo span{color:var(--brand-2);}

.form-stage{
  position:relative; z-index:1; display:flex; justify-content:center; width:min(100%, 560px); padding:0 16px 24px;
}

.contact-form{
  width:100%;
  background:var(--paper); border-radius:0; padding:22px 26px;
  border:4px solid var(--pixel-black);
  box-shadow:8px 8px 0 0 var(--pixel-black);
}

.field{margin-bottom:12px;}
.field label{
  display:block; font-family:var(--font-body); font-weight:400; font-size:1.25rem;
  letter-spacing:.5px; color:var(--brand-2); margin-bottom:4px; text-transform:uppercase;
}
.field .req{color:var(--brand-solid);}

.field input, .field select{
  width:100%; padding:10px 14px; border-radius:0; border:3px solid var(--pixel-black);
  font-family:var(--font-body); font-size:1.25rem; color:var(--ink); outline:none;
  background:#ffffff;
}
.field input::placeholder{color:#a8b8ca;}
.field input:focus, .field select:focus{border-color:var(--anchor); background:#ffffff;}
.field select{cursor:pointer;}
.field select:invalid, .field select option[value=""]{color:#a8b8ca;}

.btn-enviar{
  width:100%; margin-top:6px; padding:12px; border:3px solid var(--pixel-black); border-radius:0;
  background:var(--brand-2); color:#ffffff; font-family:var(--font-display);
  font-weight:400; font-size:.85rem; letter-spacing:0; cursor:pointer;
  box-shadow:5px 5px 0 0 var(--pixel-black); transition:.08s;
}
.btn-enviar:hover{background:var(--anchor);}
.btn-enviar:active{transform:translate(5px,5px); box-shadow:0 0 0 0 var(--pixel-black);}

.player-select{
  width:100%; background:var(--paper); border-radius:0; padding:34px 28px;
  border:4px solid var(--pixel-black); box-shadow:8px 8px 0 0 var(--pixel-black); text-align:center;
}
.player-select-title{
  font-family:var(--font-display); font-size:1.2rem; color:var(--ink); margin:0 0 22px; letter-spacing:1px;
}
.player-select-options{display:flex; flex-direction:column; gap:14px;}
.btn-player{
  width:100%; padding:14px; border:3px solid var(--pixel-black); border-radius:0;
  background:var(--brand-2); color:#ffffff; font-family:var(--font-body);
  font-weight:400; font-size:1.3rem; letter-spacing:.5px; cursor:pointer;
  box-shadow:5px 5px 0 0 var(--pixel-black); transition:.08s;
}
.btn-player:hover{background:var(--anchor);}
.btn-player:active{transform:translate(5px,5px); box-shadow:0 0 0 0 var(--pixel-black);}

.form-sent{
  width:100%; background:var(--paper); border-radius:0; padding:44px 32px;
  border:4px solid var(--pixel-black); box-shadow:8px 8px 0 0 var(--pixel-black); text-align:center;
}
.form-sent .check-box{
  width:64px; height:64px; margin:0 auto 16px;
  background:#4cd07d; border:3px solid var(--pixel-black);
  box-shadow:4px 4px 0 0 var(--pixel-black);
  display:flex; align-items:center; justify-content:center;
}
.form-sent .check-icon{
  position:relative; width:28px; height:24px;
}
.form-sent .check{
  position:absolute; top:8px; left:0;
  width:4px; height:4px; background:#ffffff;
  box-shadow:
    0 4px 0 0 #ffffff,
    4px 4px 0 0 #ffffff,
    4px 8px 0 0 #ffffff,
    8px 8px 0 0 #ffffff,
    8px 12px 0 0 #ffffff,
    12px 4px 0 0 #ffffff,
    12px 8px 0 0 #ffffff,
    16px 0 0 0 #ffffff,
    16px 4px 0 0 #ffffff,
    20px -4px 0 0 #ffffff,
    20px 0 0 0 #ffffff,
    24px -8px 0 0 #ffffff,
    24px -4px 0 0 #ffffff;
}
.form-sent .sent-title{font-family:var(--font-display); font-size:1.4rem; color:var(--brand-2); margin:0 0 12px; letter-spacing:1px;}
.form-sent .sent-text{font-family:var(--font-display); font-size:1.4rem; color:var(--ink); opacity:.9; margin:0; letter-spacing:1px;}

.progress-bar{
  width:100%; height:16px; margin-top:20px;
  border:3px solid var(--pixel-black); background:#ffffff; padding:2px;
}
.progress-fill{
  height:100%; width:0%; background:#4cd07d;
  transition:width 5s linear;
}

.hidden{display:none !important;}

/* -------- large tablet / kiosk (portrait only) -------- */
@media(min-width:900px) and (orientation:portrait){
  .btn-voltar{width:68px; height:68px; top:28px; left:28px;}
  .btn-voltar .arrow-box{width:28px; height:28px; transform:scale(1.3);}

  .logo{font-size:2rem;}

  .form-stage{width:min(85vw, 720px); padding:0 16px 32px;}
  .contact-form{padding:34px 40px;}

  .field{margin-bottom:20px;}
  .field label{font-size:1.5rem;}
  .field input, .field select{padding:16px 18px; font-size:1.5rem;}
  .btn-enviar{padding:18px; font-size:1.05rem;}

  .player-select{padding:48px 40px;}
  .player-select-title{font-size:1.5rem; margin-bottom:30px;}
  .btn-player{padding:20px; font-size:1.6rem;}

  .form-sent{padding:56px 44px;}
  .form-sent .check-box{width:80px; height:80px;}
  .form-sent .check-icon{width:35px; height:30px; transform:scale(1.25);}
  .form-sent .sent-title, .form-sent .sent-text{font-size:1.7rem;}

  .progress-bar{height:20px; margin-top:26px;}
}