:root{
    --brand:#c4161c;
    --bg1:#0b132b;
    --bg2:#1c2541;
    --panel:#ffffff;
    --text:#1a1a1a;
    --gap:20px; /* horizontal gap between cups */
    --board-max:720px;
    --cup-width:150px; /* max width; will clamp on small screens */
    --cup-height:140px;
    --lift:90px; /* how high a cup lifts to reveal the gift */
	--cup-width: 200px; --cup-height: 180px;
  }

  html,body{
    margin:0;
    background:linear-gradient(var(--bg1),var(--bg2));
    color:#fff;
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    min-height:100%;
  }

  .wrap{
    max-width:900px;
    margin:16px auto;
    padding:12px;
  }

  header h1{
    margin:0 0 6px;
    font-size:1.6rem;
    letter-spacing:.2px;
  }
  header p{ margin:0 0 10px; opacity:.9; }

  .controls{
    background:var(--panel);
    color:var(--text);
    border-radius:12px;
    padding:10px;
    display:grid;
    grid-template-columns: 1fr auto;
    gap:8px;
    align-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }

  .controls .left{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  }
  .controls .right{
    justify-self:end; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  }

  select, label.toggle input{
    accent-color:var(--brand);
  }
  select, button, .chip {
    border-radius:10px;
    border:1px solid #ddd;
    padding:8px 10px;
    background:#fff;
    color:#111;
    font-weight:600;
  }
  button.primary{
    background:var(--brand); color:#fff; border:none;
    box-shadow: 0 2px 0 rgba(0,0,0,.25) inset, 0 3px 10px rgba(0,0,0,.12);
    cursor:pointer;
  }
  button.primary:active{ transform:translateY(1px); }

  .stats{
    display:flex; gap:14px; flex-wrap:wrap; align-items:baseline;
    font-variant-numeric:tabular-nums;
  }
  .stat{ display:inline-flex; gap:6px; }
  .label{ opacity:.8; font-size:.9rem; }
  .value{ font-weight:800; }

  .board-wrap{
    margin:16px auto 8px;
    display:grid; place-items:center;
  }

  .board{
    position:relative;
    width:min(96vw,var(--board-max));
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    background:
      radial-gradient(60% 60% at 70% 20%, rgba(255,255,255,0.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)),
      #e5e9f2;
    border-radius:16px;
    box-shadow:0 20px 45px rgba(0,0,0,.4);
    overflow:hidden;
    padding:16px;
  }

  .stage{
    position:absolute; inset:16px;
    display:block;
  }

  /* Cup buttons */
  .cup{
    position:absolute;
    top:50%;
    left:0;
    width: min(var(--cup-width), 28vw);
    max-width: 200px;
    height: var(--cup-height);
    transform: translate(-50%, -50%);
    background:transparent;
    border:none;
    cursor:pointer;
    outline:none;
    padding:0;
    user-select:none;
    touch-action:manipulation;
  }
  .cup:focus-visible{
    filter: drop-shadow(0 0 0.25rem #fff) drop-shadow(0 0 0.5rem var(--brand));
  }
  .lid{
    position:absolute;
    left:50%; bottom:0;
    width: 86%;
    height: 72%;
    transform: translateX(-50%);
    border-radius: 14px 14px 8px 8px / 24px 24px 8px 8px;
    background:
      radial-gradient(200% 80% at 50% 0%, rgba(255,255,255,.6), transparent 50%),
      linear-gradient(180deg, #caa06a, #926b38);
    box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.25) inset;
    transition: transform 220ms ease;
  }
  .knob{
    position:absolute;
    left:50%; bottom: calc(72% - 10px);
    transform: translateX(-50%);
    width: 44px; height: 22px;
    background: linear-gradient(180deg, #e3c089,#b88949);
    border-radius: 28px 28px 6px 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.3) inset;
  }
  .gift{
    position:absolute;
    left:50%; bottom: 6px;
    transform: translateX(-50%);
    font-size: 36px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
    pointer-events:none;
  }
  .cup.lift .lid{
    transform: translate(-50%, calc(-1 * var(--lift)));
  }
  .cup.lift .knob{
    transform: translate(-50%, calc(-1 * var(--lift)));
  }

  /* Messages */
  .msg{
    margin-top:8px; min-height:1.6em; text-align:center; font-weight:700;
  }
  .badge{
    display:inline-block; padding:6px 10px; border-radius:999px; background:#2ecc71; color:#0b2e1e;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
  }
  .badge.lose{ background:#ff7675; color:#3b0a0a; }

  /* Snow overlay (win confetti alternative) */
  .snow-overlay{
    position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:1; transition: opacity 600ms ease;
  }

  /* Utility */
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
	/* Add a black background color to the top navigation */
.topnav {
  background-color: #ef0303;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
		.logo-image{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -6px;
}
/* Custom styles for Bootstrap 5 multi-level dropdown */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.1rem;
  margin-left: 0.1rem;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
  display: block;
}
.horizontal-links {
  display: flex;
  justify-content: center;
  gap: 2em;
  list-style-type: none;
  padding: 0;
}
.horizontal-links a {
  color: white;
  text-decoration: none;
}
body {
  background-color:#04AA6D;
	 background-size: cover;
}
	form {background-color: rgb(255 255 255 / 50%);} 
  .container {
            max-width: 800px;
            margin: 0 auto;
            background: linear-gradient(135deg, #8B0000 0%, #2F4F2F 100%); /* #FFFDD0;*/
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            overflow: hidden;
        }
		.footer {
    background: #228B22;
    color: white;
    text-align: center;
    padding: 20px;
    font-style: italic;
    border-radius: 15px; /* Add this line for rounded corners */
    margin: 20px auto;   /* Optional: centers the footer if it's inside a container or has a max-width */
    max-width: 600px;    /* Optional: matches your container width for consistency */
}
	/* Add a black background color to the top navigation */
.topnav {
  background-color: #ef0303;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
		.logo-image{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -6px;
}
/* Custom styles for Bootstrap 5 multi-level dropdown */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.1rem;
  margin-left: 0.1rem;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
  display: block;
}
.games-section {
  text-align: center;
  margin-top: 2em;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropbtn {
  background: #B22222;
  color: #fff;
  padding: 0.6em 2em;
  border: none;
  border-radius: 12px;
  font-size: 1.1em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.dropbtn:hover, .dropbtn:focus {
  background: #d12d2d;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 250px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.17);
  border-radius: 18px;
  z-index: 10;
  margin-top: 0.5em;
  padding: 1em 0;
  text-align: left;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}

.game-btn {
  display: block;
  width: 85%;
  margin: 0.7em auto;
  padding: 0.8em 1.2em;
  border-radius: 9px;
  font-size: 1.08em;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: background 0.15s, color 0.15s, transform 0.12s;
  text-align: center;
  color: #fff;
  border: none;
  outline: none;
}
.game-btn.tic-tac { background: #32A852; }
.game-btn.santa-free { background: #CC0033; }
.game-btn.present { background: #F2A117; }
.game-btn.puzzle { background: #20A1CF; }
.game-btn.word-game { background: #8173C4; }

.game-btn:hover,
.game-btn:focus {
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translateY(-2px) scale(1.03);
  color: #FFF7EB;
}

@media(max-width:600px) {
  .dropdown-content { min-width: 95vw; left: 2.5vw; transform: none; }
  .game-btn { width: 98%; font-size: 1em; }
}

}