body {
  font-family: 'Open Sans', Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
  background: linear-gradient(120deg, aliceblue 60%, lightblue 100%);
  color: #222;
}
/* gameboard */
.game-area {
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dropzone {
  width: 200px; height: 200px; border: 2px dashed blue;
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: white; transition: left 0.2s, top 0.2s;
}
#emoticon { font-size: 64px; cursor: grab; margin: 30px; }
#timer { font-size: 24px; margin: 30px; color: blue; }
#result { font-size: 19px; margin-top: 30px; }
/* header/navbar/modal/form/footer styles */
header, .navbar {
  background: aliceblue !important;
  border-bottom: 2px solid lightgray;
  box-shadow: 0 2px 8px 0 lightgray;
}
.navbar-brand, .nav-link {
  color: #003366 !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.nav-link.active {
  color: #0056b3 !important;
  border-bottom: 2px solid #0056b3;
}
.modal-content {
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
}
.modal-header {
  background: #f8faff;
  border-bottom: 1px solid #e0e7ef;
}
.modal-title {
  color: #003366;
  font-weight: 700;
}
#settingsForm {
  background: #f8faff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  padding: 18px 20px 12px 20px;
  margin-bottom: 24px;
}
#settingsForm label {
  font-weight: 600;
  color: #003366;
}
#settingsForm .form-control {
  border-radius: 8px;
  border: 1px solid #e0e7ef;
  background: #fff;
}
#settingsForm .btn-primary {
  background: #0056b3;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  letter-spacing: 0.5px;
}
footer {
  background: aliceblue !important;
  color: navy !important;
  border-radius: 16px;
  margin-top: 32px;
  border-bottom: 2px solid lightgray;
  box-shadow: 0 2px 8px 0 lightgray;
}
.footer-links a {
  color: blue !important;
  text-shadow: none !important;
  font-weight: 500;
}
.footer-links a:hover {
  text-decoration: underline;
  color: navy !important;
}
body.dark-theme {
  background: var(--color-dark) !important;
  color: white !important;
}
body.dark-theme .game-area {
  background: var(--color-dark) !important;
}
body.dark-theme #dropzone {
  background: gray !important;
  border-color: skyblue !important;
  color: white !important;
}
body.dark-theme footer {
  background: var(--color-dark) !important;
  border-bottom: 4px solid black !important;
  color: white !important;
}
body.dark-theme .footer-links a {
  color: skyblue !important;
  text-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #dropzone { transition: none; }
}
/* CSS properties */
:root {
  --color-primary: blue;
  --color-accent: yellow;
  --spacing-lg: 32px;
  --spacing-md: 16px;
  --border-radius: 12px;
  --color-dark: #181a1b;
}

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

body {
  font-family: 'Roboto', Arial, sans-serif;
  background: white;
  color: black;
}

header, footer {
  background: var(--color-primary);
  color: white;
  border-radius: var(--border-radius);
}

main {
  margin-top: var(--spacing-lg);
  background: #ffffffcc;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  padding: 24px 0 24px 0;
}

/*layout (flex) */
#game-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
}

/* Advanced selector - nth-child */
#game-board > div:nth-child(odd) {
  background: var(--color-accent);
}

/* Advanced selector - attribute selector */
input[required] {
  border-left: 4px solid var(--color-primary);
}

@media (max-width: 600px) {
  main { margin-top: 16px; }
  #game-board { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}