body {
    /* Gradients + Transparency + Blend Modes on main background */
    background-color: #583101; /* base color */
    background-image:
        radial-gradient(1200px 700px at 15% 12%, rgba(255,255,255,0.08), rgba(255,255,255,0)),
        radial-gradient(1200px 700px at 85% 88%, rgba(0,0,0,0.22), rgba(0,0,0,0)),
        linear-gradient(0deg, rgba(255,255,255,0.05), rgba(0,0,0,0.13)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.10' numOctaves='4' seed='7'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='0.18'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.06' numOctaves='2' seed='19'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='0.14'/></svg>");
    background-blend-mode: screen, multiply, overlay, overlay, overlay;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-size: auto, auto, auto, 200px 200px, 240px 240px;
    background-position: center, center, center, 0 0, 60px 40px;
    /* Opacity + inner shadows for realism */
    box-shadow: inset 0 60px 120px rgba(0,0,0,0.35), inset 0 -55px 110px rgba(255,255,255,0.08);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    transition: box-shadow 180ms ease;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    font-family: sans-serif;
}

/* Highlight and shadow overlays for depth that respond on hover */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1000px 500px at 18% 14%, rgba(255,255,255,0.10), transparent 60%),
        radial-gradient(900px 500px at 84% 86%, rgba(0,0,0,0.18), transparent 55%);
    mix-blend-mode: soft-light;
    opacity: 0.85;
    transition: opacity 180ms ease;
}

body:hover::before {
    opacity: 1;
}

/* 2D layout: remove highlight/shadow overlays */

.game-container {
    position: relative;
    z-index: 1;
    background: #583101; /* match page background for seamless extrusion */
    border-radius: 22px;
    /* Neumorphic: dual light/dark shadows for raised effect */
    box-shadow:
        -16px -16px 32px rgba(255,255,255,0.08),
         16px 16px 32px rgba(0,0,0,0.45);
    transition: box-shadow 160ms ease;
    overflow: hidden; /* clip texture overlay to rounded panel */
}

.game-container {
    border-radius: 22px;
    padding: 12px;
}

/* Neumorphic panel texture overlay */
.game-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0; /* sit behind content, over base color */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.014 0.09' numOctaves='3' seed='12'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='0.16'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.12' numOctaves='3' seed='4'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='0.12'/></svg>");
    background-blend-mode: overlay, overlay;
    background-size: 220px 220px, 160px 160px;
    background-position: 0 0, 60px 40px;
    mix-blend-mode: overlay;
}

.game-container:hover {
    /* Slightly intensify on hover */
    box-shadow:
        -18px -18px 36px rgba(255,255,255,0.10),
         18px 18px 36px rgba(0,0,0,0.50);
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #7f4f24; /* match uploaded image dominant color */
    color: #fff;
    padding: 12px 16px;
    border-radius: 14px;
}

.logo img {
    width: 50px;
    height: 50px;
}

.title {
    font-size: 36px;
    font-weight: bold;
    color: #583101; /* dark brown brand text */
    text-shadow: none; /* clean bold letters */
    margin-left: 10px;
}

main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.left-sidebar, .right-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
}

.player-info {
    text-align: center;
    margin-bottom: 20px;
}

.player-label {
    font-size: 18px;
    font-weight: bold;
}

.timer {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.buttons {
    display: flex;
    flex-direction: column;
}

.buttons button {
    background: none;
    border: none;
    cursor: pointer;
    margin: 5px 0;
}

.buttons button img {
    width: 40px;
    height: 40px;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, var(--tile));
    grid-template-rows: repeat(8, var(--tile));
    border: none; /* remove beige/brown frame outline */
    /* Flat 2D: no tilt or drop shadows */
    background-color: transparent; /* no visible board base */
    position: relative; /* enable inner shadow overlay */
}

.chess-board::before {
    content: "";
    position: absolute;
    inset: 0; /* inner edge shading only */
    pointer-events: none;
    z-index: 2; /* render above squares for visible inner shadows */
    box-shadow:
        inset 0 18px 28px rgba(0,0,0,0.22),
        inset 0 -18px 28px rgba(255,255,255,0.07),
        inset 18px 0 28px rgba(0,0,0,0.18),
        inset -18px 0 28px rgba(255,255,255,0.06);
}

.square {
    width: var(--tile);
    height: var(--tile);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* ensure squares render above overlay */
    z-index: 1; /* board inner shadow overlay sits above at z-index:2 */
    /* Flat 2D squares */
}

.square.light {
    background-color: #f5f5dc; /* beige */
    /* Per-square grain texture (light) */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.10' numOctaves='3' seed='21'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='0.16'/></svg>");
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 64px 64px;
}

.square.dark {
    background-color: #7f4f24; /* requested dark brown */
    /* Per-square grain texture (dark) */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.014 0.08' numOctaves='3' seed='33'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='0.20'/></svg>");
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 64px 64px;
}

.piece {
    font-size: calc(var(--tile) * 0.75);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    /* Flat 2D: no drop shadow */
}

/* Make pieces bold and filled for stronger contrast */
.piece.white {
    color: #ffffff; /* pure white fill */
    -webkit-text-stroke: 0.5px #000000; /* slight thin black outline */
    text-shadow: none; /* keep pure white appearance */
}

.piece.black {
    color: #000000; /* pure black */
    -webkit-text-stroke: 2px #000000;
    text-shadow: none; /* 2D: remove glow/shadow */
}

/* Move and selection indicators */
.square.selected {
    outline: 2px solid rgba(255,255,255,0.35);
    outline-offset: -2px;
}

.square.move::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.35);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.square.capture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(230,57,70,0.18);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.square.check-king {
    outline: 3px solid #e63946;
    outline-offset: -3px;
}

/* Status bar */
.status-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #fff;
}

.status-bar button {
    background: #936639;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
}

.status-bar button:hover {
    filter: brightness(1.05);
}

.status-bar a {
  background: #936639;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 800;
}
.status-bar a:hover { filter: brightness(1.05); }

/* Drag direction line overlay */
#drag-line {
  position: absolute;
  height: 3px;
  background: rgba(60, 180, 75, 0.9); /* legal: green */
  border-radius: 2px;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 30;
  display: none;
}
#drag-line.illegal {
  background: rgba(240, 70, 70, 0.9); /* illegal: red */
}

/* Captured trays */
.captured-trays {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
}
.tray {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  box-shadow: 8px 8px 14px rgba(0,0,0,0.35), -6px -6px 10px rgba(255,255,255,0.06);
}
/* When trays are placed in sidebars, ensure they fit the sidebar width and do not stretch vertically */
.left-sidebar .tray,
.right-sidebar .tray {
  width: 100%;
  flex: 0 0 auto;
}
.tray-title {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 6px;
  color: #fff;
}
.tray-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: calc(var(--tile) * 0.35);
}
.tray-pieces .piece {
  font-size: calc(var(--tile) * 0.45);
  line-height: 1;
}
/* Time control select */
#time-control {
  background: #ffffff; /* solid white improves dropdown readability */
  color: #000 !important;         /* black text for visible values */
  -webkit-text-fill-color: #000 !important; /* ensure text displays black in WebKit */
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 6px 8px;
  font-weight: 800; /* bold */
}
#time-control option {
  color: #000 !important;  /* force black in dropdown */
  background: #fff !important;
  font-weight: 800;        /* bold */
}
/* Edge/IE value rendering fallback */
#time-control::-ms-value { color: #000 !important; }
/* Ensure the select stays black when focused/open */
#time-control:focus, #time-control:active { color: #000 !important; -webkit-text-fill-color: #000 !important; }
/* Override status bar inherited white color for selects */
.status-bar select { color: #000 !important; -webkit-text-fill-color: #000 !important; }
/* Ensure dropdown options are readable across browsers */
#time-control option {
  color: #000;            /* black text on white background */
  background: #fff;
}

/* Improve drag on touch devices */
.chess-board, .square, .piece {
  touch-action: none; /* allow pointer events to drive drag */
}

/* Overlay mask to block gameplay until access */
.overlay-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
}

/* Modal base styles */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.modal.hidden { display: none; }
.modal .modal-content {
  background: #7f4f24; /* dark brown */
  color: #fff; /* bold white text */
  font-weight: 700;
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 320px;
  max-width: 420px;
  box-shadow: 12px 12px 22px rgba(0,0,0,0.45), -8px -8px 16px rgba(255,255,255,0.08);
  border: 2px solid #583101; /* brown frame */
}
.modal .modal-content h2 {
  margin: 0 0 12px 0;
  color: #f5f5dc; /* beige accent */
  font-weight: 800;
}
.modal .modal-content label {
  display: block;
  margin: 8px 0 4px;
}
.modal .modal-content input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 700;
}
.modal .modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: flex-end;
}
.modal .modal-actions button {
  background: #936639; /* medium brown */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}
.modal .modal-actions button:hover {
  filter: brightness(1.08);
}
.modal small { opacity: 0.85; }

/* Status buttons: emphasize bold text */
#leaderboard-btn, #login-btn, #restart-btn {
  font-weight: 800;
}

/* Header and Navigation for Home */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #7f4f24;
  border-bottom: 3px solid #936639;
}
.site-header .title {
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
}
.main-nav a {
  display: inline-block;
  background: #936639;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
  margin-left: 10px;
}

/* Hero Section */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  background: #7f4f24;
  border-bottom: 3px solid #936639;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.hero-text h1 {
  margin-top: 0;
  color: #ffffff;
  font-weight: bold;
}
.hero-text p {
  color: #ffffff;
}
.hero-actions .btn {
  display: inline-block;
  background: #936639;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
  margin-right: 10px;
}

/* Content Section */
.content-section {
  padding: 20px;
}
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.feature-card {
  background: #7f4f24;
  border: 2px solid #936639;
  padding: 12px;
  border-radius: 6px;
}
.feature-card h3 {
  margin-top: 0;
  color: #ffffff;
}

/* Rules Card */
.rules-card {
  background: #7f4f24;
  border: 2px solid #936639;
  margin: 20px;
  padding: 16px;
  border-radius: 6px;
}
.rules-card h2 {
  margin-top: 0;
}
.rules-card ul {
  list-style: none;
  padding-left: 0;
}
.rules-card li {
  margin: 6px 0;
}

/* Leaderboard on Home */
.home-leaderboard {
  padding: 20px;
}
.home-leaderboard ol {
  background: #7f4f24;
  border: 2px solid #936639;
  padding: 12px;
  border-radius: 6px;
}
.home-leaderboard .btn {
  display: inline-block;
  margin-top: 12px;
  background: #936639;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
}

/* Footer */
.site-footer {
  margin-top: 20px;
  padding: 14px 18px;
  background: #7f4f24;
  border-top: 3px solid #936639;
  text-align: center;
}
:root { --tile: 64px; }
/* Responsive layout adjustments */
@media (max-width: 1024px) {
  .title { font-size: clamp(20px, 2.4vw, 32px); }
  main { flex-direction: column; align-items: center; }
  .left-sidebar, .right-sidebar { width: 100%; flex-direction: row; justify-content: space-between; }
  .captured-trays { flex-direction: row; }
}
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; }
  .site-header .title { font-size: clamp(18px, 3.6vw, 24px); }
  .modal .modal-content { width: 92vw; max-width: 520px; min-width: auto; }
  .status-bar { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .buttons button img { width: 32px; height: 32px; }
  .player-label { font-size: 16px; }
  .timer { font-size: 20px; }
}

/* Container width for consistent centering */
.game-container { max-width: 1200px; margin: 16px auto; }