@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Arbutus&family=Jersey+20&family=Press+Start+2P&family=VT323&display=swap');

:root {
  --primary: #22d3ee;     /* Cyan Pulse */
  --secondary: #0f766e;   /* Dark Teal Core */
  --accent: #1e40af;      /* Electric Royal Blue */
  --bg-dark: #020617;     /* Singular Black Hole */
  --bg-card: #0f172a;     /* Subspace Panel */
  --bg-game: #1e293b;     /* Dim Console */
  --text-light: #e0f2fe;  /* Distant Star Light */
  --text-glow: #67e8f9;   /* Plasma Glow */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Orbitron", "Poppins", sans-serif;
}
body {
  background: linear-gradient(
    135deg,
    var(--bg-dark) 0%,
    #0f0f23 50%,
    var(--bg-dark) 100%
  );
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px,var(--primary),transparent),
    radial-gradient(2px 2px at 40px 70px, var(--secondary), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--accent), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--primary), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--secondary), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: sparkle 10s linear infinite;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}
@keyframes sparkle{
    0%{transform:translateY(0px);}
    100%{transform:translateY(-200px);}
}

.container {
  background: linear-gradient(145deg, var(--bg-card),#0f1419);
  padding: 12px;
  border-radius: 20px;
  box-shadow: 
  0 20px 40px rgba(0, 255, 136, 0.2),
  0 0 0 2px rgba(255, 255, 255, 0.05),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border:2px solid transparent;
  background-clip:padding-box;
  position: relative;
  max-width: 380px;
  width: 90%;
}
.container::before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:linear-gradient(45deg, var(--primary), var(--secondary), var(--accent), var(--primary));
    border-radius: 22px;
    z-index:-1;
    animation:borderGlow 3s ease-in-out infinite alternate;
}
@keyframes borderGlow{
    0%{opacity:0.6;}
    100%{opacity:1;}
}

.screen {
  display: none;
}
.screen.active {
  display: block;
  animation: slideIn 0.5s ease-out;
}
#gameScreen {
  pointer-events: none;
}
.screen.active#gameScreen {
  pointer-events: auto;
}

@keyframes slideIn{
    0%{
        opacity:0;
        transform:translateY(20px) scale(0.95);
    }
    100%{
        opacity:1;
        transform:translateY(0px) scale(1);
    }
}

h1 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-light);
  margin-bottom: 16px;
  text-align:center;
  text-shadow: 
    0 0 10px var(--text-glow),
    0 0 20px var(--text-glow), 
    0 0 30px var(--text-glow);
    letter-spacing: 2px;
    position:relative;
}
h1::after{
    content:'';
    display: block;
    width: 80px;
    height: 2px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    margin: 12px auto;
    border-radius: 2px;
    animation:pulse 2s ease-in-out infinite;;
}
.subtitle {
  font-size: 15px;
  font-weight: 500;
  color: #b0b0b0;
  margin-bottom: 24px;
  text-align:center;
  letter-spacing:2px;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;  
}
.options.horizontal {
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
button {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, var(--primary),#01bb61);
  color:var(--bg-dark);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 140px;
  font-family: 'Orbitron', monospace;
}
button::before{
    content:'';
    position: absolute;
    top:0;
    left: -100%;
    width: 100%;
    height: 100%;
    background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition:left 0.7s;
}
button:hover::before{
    left:100%
}
button:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:
        0 5px 25px rgba(0, 255, 136, 0.4),
        0 0 15px rgba(0, 255, 136, 0.3);
}
button:active{
    transform: translateY(-1px) scale(1.02);
}

.btn-secondary {
    background:linear-gradient(145deg, #666, #444);
    color:var(--text-light);
}

.btn-secondary:hover {
 box-shadow: 
    0 15px 30px rgba(102, 102, 102, 0.4),
    0 0 20px rgba(102, 102, 102, 0.3);
}
#difficultyScreen button:nth-child(1) {
  background:linear-gradient(145deg, #4caf50, #2e7d32);
}
#difficultyScreen button:nth-child(2) {
  background: linear-gradient(145deg, #ff9800, #f57c00);
}
#difficultyScreen button:nth-child(3) {
  background:linear-gradient(145deg, #f44336, #c62828);
}

.game-info {
  background: var(--bg-game);
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 2px solid rgba(0,255,136,0.3);
  text-align: center;
  position: relative;
  overflow:hidden;
}
.game-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.163), transparent);
  animation: scanLine 3s linear infinite;
}

@keyframes scanLine {
  0% { left: -100%; }
  100% { left: 100%; }
}
.current-turn {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-glow);
  text-shadow: 0 0 10px var(--text-glow);
  letter-spacing: 2px;;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
  background: var(--bg-game);
  padding: 16px;
  border-radius: 16px;
  border: 2px solid rgba(0, 212, 255, 0.3);
  position: relative;
}
.game-grid::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--accent), var(--primary), var(--secondary), var(--accent));
  border-radius: 18px;
  z-index: -1;
  opacity: 0.5;
  animation: gridGlow 3s ease-in-out infinite alternate;
}

@keyframes gridGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}
.cell {
  aspect-ratio: 1;
  background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
  border: 2px solid transparent;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 70px;
  overflow: hidden;
}
.cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 10px;
}
.cell:hover:not(.filled) {
  transform:scale(1.05) rotateZ(2deg);
  border-color: var(--accent);
  box-shadow: 
    0 8px 20px rgba(0, 212, 255, 0.3),
    inset 0 0 16px rgba(0, 212, 255, 0.1);
}
.cell:hover:not(.filled)::before{
    opacity:0.1;
}

.cell.filled {
  cursor: not-allowed;
  pointer-events: none;
}
.cell.X {
  color: var(--secondary);
    text-shadow: 
    0 0 12px var(--secondary),
    0 0 24px var(--secondary);
  animation: cellAppear 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.cell.O {
  color: var(--accent);
    text-shadow: 
    0 0 12px var(--accent),
    0 0 24px var(--accent);
  animation: cellAppear 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes cellAppear {
  0% { 
    transform: scale(0) rotate(180deg); 
    opacity: 0; 
  }
  50% { 
    transform: scale(1.3) rotate(90deg); 
  }
  100% { 
    transform: scale(1) rotate(0deg); 
    opacity: 1; 
  }
}
.cell.winner {
  background: linear-gradient(145deg, rgba(0, 230, 118, 0.2), rgba(0, 230, 118, 0.1));
  border-color: var(--success);
  animation: winnerPulse 1s ease-in-out infinite;
  box-shadow: 
    0 0 24px rgba(0, 230, 118, 0.5),
    inset 0 0 16px rgba(0, 230, 118, 0.2);
}
@keyframes winnerPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 24px rgba(0, 230, 118, 0.5);
  }
  50% { 
    transform: scale(1.07); 
    box-shadow: 0 0 32px rgba(0, 230, 118, 0.8);
  }
}
.game-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
#gameResult {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}

.result-message {
  font-size: 17px;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  animation: resultAppear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  letter-spacing: 1px;
  width: 100%;
}
@keyframes resultAppear {
  0% { 
    transform: scale(0.8) translateY(20px); 
    opacity: 0; 
  }
  100% { 
    transform: scale(1) translateY(0); 
    opacity: 1; 
  }
}
.result-message.win {
  background: linear-gradient(145deg, rgba(0, 230, 118, 0.2), rgba(0, 230, 118, 0.1));
  color: var(--success);
  border: 2px solid var(--success);
  text-shadow: 0 0 8px var(--success);
}

.result-message.draw {
  background: linear-gradient(145deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
  color: var(--warning);
  border: 2px solid var(--warning);
  text-shadow: 0 0 8px var(--warning);
}

/* Toast styling */
#toast {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, var(--bg-card), #0f1419);
  color: var(--text-light);
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--primary);
  box-shadow: 
    0 8px 24px rgba(0, 255, 136, 0.3),
    0 0 16px rgba(0, 255, 136, 0.2);
  text-shadow: 0 0 8px var(--primary);
  letter-spacing: 1px;
}

#toast.show {
  opacity: 1;
}

#glitchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 0.1s ease-in-out;
}

#glitchOverlay.glitch-active {
  opacity: 1;
  animation: rgbGlitch 0.001s steps(5, end) infinite;
}

@keyframes rgbGlitch {
  0% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }

  8% {
    opacity: 1;
    transform: translate(-8px, 0);
    clip-path: inset(0 0 95% 0);
  }

  12% {
    transform: translate(12px, 0);
    clip-path: inset(5% 0 90% 0);
  }

  16% {
    transform: translate(-10px, 0);
    clip-path: inset(10% 0 85% 0);
  }

  20% {
    transform: translate(15px, 0);
    clip-path: inset(15% 0 80% 0);
  }

  24% {
    transform: translate(-12px, 0);
    clip-path: inset(20% 0 75% 0);
  }

  28% {
    transform: translate(18px, 0);
    clip-path: inset(25% 0 70% 0);
  }

  32% {
    transform: translate(-14px, 0);
    clip-path: inset(30% 0 65% 0);
  }

  36% {
    transform: translate(20px, 0);
    clip-path: inset(35% 0 60% 0);
  }

  40% {
    transform: translate(-16px, 0);
    clip-path: inset(40% 0 55% 0);
  }

  44% {
    transform: translate(22px, 0);
    clip-path: inset(45% 0 50% 0);
  }

  48% {
    transform: translate(-18px, 0);
    clip-path: inset(50% 0 45% 0);
  }

  52% {
    transform: translate(14px, 0);
    clip-path: inset(55% 0 40% 0);
  }

  56% {
    transform: translate(-20px, 0);
    clip-path: inset(60% 0 35% 0);
  }

  60% {
    transform: translate(16px, 0);
    clip-path: inset(65% 0 30% 0);
  }

  64% {
    transform: translate(-12px, 0);
    clip-path: inset(70% 0 25% 0);
  }

  68% {
    transform: translate(18px, 0);
    clip-path: inset(75% 0 20% 0);
  }

  72% {
    transform: translate(-14px, 0);
    clip-path: inset(80% 0 15% 0);
  }

  76% {
    transform: translate(10px, 0);
    clip-path: inset(85% 0 10% 0);
  }

  80% {
    transform: translate(-8px, 0);
    clip-path: inset(90% 0 5% 0);
  }

  84% {
    transform: translate(6px, 0);
    clip-path: inset(95% 0 0% 0);
  }

  88% {
    transform: translate(0, -3px);
    clip-path: inset(0 0 0 0);
  }

  92% {
    transform: translate(0, 2px);
    clip-path: inset(0 0 0 0);
  }

  96% {
    transform: translate(0, -1px);
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

/* ======= LOADING SCREEN (Inside .screen system) ======= */
#loadingScreen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 400px;
}

/* ======= LOADING TITLE ======= */
#loadingScreen .loading-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-light);
  margin-bottom: 30px;
  text-shadow: 0 0 10px var(--text-glow), 0 0 20px var(--text-glow);
  letter-spacing: 3px;
  animation: loadingTitlePulse 2s ease-in-out infinite;
}

@keyframes loadingTitlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ======= ANIMATION RINGS WRAPPER ======= */
#loadingScreen .loading-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
}

#loadingScreen .orbit-ring {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: rotate 3s linear infinite;
}

#loadingScreen .orbit-ring:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 60px;
  left: 60px;
  border-top: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  animation-duration: 2s;
}

#loadingScreen .orbit-ring:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 40px;
  left: 40px;
  border-bottom: 2px solid var(--secondary);
  border-left: 2px solid var(--secondary);
  animation-duration: 3s;
  animation-direction: reverse;
}

#loadingScreen .orbit-ring:nth-child(3) {
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  animation-duration: 4s;
}

#loadingScreen .orbit-ring:nth-child(4) {
  width: 200px;
  height: 200px;
  top: 0px;
  left: 0px;
  border-bottom: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
  animation-duration: 5s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ======= CENTER PULSING CORE ======= */
#loadingScreen .loading-core {
  position: absolute; 
  width: 40px;
  height: 40px;
  top: 80px;
  left: 80px;
  background: radial-gradient(circle, var(--primary), var(--accent));
  border-radius: 50%;
  animation: corePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px var(--primary), 0 0 40px var(--accent);
}

@keyframes corePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* ======= PARTICLE EFFECTS ======= */
#loadingScreen .loading-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#loadingScreen .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 2s ease-in-out infinite;
}

#loadingScreen .particle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
#loadingScreen .particle:nth-child(2) { top: 30%; right: 15%; animation-delay: 0.3s; background: var(--secondary); }
#loadingScreen .particle:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 0.6s; background: var(--accent); }
#loadingScreen .particle:nth-child(4) { bottom: 40%; right: 25%; animation-delay: 0.9s; }
#loadingScreen .particle:nth-child(5) { top: 50%; left: 5%; animation-delay: 1.2s; background: var(--secondary); }
#loadingScreen .particle:nth-child(6) { top: 70%; right: 10%; animation-delay: 1.5s; background: var(--accent); }

@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0px) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
}

/* ======= TEXT BELOW THE LOADER ======= */
#loadingScreen .loading-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-glow);
  margin-top: 30px;
  letter-spacing: 2px;
  animation: loadingTextBlink 1s ease-in infinite;
}

@keyframes loadingTextBlink {
  0%, 50% { opacity: 1; }
  25%, 75%{opacity:0.6;}
  51%, 100% { opacity: 0.3; }
}

/* ======= PROGRESS BAR BELOW TEXT ======= */
#loadingScreen .loading-progress {
  width: 100%;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  left:auto;
}

#loadingScreen .loading-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  animation: progressBar 5.5s linear forwards;
}

@keyframes progressBar {
  0% { width: 0%; }
  100% { width: 100%; }
}

@media (max-width: 600px) {
  .container {
    margin: 16px;
    padding: 20px;
  }
  
  h1 {
    font-size: 22px;
  }
  
  .cell {
    font-size: 28px;
    min-height: 64px;
  }
  
  .options.horizontal {
    flex-direction: column;
    gap: 12px;
  }
  
  button {
    min-width: 120px;
    padding: 12px 20px;
  }
  
  .game-controls {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 16px;
  }
  
  .cell {
    font-size: 24px;
    min-height: 56px;
  }
  
  .game-grid {
    gap: 8px;
    padding: 16px;
  }
}