body {
  box-sizing: border-box;
}

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

.minecraft-font {
  font-family: 'Minecraft', monospace;
}

.nether-portal-bg {
  background: linear-gradient(135deg, #1a0a1f 0%, #2d1b36 25%, #4a1942 50%, #2d1b36 75%, #1a0a1f 100%);
  position: relative;
  overflow: hidden;
}

.nether-portal-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(75, 0, 130, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(148, 0, 211, 0.2) 0%, transparent 70%);
  animation: portalPulse 3s ease-in-out infinite;
}

@keyframes portalPulse {
  0%,100% { opacity: .6; }
  50% { opacity: 1; }
}

.main-container-wrapper {
  position: relative;
  border: 12px solid #2d0d3d;
  box-shadow:
    inset 0 0 30px rgba(45,13,61,.9),
    0 0 40px rgba(139,92,246,.6),
    0 0 80px rgba(167,139,250,.4);
  animation: portalFrameGlow 3s ease-in-out infinite;
}

@keyframes portalFrameGlow {
  0%,100% {
    box-shadow:
      inset 0 0 30px rgba(45,13,61,.9),
      0 0 40px rgba(139,92,246,.6),
      0 0 80px rgba(167,139,250,.4);
  }
  50% {
    box-shadow:
      inset 0 0 30px rgba(45,13,61,.95),
      0 0 60px rgba(139,92,246,.9),
      0 0 120px rgba(167,139,250,.6);
  }
}

.portal-edge-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.portal-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

.portal-particle-small {
  background: #a855f7;
  box-shadow: 0 0 4px #a855f7;
}

.portal-particle-edge {
  animation: portalEdgeFloat 3s ease-out infinite;
}

@keyframes portalEdgeFloat {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  50% { opacity: .8; }
  100% { transform: translateY(-70px) scale(0); opacity: 0; }
}

.skin-card {
  background: linear-gradient(145deg, rgba(45,27,54,.9), rgba(26,10,31,.95));
  border: 3px solid #8b5cf6;
  box-shadow:
    0 0 20px rgba(139,92,246,.4),
    0 0 40px rgba(139,92,246,.2),
    inset 0 0 30px rgba(139,92,246,.1);
}

.player-name {
  background: linear-gradient(90deg,#a78bfa,#c4b5fd,#a78bfa);
  background-size:200% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: floatUp 6s linear infinite;
}

@keyframes floatUp {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-200px); opacity: 0; }
}

.particle-purple {
  background: #9b59b6;
  box-shadow: 0 0 6px #9b59b6, 0 0 12px #8e44ad;
}

.particle-magenta {
  background: #e056fd;
  box-shadow: 0 0 6px #e056fd, 0 0 12px #be2edd;
}

.particle-violet {
  background: #6c5ce7;
  box-shadow: 0 0 6px #6c5ce7, 0 0 12px #5f27cd;
}
.player-name,
.instruction-text,
.loading-text {
  text-align: center;
}
@media (max-width: 768px) {

  .main-container-wrapper {
    border-width: 6px;
  }

  .skin-card {
    padding: 16px;
  }

  .player-name {
    font-size: 1.1rem;
  }

  .instruction-text {
    font-size: 0.7rem;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 260px;
  }

  .grid {
    gap: 24px;
  }
}