@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Anton:wght@400&family=Anybody:wght@400;600&family=Arimo:wght@400;500;600;700&family=Black+Ops+One&family=Cairo:wght@500&family=Comic+Neue:wght@700&family=Cormorant+Garamond:wght@500;600;700&family=Fragment+Mono:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Josefin+Sans:wght@400&family=Lato:ital,wght@0,400;1,700&family=League+Spartan:wght@400;500;600;700&family=Lexend:wght@400;500;600;700&family=Limelight&family=Lobster&family=Merriweather:wght@400;700&family=Merriweather+Sans&family=Montserrat:wght@500&family=Mystery+Quest&family=Nunito:wght@500;600;700;800&family=Open+Sans&family=Oswald:wght@400;600&family=Patua+One&family=Permanent+Marker&family=Playfair+Display:wght@400;700&family=Rajdhani:wght@400;600;700&family=Raleway:wght@400;600&family=Roboto:wght@526&family=Rubik:wght@400;500;700&family=Slackey&family=Titillium+Web:wght@700&family=Varela+Round&family=VT323&family=WDXL+Lubrifont+SC&display=swap");
body.bf-draft-active {
  /* The var tracks the bar's real rendered height (set by the ResizeObserver in
     this component); 88px is only the pre-observation fallback. */
  padding-bottom: 88px;
  padding-bottom: var(--bf-save-bar-h, 88px);
}

.bf-save-bar[data-v-67259afa] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Below Bootstrap's .modal-backdrop (1050) so the Appearance modal (reachable in draft
     mode) cleanly covers the save bar instead of tying its z-index; still above content. */
  z-index: 1040;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  /* Keep the CTA above the iOS home indicator; the ResizeObserver folds this
     extra height into the body clearance automatically. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bf-save-bar-inner[data-v-67259afa] {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bf-save-msg[data-v-67259afa] { font-size: 0.95rem; color: #334155; flex: 1 1 260px;
}
.bf-save-msg em[data-v-67259afa] { font-style: normal; font-weight: 600; color: #0f172a;
}
.bf-save-btn[data-v-67259afa] {
  flex: 0 0 auto;
  white-space: nowrap;
  /* "Nagging" nudge: the CTA sits still, then does a quick wiggle every ~5s to keep
     re-grabbing attention — intermittent, not a constant jiggle (which just becomes noise). */
  animation: bf-nudge-67259afa 5s ease-in-out infinite;
}
@keyframes bf-nudge-67259afa {
0%, 84%, 100% { transform: translate3d(0, 0, 0);
}
86% { transform: translate3d(-4px, 0, 0) rotate(-1.5deg);
}
89% { transform: translate3d(4px, 0, 0) rotate(1.5deg);
}
92% { transform: translate3d(-3px, 0, 0) rotate(-1deg);
}
95% { transform: translate3d(3px, 0, 0) rotate(1deg);
}
98% { transform: translate3d(-1px, 0, 0);
}
}
/* Accessibility: no nagging motion for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
.bf-save-btn[data-v-67259afa] { animation: none;
}
}
.public-badge-spacer {
  height: 60px;
}
.public-badge-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  height: 60px;
  background: var(--strip-bg);
  color: var(--strip-text);
  border-top: 1px solid color-mix(in srgb, var(--strip-accent) 55%, transparent);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
}
.public-badge-strip .public-badge-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  overflow: hidden;
}
.public-badge-strip .public-badge-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.public-badge-strip .public-badge-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.public-badge-strip .public-badge-madewith {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-badge-strip .public-badge-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--strip-accent);
  color: var(--strip-accent-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.public-badge-strip .public-badge-arrow {
  transition: transform 0.2s ease;
}
.public-badge-strip .public-badge-shine {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.public-badge-strip .public-badge-link:hover .public-badge-cta {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.public-badge-strip .public-badge-link:hover .public-badge-arrow {
  transform: translateX(3px);
}
.public-badge-strip .public-badge-link:hover .public-badge-shine {
  transform: translateX(420px);
}
@media (max-width: 480px) {
.public-badge-strip .public-badge-madewith {
    display: none;
}
.public-badge-strip .public-badge-cta {
    font-size: 14px;
    padding: 8px 14px;
}
}
.join-board-cta[data-v-c871db75] {
  text-align: center;
  margin: 20px 0 10px;
}
.join-board-btn[data-v-c871db75] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #5B3FF9; /* Leaderboarded brand purple, same fallback as PublicBadge */
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  -webkit-text-decoration: none;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.join-board-btn[data-v-c871db75]:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.preview-banner[data-v-335907e7] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 0.75rem 1rem;
}
.preview-banner-content[data-v-335907e7] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.preview-banner--upgrade .preview-banner-text[data-v-335907e7] {
  margin-right: 0.25rem;
}
.progress-bar-container[data-v-335907e7] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.progress-bar[data-v-335907e7] {
  height: 100%;
  background-color: #0d6efd;
  transition: width 0.1s linear;
}
.slide-fade-enter-active[data-v-335907e7] {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-335907e7] {
  transition: all 0.3s ease-in;
}
.slide-fade-enter-from[data-v-335907e7] {
  transform: translateY(-100%);
  opacity: 0;
}
.slide-fade-leave-to[data-v-335907e7] {
  transform: translateY(-100%);
  opacity: 0;
}
@media (max-width: 576px) {
.preview-banner[data-v-335907e7] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
}

/* The inner flex row and its mobile align-items override existed only to sit the
   pencil glyph beside the two lines of copy. With the glyph gone the copy is a
   plain block and the outer row is all the layout this needs. */
.scorekeeper-banner[data-v-e2e4012f] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Match container width with landing pages */
.container {
  max-width: 1100px !important;
}

/* Container query context for responsive iframe embeds.
   This allows child components to use @container queries that respond
   to the actual container width rather than viewport width. */
#content {
  container-type: inline-size;
  container-name: scorekeeper;
  /* Safari disables subpixel AA on elements over translucent/backdrop-filtered
     surfaces, which makes display fonts look chunky. Forcing grayscale AA
     renders consistently across themes and browsers for V1 and V2. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Same reason as the smoothing above, but for weight: --body-font (set on
     document.body) can be a single-weight display font (Anton, Black Ops One, …)
     while names/scores/ranks apply 600/700, so Safari synthesises a chunky
     faux-bold. Disable synthesis to fall back to the real face. Covers both the
     V1 and V2 boards rendered inside #content; no-op for multi-weight fonts. */
  font-synthesis: none;
}


/* Required for autoscrolling */
.transition[data-v-e67b7556] {
  transition: opacity 1s ease;
}
.fade-out[data-v-e67b7556] {
  opacity: 0;
}
.fade-in[data-v-e67b7556] {
  opacity: 1;
}


body.DEFAULT {
  --text-color: #0f172a;
  --secondary-color: #6366f1;
  --background-color: #f8fafc;
  --body-font: "Lexend", sans-serif;
  --secondary-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --border: 1px solid #e2e8f0;
  --border-radius: 8px;
  --l2-background-color: white;
  --l2-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
  font-weight: 400;
}

body.XMAS {
  background: url("/static/assets-sk/xmas.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgb(239, 196, 16);
  --background-color: rgba(0, 0, 0, 0.3);
  --secondary-shadow: 0 0 3px var(--secondary-color);
  --border: 2px solid var(--secondary-color);
  --border-radius: 15px;
  --l2-shadow: var(--secondary-shadow);
}

body.CARNIVAL {
  background: url("/static/assets-sk/carnival.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgb(0, 255, 164);
  --background-color: rgba(0, 10, 143, 0.7);
  --border: 2px solid var(--secondary-color);
  --border-radius: 5px;
  --l2-shadow: var(--secondary-shadow);
}

body.WINTER {
  background: url("/static/assets-sk/seamless_winter.jpg") fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgb(162, 162, 253);
  --background-color: rgba(0, 0, 0, 0.85);
  --primary-shadow: 0 0 2px var(--text-color);
  --secondary-shadow: 0 0 2px var(--secondary-color);
  --body-font: "Patua One", serif;
  --border: 1px solid var(--secondary-color);
  --border-radius: 5px;
  --l2-shadow: var(--secondary-shadow);
}

body.SUMMER {
  background: url("/static/assets-sk/summer.jpg") fixed;
  --text-color: #D91714;
  --secondary-color: #059100;
  --background-color: rgba(243, 253, 122, 0.73);
  --primary-shadow: 0 0 2px var(--text-color);
  --secondary-shadow: 0 0 2px var(--secondary-color);
  --body-font: "Raleway", serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 8px;
  --l2-shadow: var(--secondary-shadow);
}

body.JUNGLE {
  background: url("/static/assets-sk/jungle.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 238, 0);
  --secondary-color: rgb(217, 165, 0);
  --background-color: rgba(0, 0, 0, 0.69);
  --body-font: "Raleway";
  --primary-shadow: -5px 0 color-mix(in srgb, var(--text-color) 65%, black),
  -5px -5px color-mix(in srgb, var(--text-color) 65%, black),
  -5px 5px color-mix(in srgb, var(--text-color) 65%, black),
  0 5px color-mix(in srgb, var(--text-color) 65%, black),
  0 -5px color-mix(in srgb, var(--text-color) 65%, black),
  0 0 color-mix(in srgb, var(--text-color) 65%, black),
  5px 0 color-mix(in srgb, var(--text-color) 65%, black),
  5px 5px color-mix(in srgb, var(--text-color) 65%, black),
  5px -5px color-mix(in srgb, var(--text-color) 65%, black);
  --border: none;
  --border-radius: 5px;
}

body.JUNGLE2 {
  background: url("/static/assets-sk/seamless_jungle.jpg") fixed;
  --text-color: #FADA07;
  --secondary-color: #FADA07;
  --background-color: rgba(30, 30, 26, 0.87);
  --body-font: "Slackey";
  --border: none;
  --border-radius: 5px;
}
body.JUNGLE2 .rank {
  opacity: 1;
}

body.WARZONE {
  background: url("/static/assets-sk/warzone.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(217, 217, 217, 0.79);
  --background-color: rgba(0, 0, 0, 0.69);
  --body-font: "Black Ops One";
  --border: none;
  --secondary-shadow: none;
  --border-radius: 0;
}

body.GRANDPRIX,
body.FORMULA1 {
  background: url("/static/assets-sk/formula1.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 0, 77, 0.83);
  --background-color: rgba(192, 0, 66, 0.83);
  --secondary-shadow: none;
  --body-font: "Anybody", sans-serif;
  --border-radius: 5px;
  --border: none;
  --l2-background-color: transparent;
  --l2-bg-image: linear-gradient(90deg, var(--secondary-color), var(--background-color));
}
body.GRANDPRIX .rank, body.GRANDPRIX h2, body.GRANDPRIX h3, body.GRANDPRIX .header-cell,
body.FORMULA1 .rank,
body.FORMULA1 h2,
body.FORMULA1 h3,
body.FORMULA1 .header-cell {
  color: var(--text-color);
}
body.GRANDPRIX #content .content-box,
body.FORMULA1 #content .content-box {
  background: transparent;
}
body.GRANDPRIX .score-card,
body.GRANDPRIX .table,
body.GRANDPRIX .goal-container,
body.GRANDPRIX .list-group-item,
body.FORMULA1 .score-card,
body.FORMULA1 .table,
body.FORMULA1 .goal-container,
body.FORMULA1 .list-group-item {
  margin-top: 10px;
}

body.HALLOWEEN {
  background: url("/static/assets-sk/halloween.jpg") no-repeat center/cover fixed;
  --text-color: rgb(253, 210, 54);
  --secondary-color: rgb(255, 142, 22);
  --background-color: rgba(0, 0, 0, 0.69);
  --body-font: "Mystery Quest", sans-serif;
  --primary-shadow: 0 0 1px var(--text-color),
  0 0 3px var(--background-color);
  --secondary-shadow: 0 0 1px var(--background-color);
  --border: 1px solid var(--secondary-color);
  --border-radius: 10px;
  --l2-shadow: var(--secondary-shadow);
}

body.POKER {
  background: url("/static/assets-sk/poker.jpg") fixed;
  --text-color: rgb(252, 29, 59);
  --secondary-color: rgb(79, 142, 255);
  --background-color: rgba(0, 0, 0, 0.91);
  --body-font: "Josefin Sans", sans-serif;
  --primary-shadow: 0 0 2px var(--text-color);
  --secondary-shadow: 0 0 2px var(--secondary-color);
  --border: 1px solid var(--secondary-color);
  --border-radius: 6px;
  --l2-shadow: var(--secondary-shadow);
}

body.CASINO {
  background: url("/static/assets-sk/casino.jpg") no-repeat center/cover fixed;
  --text-color: rgb(253, 210, 54);
  --secondary-color: rgba(253, 194, 108, 0.79);
  --background-color: rgba(0, 0, 0, 0.69);
  --body-font: "Limelight", sans-serif;
  --primary-shadow: 0 0 1px var(--text-color);
  --secondary-shadow: 0 0 1px var(--secondary-color);
  --border: 1px solid var(--secondary-color);
  --border-radius: 10px;
}

body.ELEGANT {
  --text-color: rgb(0, 0, 0);
  --secondary-color: rgb(94, 93, 93);
  --background-color: rgb(175, 175, 175);
  --primary-shadow: 0 1px 0 color-mix(in srgb, var(--text-color) 65%, black);
  --secondary-shadow: 1px 1px 1px rgb(255, 255, 255);
  --border: 1px solid var(--secondary-color);
  --border-radius: 0;
  --l2-shadow: var(--secondary-shadow);
}

body.SALES {
  background: url("/static/assets-sk/sales.jpg") no-repeat center/cover fixed;
  --text-color: rgb(47, 47, 47);
  --secondary-color: rgba(248, 0, 21, 0.65);
  --background-color: rgba(176, 199, 239, 0.81);
  --body-font: "Anton", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 5px;
}
body.SALES h2 {
  text-shadow: none;
}

body.BLACK {
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgb(255, 255, 0);
  --background-color: rgb(7, 7, 7);
  --body-font: "Anton", sans-serif;
  --border: 1px solid var(--secondary-color);
  --border-radius: 5px;
}
body.BLACK h2 {
  text-shadow: none;
}

body.BOLD {
  background: linear-gradient(90deg, #07BEFA, #474CB1, #E51B75);
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.62);
  --background-color: rgba(255, 255, 255, 0.29);
  --border-radius: 6px;
  --border: none;
  --secondary-shadow: inset 1px 1px rgba(255, 255, 255, 0.2),
  inset -1px -1px rgba(255, 255, 255, 0.1),
  1px 3px 24px -1px rgba(0, 0, 0, 0.15);
  --l2-shadow: var(--secondary-shadow);
}

body.CONTEST {
  background: url("/static/assets-sk/contest.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(3, 59, 164, 0.83);
  --background-color: rgb(23, 108, 253, 0.83);
  --secondary-shadow: none;
  --body-font: "Titillium Web", sans-serif;
  --border-radius: 0;
  --border: none;
  --l2-background-color: transparent;
  --l2-bg-image: linear-gradient(90deg, var(--secondary-color), var(--background-color));
}
body.CONTEST .rank, body.CONTEST h2, body.CONTEST h3, body.CONTEST .header-cell {
  color: var(--text-color);
}
body.CONTEST #content .content-box {
  background: transparent;
}
body.CONTEST .score-card,
body.CONTEST .table,
body.CONTEST .goal-container,
body.CONTEST .list-group-item {
  margin-top: 10px;
}

body.GAMING {
  background: url("/static/assets-sk/gaming.jpg") top/100% repeat-y fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: #6FB2EE;
  --primary-shadow: 0 0 2px var(--text-color);
  --background-color: rgba(38, 102, 159, 0.6);
  --body-font: "Anybody", sans-serif;
  --border-radius: 6px;
  --border: none;
  --secondary-shadow: inset 1px 1px rgba(255, 255, 255, 0.2),
  inset -1px -1px rgba(255, 255, 255, 0.1),
  1px 3px 24px -1px rgba(0, 0, 0, 0.15);
  --l2-shadow: var(--secondary-shadow);
}

body.PIXEL {
  --text-color: #1C0070;
  --secondary-color: #FF0053;
  --background-color: #a8fff1;
  --body-font: "VT323", monospace;
  --border-radius: 0;
  --border: 3px solid var(--secondary-color);
}

body.SAMURAI {
  background: url("/static/assets-sk/samurai.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgb(225, 0, 50);
  --background-color: rgba(26, 0, 0, 0.73);
  --secondary-shadow: 0 0 3px var(--background-color);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Titillium Web", serif;
  --border-radius: 0;
  --border: 3px solid var(--secondary-color);
  --l2-shadow: var(--secondary-shadow);
}

body.HANDWRITTEN {
  background: url("/static/assets-sk/seamless_paper.jpg") fixed;
  --text-color: rgba(0, 5, 54, 0.6);
  --secondary-color: rgba(0, 5, 54, 0.6);
  --background-color: rgba(255, 255, 255, 0);
  --border: 2px solid var(--text-color);
  --body-font: "Permanent Marker", cursive;
}

body.SPRING {
  background: url("/static/assets-sk/daisies.jpg") fixed;
  --text-color: #6B3395;
  --secondary-color: #4C642C;
  --background-color: rgba(255, 216, 103, 0.8);
  --border: none;
  --body-font: "Lobster", sans-serif;
}

body.MUSIC {
  background: url("/static/assets-sk/music.jpg") fixed;
  --text-color: #FFF;
  --secondary-color: #FFF;
  --background-color: rgba(132, 98, 138, 0.89);
  --primary-shadow: 0 0 5px var(--text-color);
  --border: none;
  --body-font: "Anybody", sans-serif;
}

body.PINK {
  background: url("/static/assets-sk/pink.jpg") fixed;
  --text-color: #255B66;
  --secondary-color: #255B66;
  --background-color: rgba(255, 189, 188, 0.74);
  --primary-shadow: 0 0 5px color-mix(in srgb, var(--text-color) 65%, black);
  --border: none;
  --body-font: "Slackey", sans-serif;
}

body.EASTER {
  background: url("/static/assets-sk/easter.jpg") no-repeat center/cover fixed;
  --text-color: #01865F;
  --secondary-color: #CC5719;
  --background-color: rgba(238, 222, 153, 0.79);
  --border: 1px solid var(--secondary-color);
  --body-font: "Slackey", sans-serif;
}

body.CARTOON {
  background: url("/static/assets-sk/cartoon.jpg") no-repeat center/cover fixed;
  background-size: 100% 100%;
  --text-color: #00702D;
  --secondary-color: #8A1C2A;
  --background-color: rgba(250, 178, 74, 0.83);
  --border: 3px solid var(--secondary-color);
  --body-font: "Slackey", sans-serif;
  --border-radius: 5px;
}

body.DARK {
  --text-color: #e8e4de;
  --secondary-color: #c9a84c;
  --background-color: #1c1c1e;
  --body-font: "Lexend", sans-serif;
  --secondary-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --border: 0;
  --border-radius: 12px;
  --l2-background-color: #2c2c2e;
  --l2-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

body.LITERATURE {
  --text-color: #2d2a26;
  --secondary-color: #8b5e3c;
  --background-color: #faf6f1;
  --body-font: "Playfair Display", serif;
  --secondary-shadow: 0 1px 4px rgba(45, 42, 38, 0.08);
  --border: 0;
  --border-radius: 6px;
  --l2-background-color: #fffcf8;
  --l2-shadow: 0 1px 3px rgba(45, 42, 38, 0.06), 0 4px 16px rgba(45, 42, 38, 0.05);
  font-weight: 400;
}

body.WIZARD {
  background: url("/static/assets-sk/seamless_stone.jpg") fixed;
  --text-color: rgb(255, 223, 0);
  --secondary-color: rgb(235, 158, 51);
  --background-color: rgba(64, 134, 22, 0.81);
  --body-font: "Mystery Quest", sans-serif;
  --border: 1px solid var(--background-color);
  --border-radius: 3px;
}
body.WIZARD h2 {
  text-shadow: none;
}

body.FOOTBALL {
  background: url("/static/assets-sk/seamless_grass.png") fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.79);
  --background-color: rgba(20, 66, 0, 0.7);
  --body-font: "Alfa Slab One", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 10px;
}

body.GOLF {
  background: url("/static/assets-sk/golf.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.79);
  --background-color: rgba(32, 108, 1, 0.7);
  --body-font: "Anton", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 10px;
}

body.FOOTBALL2 {
  background: url("/static/assets-sk/football.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.79);
  --background-color: rgba(1, 51, 108, 0.91);
  --body-font: "Anton", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 10px;
}

body.SOCCER {
  background: url("/static/assets-sk/soccer.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.79);
  --background-color: rgba(0, 0, 0, 0.7);
  --body-font: "Anton", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 10px;
}

body.TENNIS {
  background: url("/static/assets-sk/tennis.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.79);
  --background-color: rgba(12, 52, 0, 0.7);
  --border: 2px solid var(--secondary-color);
  --border-radius: 10px;
}

body.CHESS {
  background: black url("/static/assets-sk/chess.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: rgba(255, 255, 255, 0.79);
  --background-color: rgba(0, 0, 0, 0.85);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --secondary-shadow: 0 0 4px var(--background-color);
  --body-font: "Josefin Sans", sans-serif;
  --border: 1px solid var(--secondary-color);
  --border-radius: 3px;
  --l2-shadow: var(--secondary-shadow);
}

body.C1 {
  background: url("/static/assets-sk/abstract_blue.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: #BBDCFF;
  --background-color: #1763B7;
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Titillium Web", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 0;
}
body.C1 .list-group-item {
  border: var(--border);
}

body.C2 {
  background: url("/static/assets-sk/red_lines.jpg") no-repeat center/cover fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: #AD1602;
  --background-color: rgba(0, 0, 0, 0.69);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Titillium Web", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 6px;
}
body.C2 .list-group-item {
  border: var(--border);
}

body.C3 {
  background: url("/static/assets-sk/kids_hands.jpg") repeat fixed;
  --text-color: rgb(255, 255, 255);
  --secondary-color: #01FFE8;
  --background-color: rgba(0, 0, 0, 0.69);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Permanent Marker", sans-serif;
  --border: none;
  --border-radius: 6px;
}
body.C3 .list-group-item {
  border: var(--border);
}

body.BASKETBALL {
  background: url("/static/assets-sk/basketball.jpg") no-repeat center/cover fixed;
  --text-color: #FFFFFF;
  --secondary-color: #FF6B35;
  --background-color: rgba(0, 0, 0, 0.7);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Rajdhani", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 8px;
}

body.RACING {
  background: url("/static/assets-sk/tarmac.jpg") repeat fixed;
  --text-color: #FFFFFF;
  --secondary-color: #FF0000;
  --background-color: rgba(0, 0, 0, 0.75);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Titillium Web", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 4px;
}

body.LUXURY {
  background: url("/static/assets-sk/gold.jpg") repeat;
  --text-color: #FFFFFF;
  --secondary-color: #D4AF37;
  --background-color: rgba(0, 0, 0, 0.65);
  --primary-shadow: 0 2px 8px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Playfair Display", serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 12px;
}

body.GOLF {
  background: url("/static/assets-sk/golf.jpg") no-repeat center/cover fixed;
  --text-color: #FFFFFF;
  --secondary-color: #008000;
  --background-color: rgba(0, 0, 0, 0.7);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Roboto", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 8px;
}

body.COINS {
  background: url("/static/assets-sk/coins.jpg") repeat;
  --text-color: #FFD700;
  --secondary-color: #DAA520;
  --background-color: rgba(0, 0, 0, 0.75);
  --primary-shadow: 0 0 8px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Montserrat", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 8px;
}

body.WOOD {
  background: url("/static/assets-sk/wood.jpg") repeat;
  --text-color: #F5DEB3;
  --secondary-color: #8B4513;
  --background-color: rgba(0, 0, 0, 0.6);
  --primary-shadow: 0 2px 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Merriweather", serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 6px;
}

body.BASEBALL {
  background: url("/static/assets-sk/baseball.jpg") no-repeat center/cover fixed;
  --text-color: #FFFFFF;
  --secondary-color: #FF0000;
  --background-color: rgba(0, 0, 0, 0.7);
  --primary-shadow: 0 0 6px color-mix(in srgb, var(--text-color) 65%, black);
  --body-font: "Oswald", sans-serif;
  --border: 2px solid var(--secondary-color);
  --border-radius: 8px;
}

/*-- Themable CSS ----------------------------------------------------------------------------- */
body {
  background-color: var(--background-color);
  --stripey-bg-color-even: rgba(255, 255, 255, 0.06);
  --stripey-bg-color-odd: rgba(0, 0, 0, 0.04);
}

html, body {
  min-height: 100vh;
  height: 100vh;
}

body.themeable .themed {
  color: var(--text-color);
  font-family: "Roboto", sans-serif, sans-serif !important;
  font-family: var(--body-font, "Roboto", sans-serif), sans-serif !important;
  background-color: var(--background-color);
}

body.themeable .themed-l2,
body.themeable .content-box,
body.themeable .card-elevated {
  color: var(--l2-text-color, var(--text-color));
  font-family: var(--l2-font-family, var(--body-font)), sans-serif;
  background: var(--stripey-bg-color, var(--l2-background-color, var(--background-color))) none;
  background: var(--stripey-bg-color, var(--l2-background-color, var(--background-color))) var(--l2-bg-image, none);
  --bs-table-bg: var(--l2-background-color, var(--background-color));
}

body.themeable .content-box,
body.themeable .card-elevated {
  box-shadow: none;
  box-shadow: var(--l2-shadow, none);
}

.rank, td.rank, th.rank {
  font-weight: bold;
  text-shadow: var(--secondary-shadow);
  font-size: 2.5em;
  color: var(--secondary-color);
  min-width: 80px;
  white-space: nowrap;
}
@container scorekeeper (max-width: 1000px) {
  .rank, td.rank, th.rank {
    min-width: 50px;
  }
}
@media (max-width: 1000px) {
  .rank, td.rank, th.rank {
    min-width: 50px;
  }
}

.rank-emoji {
  margin-right: 0.3em;
  font-size: 0.9em;
}

.header-cell {
  color: var(--secondary-color);
}

:not(.no-theme) > h1 {
  color: var(--text-color);
  font-family: var(--body-font);
  text-shadow: var(--primary-shadow);
}

:not(.no-theme) > h2 {
  color: var(--secondary-color);
  text-shadow: var(--secondary-shadow);
  font-family: var(--body-font);
}

:not(.no-theme) > h3,
:not(.no-theme) > h4 {
  color: var(--secondary-color);
  font-family: var(--body-font);
}

:not(.no-theme).table {
  --bs-table-color: var(--text-color);
  --bs-table-bg: var(--background-color);
  font-size: x-large;
}

:not(.no-theme).table-responsive {
  border: var(--border);
  border-radius: 5px;
  border-radius: var(--border-radius, 5px);
  box-shadow: var(--secondary-shadow);
}

.list-group {
  border: var(--border);
  box-shadow: var(--secondary-shadow);
  border-radius: var(--border-radius);
}

.list-group:empty {
  border: none;
  box-shadow: none;
}

.list-group-item {
  color: var(--text-color);
  font-size: 20px;
  font-size: var(--list-font-size, 20px);
  border: none;
  box-shadow: none;
}

a.list-group-item {
  color: var(--text-color) !important;
}

.score-card {
  background-color: inherit;
  border: var(--border);
  min-width: 150px;
  box-shadow: var(--secondary-shadow);
  transition: color 0.3s ease;
}
.score-card a {
  color: var(--text-color);
}
.score-card a:hover {
  color: var(--secondary-color);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.team-card {
  min-width: 350px !important;
}

.card > .card-heading {
  background-color: rgba(0, 0, 0, 0.031372549);
  color: var(--text-color);
}

.progress {
  background-color: rgba(187, 185, 185, 0.5);
}

.progress-bar {
  background-color: rgb(32, 220, 142);
}

:not(.no-theme).card {
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
}

.profile-img {
  border: var(--border);
  text-shadow: var(--secondary-shadow);
  -o-object-fit: cover;
     object-fit: cover;
  width: 70px;
  width: var(--profile-img-size, 70px);
  height: 70px;
  height: var(--profile-img-size, 70px);
}

a.powered-by {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--secondary-color);
  opacity: 0.5;
}

.spinner-border {
  color: var(--text-color);
}

/*-- General Board CSS ----------------------------------------------------------------------------- */
.is-editable {
  cursor: pointer;
}
.is-editable:hover {
  background-color: rgba(155, 216, 218, 0.8) !important;
  border-radius: 5px;
}
.is-editable a {
  color: inherit;
}

.is-eliminated {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
  opacity: 0.5;
}

/*-- Stripey effects ----------------------------------------------------------------------------- */
.darker, tr.darker > td, tr.darker > th {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.lighter, tr.lighter > td, tr.lighter > th {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Add striped effect to scoresheets */
.stripey-table > tr:nth-child(even) td,
.stripey-table > tr:nth-child(even) th {
  background-color: var(--stripey-bg-color-even);
  --stripey-bg-color: var(--stripey-bg-color-even) ;
}
.stripey-table > tr:nth-child(odd) td,
.stripey-table > tr:nth-child(odd) th {
  background-color: var(--stripey-bg-color-odd);
  --stripey-bg-color: var(--stripey-bg-color-odd) ;
}

/* Add striped effect to leaderboards and more */
.stripey > :nth-child(even) {
  background-color: var(--stripey-bg-color-even);
  --stripey-bg-color: var(--stripey-bg-color-even);
}
.stripey > :nth-child(odd) {
  background-color: var(--stripey-bg-color-odd);
  --stripey-bg-color: var(--stripey-bg-color-odd);
}

/*-- Scroll Shadow effects ----------------------------------------------------------------------------- */
@property --scroll-opacity-left {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@property --scroll-opacity-right {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@keyframes scroll-shadow-inset {
  from {
    --scroll-opacity-left: 0;
    --scroll-opacity-right: 1;
  }
  to {
    --scroll-opacity-left: 1;
    --scroll-opacity-right: 0;
  }
}
.scroll-shadow {
  --scroll-shadow-width: 20px;
  anchor-name: --scroll-shadow;
  animation: scroll-shadow-inset linear;
  animation-timeline: scroll(self inline);
}

.scroll-shadow::before,
.scroll-shadow::after {
  content: "";
  width: var(--scroll-shadow-width);
  pointer-events: none;
  position: absolute;
  position-anchor: --scroll-shadow;
  height: anchor-size(height);
}

.scroll-shadow::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
  opacity: var(--scroll-opacity-left);
}

.scroll-shadow::after {
  right: anchor(right);
  top: anchor(top);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
  opacity: var(--scroll-opacity-right);
}

/*-- Modal z-index fix ----------------------------------------------------------------------------- */
.modal {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}

/** SWALL */
.swal2-container {
  --text-color: var(--bs-body-color);
  --body-font: var(--bs-body-font-family);
  --primary-shadow: none;
  --secondary-shadow: none;
}

.swal2-show,
.swal2-hide {
  animation: none !important;
}

/* Prevent backdrop from appearing during Vue transitions */
.swal2-container.swal2-top-end {
  z-index: 99999 !important;
  background-color: transparent !important;
  pointer-events: none !important;
}

.swal2-popup.swal2-toast {
  width: auto !important;
  max-width: 350px;
  min-width: 250px;
  pointer-events: auto;
}

/*-- RESPONSIVE QUERIES --------------------------------------------------------------------
NOTE: Container queries for iframe embeds, media queries as fallback for direct viewing.
Container queries must come BEFORE media queries to ensure proper cascade.
------------------------------------------------------------------------------------------
 */
@container scorekeeper (max-width: 1000px) {
  .rank {
    font-size: 1.5em;
  }
  h1 {
    font-size: 1.5rem !important;
  }
  .profile-img {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 1000px) {
  .rank {
    font-size: 1.5em;
  }
  h1 {
    font-size: 1.5rem !important;
  }
  .profile-img {
    width: 50px;
    height: 50px;
  }
}