/*──────────────────────────────────────────────────────────────────*/
/* GLOBAL LAYOUT & AESTHETICS                                        */
/*──────────────────────────────────────────────────────────────────*/
html, body {
  margin: 0;
  padding: 0;
  background: url('../images/background.png') repeat;
  background-size: auto;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Semi-opaque overlay */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
/*──────────────────────────────────────────────────────────────────*/
/* PANELS & CONTAINERS                                               */
/*──────────────────────────────────────────────────────────────────*/
.panel-bg {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  padding: 2px 6px;
}
/* Splash Screen */
#splash {
  position: relative;   /* or keep static if you prefer */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 9999;
  transition: opacity 1s ease-in-out;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
}
/* Glass‐box style for splash */
.glass-box {
  background: rgba(0, 0, 0, 0.7);
  padding: 2rem;
  border-radius: 25px;
  border: 2px solid gold;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(10px);
  /* animation: glassGlow 3s ease-in-out infinite alternate; */ /* Animation disabled by default */
}

@keyframes glassGlow {
  0% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 215, 0, 0.1); }
  100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), inset 0 0 30px rgba(255, 215, 0, 0.2); }
}

.glass-box img {
  width: 200px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  /* animation: logoFloat 2s ease-in-out infinite; */ /* Animation disabled by default */
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

/* Animated Dice Container */
.dice-container {
  display: flex;
  gap: 15px;
  margin: 20px 0;
  justify-content: center;
}

.dice {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  /* animation: diceRoll 2s ease-in-out infinite; */ /* Animation disabled by default */
  position: relative;
}

.dice:nth-child(1) { animation-delay: 0s; }
.dice:nth-child(2) { animation-delay: 0.3s; }
.dice:nth-child(3) { animation-delay: 0.6s; }

@keyframes diceRoll {
  0%, 100% { 
    transform: rotateY(0deg) rotateX(0deg); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  25% { 
    transform: rotateY(90deg) rotateX(10deg); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  }
  50% { 
    transform: rotateY(180deg) rotateX(0deg); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  }
  75% { 
    transform: rotateY(270deg) rotateX(-10deg); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  }
}

/* Loading Messages */
.loading-message {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  margin: 15px 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  min-height: 24px;
  /* animation: messageFade 2s ease-in-out infinite; */ /* Animation disabled by default */
  transition: opacity 0.3s ease-in-out;
}

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

/* Loading bar */
.loading-bar-container {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  margin-top: 20px;
  overflow: hidden;
  height: 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd700, #ff8c00, #ffd700);
  border-radius: 25px;
  transition: width 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  /* animation: shimmer 2s infinite; */ /* Animation disabled by default */
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.percentage {
  margin-top: 12px;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #ffd700;
  /* animation: percentagePulse 1s ease-in-out infinite; */ /* Animation disabled by default */
}

@keyframes percentagePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Game Pieces Animation */
.game-pieces {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.piece {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  position: absolute;
  /* animation: pieceBounce 2.5s ease-in-out infinite; */ /* Animation disabled by default */
}

.piece:nth-child(1) { 
  background: #ff4444; 
  animation-delay: 0s; 
}
.piece:nth-child(2) { 
  background: #44ff44; 
  animation-delay: 0.2s; 
}
.piece:nth-child(3) { 
  background: #4444ff; 
  animation-delay: 0.4s; 
}
.piece:nth-child(4) { 
  background: #ffff44; 
  animation-delay: 0.6s; 
}

@keyframes pieceBounce {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.1); }
}

/* Smooth transitions for splash hide */
#splash.fade-out {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Loading steps animation */
.loading-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.loading-step.active {
  opacity: 1;
  transform: translateY(0);
}

/* Main container */
#main-container {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
/* Fade-in children */
.glass-frame, .footer-bar {
  opacity: 0;
  transition: opacity 1s ease-in-out 0.5s;
}
/* Glass‐frame panel */
.glass-frame {
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
  margin: 10px 0;
}
/* Top bar */
.top-bar {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 20px 20px 0 0;
}
/* Footer bar */
.footer-bar {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}
/* Login popup */
#login-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

#login-popup .popup-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  text-align: center;
  max-width: 300px;
  width: 90%;
}

#login-popup button {
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #4285F4;
  color: white;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#login-popup button:nth-child(2) {
  background: #3b5998;
}

#login-popup button:nth-child(3) {
  background: #666;
}

#login-popup button:hover {
  filter: brightness(1.1);
}

/* Logo panel */
.logo-panel {
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}
.logo-panel img {
  width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Content grid */
.content-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 20px 20px;
  box-sizing: border-box;
}
.game-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 5px;
}
.glass-frame a {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-align: center;
  padding: 16px;
  font-size: 16px;
  border-radius: 16px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s ease;
}
.glass-frame a:hover {
  text-shadow: 0 0 5px gold;
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.05);
}
.glass-frame a:active {
  transform: scale(0.97);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
@keyframes pulse {
  0% {
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.8);
  }
  100% {
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.5);
  }
}
#outerWrapper {
  min-height: 100vh;
  padding-bottom: 120px; /* ensures scrolling room */
  display: flex;
  flex-direction: column;
  align-items: center;
}
#gameContainer {
  width: 720px;
  margin-top: 40px;
  position: relative; /* <-- this is the missing rule */
}
#diceBtn {
  font-size: 30px;
  width: 42px;
  height: 35px;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#p1bar, #p2bar, #p3bar, #p4bar {
  height: 7px;
}
#p1p1, #p1p2, #p1p3, #p1p4, #p2p1, #p2p2, #p2p3, #p2p4, #p3p1, #p3p2, #p3p3, #p3p4, #p4p1, #p4p2, #p4p3, #p4p4 {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  height: 54px;
}
img {
  display: block;
}
/* Ensure the position containers (ps1, ps14, etc.) are strict in size */
/* Apply only to Ludo board position cells */
td img {
  display: block;
}
.piece-container {
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none; /* Ensure no border adds extra space */
}
/* Table for 2 pieces should also be strict in size */
.two-piece-table {
  width: 35px;
  height: 35px;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
/* Ensures no spacing around table */
.two-piece-table td {
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  text-align: center;
}
/* Styles for the pieces inside */
.piece {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
/* When two pieces are in a safety position */
.piece-small {
  width: 17px;
  height: 17px;
}
/* Default smooth glow effect for all pieces */
.piece img {
  transition: filter 0.3s ease;
}
/* Blue player glow */
#p1p1 img, #p1p2 img, #p1p3 img, #p1p4 img {
  filter: drop-shadow(0 0 6px #00ccff); /* soft neon blue */
}
/* Green player glow */
#p2p1 img, #p2p2 img, #p2p3 img, #p2p4 img {
  filter: drop-shadow(0 0 6px #33ff33); /* bright green */
}
/* Red/Orange player glow */
#p3p1 img, #p3p2 img, #p3p3 img, #p3p4 img {
  filter: drop-shadow(0 0 6px #ff6600); /* orange glow */
}
/* Yellow/Pink/Rainbow player glow */
#p4p1 img, #p4p2 img, #p4p3 img, #p4p4 img {
  filter: drop-shadow(0 0 6px #ff66ff); /* pink glow */
}
/* For all home slots */
td[id^="p1s"], td[id^="p2s"], td[id^="p3s"], td[id^="p4s"] {
  text-align: center;
  vertical-align: middle;
  padding: 0;
  position: relative;
}
/* Inner piece container */
td[id^="p1s"] > div, td[id^="p2s"] > div, td[id^="p3s"] > div, td[id^="p4s"] > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  transform: translate(-50%, -50%);
  display: block;
}
/* Fading/Scaling In */
.piece-fade-in {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.piece-fade-in.piece-visible {
  opacity: 1;
  transform: scale(1);
}
/* Optional: Fade Out for old layout */
.fade-out {
  opacity: 1;
  transition: opacity 0.2s ease;
}
.fade-out.fade-hidden {
  opacity: 0;
}
.piece-transition {
  transition: all 0.2s ease-in-out;
  transform-origin: center center;
  will-change: transform, opacity;
}
.piece-lift {
  opacity: 0.9;
  transform: scale(1.05);
  z-index: 1000;
}
@keyframes popIn {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.piece-pop {
  animation: popIn 0.2s ease-in-out;
}
#login-popup button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background: gold;
  color: #000;
  cursor: pointer;
}
#login-popup button:hover {
  background: orange;
}
#login-popup {
  display: none;
}
#login-popup.show {
  display: flex !important;
}
/* overlay backdrop */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* show when .active */
.overlay.active {
  display: flex;
}

/* inner white box (or customize) */
.overlay-content {
  padding: 24px;
  border: none;
  position: relative;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

/* close "X" */
.close-overlay {
  position: absolute;
  top: 8px; right: 8px;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

/* small styling for the new overlay-icons */
.overlay-icon {
  margin-left: 8px;
  font-size: 20px;
}
.overlay-iframe {
  width: 100%;
  height: 80vh;      /* or whatever fits your design */
  border: none;
}
/* position each screen absolutely */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;       /* JS toggles this */
}
#home { display: block; } /* or whatever your JS shows by default */
#splash {
  position: relative;   /* or keep static if you prefer */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
}


/* when you show the computer screen… */
#computer {
  display: block;      /* JS will toggle this for you */
  width: 100vw;
  height: 100vh;
}

/* iframe fills its parent entirely */
#computer-frame {
  width: 100%;
  height: 100%;
  border: none;        /* remove default border */
}
.popup.hidden {
  display: none;
}
.popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: #0b2a59;
  border: 2px solid #ffc700;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  color: #fff;
  z-index: 1000;
  font-family: sans-serif;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #142f6b;
  padding: 8px 12px;
  border-bottom: 1px solid #ffc700;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.popup-header h2 {
  margin: 0;
  font-size: 1.1em;
}
.popup-close {
  background: none;
  border: none;
  color: #ffc700;
  font-size: 1.2em;
  cursor: pointer;
}
.popup-body {
  padding: 16px;
  text-align: center;
}
.reward-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}
.reward-display img {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.reward-display span {
  font-size: 1.5em;
  font-weight: bold;
}
.double-text {
  font-size: 0.9em;
  margin-bottom: 16px;
}
.button-group {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
}
.btn-primary {
  background: #ffc700;
  color: #0b2a59;
}
.btn-secondary {
  background: #4a5778;
  color: #fff;
}

/*──────────────────────────────────────────────────────────────────*/
/* ANIMATION CONTROLS                                                */
/*──────────────────────────────────────────────────────────────────*/
#splash.animations-active .glass-box {
    animation: glassGlow 3s ease-in-out infinite alternate;
}
#splash.animations-active .glass-box img {
    /* animation: logoFloat 2s ease-in-out infinite; */
}
#splash.animations-active .dice {
    animation: diceRoll 2s ease-in-out infinite;
}
#splash.animations-active .loading-message {
    animation: messageFade 2s ease-in-out infinite;
}
#splash.animations-active .loading-bar::after {
    animation: shimmer 2s infinite;
}
#splash.animations-active .percentage {
    animation: percentagePulse 1s ease-in-out infinite;
}
#splash.animations-active .piece {
    animation: pieceBounce 2.5s ease-in-out infinite;
}

#main-container {
  display: none;
  z-index: 1000;
}

body.splash-finished #main-container {
  display: block !important;
  opacity: 1 !important;
}

/*──────────────────────────────────────────────────────────────────*/
/* SPA NAVIGATION & SCREEN STYLES                                   */
/*──────────────────────────────────────────────────────────────────*/

/* Navigation active states */
.footer-bar .panel-bg {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.footer-bar .panel-bg:hover {
  background: rgba(255, 215, 0, 0.3);
  transform: translateY(-2px);
}

.footer-bar .panel-bg.active {
  background: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.8);
}

.footer-bar .panel-bg.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #ffd700;
  border-radius: 2px;
}

/* Back button styles */
.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
}

/* Screen content styles */
.referral-content,
.social-content,
.inventory-content,
.store-content,
.board-content {
  padding: 20px;
  text-align: center;
}

.referral-content h3,
.social-content h3,
.inventory-content h3,
.store-content h3,
.board-content h3 {
  color: #ffd700;
  margin-bottom: 15px;
  font-size: 24px;
}

/* Referral screen styles */
.referral-code {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #ffd700;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.code-display {
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid #ffd700;
  border-radius: 8px;
  padding: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #ffd700;
  margin: 10px 0;
  letter-spacing: 2px;
}

.referral-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.stat {
  text-align: center;
}

.stat .number {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #ffd700;
}

.stat .label {
  font-size: 14px;
  color: #ccc;
}

/* Social screen styles */
.social-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

.social-btn {
  background: linear-gradient(145deg, #ffd700, #ff8c00);
  border: none;
  color: #000;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.friends-list {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin: 10px 0;
}

.friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ffd700;
}

.friend-name {
  font-weight: bold;
}

/* Inventory screen styles */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.inventory-item {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.inventory-item:hover {
  border-color: #ffd700;
  transform: translateY(-2px);
}

.inventory-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.inventory-item span {
  display: block;
  font-weight: bold;
  color: #ffd700;
}

/* Store screen styles */
.store-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.store-item {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.store-item:hover {
  border-color: #ffd700;
  transform: translateY(-2px);
}

.store-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.store-item h4 {
  color: #ffd700;
  margin-bottom: 10px;
}

.store-item p {
  color: #ccc;
  margin-bottom: 15px;
  font-size: 18px;
}

.buy-btn {
  background: linear-gradient(145deg, #ffd700, #ff8c00);
  border: none;
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* Board screen styles */
.content-area {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  min-height: 400px;
}

.board-header {
  text-align: center;
  margin-bottom: 30px;
}

.board-header h1 {
  color: #333;
  margin-bottom: 10px;
}

.board-header p {
  color: #666;
  font-size: 16px;
}

.board-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

#gameCanvas {
  border: 2px solid #333;
  border-radius: 8px;
  background: #f5f5f5;
}

.board-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.board-controls button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.board-controls button:first-child {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.board-controls button:last-child {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
}

.board-controls button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Game modes navigation */
.game-modes a {
  cursor: pointer;
  transition: all 0.3s ease;
}

.game-modes a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}