@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --bg: #F3F5F9;
  --text: #1F2A37;
  --muted: #5E6C80;

  --blue: #4F8CFF;
  --blue-dark: #2A67DB;

  --yellow: #FFD54A;
  --yellow-dark: #D79B00;

  --green: #44C28D;
  --green-dark: #2E9D70;

  --coral: #FF7A59;
  --coral-dark: #C94B31;

  --purple: #7B3FF2;
  --purple-dark: #5A20CC;

  --selector: #3C82E8;
  --selector-dark: #1E63BB;

  --line: #D9E3F0;
  --panel: #FFFFFF;

  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Nunito', sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1160px, 92%);
  margin:0 auto;
}

.site-header{
  padding:36px 0 8px;
  text-align:center;
}

.logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.logo-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.logo-mark{
  width:76px;
  height:76px;
  flex:0 0 auto;
}

.logo-title{
  margin:0;
  font-family:'Fredoka', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height:1;
  letter-spacing:.2px;
}

.logo-sub{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  color:var(--muted);
}

.hero{
  text-align:center;
  padding:18px 0 26px;
}

.hero h2{
  margin:0 0 10px;
  font-family:'Fredoka', sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height:1.02;
}

.hero p{
  margin:0 auto;
  max-width:820px;
  color:var(--muted);
  font-size:1.05rem;
  font-weight:800;
  line-height:1.35;
}

.social-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#ffffff;
  border:1px solid var(--line);
  color:#2455b9;
  padding:12px 18px;
  border-radius:18px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(31,42,55,.05);
  transition:transform .15s ease, opacity .15s ease;
}

.social-btn:hover{
  transform:translateY(-2px);
  opacity:.96;
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  padding:18px 0 40px;
}

.game-card{
  position:relative;
  min-height:220px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  padding:22px;
  box-shadow:0 16px 30px rgba(31,42,55,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}

.game-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 36px rgba(31,42,55,.12);
}

.game-card h3{
  position:relative;
  z-index:2;
  margin:0 0 10px;
  font-family:'Fredoka', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height:.95;
  color:#fff;
}

.game-card p{
  position:relative;
  z-index:2;
  margin:0;
  max-width:220px;
  color:rgba(255,255,255,.95);
  font-weight:800;
  line-height:1.2;
  font-size:1rem;
}

.card-icon{
  position:absolute;
  right:-12px;
  bottom:-12px;
  width:72%;
  height:72%;
  z-index:1;
  opacity:.34;
}

.card-icon.left{
  left:-12px;
  right:auto;
}

.card-icon.center-big{
  width:78%;
  height:78%;
  right:-18px;
  bottom:-18px;
}

.impostor{ background:var(--coral); }
.impostor .card-icon{ color:var(--coral-dark); }

.ruleta{ background:var(--yellow); }
.ruleta .card-icon{ color:var(--yellow-dark); }
.ruleta h3, .ruleta p{ color:#fff; }

.vf{ background:var(--blue); }
.vf .card-icon{ color:var(--blue-dark); }

.memoria{ background:var(--green); }
.memoria .card-icon{ color:var(--green-dark); }

.dado{ background:var(--purple); }
.dado .card-icon{ color:var(--purple-dark); }

.selector{ background:var(--selector); }
.selector .card-icon{ color:var(--selector-dark); }

.page-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  padding:34px 0 8px;
}

.page-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.page-brand-text h1{
  margin:0;
  font-family:'Fredoka', sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height:.95;
}

.page-brand-text p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:1rem;
  font-weight:800;
}

.nav-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  padding:16px 20px;
  border-radius:20px;
  font-weight:900;
  font-size:1rem;
  box-shadow:0 10px 24px rgba(31,42,55,.05);
}

.two-col{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:20px;
  padding:18px 0 30px;
}

@media (max-width: 900px){
  .two-col{
    grid-template-columns:1fr;
  }
}

.page-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:32px;
  padding:24px;
  box-shadow:0 14px 30px rgba(31,42,55,.05);
}

.page-title{
  margin:0 0 10px;
  font-family:'Fredoka', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height:.98;
}

.page-desc{
  margin:0 0 20px;
  color:var(--muted);
  font-size:1rem;
  font-weight:800;
  line-height:1.35;
}

label{
  display:block;
  margin-bottom:8px;
  font-size:1.02rem;
  font-weight:900;
}

.input, textarea, select{
  width:100%;
  border:1px solid #C9D7EA;
  background:#F9FBFE;
  border-radius:18px;
  padding:14px 16px;
  color:var(--text);
  font-family:'Nunito', sans-serif;
  font-size:1rem;
  outline:none;
}

textarea{
  resize:vertical;
}

.input:focus, textarea:focus, select:focus{
  border-color:var(--blue);
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

button, .btn{
  border:none;
  border-radius:18px;
  padding:14px 18px;
  font-family:'Nunito', sans-serif;
  font-size:1rem;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}

button:hover, .btn:hover{
  transform:translateY(-2px);
  opacity:.96;
}

.btn-primary{
  background:var(--blue);
  color:#fff;
}

.btn-secondary{
  background:#EAF1FD;
  color:#2B5BBE;
}

.btn-danger{
  background:#FFE5DF;
  color:#C14F37;
}

.result-box{
  min-height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:28px;
  background:#F3F7FF;
  border:1px solid #D6E2F5;
  padding:20px;
}

.result-name{
  font-family:'Fredoka', sans-serif;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height:1;
  color:#2E5CC1;
  word-break:break-word;
}

.mini-note{
  margin:12px 0 0;
  color:#6A788B;
  font-size:1rem;
  font-weight:800;
}

.names-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.name-pill{
  background:#EDF4FF;
  color:#2C4E92;
  border-radius:999px;
  padding:8px 12px;
  font-size:.95rem;
  font-weight:900;
}

.option-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.mode-btn{
  border:1px solid #D0DCEF;
  background:#fff;
  color:#4D5C71;
}

.mode-btn.active{
  background:#EAF1FD;
  color:#2C5ABC;
  border-color:#BFD2F3;
}

.small-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

@media (max-width: 560px){
  .small-grid{
    grid-template-columns:1fr;
  }
}

.footer{
  text-align:center;
  color:#738093;
  font-size:1rem;
  font-weight:800;
  padding:6px 0 40px;
}

.logo-piece{
  transform-box:fill-box;
  transform-origin:center;
  animation: floatPiece 4.6s ease-in-out infinite;
}

.logo-piece.p1{ animation-delay:0s; }
.logo-piece.p2{ animation-delay:.25s; }
.logo-piece.p3{ animation-delay:.5s; }
.logo-piece.p4{ animation-delay:.75s; }
.logo-piece.p5{ animation-delay:1s; }

@keyframes floatPiece{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-3px); }
}