/* Detalhes em pixel art: sprites SVG inline, sombras duras, barras segmentadas e animações em degraus. */

/* ===== Detalhes em pixel (sprites SVG inline, escala inteira, sem anti-aliasing) ===== */

/* Títulos de secção: seta pixel + linha pontilhada até ao fim */
.sec > h2,
.sec > .row > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.sec > h2::before,
.sec > .row > h2::before {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cg fill='%236366F1'%3E%3Crect x='0' y='0' width='2' height='7'/%3E%3Crect x='2' y='1' width='1' height='5'/%3E%3Crect x='3' y='2' width='1' height='3'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 10px 14px;
  image-rendering: pixelated;
}
.sec > h2::after,
.sec > .row > h2::after {
  content: '';
  flex: 1;
  min-width: 24px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--line-hover) 0 4px, transparent 4px 10px);
}

/* Cantoneiras pixel nos cartões de destaque */
.hero-main,
.exam-countdown-card {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cg fill='%23818CF8'%3E%3Crect x='0' y='0' width='6' height='2'/%3E%3Crect x='0' y='2' width='2' height='4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cg fill='%23818CF8'%3E%3Crect x='0' y='0' width='6' height='2'/%3E%3Crect x='4' y='2' width='2' height='4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cg fill='%23818CF8'%3E%3Crect x='0' y='4' width='6' height='2'/%3E%3Crect x='0' y='0' width='2' height='4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cg fill='%23818CF8'%3E%3Crect x='0' y='4' width='6' height='2'/%3E%3Crect x='4' y='0' width='2' height='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: left 14px top 14px, right 14px top 14px, left 14px bottom 14px, right 14px bottom 14px;
  image-rendering: pixelated;
}

/* Brilhos pixel a cintilar no cartão principal */
.hero-main::before {
  content: '';
  position: absolute;
  top: 22px;
  right: 30px;
  width: 72px;
  height: 48px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' shape-rendering='crispEdges'%3E%3Cg fill='%23FBBF24'%3E%3Crect x='4' y='2' width='1' height='5'/%3E%3Crect x='2' y='4' width='5' height='1'/%3E%3C/g%3E%3Crect x='4' y='4' width='1' height='1' fill='%23FEF9C3'/%3E%3Cg fill='%23A5B4FC'%3E%3Crect x='17' y='9' width='1' height='3'/%3E%3Crect x='16' y='10' width='3' height='1'/%3E%3C/g%3E%3Crect x='12' y='1' width='1' height='1' fill='%2367E8F9'/%3E%3Crect x='21' y='3' width='1' height='1' fill='%23FBBF24'/%3E%3C/svg%3E") no-repeat center / 72px 48px;
  image-rendering: pixelated;
  animation: pxTwinkle 1.6s steps(1, end) infinite;
}
@keyframes pxTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Botões com sombra pixel dura (efeito de tecla de arcada) */
.btn.primary {
  box-shadow: 0 4px 0 #3730A3, 0 8px 18px rgba(79, 70, 229, 0.3);
}
.btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 0 #3730A3, 0 12px 24px rgba(79, 70, 229, 0.4);
}
.btn.primary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 #3730A3, 0 4px 10px rgba(79, 70, 229, 0.3);
}
.btn.ghost {
  box-shadow: 0 3px 0 var(--line-hover);
}
.btn.ghost:hover:not(:disabled) {
  box-shadow: 0 5px 0 var(--line-hover);
}
.btn.ghost:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--line-hover);
}

/* Barras de progresso segmentadas, estilo barra de vida retro */
.bar { border-radius: 4px; }
.prog { border-radius: 2px; }
.bar > i,
.prog > i {
  border-radius: 0;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
  mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}

/* Balão de fala com bico em escada */
.speech-bubble::before {
  left: -10px;
  width: 8px;
  height: 16px;
  transform: translateY(-50%);
  border: 0;
  background: var(--line-hover);
  clip-path: polygon(6px 0, 8px 0, 8px 16px, 6px 16px, 6px 14px, 4px 14px, 4px 12px, 2px 12px, 2px 10px, 0 10px, 0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px);
}

/* Números de HUD em fonte pixel */
.stat b {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}
.ring-days {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}
.grade .big {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
}
.grade .big small { font-size: 24px; }
.pill {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  font-weight: 400;
  padding: 6px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 60%, #000);
}

/* Cartões com sombra pixel ao passar o rato */
.cat:hover {
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, transparent), var(--shadow);
}
.mode:hover:not([aria-disabled="true"]) {
  box-shadow: 0 6px 0 var(--line-hover), var(--shadow-hover);
}
.mode.main:hover:not([aria-disabled="true"]) {
  box-shadow: 0 6px 0 #312E81, var(--shadow-hover);
}

/* Toasts em estilo de caixa de diálogo de jogo; o de XP leva uma moeda pixel */
.toast {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.35), 0 10px 24px rgba(0, 0, 0, 0.2);
}
.toast.xp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 0 #B45309, 0 8px 20px rgba(245, 158, 11, 0.35);
}
.toast.xp::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cg fill='%23B45309'%3E%3Crect x='2' y='0' width='4' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='4'/%3E%3Crect x='7' y='2' width='1' height='4'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='2' y='7' width='4' height='1'/%3E%3C/g%3E%3Cg fill='%23FBBF24'%3E%3Crect x='2' y='1' width='4' height='1'/%3E%3Crect x='1' y='2' width='6' height='4'/%3E%3Crect x='2' y='6' width='4' height='1'/%3E%3C/g%3E%3Crect x='2' y='2' width='1' height='2' fill='%23FEF9C3'/%3E%3Crect x='4' y='2' width='1' height='4' fill='%23D97706'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  image-rendering: pixelated;
}

/* Rodapé: chão pontilhado com uma cobra pixel a passear */
.foot {
  position: relative;
  border-top: 0;
  padding-top: 28px;
}
.foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--line-hover) 0 4px, transparent 4px 8px);
}
.foot::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 32px;
  height: 16px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cg fill='%233776AB'%3E%3Crect x='10' y='2' width='5' height='3'/%3E%3Crect x='9' y='4' width='2' height='3'/%3E%3Crect x='1' y='5' width='8' height='1'/%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3C/g%3E%3Crect x='11' y='1' width='3' height='1' fill='%234B8BBE'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%234B8BBE'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%234B8BBE'/%3E%3Crect x='1' y='6' width='10' height='1' fill='%23FFD43B'/%3E%3Crect x='1' y='7' width='10' height='1' fill='%231F4E79'/%3E%3Crect x='11' y='5' width='3' height='1' fill='%231F4E79'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%23FFFFFF'/%3E%3Crect x='13' y='2' width='1' height='1' fill='%230F172A'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%23F43F5E'/%3E%3C/svg%3E") no-repeat center / 32px 16px;
  image-rendering: pixelated;
  animation: pxSnake 24s infinite;
}
@keyframes pxSnake {
  0% { left: 0; transform: scaleX(1); animation-timing-function: steps(60, end); }
  49.9% { left: calc(100% - 32px); transform: scaleX(1); animation-timing-function: steps(1, end); }
  50% { left: calc(100% - 32px); transform: scaleX(-1); animation-timing-function: steps(60, end); }
  100% { left: 0; transform: scaleX(-1); }
}

/* Barra de scroll quadrada */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-hover); border: 3px solid var(--bg); border-radius: 0; }

/* Cartão da contagem mais estreito para "da Frequência" caber numa linha a 40px */
@media (min-width: 769px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 768px) {
  .grade .big { font-size: 40px; }
  .grade .big small { font-size: 16px; }
  .hero-main::before { right: 16px; }
}
@media (max-width: 500px) {
  .hero-main::before { display: none; }
}