/* ================================
   VARIÁVEIS (ROOT)
   ================================ */
:root {
  --primary-blue: #1875e8;
  --dark-blue: #1b253e;
  --darker-blue: #172134;
  --blur-color: rgba(18,40,90,0.7);
  --neon-cyan: #04e1f7;
  --neon-purple: #b185fd;
  --neon-green: #3effb9;
  --success-green: #00ff88;
  --warning-orange: #ff6b35;
  --error-red: #ff4757;
  --info-blue: #00e5ff;
  --text-white: #f8fafc;
  --text-gray: #b5c6e0;
  --text-muted: #8da5c2;
  --glow-color: #42eafc;
  --z-modal: 1000;

  --font-family-display: 'Orbitron', Arial, sans-serif;
  --font-family-primary: 'Inter', Arial, sans-serif;
  --font-weight-black: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-size-base: 1rem;
  --font-size-sm: 0.93rem;
  --font-size-lg: 1.22rem;
  --font-size-xl: 1.44rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 2.8rem;

  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.8rem;
  --spacing-xl: 2.6rem;
  --border-radius-md: 14px;
  --border-radius-lg: 22px;
  --border-radius-sm: 8px;
}

/* ================================
   GERAL & CONTAINER
   ================================ */
html, body {
  height: 100%;
  min-height: 100vh;
  font-family: var(--font-family-primary);
  color: var(--text-white);
  background: linear-gradient(120deg,#144a7b 0%, #201f54 100%);
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

.container {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

/* ================================
   LAYOUT PRINCIPAL (centralizado)
   ================================ */
.main-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  max-width: 1280px;
  min-height: 75vh;
  margin: 0 auto;
  gap: 3.5rem;
}

.main-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.stats-section {
  width: 270px;
  min-width: 220px;
  max-width: 320px;
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
  background: var(--blur-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg) var(--spacing-md);
  box-shadow: inset 0 0 18px rgba(123, 104, 238, 0.15);
  color: var(--text-white);
  box-sizing: border-box;
  position: relative;
}

/* Responsivo: stats-section abaixo em telas menores */
@media (max-width: 1050px) {
  .main-layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    max-width: 98vw;
  }
  .main-content {
    max-width: 99vw;
  }
  .stats-section {
    width: 100%;
    max-width: 680px;
    margin: 2rem auto 0 auto;
    align-self: center;
    position: static;
  }
}

@media (max-width: 700px) {
  .main-content {
    padding-left: 0;
    padding-right: 0;
    max-width: 100vw;
  }
  .main-layout {
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }
  .stats-section {
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
  }
}

/* ================================
   HEADER
   ================================ */
.game-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.game-header .title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-4xl);
  color: var(--text-white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  text-shadow: 0 0 12px var(--neon-cyan);
}

.game-header .subtitle {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  color: var(--text-gray);
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.45);
}

/* ================================
   DIFICULDADE
   ================================ */
.difficulty-section {
  margin-bottom: var(--spacing-lg);
}

.difficulty-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  grid-template-rows: 1fr 1fr;
  grid-gap: var(--spacing-lg);
  max-width: 700px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
  padding: var(--spacing-lg) 0;
  width: 100%;
  box-sizing: border-box;
}

.difficulty-btn {
  width: 100%;
  max-width: 260px;
  min-width: 160px;
  min-height: 56px;
  height: 56px;
  background: var(--blur-color);
  border: 2px solid var(--primary-blue);
  color: var(--text-white);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: 1.15rem;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  aspect-ratio: 2.6 / 1;
}

.difficulty-btn .btn-emoji {
  font-size: 1.6rem;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

.difficulty-btn .btn-name {
  flex: 1 1 50px;
  font-size: 1.12rem;
}

.difficulty-btn .btn-range {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-left: auto;
}

.difficulty-btn.active {
  background: var(--primary-blue);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 16px var(--neon-cyan), 0 0 1px var(--neon-cyan) inset;
}

.difficulty-btn:hover:not(.active),
.difficulty-btn:focus-visible:not(.active) {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

.difficulty-btn[data-difficulty="expert"] {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

@media (max-width: 800px) {
  .difficulty-selector {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    grid-template-rows: repeat(2, 1fr);
    max-width: 500px;
  }
  .difficulty-btn {
    font-size: 1rem;
    min-width: 120px;
    aspect-ratio: 2 / 1;
    height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .difficulty-btn[data-difficulty="expert"] {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    justify-self: center;
  }
}

@media (max-width: 500px) {
  .difficulty-selector {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    max-width: 340px;
    grid-gap: var(--spacing-md);
  }
  .difficulty-btn {
    aspect-ratio: 3 / 1;
    height: 40px;
    font-size: 0.97rem;
    min-width: 100px;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .difficulty-btn[data-difficulty="expert"] {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    justify-self: stretch;
  }
}

/* ================================
   INFORMAÇÕES DO JOGO
   ================================ */
.game-info-section {
  width: 100%;
  max-width: 600px;
  margin-bottom: var(--spacing-xl);
  box-sizing: border-box;
}

.game-info {
  background: var(--blur-color);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.13);
  color: var(--text-white);
  margin-bottom: var(--spacing-md);
}

.game-status {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  text-align: center;
  text-shadow: 0 0 6px var(--neon-cyan);
}

.game-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  text-align: center;
}

.detail-item {
  background: var(--darker-blue);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.18);
}

.detail-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: 0.15rem;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.detail-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--neon-cyan);
}

/* ================================
   INPUT DE PALPITE
   ================================ */
.input-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

.input-wrapper {
  flex: 0 0 150px;
}

.guess-input {
  width: 150px;
  height: 44px;
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  border: 2px solid var(--primary-blue);
  border-radius: var(--border-radius-md);
  background: var(--darker-blue);
  color: var(--text-white);
  text-align: center;
  transition: border-color 0.23s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
  outline-offset: 2px;
  letter-spacing: 0.02em;
}

.guess-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
  font-size: 0.97em;
}

.guess-input:focus {
  border-color: var(--neon-cyan);
  outline: none;
  box-shadow: 0 0 8px var(--neon-cyan);
}

/* ================================
   BOTÕES
   ================================ */
.button-group {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

.btn {
  width: 150px;
  height: 44px;
  padding: 0 var(--spacing-md);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-md);
  border: 2px solid var(--primary-blue);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-white);
  background: transparent;
  box-shadow: 0 0 5px rgba(24, 117, 232, 0.33);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
  user-select: none;
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn:hover,
.btn:focus-visible {
  background: var(--primary-blue);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan);
  outline: none;
  color: var(--text-white);
}

.btn-primary {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: 0 0 12px var(--neon-cyan);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: var(--darker-blue);
}

.btn-secondary {
  background: transparent;
  border-color: var(--primary-blue);
  color: var(--text-white);
  box-shadow: 0 0 5px rgba(24, 117, 232, 0.18);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--dark-blue);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan);
  color: var(--text-white);
}

/* ================================
   MENSAGENS
   ================================ */
.message-section {
  min-height: 64px;
  text-align: center;
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.message {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.14);
  user-select: none;
  max-width: 600px;
  transition: all 0.3s;
  background-color: rgba(0,0,0,0.18);
}

.message-info {
  background-color: rgba(55, 66, 250, 0.10);
  color: var(--info-blue);
}

.message-success {
  background-color: rgba(0, 255, 136, 0.13);
  color: var(--success-green);
}

.message-warning {
  background-color: rgba(255, 107, 53, 0.13);
  color: var(--warning-orange);
}

.message-error {
  background-color: rgba(255, 71, 87, 0.14);
  color: var(--error-red);
}

/* ================================
   ESTATÍSTICAS (coluna lateral)
   ================================ */
.stats-section {
  background: var(--blur-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg) var(--spacing-md);
  box-shadow: inset 0 0 18px rgba(123, 104, 238, 0.15);
  color: var(--text-white);
  width: 270px;
  min-width: 220px;
  max-width: 320px;
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
  align-self: flex-start;
  box-sizing: border-box;
  position: relative;
}

/* Responsivo: stats-section abaixo em telas menores */
@media (max-width: 1050px) {
  .main-layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    max-width: 98vw;
  }
  .main-content {
    max-width: 99vw;
  }
  .stats-section {
    width: 100%;
    max-width: 680px;
    margin: 2rem auto 0 auto;
    align-self: center;
    position: static;
  }
}

@media (max-width: 700px) {
  .main-content {
    padding-left: 0;
    padding-right: 0;
    max-width: 100vw;
  }
  .main-layout {
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }
  .stats-section {
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
  }
}

/* ================================
   HEADER
   ================================ */
.game-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.game-header .title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-4xl);
  color: var(--text-white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
 
text-shadow: 0 0 12px var(--neon-cyan);
}

.game-header .subtitle {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-lg);
color: var(--text-gray);
text-shadow: 0 0 6px rgba(0, 229, 255, 0.45);
}

/* ================================
ESTATÍSTICAS INTERNA
================================ */
.stats-section .section-title {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.stats {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}
@media (max-width: 1050px) {
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
}
@media (max-width: 650px) {
.stats {
grid-template-columns: 1fr;
}
}

.stat-item {
background: var(--darker-blue);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
box-shadow: 0 0 10px rgba(123, 104, 238, 0.17);
}

.stat-value {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--neon-purple);
margin-bottom: 0.18rem;
}

.stat-label {
font-size: var(--font-size-sm);
color: var(--text-muted);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
}

/* ================================
MODAL DE VITÓRIA
================================ */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(1, 8, 14, 0.96);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: opacity 0.3s;
}

.modal-content {
background: var(--blur-color);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
max-width: 440px;
width: 95vw;
box-shadow: 0 0 18px var(--glow-color);
color: var(--text-white);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
animation: modalFadeIn 0.38s cubic-bezier(.45,0,.55,1) forwards;
}

.modal-header h2 {
font-family: var(--font-family-display);
font-weight: var(--font-weight-black);
font-size: var(--font-size-3xl);
margin: 0;
text-align: center;
color: var(--neon-cyan);
text-shadow: 0 0 14px var(--neon-cyan);
}

.modal-body p {
font-size: var(--font-size-base);
text-align: center;
margin-bottom: var(--spacing-md);
color: var(--text-gray);
}

.victory-stats {
display: flex;
justify-content: space-around;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
flex-wrap: wrap;
}

.victory-stat {
background: var(--darker-blue);
border-radius: var(--border-radius-md);
padding: var(--spacing-md);
text-align: center;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
flex: 1 1 120px;
min-width: 90px;
margin-bottom: var(--spacing-sm);
}

.victory-label {
font-size: var(--font-size-sm);
color: var(--text-muted);
font-weight: var(--font-weight-medium);
margin-bottom: 0.25rem;
display: block;
text-transform: uppercase;
}

.victory-value {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--neon-green);
}

.modal-footer {
display: flex;
justify-content: center;
gap: var(--spacing-md);
flex-wrap: wrap;
margin-top: var(--spacing-sm);
}

.modal-footer .btn {
min-width: 130px;
}

@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(20px);}
to { opacity: 1; transform: translateY(0);}
}

/* ================================
PARTICULAS (DECORATIVO OPCIONAL)
================================ */
.floating-particles {
pointer-events: none;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.footer {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: transparent;
  font-family: var(--font-family-primary);
  font-size: 1.07rem;
  color: var(--text-gray);
  letter-spacing: 0.02em;
  margin-top: 2.5rem;
  z-index: 3;
  position: relative;
  user-select: none;
}

.footer a.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, box-shadow 0.18s, transform 0.16s;
  margin-left: 0.12rem;
  padding: 0.1rem;
  background: transparent;
}

.footer a.footer-icon svg {
  transition: filter 0.22s, fill 0.18s;
}

/* Hover geral: discreto, arredondado */
.footer a.footer-icon:hover {
  background: rgba(20,74,123,0.22);
  transform: scale(1.13);
}

/* GitHub: glow lilás, LinkedIn: glow ciano */
.footer a[href*="github"]:hover svg {
  filter: drop-shadow(0 0 8px #b185fd);
  /* mantém o fill original lilás do SVG */
}
.footer a[href*="linkedin"]:hover svg {
  color: #04e1f7;
  filter: drop-shadow(0 0 10px #04e1f7);
}