/* ----------------------------------------------
  Global definitions
 * ---------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* The page chrome is a deep navy - the same navy used in the logo and
     grid, so the brand mark now reads as part of the page rather than a
     sticker sitting on top of it. Cards stay white and pop by contrast. */
  --screenColor: #10162B;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: 'Poppins', var(--font-sans);

  /* Brand / text colors - matches the logo's navy */
  --color-text: #1A233C;
  --color-text-muted: #5B6478;

  /* Text colors for content sitting directly on the navy page chrome
     (outside white cards), where --color-text/-muted read too dark */
  --color-text-on-dark: #F1ECDD;
  --color-text-on-dark-muted: #93A0C2;

  /* Action colors - a warm gold, not a generic framework blue. Echoes the
     gold badge already in the logo. */
  --color-primary: #E3A83B;
  --color-primary-dark: #C0871F;
  --color-primary-darker: #9C6A15;
  --color-primary-darkest: #6B4710;
  --color-primary-tint: #FBF0DA;

  --color-secondary: #64748B;
  --color-secondary-dark: #475569;
  --color-secondary-darker: #334155;

  --color-success: #16A34A;
  --color-success-dark: #15803D;
  --color-success-darker: #166534;

  --color-danger: #DC2626;
  --color-danger-dark: #B91C1C;
  --color-danger-darker: #991B1B;

  /* Elevation - flatter and softer; the navy/white contrast already does
     most of the depth work, so buttons and cards don't need heavy shadows */
  --shadow-button: 0 1px 2px rgba(16,22,43,0.18);
  --shadow-button-hover: 0 4px 10px rgba(16,22,43,0.24);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.18);

  --color-surface: #FFFFFF;
  --content-max-width: 1300px;
}

body {
  font-family: var(--font-sans);
  font-size: 20px;
  margin: 0px;
  color: var(--color-text);
  background-color: var(--screenColor);
  min-height: 100vh;
}

/* A navy scrim over the photo keeps it from competing with the white
   cards/gold accents - it reads as rich texture behind the chrome rather
   than a distracting image the eye has to compete with. */
:root {
  --page-background-image:
    linear-gradient(rgba(16,22,43,0.05), rgba(16,22,43,0.15)),
    url('/pub_with_pint.jpg');
}

/* ----------------------------------------------
  Variables set by screen size / orientation
 * ---------------------------------------------- */

:root {
  --maxtitlesquareheight: 58px;
  --maxtitlesquarelineheight: 34px;
  --maxtitlesquaremargin: 3px;
}

@media only screen and (min-width: 1360px) {
  :root {
    --buttonFontSize: 22px;
    --titlescalefactor: 1;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1359px){
  :root {
    --buttonFontSize: 20px;
    --titlescalefactor: 0.9;
  }
}

@media only screen and (min-width: 768px) and (max-width: 999px){
  :root {
    --buttonFontSize: 19px;
    --titlescalefactor: 0.8;
  }
}

@media only screen and (min-width: 401px) and (max-width: 767px){
  :root {
    --buttonFontSize: 18px;
    --titlescalefactor: 0.8;
  }
}

@media only screen and (max-width: 400px) and (orientation: portrait) {
  :root {
    --buttonFontSize: 16px;
    --titlescalefactor: 0.75;
  }
}

:root {
  --titlesquareheight: calc(var(--maxtitlesquareheight) * var(--titlescalefactor));
  --titlesquarelineheight: calc(var(--maxtitlesquarelineheight) * var(--titlescalefactor));
  --titlesquaremargin: calc(var(--maxtitlesquaremargin) * var(--titlescalefactor));

  --titleletterheight: calc(var(--titlesquareheight) * 0.8);
}


/* ----------------------------------------------
  Lists CSSpx
 * ---------------------------------------------- */

ol, ul {
  padding-left: 0px;
  list-style-type: none;
  margin: 10px 1px 20px 1px;
}

.clueDirectionHeading {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--color-primary);
}

/* ----------------------------------------------
  Layout CSS for 768+ width
 * ---------------------------------------------- */



.clueButton {
  font-size: 20px;
  height: 24px;
  margin: 8px 2px 8px 2px;
  padding: 0px;
  top: 0px;
  border: 0px;
  width: auto;
  background-color: transparent;
  border-color:     transparent;
  text-align:       center;
  color:            var(--color-text);
  transition: color 0.15s ease;
}

.clueButton:hover {
  color: var(--color-primary-darker);
}

.clueButton.isActive {
  color: var(--color-primary);
  font-size: 24px;
  height: auto;
}
 
.clueButton.isCorrect {
  text-decoration-line:  line-through;
}
 

/* ----------------------------------------------
  Layout CSS
 * ---------------------------------------------- */

.game-total {
  display: block;
  position: relative;
  background-color: var(--screenColor);
  background-image: var(--page-background-image);
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
  margin: 0px auto;
  top: 0;
  min-height: 100vh;
}

@media (prefers-reduced-motion: no-preference) {
  .game-total {
    animation: fadeIn 1000ms ease-in;
  }
}

/* Applied directly (alongside each element's own classes) to both
   .game-columns (grid+clues) and the on-screen letter row's wrapper - both
   fade out/in together on a reload, driven by the same isGridHidden flag
   (Game.tsx) toggling .grid-clues-fading. */
.grid-fade-target {
  opacity: 1;
  /* Hints the browser to promote this (and its glassmorphic
     backdrop-filter descendants, for .game-columns) onto its own
     composited layer up front, rather than partway into the opacity
     transition - without it, that layer promotion could happen a frame or
     two late, showing as a visible jump right as the fade begins. */
  will-change: opacity;
}

@media (prefers-reduced-motion: no-preference) {
  .grid-fade-target {
    transition: opacity 1000ms ease;
  }
}

.grid-fade-target.grid-clues-fading {
  opacity: 0;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--screenColor);
}

.loading-logo {
  height: 120px;
  width: auto;
  animation: loading-pulse 1.8s ease-in-out infinite;
}

.loading-logo-static {
  animation: none;
  opacity: 0.6;
}

.load-error-message {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-on-dark-muted);
  text-align: center;
  max-width: 320px;
}

.load-error-retry {
  margin-top: 20px;
}

.grid-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.grid-load-error .load-error-message {
  margin-top: 0;
  color: var(--color-text-muted);
}

@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.game-wrapper {
  display: block;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.game {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8.64px;
  padding: 4px 0 60px;
}

/* Three-column layout for the desktop crossword page specifically - the
   .game class alone is shared with the feedback/dictionary pages, which
   don't have three children and would misalign under a fixed grid. Fades
   via .grid-fade-target (above) on a reload (language/difficulty change),
   leaving the rest of the crossword page (background, title's logo,
   top-right panel) untouched - the page itself stays mounted across a
   reload; see everLoaded in Game.tsx. .game-columns never unmounts here,
   so toggling .grid-clues-fading on/off drives both the fade-out and, in
   reverse, the fade-in. */
.game-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.game-options,
.game-board,
.game-clues-wrapper {
  background-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.game-options {
  justify-self: start;
  width: 260px;
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.settings-toggle-chevron {
  color: var(--color-text);
  transition: transform 0.15s ease;
}

.settings-toggle-chevron-open {
  transform: rotate(180deg);
}

.settings-toggle-content {
  margin-top: 16px;
}

.top-right-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 260px;
  z-index: 5;
}

/* .pageButton's shared rule (index768.css) floats it at a fixed min-width,
   sized for sitting inline in the old title row - stretch it to fill the
   panel's width instead, scoped so the title row's own usage (dictionary
   page) is unaffected. Applied to both the feedback page's .top-right-panel
   and the crossword page's .page-col-right, so the Feedback/Crosswords
   button is the same size on both pages - see .page-col-right's own
   margin-top below for the matching vertical-position fix. */
.top-right-panel .pageButton,
.page-col-right .pageButton {
  width: 100%;
  float: none;
}

.languageDropdownTitle,
.categoriesHeader {
  font-family: var(--font-heading);
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.languageDropdown {
  margin-bottom: 16px;
}

/* Wraps .game-board and the new .game-board-buttons row so both center
   together as a single grid item in game-columns' middle "auto" track. */
.game-board-column {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-board {
  text-align: center;
}

.game-board-buttons {
  margin-top: 20px;
}

/* BoardButtons' own root is an unstyled <div> wrapping one <div> per
   button - lay those out in a centered row instead of their old stacked
   default (block-level divs), now that they're a standalone row rather
   than living underneath a narrow clues column. */
.game-board-buttons > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.game-clues-wrapper {
  width: 256px;
  text-align: center;
  margin-top: 40px;
}

/* Pinned to the edge of their (flexible, "1fr") track nearest the grid,
   not the outer edge - the "auto" middle track is only as wide as the
   grid itself, so each flanking track is usually much wider than the
   256px clue card sitting in it. Pinning to the outer edge (the original,
   wrong values here) left most of that leftover width as a gap between
   the card and the grid, dwarfing the actual .game gap value. */
.game-clues-left {
  justify-self: end;
}

.game-clues-right {
  justify-self: start;
}


/* ----------------------------------------------
  CSS for Board, grid, squares etc 
 * ---------------------------------------------- */

.board {
  display: inline-block;
}

.grid {
  margin: 0 auto;
  width: auto;
}


.blinking-cursor {
  position: relative;
  opacity: 0.9;
  color: #2E3D48;
  animation: 2s blink infinite;
  text-align: center;
}


@keyframes blink {
  from, to {
    color: lightgrey;
  }
  50% {
    color: black;
  }
}

/* ----------------------------------------------
  Square, square letter and square number CSS
 * ---------------------------------------------- */

.square {
  background: var(--color-surface);
  border: 1px solid var(--color-text);
  opacity: 1;
  float: left;
  line-height: 34px;
  height: 40px;
  width: 40px;
  transition: background-color 0.15s ease;
}

.square.isBlack {
  background: var(--color-text);
}
.square.isCrosswordCorrect {
  background: powderblue;
}
.square.isCorrect {
  background: lightgreen;
}
.square.isInCorrect {
  background: orangered;
}
.square.isClueActive {
  background: gold;
}
.square.isEmpty {
  background: var(--color-surface);
}


.square:focus {
  outline: none;
}

.square_letter {
  color: var(--color-text);
  position: relative;
  opacity: 0.9;
  text-align: center;
}

.square_clueNo {
  position: relative;
  opacity: 0.9;
  text-align: left;
}



/* ----------------------------------------------
  Title CSS
 * ---------------------------------------------- */

.game-title {
  display: flex;
  text-align: center;
}

.titlerow {
  margin: 5px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.titlerowleft {
  /* Left inset halved from the old 20px (was noticeably wider than the
     logo's own top margin below) - right/bottom untouched. */
  margin: 0 20px 0 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* The crossword page's own 3-column layout: logo | letters+grid+clues |
   Feedback/Options, each independently sized instead of the logo and
   letters sharing a row (where the tall logo forced extra empty space
   below the much-shorter letters, before the grid). */
.page-columns {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 20px;
  /* Right-only - the logo (left column) is deliberately flush against the
     true page edge, so a symmetric padding here would push it inward too.
     20px to match .top-right-panel's right: 20px (feedback page) - the
     Feedback/Crosswords button's right edge would otherwise sit 10px
     further in on this page than on the feedback page. */
  padding-right: 20px;
}

/* Pushes the grid+clues down from the letters row by roughly one letter
   tile's height, without affecting the letters row itself - scoped to
   .page-col-center's own .game-wrapper rather than the shared class, so
   the dictionary/feedback pages' .game-wrapper is unaffected. */
.page-col-center > .game-wrapper {
  margin-top: var(--titlesquareheight);
}

.page-col-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 260px;
  /* Matches .top-right-panel's top: 20px (feedback page) - without this,
     .page-col-right sits flush with the top of .page-columns (top: 0),
     so the Feedback/Crosswords button jumps position between pages even
     with the width fix above. */
  margin-top: 20px;
}

.site-logo {
  height: 160px;
  width: auto;
  max-width: none;
  /* Matches .titlerowleft's new 10px left margin above (was
     var(--titlesquaremargin), ~3px - the logo sat almost flush with the
     top while the left inset was 20px, a visibly uneven gap). Fixed 10px
     rather than the scale-factor variable, since the titlerowleft
     margin-left it's matching is a plain fixed value too, not scaled -
     var(--titlesquaremargin) is still used elsewhere (the animated title
     letters), untouched by this change. */
  margin-top: 10px;
}

.site-tagline {
  font-family: 'Caveat', var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}

.titlerowcenter {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.titlerowright {
  width: 10%;
  margin: 0 20px;
  text-align: right;
}

.subtitlerow {
  display: inline-block;
  margin: 14px auto 4px;
  padding: 6px 16px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  background-color: var(--color-primary-tint);
  border-radius: 999px;
  text-align: center;
}


.titlesquare {
  background-color: rgba(241,236,221,0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(241,236,221,0.6);
  opacity: 1;
  text-align: center;
  line-height: var(--titlesquarelineheight);
  height: var(--titlesquareheight);
  width: var(--titlesquareheight);
  margin: var(--titlesquaremargin);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.titlesquare:hover {
  background-color: rgba(227,168,59,0.75);
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.titleletter {
  position: relative;
  opacity: 1;
  font-size: var(--titleletterheight);
  text-align: center;
  height: var(--titleletterheight);
  width: var(--titleletterheight);
  top: calc(10px * var(--titlescalefactor));
  left: calc(4px * var(--titlescalefactor));
  color: var(--color-text);
}


.titleletteranimation1 {
  animation: flip-horizontal-bottom-delayed1 2s;
}

.titleletteranimation2 {
  animation: flip-horizontal-bottom-delayed2 2s;
}


/* ----------------------------------------------
  Languages and Categories (Difficulty) CSS
 * ---------------------------------------------- */





/* ----------------------------------------------
  Other CSS
 * ---------------------------------------------- */

.cookieconsent {
  font-size: 40px;
}

/* ----------------------------------------------
  Intro / welcome page CSS
 * ---------------------------------------------- */

.intro-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 20px;
}

.intro-card {
  width: 100%;
  max-width: 480px;
  background-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-align: center;
}

.intro-logo {
  height: 150px;
  width: auto;
}

.intro-tagline {
  font-family: 'Caveat', var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

.intro-blurb {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.45;
  margin: 12px 0 20px;
}

.intro-settings {
  text-align: left;
  margin-bottom: 8px;
}

.intro-settings .languageDropdown {
  margin-bottom: 12px;
}

.categoriesDropdown {
  margin-top: 4px;
  margin-bottom: 16px;
}

.categoriesDropdown .categoriesHeader {
  font-family: var(--font-heading);
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 6px;
}


.intro-start {
  display: inline-block;
  width: auto;
  min-width: 200px;
  font-size: 22px;
  padding: 14px 40px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.intro-start.green {
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 55%, #12833B 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 -4px 8px rgba(0,0,0,0.18) inset,
    0 8px 16px rgba(0,0,0,0.3);
}

.intro-start.green:hover {
  background: linear-gradient(180deg, #29D467, #189249 55%, #14933F 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -4px 8px rgba(0,0,0,0.18) inset,
    0 10px 20px rgba(0,0,0,0.32);
}

.intro-start.green:active {
  background: linear-gradient(180deg, #16A34A 0%, #12833B 100%);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.25) inset,
    0 2px 6px rgba(0,0,0,0.25) inset;
  transform: translateY(1px);
}

.intro-start::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

/* ----------------------------------------------
  Dictionary CSS
 * ---------------------------------------------- */

.dictionary-board {
  width: 78%;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  background-color: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.dictionary-board h1 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 28px;
  margin-top: 0;
}

.dictionary-board p {
  color: var(--color-text-muted);
}

.feedbackTextArea {
  width: 100%;
  min-height: 120px;
  margin-top: 16px;
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  resize: vertical;
}

.feedbackTextArea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(227, 168, 59, 0.2);
}

.dictionary-wrapper {
  display: flex;
  flex-direction: row;
}

.dictionary {
  width: 75%;
  margin: 0 20px;
  font-size: 20px;
  font-weight: bold;
  float: center;
}

.dictionary-options {
  width: 20%;
  float: right;
  margin-top: 5%;
  margin-left: 10px auto;
}

/* ----------------------------------------------
  Some animation stuff
 * ---------------------------------------------- */

@keyframes flip-horizontal-bottom-delayed1 {
  0% {
    transform: rotateX(0deg);
    color: var(--color-text);
  }
  100% {
    transform: rotateX(90deg);
    color: grey;
  }
}

@keyframes flip-horizontal-bottom-delayed2 {
  0% {
    transform: rotateX(90deg);
    color: grey;
  }
  100% {
    transform: rotateX(0deg);
    color: var(--color-text);
  }
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* ----------------------------------------------
  Button styles
 * ---------------------------------------------- */

div#container {
    width: 800px;
    margin: 50px auto;
}

div.button-row {
    margin: 65px 0;
    text-align: center;
}

/* button */
.button {
    font-size: var(--buttonFontSize);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    padding: 9px 22px;
    margin: 5px 5px;
    border: 1px solid rgba(255,255,255,0.35);
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-button);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    cursor: pointer;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
    border-radius: inherit;
    pointer-events: none;
}

.button:hover {
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

.button:active {
    box-shadow: var(--shadow-button);
    transform: translateY(0);
}

.button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* button shapes */
.squarebutton {
    border-radius: 6px;
}

.roundedbutton {
    border-radius: 999px;
}

/* button colors */
.blue {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 100%, white 25%) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
    color: var(--color-text);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.45) inset,
        0 -4px 8px rgba(0,0,0,0.12) inset,
        var(--shadow-button);
}

.blue:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 100%, white 35%) 0%, var(--color-primary-dark) 55%, var(--color-primary-darker) 100%);
    color: var(--color-text);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 -4px 8px rgba(0,0,0,0.12) inset,
        var(--shadow-button-hover);
}

.blue:active {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
    color: var(--color-text);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.25) inset,
        0 2px 6px rgba(0,0,0,0.2) inset;
}

.green {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 100%, white 25%) 0%, var(--color-success) 55%, var(--color-success-dark) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.45) inset,
        0 -4px 8px rgba(0,0,0,0.18) inset,
        var(--shadow-button);
}

.green:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 100%, white 35%) 0%, var(--color-success-dark) 55%, var(--color-success-darker) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 -4px 8px rgba(0,0,0,0.18) inset,
        var(--shadow-button-hover);
}

.green:active {
    background: linear-gradient(180deg, var(--color-success-dark) 0%, var(--color-success-darker) 100%);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.25) inset,
        0 2px 6px rgba(0,0,0,0.25) inset;
}

.red {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 100%, white 25%) 0%, var(--color-danger) 55%, var(--color-danger-dark) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.45) inset,
        0 -4px 8px rgba(0,0,0,0.18) inset,
        var(--shadow-button);
}

.red:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 100%, white 35%) 0%, var(--color-danger-dark) 55%, var(--color-danger-darker) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 -4px 8px rgba(0,0,0,0.18) inset,
        var(--shadow-button-hover);
}

.red:active {
    background: linear-gradient(180deg, var(--color-danger-dark) 0%, var(--color-danger-darker) 100%);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.25) inset,
        0 2px 6px rgba(0,0,0,0.25) inset;
}

.gray {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary) 100%, white 25%) 0%, var(--color-secondary) 55%, var(--color-secondary-dark) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.45) inset,
        0 -4px 8px rgba(0,0,0,0.18) inset,
        var(--shadow-button);
}

.gray:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary) 100%, white 35%) 0%, var(--color-secondary-dark) 55%, var(--color-secondary-darker) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 -4px 8px rgba(0,0,0,0.18) inset,
        var(--shadow-button-hover);
}

.gray:active {
    background: linear-gradient(180deg, var(--color-secondary-dark) 0%, var(--color-secondary-darker) 100%);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.25) inset,
        0 2px 6px rgba(0,0,0,0.25) inset;
}