:root {
  --blue: #1897FF;
  --green: #07E316;
  --magenta: #FF0099;
  /* One shared error red; Bootstrap's darker red reads easier than pure red */
  --error-red: #b02a37;
  /* Error color for the sidebar gradient, where the red above is nearly unreadable */
  --error-pink: #FFD9D9;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  background-color: #1897FF;
  background: linear-gradient(180deg, var(--blue) 0%, var(--green) 100%);
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#paste-score {
  min-height: 100px;
}

/* Pink behind an unreadable paste, a class so the dark theme can reach it */
#paste-score.paste-unreadable {
  background-color: #FFEFF1;
  color: #212529;
}

/* Matches the refresh symbol next to the preview. */
#paste-button {
  padding-left: 5px;
}

/* The whole line is the paste target, sized for a finger on a phone */
#paste-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  min-height: 38px;
}

#paste-button-error {
  color: var(--error-red);
}

/* Bootstrap only fades the blue when off, which still reads as pressable */
#modal-submit:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
}

#modal-error {
  color: var(--error-red);
}

#manual-score-error {
  color: var(--error-red);
}

#manual-score-hint {
  color: #6c757d;
  font-size: 0.85rem;
}

#other-name-error {
  color: var(--error-red);
}

#other-name-known {
  color: darkorange;
}

#other-url-hint {
  color: #6c757d;
  font-size: 0.85rem;
}

#wordle-answer-hint {
  color: #6c757d;
  font-size: 0.85rem;
}

#wordle-answer-error {
  color: var(--error-red);
  font-size: 0.85rem;
}

.game-divider h5 {
  color: #6c757d;
}

/* A caption-sized note under the New heading, meant to be read once and gone tomorrow */
.new-heading-note {
  color: #6c757d;
  font-size: 0.85rem;
  margin-top: -4px;
}

#modal-warning {
  color: darkorange;
}

/* Orange like the Redactle warning */
/* The day this files under may not be the one you assumed */
#score-date-note {
  color: darkorange;
  /* Full width so it wraps onto its own line under the box */
  flex-basis: 100%;
}

/* Red when the box and the share disagree, which only happens with a hand-set day */
#score-date-note.mismatch {
  color: var(--error-red);
}

/* The question the red note leads to, last thing read before the button it's about */
#score-date-check {
  color: var(--error-red);
}

/* About the press that just happened rather than a field; sits above the button */
#submit-error {
  color: var(--error-red);
  margin-top: 10px;
}

/* Label and box share a line; a date is small to give a whole row */
#score-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}

#score-date {
  width: auto;
}

/* The gray the quiet hints use, so the box and label read as one */
#score-date-label.muted {
  color: #6c757d;
}

#pretty-date {
  color: #1897FF;
}

#date-selector {
  padding-bottom: 15px;
  max-height: 90vh;
  overflow-y: scroll;
}

#select-date-button {
  background: linear-gradient(90deg, var(--blue) 70%, var(--green) 100%);
}

/* Was #expand-button; keeps its color since the job didn't really change */
.expand-button {
  background-color: var(--magenta);
}

.put-game-blobs-here {
  height: auto;
  max-height: 0;
  overflow: hidden;
  -moz-transition: max-height 0.5s ease-out;
  -o-transition: max-height 0.5s ease-out;
  -webkit-transition: max-height 0.5s ease-out;
  transition: max-height 0.5s ease-out;
}

#username {
  text-transform: lowercase;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Above the overlay so the wait spinner isn't grayed out by the tint */
.loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2001;
  width: 200px;
  height: 200px;
  margin: -100px;
  border: 25px double #f3f3f3;
  border-radius: 50%;
  border-top: 25px solid;
  border-top-color: #3498db;
  -webkit-animation: spin 2s ease-in-out infinite;
  animation: spin 2s ease-in-out infinite;
  -moz-transition: opacity 0.5s ease-out, border-top-color 1.5s linear;
  -o-transition: opacity 0.5s ease-out, border-top-color 1.5s linear;
  -webkit-transition: opacity 0.5s ease-out, border-top-color 1.5s linear;
  transition: opacity 0.5s ease-out, border-top-color 1.5s linear;
}

.overlay {
  display: none;
  opacity: 0;
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* Below the bar (10) and sidebar (98), which stay usable over the tint */
  z-index: 9;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Names arrive cased from gameTitle; capitalizing would break multi-word ones */
.card-title {
  font-weight: bold;
}

/* Heading color, not link blue; the hover underline shows it's clickable */
.card-title a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.card-title a:hover {
  text-decoration: underline;
}

/* Dim and shrink on tap so a slow navigation gets instant feedback */
/* Cleared on pageshow for back-button restores */
/* Shrink is on the img, since transform ignores inline elements */
.link {
  transition: opacity 120ms ease;
}

.link img {
  transition: transform 120ms ease;
}

.link:active,
.link.link-opening {
  opacity: 0.55;
}

.link:active img,
.link.link-opening img {
  transform: scale(0.96);
}

/* Play+Submit's height (38+4+38), so a crossing game keeps its row */
.score-box-link {
  display: inline-block;
}

/* Reserve the square up front so tiles loading in don't shove the page down */
.card-img-top {
  aspect-ratio: 1 / 1;
}

/* Every box picture is square, so fix the width up front and lay the row out once */
.score-box-img {
  display: block;
  height: 80px;
  aspect-ratio: 1 / 1;
}

.card-title svg {
  margin-left: 5px;
}

/* List view: the banner takes the width the button leaves; the cap sets its size */
.game-row {
  margin-bottom: 10px;
}

/* Relative so today's crown can sit on the banner */
/* Capped at 520px and centered so it doesn't grow into a billboard */
.game-row-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.game-row-link {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Banners are 900x180 (5:1); the 520x104 caps keep the box no wider than the art */
.game-row-img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5 / 1;
  max-height: 104px;
  object-fit: contain;
}

.game-row-icon {
  height: 82px;
  width: 82px;
}

.game-row-name {
  font-size: 1.5em;
}

/* Stretched to the banner's height; re-center the text Bootstrap no longer does */
.game-row-submit {
  flex: 0 0 auto;
  min-width: 100px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A class toggles the view, so switching is free and keeps each one's state */
.game-div .game-row {
  display: none;
}

.game-div.list-view .game-col {
  display: none;
}

.game-div.list-view .game-row {
  display: block;
}

/* Must come after the two rules above: same three classes, so source order wins */
.game-div .game-col.game-put-away,
.game-div .game-row.game-put-away {
  display: none;
}

/* Slide games between the halves so a synced score reads as rearranging */
/* .reordering skips the transition when snapping back */
.game-div .game-col,
.game-div .game-row,
.game-div .game-divider {
  transition: transform 0.4s ease;
}

.game-div .reordering {
  transition: none;
}

/* The profile list; travels like the list rows so the star reordering shows */
.game-count {
  margin-bottom: 10px;
}

.game-count-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-count-img {
  height: 48px;
  width: 48px;
}

.game-count-name {
  flex: 1;
  min-width: 0;
  font-size: 1.2em;
}

/* Gray until pressed, so it reads as a thing you could do */
/* No Bootstrap button, since the control is just the star */
.game-count-star {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 4px;
  font-size: 1.6em;
  line-height: 1;
  color: #dee2e6;
}

.game-count-star.favorite {
  color: #ffc107;
}

/* The hide eye beside the star, pale until pressed */
/* Goes dark not colored, since amber already means pinned */
.game-count-hide {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 4px;
  line-height: 0;
  color: #dee2e6;
}

.game-count-hide svg {
  width: 1.2em;
  height: 1.2em;
}

.game-count-hide.hidden-game {
  color: #495057;
}

/* Fade a put-away row so the grid stands out, but leave the eye, since it's the undo */
.game-count.hidden-game .game-count-link,
.game-count.hidden-game .game-count-name,
.game-count.hidden-game .game-count-plays {
  opacity: 0.45;
}

/* A right-aligned column so the counts line up to read down the edge */
.game-count-plays {
  flex: 0 0 auto;
  min-width: 2.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #6c757d;
}

.game-counter .game-count {
  transition: transform 0.4s ease;
}

.game-counter .reordering {
  transition: none;
}

#profile-display-name {
  font-size: 1.2em;
  padding-right: 6px;
}

#profile-games-hint {
  color: #6c757d;
  font-size: 0.85rem;
}

.card-body {
  padding: 0px;
  padding-bottom: 15px;
}

.scoreboard {
  /* background-color: blue; */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scoreboard::-webkit-scrollbar {
  display: none;
}

.pre-score-blob {
  background-color: whitesmoke;
}

/* Placeholder holding the same square, so its tile matches the others' height */
.other-img {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: whitesmoke;
  border-radius: 10px;
}

.other-img svg {
  width: 40%;
  height: 40%;
  color: #6c757d;
}

.other-name {
  color: #6c757d;
  margin-bottom: 0;
  padding-top: 8px;
}

/* One block per game, so scores sit under their own heading not run together */
#other-scores pre {
  margin-bottom: 0;
}

#score-pts {
  padding-left: 5px;
}

#score-preview {
  padding: 5px;
  background-color: whitesmoke;
  border-radius: 10px;
}

/* GeoGrid's board is 3x3; a grid not a table keeps boxes square via aspect-ratio */
.geogrid-grids {
  display: flex;
  gap: 10px;
}

/* Space stacked conflicts apart so two sets of grids don't read as one set of four */
.import-conflict + .import-conflict {
  border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.import-conflict-day {
  font-weight: 600;
}

/* The score in dispute, between the grid and the button not off to the side */
.import-conflict-score {
  font-size: 1.1rem;
  padding: 3px 0 5px 0;
}

.geogrid-pane {
  flex: 1 1 0;
  /* A flex child won't shrink below its contents without this, pushing the grid off */
  min-width: 0;
  text-align: center;
}

.geogrid-grid {
  display: grid;
  /* Sized to the emoji, not stretched, so small flags don't sit in empty boxes */
  grid-template-columns: repeat(3, 34px);
  justify-content: center;
  gap: 2px;
  padding: 5px;
  width: fit-content;
  margin: 0 auto;
  background-color: whitesmoke;
  border-radius: 10px;
}

/* Wrap so a box holds one flag per player, shrinking not overflowing its square */
.geogrid-box {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1px;
  font-size: 1.3rem;
  line-height: 1;
  overflow: hidden;
}

/* An empty box is left unmarked, since the flag grid already carries the miss */

/* GeoGrid's own colors, hardcoded so the board looks like the game not this site */
/* Four columns; the caption one is wider since category text varies in length */
.geogrid-board {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  background-color: #2B2E3C;
  border-radius: 14px;
}

.geogrid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
}

/* Category labels on their own raised cards, bold and light the way the game has them */
.geogrid-board .geogrid-caption {
  background-color: #4B4F66;
  color: #F1F2F7;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px;
  text-align: center;
  hyphens: auto;
}

/* The board-number corner, kept so anyone can confirm which board this is */
.geogrid-board .geogrid-corner {
  flex-direction: column;
  background-color: #4B4F66;
  color: #F1F2F7;
  border-radius: 12px;
  padding: 4px;
}

.geogrid-corner-label {
  font-size: 0.7rem;
}

.geogrid-corner-number {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Dark sunken squares; no padding so answers reach the walls, rounding clipped */
/* container-type sizes flags to the square, so one board works phone to monitor */
.geogrid-board .geogrid-box {
  aspect-ratio: 1;
  background-color: #22242F;
  border-radius: 12px;
  container-type: size;
  overflow: hidden;
}

/* Splits a square; columns/rows set inline so a partial last row still fills */
/* --geogrid-others feeds the picked-out layout */
.geogrid-guesses {
  display: grid;
  grid-template-columns: repeat(var(--geogrid-columns, 1), 1fr);
  grid-template-rows: repeat(var(--geogrid-rows, 1), 1fr);
  width: 100%;
  height: 100%;
}

/* One player's slice; color here not on the flag, so a share reads as answers */
.geogrid-guess {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

/* Sized against the square, the tighter of the width and height terms winning */
/* The plain rem first is the fallback for no container units */
/* line-height 1, since a flag emoji draws tall and leading pushed rows out the bottom */
.geogrid-answer {
  font-size: 1.2rem;
  font-size: min(calc(72cqw / var(--geogrid-columns, 1)), calc(66cqh / var(--geogrid-rows, 1)));
  line-height: 1;
}

/* Face-down until pressed; the pointer's the only hint over the flag */
.geogrid-nameable {
  cursor: pointer;
}

.geogrid-name-answer {
  display: none;
  padding: 0 2px;
  font-size: 0.7rem;
  font-size: min(calc(20cqw / var(--geogrid-columns, 1)), calc(24cqh / var(--geogrid-rows, 1)));
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}

/* Flipped to the name; the flag is replaced, not moved */
/* The text shadow keeps white legible over any player color */
.geogrid-guess.showing-name .geogrid-answer {
  display: none;
}

.geogrid-guess.showing-name .geogrid-name-answer {
  display: block;
}

/* Picked answer takes the top, everyone else a small bottom strip */
/* Small not faded, so the comparison stays readable */
/* Wrapping plus order pulls the picked seat up; the heights sum to the square */
.geogrid-picking .geogrid-guesses {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* Each asks its real share, so it wraps onto its own line below the picked piece */
.geogrid-picking .geogrid-guess {
  flex: 0 0 calc(100% / var(--geogrid-others, 1));
  height: 28%;
}

.geogrid-picking .geogrid-guess.picked {
  flex: 0 0 100%;
  height: 72%;
  order: -1;
}

/* When everyone agreed there's no bottom strip, so one piece keeps the square */
.geogrid-picking .geogrid-guess.picked:only-child {
  height: 100%;
}

/* Sized like at rest but against the strips */
/* Top piece is height-bound; the bottom ones depend on how many share the width */
.geogrid-picking .geogrid-guess.picked .geogrid-answer {
  font-size: min(70cqw, 48cqh);
}

.geogrid-picking .geogrid-guess:not(.picked) .geogrid-answer {
  font-size: min(calc(70cqw / var(--geogrid-others, 1)), 18cqh);
}

/* Names under the board, each in its square color but more solid, as a label */
#grid-modal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.geogrid-name {
  background-color: var(--player-color);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.9rem;
}

/* A ring not a brighter fill, since the fill has to keep matching the squares */
.geogrid-name.picked {
  border-color: currentColor;
  font-weight: 600;
}

/* The color toggle; its label sits beside the buttons, not above */
/* "None / Rarity / User" over a row of names would read as three more names */
.grid-color {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.grid-color-label {
  font-weight: 600;
  opacity: 0.7;
}

/* The rarity legend as two columns, not the game's six, so it fits a phone */
/* Two columns works at every width */
#grid-modal-rarity-key {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-size: 0.8rem;
}

/* Each band wears its board color */
/* Text forced light, since the theme's own is legible on at most half of them */
/* nowrap keeps the name and number together, so a band never reads as two */
.geogrid-tier {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  color: #F1F2F7;
}

/* A shade larger, since it's the thing being looked up */
/* line-height 1 so the emoji doesn't push the row apart */
.geogrid-tier-emoji {
  font-size: 1rem;
  line-height: 1;
}

/* The number defines but the name is what you scan, so the number is quieter */
.geogrid-tier-share {
  opacity: 0.6;
}

#submittedGame {
  font-weight: bolder;
}

#refreshPreview {
  padding-left: 5px;
}

.menu-bar {
  height: 25px;
}

.container {
  background-color: white;
  border-top-right-radius: 15px;
  border-top-left-radius: 1px;
}

footer {
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 1500;
}

.bg-purple {
  background-color: #9932CC;
}

.bg-gray {
  background: rgb(74, 74, 74);
}

.bg-blue {
  background: rgb(50, 101, 196);
}

.bg-red {
  background: rgb(196, 50, 53);
}

.app-title {
  margin-left: 25px;
  font-weight: bold;
  color: #ffffff;
  font-size: 20px;
  white-space: nowrap;
}

/* A full-width row in a centered column, so the footer icons stay on one line */
.social {
  transition-property: all;
  transition-timing-function: ease;
  transition-duration: 400ms;
}

.navbar {
  justify-content: start;
}

.gradient {
  display: none;
}

.gradient-start {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.gradient-end {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.fade-me {
  background-color: rgba(0, 0, 0, 0.3);
}

.cell {
  padding: 15px;
  background-color: yellow;
  width: 50px;
  margin: 1px;
  border-radius: 5px;
  text-align: center;
}

.password-input {
  position: relative;
  margin: auto;
  background-color: lightblue;
  padding: 25px;
  top: 50%;
  max-width: 300px;
  border-radius: 15px;
}

.file-list li span {
  padding-right: 10px;
}

li.hidden,
span.hidden {
  display: none;
}

.file-list li .feather {
  width: 20px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.clickable {
  cursor: pointer;
}

.json-file {
  color: lightseagreen;
  text-decoration: underline;
}

.light-path {
  color: lightgray
}

.dir {
  color: black
}

.game {
  margin-top: 50px;
}

.scoreboard-container {
  margin-top: 10px;
}



.l-box {
  border: none;
  width: 100%;
  background: transparent;
  text-align: center;
  font-size: x-large;
}

td:has(> input.l-box) {
  width: 20%;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
}

#graveyard {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#graveyard::-webkit-scrollbar {
  display: none;
}



/* Colors written against .btn too, so they beat Bootstrap's btn-info on source order */
.btn.submit-working {
  pointer-events: none;
  opacity: 0.75;
}

.btn.submit-done {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

/* Only while a button glides from Submit to Update, so the color eases not steps */
/* Off at rest so the page doesn't animate on load */
/* The button's opacity is never touched; only its label fades, a class below */
.btn.submit-settling {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.btn.submit-crowned {
  background-color: #d4a017;
  border-color: #d4a017;
  color: #fff;
}

/* Anchors the rank tab; the inner link is a block so the box is exactly the picture */
.game-art {
  position: relative;
}

.game-art .link {
  display: block;
}

/* The folder tab on a game played today: crown, place, or minus while open */
/* Rounded top, square bottom, no shadow, so it reads as cut from the art */
/* The white border sells the gold one as cut out */
.game-rank-tag {
  position: absolute;
  left: 8px;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 44px;
  padding: 1px 0 2px 0;
  border: 1px solid #fff;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background-color: #fff;
  color: #212529;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* The submit-deadline countdown, a spine down Submit's right edge */
/* Vertical writing-mode not a rotation, which would need a fixed height */
/* Black at 20% so it shades whatever color the button wears */
.game-reset-tag {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 0 0.375rem 0.375rem 0;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: bold;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Positioning context for the spine; a flex line kills the baseline gap */
.game-buttons {
  position: relative;
  display: flex;
}

/* The last hour, drop red and solid, so the button's edge stops agreeing */
.game-reset-tag.reset-tag-soon {
  background-color: #dc3545;
  color: #fff;
}

/* Which day you're about to file, since some games roll over off-calendar */
/* A fact, so it sits in the picture corner, not on the button */
/* Nothing to press: clicks pass through to the game link under it */
.game-date-tag {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 1px 6px 2px 6px;
  border: 1px solid #fff;
  border-radius: 6px;
  background-color: #fff;
  color: #6c757d;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* A locked game, grayed and desaturated but still clickable */
/* Bootstrap's disabled class would swallow the press that explains why */
/* Button, picture and banner share the class; a button also wants its color off */
.game-link-locked {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}

.btn.game-link-locked {
  border-color: #6c757d;
  background-color: #6c757d;
}

/* The answer, a letter at a time */
/* Gray not green, since green means a right-place letter and this wasn't guessed */
.answer-tiles {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 0 0;
}

.answer-tile {
  width: 42px;
  height: 42px;
  border: 2px solid #6c757d;
  border-radius: 4px;
  background-color: #6c757d;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
}

/* Spaced-out letters so the box looks like the answer, not a search field */
.word-ask-input {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/* Gold for a win, matching Submit, and stays gold while the drawer is open */
/* Bordered all four sides, since the gold bottom wants the same white line */
.game-rank-tag.rank-crowned {
  border-bottom: 1px solid #fff;
  background-color: #d4a017;
  color: #fff;
}

/* Red for a just-lost place, bordered so its red bottom keeps the white line */
.game-rank-tag.rank-tag-dropped {
  border-bottom: 1px solid #fff;
  background-color: #dc3545;
  color: #fff;
}

/* Transition on this class, so a settling tab glides but a redraw is instant */
.game-rank-tag.rank-tag-settling {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Only the label fades; a whole tab faded reads as the page breaking, not news */
/* A span, since a crown emoji brings its own colors and can't be faded via color */
/* Quicker than the color behind, so there's never dark text on a red tab */
.announce-label {
  display: inline-block;
  transition: opacity 0.35s ease;
}

.submit-blank .announce-label,
.rank-tag-blank .announce-label {
  opacity: 0;
}

/* Rises from the bottom edge it's attached to, as if pushed from behind the photo */
/* Slower and further than measured, or a small fast move just reads as a flash */
.game-rank-tag.rank-tag-arriving {
  -webkit-animation: rank-tag-in 0.85s ease-out;
  animation: rank-tag-in 0.85s ease-out;
}

@-webkit-keyframes rank-tag-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(16px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes rank-tag-in {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The drawer under a played game, quiet so it doesn't compete with unplayed ones */
.game-drawer {
  font-size: 0.8em;
  padding: 6px 8px 2px 8px;
  overflow: hidden;
  /* Same 520px cap and centering as the row above, so it lines up with the picture */
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.drawer-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #dee2e6;
  padding-top: 6px;
}

/* Scroll sideways not wrap, or a second line would push every tile in the row down */
.drawer-order {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  color: #6c757d;
}

.drawer-arrow {
  margin: 0 4px;
  color: #adb5bd;
}

.drawer-you {
  font-weight: 600;
  color: #212529;
}

/* The quietest thing in the line, so the order still leads */
/* Inside the name's span, so the two never split across the sideways scroll */
.drawer-score {
  margin-left: 4px;
  font-size: 0.85em;
  font-weight: 400;
  color: #adb5bd;
}

.drawer-crown {
  margin-right: 4px;
}

.drawer-link {
  flex: 0 0 auto;
  color: #0d6efd;
  text-decoration: none;
  white-space: nowrap;
}

.drawer-link:hover {
  text-decoration: underline;
}

/* A fixed box, or Chart.js feeds its parent's height and grows each redraw */
.stats-chart-box {
  position: relative;
  height: 45vh;
  min-height: 260px;
  margin-bottom: 1rem;
}

.stats-hint {
  color: #6c757d;
  font-size: 0.9em;
  margin-bottom: 0.5rem;
}

.stats-empty {
  color: #6c757d;
  font-style: italic;
}

/* The day's crowns; spaced off, or the one non-tile reads as the first tile */
.scoreboard-crowns {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Heading and tally switch on one line, the switch pushed right */
/* It changes the heading word; on wrap it drops left */
.stats-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.stats-heading h2 {
  margin-bottom: 0;
}

.stats-heading .stats-tally {
  margin-left: auto;
}

/* Five periods won't fit a phone and a btn-group won't wrap, so separate buttons */
/* They keep their widths; stretching gives a wrapped button the whole row */
.stats-period {
  flex-wrap: wrap;
  gap: 4px;
}

.stats-period .btn {
  /* Undo Bootstrap's flex: 1 1 auto, which assumes the group is one row */
  flex: 0 1 auto;
  border-radius: 0.25rem;
  /* Undo the -1px pull for joined-group borders; with a gap it's just a wobble */
  margin-left: 0;
}

.crown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  cursor: pointer;
}

.crown-name {
  width: 6.5em;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clipped: each block has a min width so a tiny game stays pointable */
/* Losing a pixel off the longest bar beats dropping games */
.crown-bar-box {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  background: #e9ecef;
  border-radius: 4px;
}

/* A min width so a tiny share still shows rather than vanishing next to a big one */
.crown-bar {
  display: block;
  flex: none;
  min-width: 3px;
  height: 18px;
}

/* The breakdown a row opens; folded not absent, so it slides not rebuilds */
/* The same bar taken apart into named rows, each measured against the leader */
.crown-detail {
  display: none;
  padding: 3px 0 9px 1.5em;
  font-size: 0.85em;
  opacity: 0.9;
}

.crown-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
}

/* Wide enough for the longest name */
/* Longer names ellipsize, the full name on the title, known from the start */
.crown-detail-name {
  width: 8.5em;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crown-detail-bar-box {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  background: #e9ecef;
  border-radius: 3px;
}

.crown-detail-bar {
  display: block;
  flex: none;
  min-width: 3px;
  height: 12px;
}

.crown-detail-count {
  width: 4.5em;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.crown-count {
  width: 4.5em;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A shape not an emoji, so it takes a color: blue on white, silver on dark */
/* The shadow reads as a diamond lit from above rather than a flat lozenge */
.tally-notch {
  color: var(--blue);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* On the gray switch button the blue goes muddy, so it gets silver */
/* The dark-theme rule below nudges it lighter, which is fine */
.stats-tally .tally-notch {
  color: #DCE0E5;
}

/* The info symbol by Crowns, shrunk since Feather's 24px reads as a heading */
.stats-info {
  cursor: pointer;
  color: #6c757d;
  vertical-align: middle;
}

.stats-info svg {
  width: 18px;
  height: 18px;
}

/* Only space joins the board and its buttons, so spacing must say they belong */
.stats-crowns {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* As wide as the player count, so the all-time view scrolls sideways not out */
.head-to-head-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.head-to-head {
  border-collapse: collapse;
  font-size: 0.85em;
}

.head-to-head th {
  padding: 4px 8px;
  font-weight: 600;
  white-space: nowrap;
}

.head-to-head tbody th {
  text-align: left;
  position: sticky;
  left: 0;
  background: #fff;
}

.head-to-head td {
  border: 1px solid #dee2e6;
  padding: 4px 8px;
  text-align: center;
  min-width: 4.5em;
}

.head-to-head-self {
  background: #f8f9fa;
}

.head-to-head-rate {
  display: block;
  font-weight: 600;
}

.head-to-head-record {
  display: block;
  font-size: 0.85em;
  opacity: 0.8;
}

.calendar-days {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.calendar-day {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ebedf0;
}

.calendar-level-1 {
  background: #9be9a8;
}

.calendar-level-2 {
  background: #40c463;
}

.calendar-level-3 {
  background: #30a14e;
}

.calendar-level-4 {
  background: #216e39;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

/* The error line under a modal's boxes, shared by the sign-up and rename modals */
.form-error {
  color: var(--error-red);
}

/* A class rather than a script-set color, so every error red lives in one place */
/* Two classes: a lone .field-error ties .form-control and loses to .input-group div */
.form-control.field-error,
.login-button.field-error {
  color: var(--error-red);
}


/* The settings modal; spacing carries the three switches so they read at a glance */
.setting-row {
  margin-bottom: 14px;
}

.setting-row .form-check-label,
.setting-label {
  font-weight: 600;
}

/* The demo picker and buttons get their own line, or a phone picker eats the row */
#settings-demo-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#settings-demo-which {
  width: auto;
}

#settings-forget-note {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* The walkthrough keeps the live page behind it visible */
/* On the bottom edge at phone width with a tint, not the near-black backdrop */
/* Tint scoped to a body class, not .modal-backdrop; the other five want dark */
.tour-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

/* Lifted clear of the bottom edge, since this points at a box it opened, not the page */
/* The lift is min(200px, 25vh) to clear a sideways phone's top; the cap matches */
#talkTourModal .tour-dialog {
  bottom: min(200px, 25vh);
}

#talkTourModal .tour-dialog .modal-content {
  max-height: 70vh;
}
body.tour-open .modal-backdrop.show {
  opacity: 0.35;
  pointer-events: none;
}

/* Keeps the page scrollable, undoing Bootstrap's body lock and scrollbar-gap padding */
/* The fixed modal catches wheels outside the dialog, so the page never moves */
/* The dialog still gets its own pointer-events */
body.tour-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.tour-modal {
  pointer-events: none;
}

/* Capped but not floored: pinned to the bottom, a short step grows down from the top */
/* So the buttons don't move; a floor only left empty space */
/* The cap matters: a sideways phone has about 375px and this asks for most */
.tour-dialog .modal-content {
  max-height: 85vh;
}

.tour-body {
  overflow-y: auto;
}

.tour-count {
  font-size: 14px;
  opacity: 0.7;
}

/* The quiet way out, at the count's weight, found without steering */
/* No underline, since it sits by plain text */
.tour-later {
  color: #6c757d;
  font-size: 14px;
  opacity: 0.7;
  padding-left: 8px;
  text-decoration: none;
}

.tour-later:hover {
  color: #6c757d;
  opacity: 1;
  text-decoration: underline;
}

/* Connections example grids as a pre; squares are just rows and line breaks */
/* Side by side where there's room, stacking on a phone so the grids stay paired */
.tour-grids {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 12px 0;
}

.tour-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Line-height under one, or an emoji's tall box breaks the grid into rows */
.tour-grid-rows {
  font-size: 17px;
  line-height: 0.95;
  margin: 0;
  white-space: pre;
}

/* The number the grid works out to, the point of the sheet, so it's biggest */
.tour-grid-score {
  font-size: 26px;
  font-weight: 600;
  margin-top: 8px;
}

.tour-grid-note {
  font-size: 13px;
  opacity: 0.7;
  text-align: center;
}

/* The turnover list, a time and its games per line, not a table with borders */
/* The time column is fixed and the games wrap in what's left, one paragraph each */
.reset-times {
  margin-top: 4px;
  font-size: 14px;
}

.reset-time-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.reset-time-when {
  flex: 0 0 122px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The unit, lighter and smaller, so the eye lands on the answer not it */
.reset-time-zone {
  font-weight: normal;
  font-size: 12px;
  opacity: 0.75;
}

/* Left alone like the tiles, so a game is spelled one way across the site */
.reset-time-games {
  flex: 1;
  min-width: 0;
  color: #6c757d;
}

/* Why an odd time is odd, smaller and quieter since it's a sentence not a name */
.reset-time-aside {
  font-size: 12px;
  opacity: 0.8;
}

/* Full width like the stats range buttons, so three read as one question not a huddle */
.theme-choice {
  width: 100%;
  margin-top: 4px;
}

/* Dark mode. Bootstrap 5.3's data-bs-theme covers what it draws */
/* This block is the hand-set colors, kept together as one place to look */
/* Palette: #0A0E15 back, #212631 page, #373F4E on top, #4E576A lines, #667085 quiet */
/* Blue stays #1897FF, all scoped to [data-bs-theme="dark"] */

[data-bs-theme="dark"] {
  /* The error red is tuned for white, so on #212631 it nearly vanishes */
  /* Bootstrap's dark-mode red does the same job; the sidebar pink stays */
  --error-red: #ea868f;
}

/* The page gradient: darkest palette into a deep blue, so edges read blue */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
  background-color: #0A0E15;
  background: linear-gradient(180deg, #0A0E15 0%, #123252 100%);
}

/* The page itself, the sheet everything is printed on */
[data-bs-theme="dark"] .container {
  background-color: #212631;
}

/* Things on the page, one step lighter so they show without a line round them */
[data-bs-theme="dark"] .pre-score-blob,
[data-bs-theme="dark"] .other-img,
[data-bs-theme="dark"] .geogrid-grid,
[data-bs-theme="dark"] #score-preview {
  background-color: #373F4E;
}

/* Everything quiet: #6c757d is picked for white and is too dark on #212631 */
[data-bs-theme="dark"] #modal-submit:disabled,
[data-bs-theme="dark"] #manual-score-hint,
[data-bs-theme="dark"] #other-url-hint,
[data-bs-theme="dark"] #wordle-answer-hint,
[data-bs-theme="dark"] .game-divider h5,
[data-bs-theme="dark"] .new-heading-note,
[data-bs-theme="dark"] .tour-later,
[data-bs-theme="dark"] .tour-later:hover,
[data-bs-theme="dark"] #score-date-label.muted,
[data-bs-theme="dark"] #profile-games-hint,
[data-bs-theme="dark"] .other-img svg,
[data-bs-theme="dark"] .other-name,
[data-bs-theme="dark"] .stats-hint,
[data-bs-theme="dark"] .stats-empty,
[data-bs-theme="dark"] .stats-info {
  color: #9AA4B5;
}

[data-bs-theme="dark"] #modal-submit:disabled {
  background-color: #4E576A;
  border-color: #4E576A;
}

/* The unfilled star; :not keeps it off .favorite, which would drop the amber */
[data-bs-theme="dark"] .game-count-star:not(.favorite) {
  color: #4E576A;
}

/* Same :not trick; hidden goes light, since the row is already dark */
[data-bs-theme="dark"] .game-count-hide:not(.hidden-game) {
  color: #4E576A;
}

[data-bs-theme="dark"] .game-count-hide.hidden-game {
  color: #E6E9EF;
}

/* Follows the card color, not white; the gold stays but its surround follows too */
[data-bs-theme="dark"] .game-rank-tag {
  border-color: #212631;
  background-color: #212631;
  color: #E6E9EF;
}

/* Restate the gold, or the equal-weight rule above makes a crown tab look 2ND */
[data-bs-theme="dark"] .game-rank-tag.rank-crowned {
  border-bottom-color: #212631;
  background-color: #d4a017;
  color: #fff;
}

/* Restate the drop red, same on both themes; surround follows the card */
[data-bs-theme="dark"] .game-rank-tag.rank-tag-dropped {
  border-color: #dc3545;
  border-bottom-color: #212631;
  background-color: #dc3545;
  color: #fff;
}

/* The day tab follows the page like the rank tab, but with no variants it's said once */
[data-bs-theme="dark"] .game-date-tag {
  border-color: #212631;
  background-color: #212631;
  color: #E6E9EF;
}

[data-bs-theme="dark"] .drawer-inner {
  border-top-color: #373F4E;
}

[data-bs-theme="dark"] .drawer-order,
[data-bs-theme="dark"] .drawer-arrow {
  color: #9AA4B5;
}

[data-bs-theme="dark"] .drawer-you {
  color: #E6E9EF;
}

/* The score inverts in the dark: light gray sits level with the names on #212631 */
/* #6C7689 drops it the same distance #ADB5BD does by day */
[data-bs-theme="dark"] .drawer-score {
  color: #6C7689;
}

/* The stats link and site blue: the one highlight brighter in the dark, not duller */
[data-bs-theme="dark"] .drawer-link {
  color: #1897FF;
}

/* The stats bars, head-to-head grid and calendar draw their own backgrounds and lines */
[data-bs-theme="dark"] .crown-bar-box,
[data-bs-theme="dark"] .crown-detail-bar-box {
  background: #373F4E;
}

/* Silver in the dark: the site blue becomes a hole on a dark panel, like the crown */
/* The shadow flips to a faint light one */
[data-bs-theme="dark"] .tally-notch {
  color: #C8CDD4;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .head-to-head th,
[data-bs-theme="dark"] .head-to-head tbody th {
  background: #212631;
}

[data-bs-theme="dark"] .head-to-head td,
[data-bs-theme="dark"] .head-to-head th {
  border-color: #4E576A;
}

[data-bs-theme="dark"] .head-to-head-self {
  background: #2A3140;
}

/* Only the empty day needs saying; the GitHub greens hold up as-is */
/* :not stops it outweighing .calendar-level-1 and painting the calendar empty */
[data-bs-theme="dark"] .calendar-day:not([class*="calendar-level-"]) {
  background: #2A3140;
}

/* A transparent canvas gives the bars no edge, so a shade up boxes them */
/* Not needed in the light theme */
/* On the canvas not the column, 12px wider, which would hang past its heading */
[data-bs-theme="dark"] .stats-chart-box canvas {
  background: #2A3140;
  border-radius: 6px;
}

/* The unreadable-paste pink for dark, not glowing but still red enough to complain */
/* The text is named too, so it doesn't inherit the pale rule's near-black */
[data-bs-theme="dark"] #paste-score.paste-unreadable {
  background-color: #3A2429;
  color: #E6E9EF;
}

/* Pushed down by sticky not fixed, so it doesn't ride over a long scoreboard */
/* Sticky shifts it within .main, its last child, taking just the empty space */
#footer-row {
  position: sticky;
  top: 100vh;
}

/* The comment tab, top left; the rank tab's shape flipped, so they pair */
/* Sized to its contents, not fixed, since it holds one to four emoji plus a count */
.game-note-tag {
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 2px 6px 1px 6px;
  border: 1px solid #fff;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background-color: #fff;
  color: #212529;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.note-tag-emoji {
  letter-spacing: 1px;
}

/* The tab the walkthrough plants, found on a board of twelve */
/* A ring not a color, since white artwork means no highlight reads on every box */
/* It pulses because movement is the one signal nothing else competes for */
.tour-bubble {
  animation: tour-bubble-pulse 1.4s ease-out 4;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0d6efd;
}

/* Three rings throughout, not two growing to three; a shadow needs equal lists */
@keyframes tour-bubble-pulse {
  0% {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0d6efd, 0 0 0 5px rgba(13, 110, 253, 0.6);
  }

  100% {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0d6efd, 0 0 0 16px rgba(13, 110, 253, 0);
  }
}

/* Keep the ring for anyone who'd rather it didn't move; only the pulsing goes */
@media (prefers-reduced-motion: reduce) {
  .tour-bubble {
    animation: none;
  }
}

/* Spaced off the emoji, or the feeling and the count run together as one string */
.note-tag-bubble {
  margin-left: 4px;
  font-weight: bold;
}

/* Two dozen buttons that read as a strip of emoji, not a form */
/* No borders, no background until pressed, wrapped so the whole set shows on a phone */
.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Tucked under the field and bordered, or it would cover the score preview */
.emoji-drawer {
  margin-top: -1px;
  padding: 6px;
  border: 1px solid #ced4da;
  border-radius: 0 0 6px 6px;
}

/* Not fixed width, level with the field: one face empty, four when busy */
.emoji-toggle {
  font-size: 16px;
  line-height: 20px;
}

/* The empty-state outline face, cut from Feather's 24px so the field doesn't jump 4px */
.emoji-toggle.emoji-none svg {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
}

.emoji-choice {
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-size: 18px;
  line-height: 22px;
}

.emoji-choice.emoji-picked {
  border-color: #0d6efd;
  background-color: #e7f1ff;
}

#comment-hint,
#comments-hint {
  display: block;
  margin-top: 6px;
  color: #6c757d;
  font-size: 12px;
}

/* Name and emoji share the words' line, or a short comment would double its height */
.comment-line {
  padding: 6px 8px;
  border-bottom: 1px solid #dee2e6;
  /* Flex so the react button goes to the far end and the words take what's left */
  display: flex;
  align-items: baseline;
  gap: 6px;
}

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

/* Same monospace as the tile so the two read as one number; dimmed, it's behind */
.comment-score {
  font-family: var(--bs-font-monospace, monospace);
  color: #6c757d;
  white-space: nowrap;
}

.comment-note {
  /* User text; break anywhere so a long unspaced run can't push the modal off-screen */
  overflow-wrap: anywhere;
  /* Takes the slack, pushing everything after it right, even when nothing was written */
  flex: 1 1 auto;
}

/* Holds the line open when nothing was written, so buttons stay in a column */
.comment-line > .comment-note:last-of-type:empty,
.comment-line .reaction-strip {
  flex: 1 1 auto;
}

.reaction-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  /* Don't inherit the board pre's monospace, so the emoji stay their normal size */
  font-family: initial;
}

/* A chip not bare text, so a reaction reads as separate from the score beside it */
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background-color: #f8f9fa;
  font-size: 12px;
  line-height: 18px;
}

/* The ones you're part of, marked like a picked emoji in the drawer */
.reaction-mine {
  border-color: #0d6efd;
  background-color: #e7f1ff;
}

.reaction-count {
  color: #6c757d;
}

/* One per line, faint until wanted so a column isn't the loudest thing in the modal */
.react-toggle {
  padding: 0 4px;
  border: none;
  color: #6c757d;
  line-height: 1;
}

.react-toggle svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

/* Your own line, marked the faint way your name is in the standings drawer */
.comment-mine {
  background-color: #f1f3f5;
}

.comment-empty,
#comments-locked {
  padding: 8px;
  color: #6c757d;
}

[data-bs-theme="dark"] .game-note-tag {
  border-color: #212631;
  background-color: #212631;
  color: #E6E9EF;
}

[data-bs-theme="dark"] .emoji-drawer {
  border-color: #495057;
}

[data-bs-theme="dark"] .emoji-choice.emoji-picked {
  border-color: #6ea8fe;
  background-color: #2b3a55;
}

[data-bs-theme="dark"] .comment-line {
  border-bottom-color: #343a40;
}

[data-bs-theme="dark"] .comment-mine {
  background-color: #2a2f3a;
}

[data-bs-theme="dark"] .reaction {
  border-color: #495057;
  background-color: #2a2f3a;
}

[data-bs-theme="dark"] .reaction-mine {
  border-color: #6ea8fe;
  background-color: #2b3a55;
}

[data-bs-theme="dark"] .comment-score,
[data-bs-theme="dark"] .reaction-count,
[data-bs-theme="dark"] .react-toggle {
  color: #adb5bd;
}

[data-bs-theme="dark"] #comment-hint,
[data-bs-theme="dark"] #comments-hint,
[data-bs-theme="dark"] .comment-empty,
[data-bs-theme="dark"] #comments-locked {
  color: #adb5bd;
}