/* ==========================================================
   CHESSLOCKER — COMPLETE ORGANIZED STYLESHEET

   01. Global reset
   02. Theme settings (Dark / Light)
   03. Shared theme effects
   04. Header and navigation
   05. Main page layout
   06. Chessboard and pieces
   07. Chess move indicators
   08. Welcome card
   09. Chess controls
   10. Login card
   11. Game-over dialog
   12. Fireworks
   13. Footer
   14. Responsive design
   ========================================================== */


/* ==========================================================
   01. GLOBAL RESET
   ========================================================== */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--text);
  font-family: 'Exo 2', sans-serif;
  transition: background .3s ease, color .3s ease;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

button,
input {
  font-family: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}


/* ==========================================================
   02. THEME SETTINGS
   ALL DARK AND LIGHT COLORS LIVE HERE

   System mode uses the JavaScript theme controller.
   It automatically applies either dark or light.
   ========================================================== */


/* ---------- DARK THEME (DEFAULT) ---------- */

:root {
  --navy: #05060f;
  --navy2: #0a0c1c;

  --cyan: #00c8ff;
  --purple: #7b2fff;

  --cyan-dim: rgba(0, 200, 255, .18);
  --purple-dim: rgba(123, 47, 255, .18);

  --text: #e8ecf7;
  --muted: #8a90ab;

  --square-light: #12152a;
  --square-dark: #0a0c1a;

  --piece-cyan: #00c8ff;
  --piece-purple: #7b2fff;

  --header-bg: linear-gradient(
    180deg,
    rgba(5, 6, 15, .95),
    rgba(5, 6, 15, .75)
  );

  --footer-bg: linear-gradient(
    0deg,
    rgba(5, 6, 15, .95),
    rgba(5, 6, 15, .75)
  );

  --card-bg: rgba(6, 8, 20, .82);
  --welcome-bg: rgba(10, 12, 28, .96);
  --input-bg: rgba(255, 255, 255, .03);

  --input-border: rgba(123, 47, 255, .4);
  --input-placeholder: #5c6180;

  --rest-glow:
    0 0 20px rgba(123, 47, 255, .14),
    0 0 35px rgba(0, 200, 255, .08);

  --hover-glow:
    0 0 25px rgba(0, 200, 255, .55),
    0 0 55px rgba(0, 200, 255, .38),
    0 0 90px rgba(0, 200, 255, .18);

  --header-hover-glow:
    0 4px 60px rgba(0, 200, 255, .35);

  --footer-hover-glow:
    0 0 60px rgba(0, 200, 255, .3);

  --welcome-glow:
    0 0 35px rgba(123, 47, 255, .55);

  --dialog-bg:
    linear-gradient(
      145deg,
      #14172e,
      #090b19 65%,
      #17102c
    );

  --dialog-backdrop: rgba(3, 4, 13, .78);
}


/* ---------- LIGHT THEME ---------- */

body.light-mode {
  --navy: #f4f7ff;
  --navy2: #e7ecfa;

  --cyan: #007fae;
  --purple: #7136d9;

  --cyan-dim: rgba(0, 127, 174, .14);
  --purple-dim: rgba(113, 54, 217, .14);

  --text: #17203b;
  --muted: #596480;

  --square-light: #e2e9fa;
  --square-dark: #b8c7e5;

  --piece-cyan: #007fae;
  --piece-purple: #7136d9;

  --header-bg:
    linear-gradient(180deg, #ffffff, #eef2ff);

  --footer-bg:
    linear-gradient(0deg, #ffffff, #eef2ff);

  --card-bg: rgba(255, 255, 255, .92);
  --welcome-bg: rgba(255, 255, 255, .97);
  --input-bg: #f8faff;

  --input-border: #b7a0e8;
  --input-placeholder: #69748f;

  --rest-glow:
    0 0 20px rgba(0, 145, 205, .25),
    0 0 40px rgba(113, 54, 217, .12);

  /* Stronger light glow — deliberately separate */
  --hover-glow:
    0 0 25px 5px rgba(0, 145, 205, .75),
    0 0 60px 15px rgba(0, 145, 205, .55),
    0 0 110px 25px rgba(0, 110, 185, .35);

  --header-hover-glow:
    0 4px 25px rgba(0, 127, 174, .45),
    0 4px 55px rgba(113, 54, 217, .2);

  --footer-hover-glow:
    0 -4px 25px rgba(0, 127, 174, .45),
    0 -4px 55px rgba(113, 54, 217, .2);

  --welcome-glow:
    0 0 30px rgba(113, 54, 217, .2);

  --dialog-bg:
    linear-gradient(145deg, #ffffff, #e9efff);

  --dialog-backdrop: rgba(14, 20, 42, .6);
}


/* ==========================================================
   03. SHARED THEME EFFECTS
   Change glow behavior here for BOTH themes.
   Individual glow values live in section 02.
   ========================================================== */

#board,
.login-card {
  box-shadow: var(--rest-glow);
  transition:
    box-shadow .35s ease,
    border-color .35s ease;
}

.board-wrapper:hover #board,
.login-card:hover {
  border-color: var(--cyan);
  box-shadow: var(--hover-glow);
}

body.light-mode .piece-svg.white {
  filter: drop-shadow(
    0 0 4px rgba(0, 127, 174, .35)
  );
}

body.light-mode .piece-svg.black {
  filter: drop-shadow(
    0 0 4px rgba(113, 54, 217, .35)
  );
}


/* ==========================================================
   04. HEADER AND NAVIGATION
   ========================================================== */

header {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 36px;

  background: var(--header-bg);
  border-bottom: 1px solid var(--purple-dim);

  box-shadow:
    0 4px 30px rgba(123, 47, 255, .25);

  transition: box-shadow .3s ease;
}

header:hover {
  box-shadow: var(--header-hover-glow);
}

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

.brand-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;

  border-radius: 12px;
  border: 1px solid var(--purple);

  box-shadow: 0 0 18px var(--purple-dim);
}

.brand-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;

  background:
    linear-gradient(90deg, var(--cyan), var(--purple));

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav .navlink {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;

  transition: color .2s ease;
}

nav .navlink:hover {
  color: var(--cyan);
}


/* ---------- THREE-MODE THEME BUTTON ---------- */

.theme-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  padding: 9px 18px;

  border: 1px solid var(--purple);
  border-radius: 999px;

  background: var(--purple-dim);
  color: var(--text);

  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;

  box-shadow: 0 0 14px var(--purple-dim);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.theme-pill:hover {
  transform: translateY(-4px) scale(1.1);

  box-shadow:
    0 0 18px var(--purple),
    0 0 28px var(--cyan-dim);
}

body.light-mode .theme-pill {
  background: #ffffff;
  color: #17203b;
}


/* ==========================================================
   05. MAIN PAGE LAYOUT
   ========================================================== */

.stage {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 60px;

  min-height: calc(100vh - 180px);
  padding: 48px 30px;
}

.chess-area {
  width: min(78vh, 640px);
  flex-shrink: 0;
}

.board-wrapper {
  position: relative;
  width: 100%;
}


/* ==========================================================
   06. CHESSBOARD AND PIECES
   ========================================================== */

#board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);

  width: 100%;
  aspect-ratio: 1;

  overflow: hidden;

  border-radius: 14px;
  border: 1px solid var(--purple-dim);
}

.sq {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;
  transition: background .15s ease;
}

.sq.light {
  background: var(--square-light);
}

.sq.dark {
  background: var(--square-dark);
}

.sq.piece-hoverable {
  cursor: pointer;
}

.piece-svg {
  width: 58%;
  height: 58%;

  transition: transform .12s ease;
}

.sq.piece-hoverable:hover .piece-svg {
  transform: scale(1.14);
}

.piece-svg.white {
  color: var(--piece-cyan);

  filter: drop-shadow(
    0 0 6px rgba(0, 200, 255, .85)
  );
}

.piece-svg.black {
  color: var(--piece-purple);

  filter: drop-shadow(
    0 0 6px rgba(123, 47, 255, .9)
  );
}

.piece-svg .stroke-part {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.piece-svg .fill-part {
  fill: currentColor;
  stroke: none;
}


/* ==========================================================
   07. CHESS MOVE INDICATORS
   ========================================================== */

/* Selected player piece */

#board .sq.selected {
  background: rgba(0, 200, 255, .25) !important;
  box-shadow: inset 0 0 0 3px #00c8ff;
}

/* Available movement dot */

#board .sq.move-hint::after {
  content: "";

  position: absolute;
  width: 25%;
  height: 25%;

  border-radius: 50%;
  background: #00c8ff;

  box-shadow: 0 0 12px #00c8ff;

  pointer-events: none;
}

/* Available capture */

#board .sq.capture-hint {
  box-shadow: inset 0 0 0 3px #00c8ff;
}

#board .sq.capture-hint::after {
  content: "";

  position: absolute;
  inset: 8%;

  border: 3px solid #00c8ff;
  border-radius: 50%;

  pointer-events: none;
}

/* Computer's previous position */

#board .sq.last-move-from {
  background: rgba(123, 47, 255, .25);
  box-shadow: inset 0 0 0 3px var(--purple);
}

/* Computer's destination */

#board .sq.last-move-to {
  background: rgba(0, 200, 255, .16);

  box-shadow:
    inset 0 0 0 3px var(--cyan),
    inset 0 0 22px rgba(0, 200, 255, .4);
}


/* ==========================================================
   08. WELCOME CARD
   ========================================================== */

.start-card {
  position: absolute;
  z-index: 10;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: min(85%, 360px);
  padding: 30px 24px;

  background: var(--welcome-bg);
  border: 1px solid var(--purple);
  border-radius: 18px;

  color: var(--text);
  text-align: center;

  box-shadow: var(--welcome-glow);
  backdrop-filter: blur(12px);
}

.start-card.hidden {
  display: none;
}

.start-icon {
  font-size: 42px;
  margin-bottom: 12px;
}

.start-card h2 {
  margin: 0 0 12px;

  font-family: 'Orbitron', sans-serif;
  font-size: 23px;
  color: var(--cyan);
}

.start-card p {
  margin: 0 0 24px;
  color: var(--text);
}

.start-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.start-buttons button {
  padding: 12px 24px;

  border: none;
  border-radius: 10px;

  background:
    linear-gradient(90deg, var(--purple), var(--cyan));

  color: #050611;
  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.start-buttons button:hover {
  transform: translateY(-4px) scale(1.07);
  box-shadow: 0 0 24px var(--purple);
}

body.light-mode .start-buttons button {
  color: #ffffff;
}

body.light-mode .start-card:hover {
  border-color: var(--cyan);

  box-shadow:
    0 0 20px rgba(0, 127, 174, .5),
    0 0 45px rgba(113, 54, 217, .25);
}


/* ==========================================================
   09. CHESS CONTROLS
   ========================================================== */

.chess-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  padding: 14px 0;

  color: var(--cyan);
}

.chess-controls button {
  padding: 10px 16px;

  border: 1px solid var(--purple);
  border-radius: 8px;

  background:
    linear-gradient(90deg, var(--purple), var(--cyan));

  color: #050611;
  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.chess-controls button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 0 18px var(--purple-dim),
    0 0 22px var(--cyan-dim);
}

body.light-mode .chess-controls button {
  color: #ffffff;
}


/* ==========================================================
   10. LOGIN CARD

   IMPORTANT:
   Keep margin-left: 8rem.
   This is your preferred desktop spacing.
   ========================================================== */

.login-card {
  position: relative;
  z-index: 4;

  width: 420px;
  max-width: 92vw;

  padding: 34px;

  margin-left: 8rem;

  flex-shrink: 0;

  border-radius: 18px;
  border: 1px solid var(--cyan-dim);

  background: var(--card-bg);

  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.login-card h2 {
  margin: 0 0 22px;

  font-family: 'Orbitron', sans-serif;
  font-size: 19px;
  letter-spacing: .5px;

  background:
    linear-gradient(90deg, var(--cyan), var(--purple));

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;

  margin-bottom: 8px;

  font-size: 13.5px;
  color: var(--text);
}

.field input {
  width: 100%;
  padding: 12px 14px;

  border-radius: 9px;
  border: 1px solid var(--input-border);

  background: var(--input-bg);
  color: var(--text);

  font-size: 14px;
  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.field input::placeholder {
  color: var(--input-placeholder);
}

.field input:focus {
  border-color: var(--cyan);

  box-shadow:
    0 0 0 3px var(--cyan-dim);
}

/* Password visibility button */

.pw-wrap {
  position: relative;
}

.pw-wrap .toggle-eye {
  position: absolute;
  right: 12px;
  top: 50%;

  transform: translateY(-50%);

  background: none;
  border: none;

  color: var(--text);
  font-size: 16px;
}

/* Sign-in button */

.signin-btn {
  width: 100%;
  padding: 13px;
  margin-top: 6px;

  border: none;
  border-radius: 10px;

  background:
    linear-gradient(90deg, var(--purple), var(--cyan));

  color: #050611;
  font-size: 15px;
  font-weight: 700;

  box-shadow:
    0 6px 22px rgba(0, 200, 255, .3);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.signin-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 28px rgba(123, 47, 255, .45);
}

body.light-mode .signin-btn {
  color: #ffffff;
}

.forgot {
  display: inline-block;
  margin-top: 16px;

  color: var(--cyan);
  font-size: 13.5px;

  text-decoration: underline;
}


/* ==========================================================
   11. GAME-OVER DIALOG
   ========================================================== */

.game-dialog {
  position: fixed;
  inset: 0;

  margin: auto;

  width: min(90vw, 440px);
  max-height: 90vh;

  padding: 38px 32px;

  border: 2px solid var(--purple);
  border-radius: 20px;

  background: var(--dialog-bg);
  color: var(--text);

  text-align: center;

  box-shadow:
    0 0 20px rgba(123, 47, 255, .6),
    0 0 55px rgba(123, 47, 255, .3),
    inset 0 0 25px rgba(123, 47, 255, .08);
}

.game-dialog::backdrop {
  background: var(--dialog-backdrop);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.game-dialog[open] {
  animation: dialog-appear .35s ease-out;
}

.dialog-title {
  margin: 0 0 20px;

  font-family: 'Orbitron', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: 1px;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      #a45cff,
      var(--cyan)
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter:
    drop-shadow(0 0 10px rgba(0, 200, 255, .3));
}

.dialog-message {
  margin: 0 0 30px;

  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.play-again {
  padding: 14px 32px;

  border: 1px solid var(--cyan);
  border-radius: 12px;

  background:
    linear-gradient(90deg, var(--purple), var(--cyan));

  color: #050611;
  font-size: 15px;
  font-weight: 700;

  box-shadow:
    0 0 15px rgba(123, 47, 255, .5),
    0 0 20px rgba(0, 200, 255, .2);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.play-again:hover {
  transform: translateY(-4px) scale(1.06);

  box-shadow:
    0 0 25px var(--purple),
    0 0 35px var(--cyan-dim);
}

.play-again:active {
  transform: scale(.97);
}

@keyframes dialog-appear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ==========================================================
   12. FIREWORKS
   ========================================================== */

.fireworks-canvas {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  z-index: 100;
  pointer-events: none;

  display: none;
}

.fireworks-canvas.active {
  display: block;
}


/* ==========================================================
   13. FOOTER
   ========================================================== */

footer {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
  min-height: 60px;
  padding: 18px 36px;

  background: var(--footer-bg);

  border-top: 1px solid var(--purple-dim);

  box-shadow:
    0 -4px 30px rgba(123, 47, 255, .2);

  
  font-size: 16px;

  transition: box-shadow .3s ease;
}

footer:hover {
  box-shadow: var(--footer-hover-glow);
}

footer .links {
  display: flex;
  gap: 24px;
}

footer .links a {
  color: #ffffff;
}

footer .links a:hover {
  color: var(--cyan);
}


/* ==========================================================
   14. RESPONSIVE DESIGN
   ========================================================== */

@media (max-width: 1100px) {
  .stage {
    flex-direction: column;
    gap: 36px;
  }

  .chess-area {
    width: min(92vw, 640px);
  }

  .login-card {
    width: min(92vw, 420px);

    /* Only reset desktop spacing on smaller screens */
    margin-left: 0;
  }

  .chess-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .stage {
    padding: 30px 16px;
  }
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 18px;
  }

  nav {
    gap: 14px;
  }

  .brand-title {
    font-size: 18px;
  }

  .brand-icon {
    width: 54px;
    height: 54px;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-dialog[open] {
    animation: none;
  }

  .play-again {
    transition: none;
  }
}