/* Color scheme - vibrant green/blue gradient */
:root {
  --primary-start: #00c9a7;  /* Vibrant teal */
  --primary-end: #00b4d8;    /* Vibrant cyan/blue */
  --primary-gradient: linear-gradient(135deg, var(--primary-start), var(--primary-end));
  --primary-solid: #00c9a7;  /* Fallback solid color */
  --primary-hover-start: #00a88a;
  --primary-hover-end: #0096b4;
  --primary-hover-gradient: linear-gradient(135deg, var(--primary-hover-start), var(--primary-hover-end));
  --glow-color: rgba(0, 201, 167, 0.4);
  --glow-color-strong: rgba(0, 201, 167, 0.6);
  --timer-bg: #0d0d1a;
  --bg-color: #0d0d1a;
  --text-color: #e0e0e0;
  --header-bg: #0a1628;
}

/* Basic reset / layout */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Prevent scrolling - all content must fit in viewport */
  height: calc(var(--vh, 1vh) * 100);
  max-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

/* Archive page needs to scroll */
body.archive-page,
body.archive-page.classic-mode {
  height: auto;
  max-height: none;
  overflow: auto;
  min-height: 100vh;
}

/* Headings */
h1 {
  font-family: "Playwrite IT Moderna", serif;
}

p {
  font-size: 16px;
}

/* Header bar */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: min(0.8rem, calc(var(--vh, 1vh) * 1.5));
  box-sizing: border-box;
  position: relative;
  background-color: var(--header-bg);
  flex-shrink: 0; /* Never shrink */
}

#game-title {
  margin: 0;
  padding: 0;
  font-size: min(4rem, calc(var(--vh, 1vh) * 6));
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
  /* Perfectly centered on larger screens */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Prevent overlap with hamburger (left) and buttons+toggle (right) */
  max-width: calc(100% - 20rem);
}

#game-title:hover {
  opacity: 0.8;
}

#archive-header #game-title {
  font-size: min(3rem, calc(var(--vh, 1vh) * 5));
}


#header-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* Primary button styling used widely */
.primary-button {
  padding: 0.8rem 1.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  background: var(--primary-gradient);
  color: black;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, transform 0.1s, box-shadow 0.3s;
  box-shadow: 0 4px 15px var(--glow-color);
}

.primary-button:hover {
  background: var(--primary-hover-gradient);
  box-shadow: 0 6px 20px var(--glow-color-strong);
}

.primary-button:active {
  transform: scale(0.98);
}

.primary-button:disabled {
  background: gray;
  box-shadow: none;
  cursor: not-allowed;
}

/* Play icon in primary button */
.play-icon {
  height: 1em;
  vertical-align: middle;
  margin-right: 0.3em;
  filter: brightness(0);
}

/* Landing page buttons (archive, more games, today's puzzle) */
.landing-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  padding: 0.5rem;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
    var(--primary-gradient) border-box;
  cursor: pointer;
  transition: all 0.3s;
  font-family: sans-serif;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-color);
  white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 201, 167, 0.2);
}

.landing-button:hover {
  background:
    linear-gradient(rgba(0, 201, 167, 0.15), rgba(0, 180, 216, 0.15)) padding-box,
    var(--primary-gradient) border-box;
  box-shadow: 0 4px 15px var(--glow-color);
}

.landing-button img[src$=".svg"] {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(130deg) brightness(0.9);
  transition: filter 0.3s;
}

.landing-button:hover img[src$=".svg"] {
  filter: brightness(0) invert(1);
}

/* Hide today's puzzle button by default (shown via JS when not on today's puzzle) */
#today-button {
  display: none;
}

#today-button.visible {
  display: flex;
}

.header-button {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Date Navigation Row */
.date-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 8px 20px;
  background-color: var(--header-bg);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0; /* Never shrink */
}

.date-nav-button {
  background: var(--primary-gradient);
  color: black;
  border: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 8px var(--glow-color);
  transition: all 0.3s;
}

.date-nav-button:hover {
  background: var(--primary-hover-gradient);
  box-shadow: 0 4px 12px var(--glow-color-strong);
}

.date-nav-button:disabled {
  background: #999999;
  box-shadow: none;
  cursor: not-allowed;
}

.date-nav-button.hidden {
  visibility: hidden;
}

.date-nav-date {
  font-size: clamp(0.7rem, 3vw, 1rem);
  color: var(--text-color);
  font-family: 'Share Tech Mono', monospace;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Container for puzzle area - fills available space */
#puzzle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0; /* Allow shrinking below content size */
  width: 100%;
  overflow: hidden;
}

/* Neon light trail animation around the board */
@keyframes neon-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.board-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Timer display - positioned above rotate button, both centered as a unit */
#timer-display {
  position: absolute;
  top: calc(50% - 55px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 2px solid transparent;
  background:
    linear-gradient(#0a0a14, #0a0a14) padding-box,
    var(--primary-gradient) border-box;
  color: var(--primary-solid);
  text-shadow: 0 0 8px var(--glow-color);
  margin: 0;
  white-space: nowrap;
  width: 120px;
  box-sizing: border-box;
  z-index: 5;
}

/* Recall button - below tray, matching timer width */
#recall-button {
  width: 120px;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 10px;
  flex-shrink: 0; /* Never shrink */
}

/* Share button - similar to recall */
#share-button {
  flex-shrink: 0; /* Never shrink */
  margin-bottom: 10px;
}

/* The circuit board - sized dynamically by JavaScript */
#board {
  position: relative;
  /* Width/height set by sizeBoardToFit() in JavaScript */
  /* Fallback: conservative size in case JS hasn't run yet */
  width: min(300px, 70vw);
  height: min(300px, 70vw);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: transparent;
  overflow: visible;
  z-index: 1;
  border: none;
}

/* Portrait orientation on larger screens - board sized by JS */
@media (max-aspect-ratio: 4/5) and (min-width: 751px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
}

#rotate-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0.1;
}

/* Board nodes (drop targets) */
.board-node {
  position: absolute;
  width: var(--dynamic-node-size, 65px);
  height: var(--dynamic-node-size, 65px);
  border-radius: 50%;
  background: #06060f;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #2a2a3e;
  z-index: 2;
}
.board-node.drag-over {
  background: var(--primary-gradient);
  box-shadow: 0 0 15px var(--glow-color-strong);
}

/* SVG container for circuit arcs */
.circuit-arcs {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Circuit arc paths between nodes - base layer */
.circuit-arc {
  fill: none;
  stroke: #2a2a3e;
  stroke-width: 2px;
  stroke-linecap: round;
  transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

/* Active arc (valid word pair) */
.circuit-arc.active {
  stroke: var(--primary-start);
  stroke-width: 4px;
  filter: url(#arc-glow);
}

/* Win sequence animation - intensified glow and size */
.circuit-arc.active.winning {
  stroke-width: 10px;
  transition: stroke 0.3s ease, stroke-width 0.8s ease-out, filter 0.5s ease;
}

/* Pulse overlay also gets thicker during win sequence */
.circuit-arc-pulse.winning {
  stroke-width: 8px;
  filter: drop-shadow(0 0 6px var(--primary-start));
}

/* Pulse overlay path - sits on top of base arc */
.circuit-arc-pulse {
  fill: none;
  stroke: url(#pulse-gradient);
  stroke-width: 4px;
  stroke-linecap: round;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #66e0d0) drop-shadow(0 0 8px #00c9a7);
  /* Hidden by default - no dasharray set */
  opacity: 0;
}

/* Energy flow animation using stroke-dasharray */
@keyframes arc-energy-flow {
  0% {
    stroke-dashoffset: var(--offset-start);
  }
  100% {
    stroke-dashoffset: var(--offset-end);
  }
}

/* Animated pulse effect on pulse overlay */
.circuit-arc-pulse.animating {
  opacity: 1;
  /* Visible dash with long gap to prevent duplicates */
  stroke-dasharray: var(--dash-length) var(--gap-length);
  stroke-dashoffset: var(--offset-start);
  animation: arc-energy-flow var(--pulse-duration, 0.5s) linear forwards;
  animation-delay: var(--animation-delay, 0s);
}

/* Tray area - height set dynamically by JS to prevent layout shift */
#tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: flex-start; /* Align tiles to top when tray is partially empty */
  width: 80%;
  max-width: 600px;
  margin-bottom: 10px;
  flex-shrink: 0; /* Don't shrink the tray */
}

/* Tiles */
.tile {
  background: #7090b0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #7090b0;
  color: black;
  cursor: grab;
  user-select: none;
  touch-action: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 0.9rem;
  position: relative;
  overflow: visible;
}

/* Tiles placed on board nodes use dynamic sizing */
.board-node .tile {
  width: var(--dynamic-tile-size, 60px);
  height: var(--dynamic-tile-size, 60px);
}

.tile.valid {
  background: var(--primary-gradient);
  color: black;
  border: none;
  box-shadow: 0 0 12px var(--glow-color);
}

/* Validation ring fly-out animation */
@keyframes ring-expand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.validation-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--primary-gradient) border-box;
  pointer-events: none;
  animation: ring-expand 0.4s ease-out forwards;
  z-index: 10;
}

.tile.selected {
  background: #7090b0;
  border: 4px solid var(--primary-solid);
  color: var(--primary-solid);
  box-shadow: 0 0 15px var(--glow-color-strong);
}

.tile span {
  display: block;
  max-width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px; /* default */
  transform-origin: center;
}

/* Hide / show class */
.hidden {
  display: none !important;
}

/* Copy-notification toast */
#copy-notification {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 100;
}

/* Modal overlay (shared for help, stats, etc.) */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* Win modal fade-in animation */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@keyframes modal-content-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal.win-fade-in {
  animation: modal-fade-in 0.5s ease-out forwards;
}

.modal.win-fade-in .modal-content {
  animation: modal-content-fade-in 0.5s ease-out forwards;
}
.modal-content {
  background: #141428;
  color: var(--text-color);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  font-size: 1.2rem;
  width: 80%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 201, 167, 0.1);
}

/* Scrollable inner content for modals */
#modal-body,
.membership-body {
  max-height: calc(80vh - 4rem);
  overflow-y: auto;
  padding-right: 0.5rem;

  /* Custom scrollbar for Firefox */
  scrollbar-width: thin;
  scrollbar-color: #3a3a52 transparent;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */
#modal-body::-webkit-scrollbar,
.membership-body::-webkit-scrollbar {
  width: 6px;
}

#modal-body::-webkit-scrollbar-track,
.membership-body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

#modal-body::-webkit-scrollbar-thumb,
.membership-body::-webkit-scrollbar-thumb {
  background: #3a3a52;
  border-radius: 3px;
}

#modal-body::-webkit-scrollbar-thumb:hover,
.membership-body::-webkit-scrollbar-thumb:hover {
  background: #4a4a62;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
  font-weight: bold;
  color: #aaa;
}
.close-button:hover {
  color: var(--text-color);
}

.intro-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5vh 5vw;
  box-sizing: border-box;
}

/* Circuit Background Animation (SVG-based) */
svg.circuit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.circuit-path-group {
  --line-opacity: calc(0.15 + var(--depth, 0.5) * 0.4);
  --stroke-width: calc(0.15 + var(--depth, 0.5) * 0.35);
  --blur-amount: calc((1 - var(--depth, 0.5)) * 0.8px);
  --glow-opacity: calc(0.3 + var(--depth, 0.5) * 0.7);
  filter: blur(var(--blur-amount));
}

.circuit-path {
  fill: none;
  stroke: rgba(0, 201, 167, var(--line-opacity));
  stroke-width: var(--stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#path-glow);
}

.energy-pulse {
  fill: rgba(0, 255, 200, 0.9);
  filter: url(#glow);
}

.intro-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  /* Override modal-content border/shadow for full-screen intro */
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}


.intro-modal-content h1 {
  font-size: 4rem;
  margin: 0;
  max-width: 80%;
  color: var(--text-color);
}

.intro-modal-content h2 {
  font-weight: 300;
  margin: 0.5rem 0;
  max-width: 80%;
  color: var(--text-color);
}

.intro-modal-content p {
  font-size: 1.25rem;
  margin: 0.25rem;
  max-width: 80%;
  color: var(--text-color);
}

#share-button {
  margin: 0.3rem;
}

#rotate-button {
  position: absolute;
  top: calc(50% + 25px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  touch-action: manipulation;
  padding: 0.6rem 1.2rem;
  font-size: 1.1rem;
}

#rotate-button,
#rotate-button img {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

#rotate-button img {
  filter: brightness(0);
}

#stats-button img,
#home-button img {
  filter: brightness(0);
}


#archive-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(1rem, calc(var(--vh, 1vh) * 2));
  box-sizing: border-box;
  position: relative;
}

#archive-header h1 {
  margin: 0;
  font-family: "Playwrite IT Moderna", serif;
  display: flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  /* Perfectly centered on larger screens */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Prevent overlap with hamburger (left) and buttons+toggle (right) */
  max-width: calc(100% - 16rem);
}

#archive-header h1:hover {
  opacity: 0.8;
}

#archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  width: 90%;
  max-width: 1200px;
  margin: 1rem auto;
  box-sizing: border-box;
}

.archive-puzzle-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
    var(--primary-gradient) border-box;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s;
  font-family: sans-serif;
  box-shadow: 0 2px 8px rgba(0, 201, 167, 0.15);
}
.archive-puzzle-button:hover {
  background:
    linear-gradient(rgba(0, 201, 167, 0.15), rgba(0, 180, 216, 0.15)) padding-box,
    var(--primary-gradient) border-box;
  box-shadow: 0 4px 12px var(--glow-color);
}
.won-game {
  background: var(--primary-gradient);
  color: white;
  border: none;
  box-shadow: 0 4px 15px var(--glow-color);
}
.won-game:hover {
  background: var(--primary-hover-gradient);
  box-shadow: 0 6px 20px var(--glow-color-strong);
}
.won-game:active{
  background: var(--primary-hover-gradient);
}
.puzzle-title {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}
.puzzle-date {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.puzzle-state {
  font-size: 1rem;
}

/* Stats container - grid layout for stat boxes */
.stats-container {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  min-width: 60px;
}

.stat-header {
  font-size: 0.8rem;
  margin: 0 0 0.25rem 0;
  font-weight: normal;
  color: #999;
}

.stat p {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

.stat hr {
  border: none;
  border-top: 2px solid #ccc;
  width: 100%;
  max-width: 60px;
  margin: 0.25rem 0;
}

/* Distribution bar chart */
.distribution-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.3em;
}

.distribution-label {
  width: 50px;
  text-align: right;
  margin-right: 0.5em;
  font-weight: bold;
  font-size: 0.9rem;
}

.distribution-bar-container {
  flex: 1;
  background-color: #0a0a14;
  height: 20px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.distribution-bar {
  background: var(--primary-gradient);
  height: 100%;
  display: flex;
  align-items: center;
  transition: width 1s ease;
  border-radius: 4px 0 0 4px;
  white-space: nowrap;
}

.distribution-count {
  margin-left: 8px;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
}

#share-distribution-chart,
#stats-distribution-chart {
  width: 100%;
  text-align: left;
  margin-top: 1em;
}

/* Win modal buttons */
.win-modal-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  padding: 0.5rem;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
    var(--primary-gradient) border-box;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-color);
  white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 201, 167, 0.2);
}

.win-modal-button:hover {
  background:
    linear-gradient(rgba(0, 201, 167, 0.15), rgba(0, 180, 216, 0.15)) padding-box,
    var(--primary-gradient) border-box;
  box-shadow: 0 4px 15px var(--glow-color);
}

/* Only apply white-on-hover to the Wordloop archive button, not cross-promo buttons */
.win-modal-button[href="archive.html"] img {
  transition: filter 0.3s;
}

.win-modal-button[href="archive.html"]:hover img {
  filter: brightness(0) invert(1);
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 1em;
}

#win-email-signup {
  margin-bottom: 0.5rem;
  min-height: 2.8rem;
}

#win-email-form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#win-email-input {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 2px solid var(--primary-solid);
  border-radius: 8px;
  flex: 1;
  min-width: 100px;
  background: var(--bg-color);
  color: var(--text-color);
}

#win-email-button {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

#win-email-message {
  margin: 0;
  font-size: 1rem;
  color: var(--primary-solid);
  text-align: center;
  line-height: 2.8rem;
}

#win-email-form.hidden,
#win-email-message.hidden {
  display: none;
}

.reminder-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.reminder-form input[type="email"] {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  border: 2px solid var(--primary-solid);
  border-radius: 8px;
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  background: var(--bg-color);
  color: var(--text-color);
}

.reminder-form .primary-button {
  width: 100%;
  max-width: 280px;
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 750px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
  #timer-display {
    top: calc(50% - 45px);
    font-size: 1.1rem;
    width: 100px;
    padding: 0.4rem 0.8rem;
  }
  #rotate-button {
    top: calc(50% + 20px);
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
  #recall-button {
    width: 100px;
    font-size: 0.9rem;
  }
  #rotate-icon {
    width: 80px;
    height: 80px;
  }
  .circuit-arc {
    stroke-width: 2px;
  }
  .primary-button {
    padding: 0.6rem 1rem;
    font-size: 1rem;
  }
  .header-button {
    width: 2.5rem;
    height: 2.5rem;
  }
  .modal-content {
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }
  .intro-modal-content{
    border-radius: 0 0 0 0;
  }
  #archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .puzzle-title {
    font-size: 1rem;
  }
  .puzzle-state, .puzzle-date {
    font-size: 0.8rem;
  }
  .intro-modal-content h1 {
    font-size: 3rem;
  }
}

/* Portrait orientation - board sized by JS */
@media (max-aspect-ratio: 4/5) and (max-width: 750px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
}

@media (max-aspect-ratio: 4/5) and (max-width: 500px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
}

@media (max-width: 500px) {
  #timer-display {
    top: calc(50% - 38px);
    font-size: 0.9rem;
    width: 85px;
    padding: 0.3rem 0.6rem;
  }
  #rotate-button {
    top: calc(50% + 15px);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
  #recall-button {
    width: 85px;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  #rotate-icon {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 380px) {
  #timer-display {
    top: calc(50% - 32px);
    font-size: 0.8rem;
    width: 75px;
    padding: 0.25rem 0.5rem;
  }
  #rotate-button {
    top: calc(50% + 12px);
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }
  #recall-button {
    width: 75px;
    font-size: 0.75rem;
  }
  #rotate-icon {
    width: 50px;
    height: 50px;
  }
}

/* Short viewport height - ensure game fits on screen */
@media (max-height: 750px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
  #timer-display {
    top: calc(50% - 45px);
    font-size: 1.1rem;
    padding: 0.4rem 0.8rem;
  }
  #rotate-button {
    top: calc(50% + 20px);
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
  #rotate-icon {
    width: 80px;
    height: 80px;
  }
  #tray {
    margin-bottom: 10px;
  }
}

/* Very short viewport - landscape phones and small tablets */
@media (max-height: 600px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
  #timer-display {
    top: calc(50% - 35px);
    font-size: 0.85rem;
    width: 80px;
    padding: 0.25rem 0.5rem;
  }
  #rotate-button {
    top: calc(50% + 12px);
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }
  #rotate-icon {
    width: 50px;
    height: 50px;
  }
  #recall-button {
    width: 80px;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }
  .circuit-arc {
    stroke-width: 2px;
  }
  #tray {
    margin-bottom: 8px;
    gap: 6px;
  }
  #tray .tile {
    width: 50px;
    height: 50px;
    font-size: 0.8rem;
  }
  .date-nav-row {
    padding: 6px 15px;
  }
}

/* Extremely short viewport */
@media (max-height: 500px) {
  /* Board size handled by JavaScript sizeBoardToFit() */
  #tray .tile {
    width: 45px;
    height: 45px;
    font-size: 0.75rem;
  }
  #tray {
    gap: 5px;
  }
}

/* Title/logo responsive breakpoints - revert to flex positioning on smaller screens */
@media (max-width: 850px) {
  #game-title,
  #archive-header h1 {
    position: static;
    transform: none;
    flex-grow: 1;
    max-width: none;
  }

  #game-title {
    font-size: min(2rem, calc(var(--vh, 1vh) * 4.5));
  }

  #archive-header #game-title {
    font-size: min(1.8rem, calc(var(--vh, 1vh) * 4));
  }
}

@media (max-width: 550px) {
  #game-title {
    font-size: min(1.8rem, calc(var(--vh, 1vh) * 4));
  }

  #archive-header #game-title {
    font-size: min(1.6rem, calc(var(--vh, 1vh) * 3.5));
  }
}

@media (max-width: 490px) {
  #game-title {
    font-size: min(1.5rem, calc(var(--vh, 1vh) * 3.5));
  }

  #archive-header #game-title {
    font-size: min(1.3rem, calc(var(--vh, 1vh) * 3));
  }
}

/* Hamburger Menu Button */
.hamburger-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.hamburger-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.landing-hamburger {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-color);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Slide-out Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Slide-out Menu */
.slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 80vw;
  height: 100%;
  background-color: var(--bg-color);
  z-index: 10001;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

.slide-menu.open {
  transform: translateX(0);
}

.slide-menu-header {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.close-menu-button {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 28px;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.close-menu-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.slide-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 15px;
  gap: 5px;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.menu-link:hover {
  background-color: rgba(0, 201, 167, 0.2);
}

.menu-link-primary {
  font-weight: 600;
  font-size: 1.1rem;
}

.menu-link-icon {
  font-size: 1.3rem;
}

.menu-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px 0;
}

.menu-section-label {
  color: #999;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 15px 5px;
  margin: 0;
  font-family: sans-serif;
}

.menu-link-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
}

/* Make envelope icon white */
.menu-link-logo[src*="envelope"] {
  filter: brightness(0) invert(1);
}

.slide-menu-footer {
  margin-top: auto;
  padding: 15px;
}

.menu-link-secondary {
  font-size: 0.9rem;
  color: #999;
}

.menu-link-secondary:hover {
  color: var(--text-color);
}

/* Prevent layout shift when menu is open */
body.menu-open {
  overflow: hidden;
  /* Add padding to compensate for scrollbar disappearing */
  padding-right: var(--scrollbar-width, 0px);
}

/* Newsletter modal body */
.newsletter-body {
  padding: 1rem;
  text-align: center;
}

.newsletter-body h2 {
  margin-top: 0;
}

/* Privacy modal body */
.privacy-body {
  padding: 1rem;
  text-align: left;
}

.privacy-body h2 {
  margin-top: 0;
  text-align: center;
}

.privacy-body p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.privacy-body code {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Membership modal styles */
.membership-body {
  padding: 0.5rem;
  text-align: left;
}

.membership-body p {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 0.85rem;
}

.membership-icon {
  text-align: center;
  margin-bottom: 1rem;
}

.membership-header-icon {
  width: 48px;
  height: 48px;
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(130deg) brightness(0.9);
}

.membership-greeting {
  font-size: 1.1rem !important;
  text-align: center;
}

.membership-calculation {
  font-style: italic;
  color: #aaa;
}

.membership-signoff {
  margin-top: 1rem !important;
}

.membership-signature {
  text-align: left;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

.membership-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 0.9rem;
}

.membership-fpg-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.membership-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.membership-buttons .primary-button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Secondary button style */
.secondary-button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  background: transparent;
  color: var(--text-color);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.secondary-button:active {
  transform: scale(0.98);
}

/* Make heart-partner-handshake icon teal in menu */
.menu-link-logo[src*="heart-partner-handshake"] {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(130deg) brightness(0.9);
}

/* Debug button for development */
#debug-support-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.8;
}

#debug-support-button:hover {
  opacity: 1;
}

/* Settings button icon */
#settings-button img {
  filter: brightness(0);
}

/* Settings modal styles */
.settings-modal-content {
  text-align: left;
}

.settings-body {
  padding: 0.5rem;
}

.settings-body h2 {
  margin-top: 0;
  text-align: center;
}

.settings-section {
  margin-top: 1.5rem;
}

.settings-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.display-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.display-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.05);
}

.display-option:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
}

.display-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  margin-right: 1rem;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.display-option input[type="radio"]:checked {
  border-color: var(--primary-solid);
  background: var(--primary-gradient);
}

.display-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
}

.display-option-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.display-option-name {
  font-weight: 600;
  font-size: 1rem;
}

.display-option-desc {
  font-size: 0.85rem;
  color: #999;
}

/* ============================================
   CLASSIC MODE THEME
   ============================================ */
body.classic-mode {
  --primary-start: #8cc084;
  --primary-end: #8cc084;
  --primary-gradient: #8cc084;
  --primary-solid: #8cc084;
  --primary-hover-start: #7ab072;
  --primary-hover-end: #7ab072;
  --primary-hover-gradient: #7ab072;
  --glow-color: transparent;
  --glow-color-strong: transparent;
  --timer-bg: #ffffff;
  --bg-color: #ffffff;
  --text-color: #333333;
  --header-bg: #f5f5f5;
}

/* Classic mode body background */
body.classic-mode {
  background: #ffffff;
  color: #333333;
}

/* Classic mode header */
body.classic-mode #header,
body.classic-mode .date-nav-row {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

body.classic-mode #game-title {
  color: #333333;
}

/* Classic mode primary buttons - flat, no glow */
body.classic-mode .primary-button {
  background: #8cc084;
  box-shadow: none;
  color: white;
}

body.classic-mode .primary-button:hover {
  background: #7ab072;
  box-shadow: none;
}

/* Classic mode date nav buttons */
body.classic-mode .date-nav-button {
  background: #8cc084;
  box-shadow: none;
  color: white;
}

body.classic-mode .date-nav-button:hover {
  background: #7ab072;
  box-shadow: none;
}

body.classic-mode .date-nav-button:disabled {
  background: #cccccc;
}

body.classic-mode .date-nav-date {
  color: #333333;
}

/* Classic mode board nodes - gray background, black border */
body.classic-mode .board-node {
  background: #cccccc;
  border: 2px solid #333333;
}

body.classic-mode .board-node.drag-over {
  background: #8cc084;
  box-shadow: none;
  border-color: #8cc084;
}

/* Classic mode tiles - gray base, black border */
body.classic-mode .tile {
  background: #cccccc;
  border: 3px solid #333333;
  color: #333333;
}

/* Classic mode selected tile - green border and text */
body.classic-mode .tile.selected {
  background: #cccccc;
  border: 4px solid #8cc084;
  color: #8cc084;
  box-shadow: none;
}

/* Classic mode validated tiles - green background, white text, no border */
body.classic-mode .tile.valid {
  background: #8cc084;
  color: white;
  border: none;
  box-shadow: none;
}

/* Classic mode validation ring - no animation in classic mode */
body.classic-mode .validation-ring {
  display: none;
}

/* Classic mode circuit arcs - gray inactive */
body.classic-mode .circuit-arc {
  stroke: #cccccc;
}

/* Classic mode active arcs - green, no glow, no animation */
body.classic-mode .circuit-arc.active {
  stroke: #8cc084;
  filter: none;
}

body.classic-mode .circuit-arc.active.winning {
  filter: none;
}

/* Classic mode - hide pulse overlay entirely */
body.classic-mode .circuit-arc-pulse {
  display: none;
}

/* Classic mode timer display - white bg, green text, no glow */
body.classic-mode #timer-display {
  background: #ffffff;
  border: 2px solid #8cc084;
  color: #8cc084;
  text-shadow: none;
}

/* Classic mode rotate icon - slightly darker */
body.classic-mode #rotate-icon {
  opacity: 0.15;
}

/* Classic mode modals */
body.classic-mode .modal-content {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e0e0e0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.classic-mode .close-button {
  color: #666666;
}

body.classic-mode .close-button:hover {
  color: #333333;
}

/* Classic mode intro modal */
body.classic-mode .intro-modal {
  background-color: #ffffff;
}

body.classic-mode .intro-modal-content {
  border: none;
  box-shadow: none;
}

body.classic-mode .intro-modal-content h1,
body.classic-mode .intro-modal-content h2,
body.classic-mode .intro-modal-content p {
  color: #333333;
}

/* Classic mode circuit background animation - hide in classic mode */
body.classic-mode .circuit-bg {
  display: none;
}

/* Classic mode landing buttons */
body.classic-mode .landing-button {
  background: #ffffff;
  border: 3px solid #8cc084;
  color: #333333;
  box-shadow: none;
}

body.classic-mode .landing-button:hover {
  background: rgba(140, 192, 132, 0.1);
  box-shadow: none;
}

body.classic-mode .landing-button img[src$=".svg"] {
  filter: invert(0.4) sepia(1) saturate(3) hue-rotate(80deg) brightness(0.8);
}

body.classic-mode .landing-button:hover img[src$=".svg"] {
  filter: invert(0.3) sepia(1) saturate(4) hue-rotate(80deg) brightness(0.7);
}

/* Classic mode slide menu */
body.classic-mode .slide-menu {
  background-color: #ffffff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

body.classic-mode .slide-menu-header {
  border-bottom: 1px solid #e0e0e0;
}

body.classic-mode .close-menu-button {
  color: #333333;
}

body.classic-mode .close-menu-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.classic-mode .menu-link {
  color: #333333;
}

body.classic-mode .menu-link:hover {
  background-color: rgba(140, 192, 132, 0.15);
}

body.classic-mode .menu-divider {
  background-color: #e0e0e0;
}

body.classic-mode .menu-section-label {
  color: #666666;
}

body.classic-mode .menu-link-secondary {
  color: #666666;
}

body.classic-mode .menu-link-secondary:hover {
  color: #333333;
}

/* Classic mode hamburger menu lines */
body.classic-mode .hamburger-line {
  background-color: #333333;
}

/* Classic mode stats */
body.classic-mode .stat-header {
  color: #666666;
}

body.classic-mode .distribution-bar-container {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
}

body.classic-mode .distribution-bar {
  background: #8cc084;
}

body.classic-mode .distribution-count {
  color: white;
}

/* Classic mode archive */
body.classic-mode .archive-puzzle-button {
  background: #ffffff;
  border: 2px solid #8cc084;
  color: #333333;
  box-shadow: none;
}

body.classic-mode .archive-puzzle-button:hover {
  background: rgba(140, 192, 132, 0.1);
  box-shadow: none;
}

body.classic-mode .won-game {
  background: #8cc084;
  color: white;
  box-shadow: none;
}

body.classic-mode .won-game:hover {
  background: #7ab072;
  box-shadow: none;
}

/* Classic mode win modal buttons */
body.classic-mode .win-modal-button {
  background: #ffffff;
  border: 3px solid #8cc084;
  color: #333333;
  box-shadow: none;
}

body.classic-mode .win-modal-button:hover {
  background: rgba(140, 192, 132, 0.1);
  box-shadow: none;
}

/* Classic mode secondary button */
body.classic-mode .secondary-button {
  color: #333333;
  border: 2px solid #cccccc;
}

body.classic-mode .secondary-button:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: #999999;
}

/* Classic mode settings modal */
body.classic-mode .display-option {
  border-color: #e0e0e0;
  background: #f9f9f9;
}

body.classic-mode .display-option:hover {
  border-color: #cccccc;
  background: #f0f0f0;
}

body.classic-mode .display-option input[type="radio"] {
  border-color: #999999;
}

body.classic-mode .display-option input[type="radio"]:checked {
  border-color: #8cc084;
  background: #8cc084;
}

body.classic-mode .display-option input[type="radio"]:checked::after {
  background: white;
}

body.classic-mode .display-option-desc {
  color: #666666;
}

body.classic-mode .settings-section-title {
  color: #666666;
}

/* Classic mode - make header button icons white */
body.classic-mode #stats-button img,
body.classic-mode #home-button img,
body.classic-mode #settings-button img {
  filter: brightness(0) invert(1);
}

/* Classic mode - make play icon white */
body.classic-mode .play-icon {
  filter: brightness(0) invert(1);
}

/* Classic mode - make rotate button icon white */
body.classic-mode #rotate-button img {
  filter: brightness(0) invert(1);
}

/* Classic mode - menu icons */
body.classic-mode .menu-link-logo[src*="envelope"] {
  filter: brightness(0) invert(0.3);
}

body.classic-mode .menu-link-logo[src*="heart-partner-handshake"] {
  filter: invert(0.4) sepia(1) saturate(3) hue-rotate(80deg) brightness(0.8);
}

/* Classic mode membership modal */
body.classic-mode .membership-header-icon {
  filter: invert(0.4) sepia(1) saturate(3) hue-rotate(80deg) brightness(0.8);
}

body.classic-mode .membership-calculation {
  color: #666666;
}

body.classic-mode .membership-company {
  color: #666666;
}

/* Classic mode copy notification */
body.classic-mode #copy-notification {
  background: #333333;
  color: white;
}

/* Copy button icon styling */
#copy-button .copy-icon {
  height: 1em;
  vertical-align: middle;
  margin-right: 0.3em;
}

/* Classic mode: white icon */
body.classic-mode #copy-button .copy-icon {
  filter: brightness(0) invert(1);
}

/* Classic mode privacy modal link */
body.classic-mode .privacy-body a {
  color: #8cc084;
}

body.classic-mode .privacy-body code {
  background-color: #f0f0f0;
}