@font-face {
  src: url("/fonts/Abel-Regular.ttf");
  font-family: "Abel";
  font-display: swap;
}

@font-face {
  src: url("/fonts/NovaFlat-Regular.ttf");
  font-family: "ClueFont";
  font-display: swap;
}

@font-face {
  src: url("/fonts/Bungee-Regular.ttf");
  font-family: "Theme";
  font-display: swap;
}

:root {
  --dm: 1;
  --lm: 1;
  --dmhc: 0.25;
  --lmhc: 1.75;

  --hueTheme: 215;
  --hueLink: 140;
  --hueYay: 175;
  --hueNope: 340;
  --statusBarHSL: var(--hueTheme), 100%, calc(var(--dm) * 3%);
  --appBackgroundLightestHSL: var(--hueTheme), 80%, calc(var(--lm) * 70%);
  --appBackgroundLighterHSL: var(--hueTheme), 50%, calc(var(--lm) * 41%);
  --appBackgroundHSL: var(--hueTheme), 55%, calc(var(--dm) * 20%);
  --appBackgroundDarkHSL: var(--hueTheme), 100%, calc(var(--dm) * 8%);
  --appBackgroundDarkestHSL: var(--hueTheme), 100%, calc(var(--dm) * 3%);
  --appForegroundHSL: var(--hueTheme), 100%, 100%;
  --appForegroundDiminishedHSL: var(--hueTheme), 0%, calc(var(--lm) * 65%);
  --linkColorLightHSL: var(--hueLink), 79%, 55%;
  --linkColorDarkHSL: var(--hueLink), 69%, 45%;

  --messageColorHSL: 34, 100%, 70%;
  --tipColorHSL: 34, 100%, 70%;
  --pointoutAnimation: blink 400ms ease-in-out 0s infinite alternate;
  --highlightColorHSL: 50, 100%, 70%;
  --alertHSL: 0, 100%, 45%;
  --alertTextHSL: 0, 100%, 65%;

  --statBackground: hsla(var(--appBackgroundLighterHSL), 0.25);
  --statBorder: hsla(var(--appBackgroundLighterHSL), 0.7);
  --transitionEase: ease-in-out;
  --longTransition: 400ms;
  --mediumTransition: 250ms;
  --shortTransition: 150ms;
  --cardSize: 180px;
  --wordHeight: 30px;
  --wordScale: 1;
  --wordAlignment: end;
  --footerHeight: 80px;
  --defaultGap: 20px;
  --halfGap: calc(0.5 * var(--defaultGap));
  --threeQuarterGap: calc(0.75 * var(--defaultGap));
  --borderRadius: 5px;
  --cardDropShadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  --trayDropShadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  --statShadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  --wordFont: "Abel", "Segoe UI", "Helvetica Neue";
  --themeFont: "Theme";
  --textureSource: radial-gradient(circle at center 400px, hsla(var(--appBackgroundHSL), 0.7) 1%, hsla(var(--appBackgroundHSL), 0.7) 40%, hsla(var(--appBackgroundDarkestHSL), 1) 80%);
  --textureSourceAlt: radial-gradient(circle at center 400px, hsla(var(--appBackgroundHSL), 0.7) 1%, hsla(var(--appBackgroundHSL), 0.7) 40%, hsla(var(--appBackgroundDarkestHSL), 1) 80%);
  --texture2: var(--textureSource);
  --textureHueSource: linear-gradient(hsla(var(--appBackgroundHSL), 0), hsla(var(--appBackgroundHSL), 0));
  --textureHue: radial-gradient(circle, hsla(var(--appBackgroundHSL), 0) 0%, hsla(var(--appBackgroundHSL), 0) 100%);
  --textureSize: cover;
  --textureBlendMode: normal;
  --ultimateBackgroundImage: linear-gradient(hsla(var(--appBackgroundDarkestHSL), 1), hsla(var(--appBackgroundDarkestHSL), 1) 6px, hsla(var(--appBackgroundDarkestHSL), 0) 50%), var(--textureHue), var(--texture2);

  --glassBackdropFilter: blur(4px);
  --glassBorder: 1px solid hsla(var(--appBackgroundLighterHSL), calc(var(--lm) * 0.5));
  --glassBackgroundImage: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015) 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
  --glassBackgroundImageStrong: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --glassBackgroundColor: hsla(var(--appBackgroundDarkHSL), 0.5);

  --glassDarkBorder: 1px solid hsla(var(--appBackgroundLighterHSL), calc(var(--lm) * 0.1));
  --glassDarkBackgroundImage: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.005) 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.005), rgba(255, 255, 255, 0));
  --glassDarkBackgroundImageStrong: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --glassDarkBackgroundColor: hsla(var(--appBackgroundDarkHSL), 0.1);
}

html,
body {
  margin: 0px 0px;
  background-color: hsl(var(--statusBarHSL));
  padding: 0px 0px;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  color: hsl(var(--appForegroundHSL));
  font-family: var(--wordFont);
}

body {
  height: calc(100% + env(safe-area-inset-top));
  font-size: 1.3em;
  line-height: 1.3em;
}

/*#region chrome  */
main {
  display: flex;
  background-image: linear-gradient(hsla(var(--appBackgroundDarkestHSL), 1), hsla(var(--appBackgroundDarkestHSL), 0) 50%), var(--textureHue), var(--texture2);
  background-position: center center;
  background-size: cover, cover, var(--textureSize);
  background-repeat: no-repeat, no-repeat, repeat;
  background-color: hsl(var(--statusBarHSL));
  width: 100%;
  height: 100%;
  overflow: visible;
  line-height: 160%;
  user-select: none;
  -webkit-user-select: none;
  justify-content: center;
  align-items: center;
  cursor: default;
}

app {
  --hueGuessing: 140;
  --hueCreating: 215;
  --hueSolved: 175;
  --hueReviewing: 355;
  --trayBackgroundHSL: var(--hueGuessing), 100%, 50%;
  --trayCreatingBackgroundHSL: var(--hueCreating), 100%, 50%;
  --trayGuessingBackgroundHSL: var(--hueGuessing), 100%, 40%;
  --trayReviewingBackgroundHSL: var(--hueReviewing), 100%, 54%;
  --traySolvedBackgroundHSL: var(--hueSolved), 100%, 48%;
  --simpleCardBackgroundHSL: 0, 0%, 0%;
  --simpleCardForegroundHSL: 0, 100%, 100%;

  display: flex;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--defaultGap);
  transition: var(--mediumTransition) ease-in-out background-color;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

app.monocolor {
  --hueCreating: var(--hueGuessing);
  --hueReviewing: var(--hueGuessing);
  --hueSolved: var(--hueGuessing);
}

splash {
  display: flex;
  position: fixed;
  top: 0px;
  left: 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--defaultGap);
  z-index: 1000;
  transition: var(--longTransition) ease-out all;
  background-image: var(--ultimateBackgroundImage);
  background-position: center center;
  background-size: cover, cover, var(--textureSize);
  background-repeat: no-repeat, no-repeat, repeat;
  background-color: hsl(var(--appBackgroundDarkestHSL));
  width: 100%;
  height: 100%;
  pointer-events: all;
}

splash.hide {
  opacity: 0;
  pointer-events: none;
}

splash message small {
  color: hsl(var(--messageColorHSL));
}

actionbar {
  display: flex;
  position: fixed;
  top: 0px;
  right: 0px;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50px);
  z-index: 1000;
  transition: var(--mediumTransition) ease-in-out;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
}

actionbar.show {
  transform: translateY(0px);
}

actionbar button {
  box-sizing: border-box;
  border: none;
  background: none;
  padding: var(--halfGap) var(--defaultGap);
  width: auto;
  font-weight: 800;
}

/*#endregion  */

/*#region simple standard elements  */
p {
  margin: 0;
  width: 100%;
  line-height: 140%;
  user-select: none;
  -webkit-user-select: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin: calc(3 * var(--defaultGap)) 0 calc(2 * var(--defaultGap));
  font-weight: normal;
  font-family: var(--themeFont);
  user-select: none;
  text-align: center;
  -webkit-user-select: none;
}

h3 {
  margin: calc(2 * var(--defaultGap)) 0 calc(1 * var(--defaultGap));
  color: hsl(var(--appBackgroundLightestHSL));
  font-family: var(--wordFont);
  text-transform: uppercase;
}

h4 {
  margin-top: var(--defaultGap);
  margin-bottom: 0px;
}

a,
a:hover,
a:focus,
a:visited,
a:active {
  color: hsl(var(--linkColorLightHSL));
  user-select: none;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--borderRadius);
  padding: 8px 16px;
}

a.nuanced {
  border: none;
  background: none;
  padding: 0px;
  color: hsl(var(--appForegroundHSL));
}

a.nuanced icon {
  background-color: hsl(var(--appForegroundHSL));
}

a.nuanced.gold {
  color: hsl(var(--messageColorHSL));
}

a.nuanced.gold icon {
  background-color: hsl(var(--messageColorHSL));
}

button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--defaultGap) / 4);
  transition: var(--shortTransition) ease-in-out;
  transition-property: color, background-color, opacity, border-color;
  outline: none;
  border-radius: var(--borderRadius);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  backdrop-filter: var(--glassBackdropFilter);
  cursor: pointer;
  box-sizing: border-box;
  border: var(--glassBorder);
  background: none;
  background-image: var(--glassBackgroundImage);
  background-color: var(--glassBackgroundColor);
  padding: var(--threeQuarterGap) var(--defaultGap);
  max-width: calc(2 * var(--cardSize));
  color: hsla(var(--appForegroundHSL), 1);
  font-family: var(--wordFont);
  text-align: center;
  text-wrap: nowrap;
}

button.primary {
  color: hsl(var(--linkColorLightHSL));
  font-family: var(--themeFont);
}

button.secondary {
  color: hsl(var(--appBackgroundLighterHSL));
}

button.scream {
  border-color: hsla(var(--linkColorLightHSL), calc(var(--lm) * 0.3));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-color: hsla(var(--linkColorLightHSL), 0.95);
  color: hsl(var(--appBackgroundDarkestHSL));
}

.meta button.scream {
  margin-bottom: 1px;
}

button.scream icon {
  background-color: hsl(var(--appBackgroundHSL));
}

button.nuanced {
  justify-content: start;
  backdrop-filter: none;
  border: none;
  background: none;
  padding: 0px var(--halfGap);
  max-width: unset;
  color: hsl(var(--linkColorLightHSL));
}

button.nuanced.end {
  justify-content: end;
}

button.nuanced:active {
  scale: 1;
}

button:active,
a.button:active {
  scale: 0.98;
}

button.disabled {
  opacity: 0.4;
  touch-action: none;
  pointer-events: none;
}

button.inert {
  touch-action: none;
  pointer-events: none;
  color: hsl(var(--appForegroundDiminishedHSL));
}

button.notext {
  max-width: 70px;
  height: 100%;
}

button.notext icon {
  background-color: hsl(var(--linkColorLightHSL));
}

button icon.spinner {
  position: relative;
  margin: 0;
}

button.isolated {
  position: fixed;
  backdrop-filter: none;
  box-sizing: border-box;
  box-shadow: none;
  border: none;
  border-radius: 0px;
  background: none;
  width: auto;
}

/* FIXED: pseudo-class must follow class token — was button:active.isolated / button:focus.isolated */
button.isolated:active,
button.isolated:focus {
  scale: 1;
}

input {
  transition: var(--mediumTransition) ease-in-out color;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

header {
  display: flex;
  /* flex: 1; */
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  gap: 1em;
  color: hsl(var(--appForegroundDiminishedHSL));
  user-select: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: default;
}

header h1 {
  display: none;
  cursor: default;
  margin-top: var(--defaultGap);
  font-weight: normal;
  font-size: 220%;
  line-height: 84%;
  font-family: var(--themeFont);
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

small {
  user-select: none;
  -webkit-user-select: none;
}

section::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: auto;
}

section input {
  font-size: inherit;
  font-family: var(--wordFont);
}

/*#endregion  */

/*#region simple nonstandard elements */

statusbarcolor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: hsl(var(--statusBarHSL));
  width: 100%;
  height: env(safe-area-inset-top);
  pointer-events: none;
}

badge {
  display: flex;
  position: absolute;
  top: -5px;
  right: -10px;
  justify-content: center;
  align-items: center;
  scale: 0;
  opacity: 0;
  transition: var(--mediumTransition) ease-in-out all;
  border-radius: 50%;
  background: hsl(var(--alertHSL));
  width: 0px;
  height: 0px;
  overflow: hidden;
  color: hsl(var(--appForegroundHSL));
  font-weight: 800;
  font-size: 12px;
}

badge.show {
  scale: 1;
  opacity: 1;
  width: 24px;
  height: 24px;
}

introheader {
  display: block;
  margin-bottom: 0;
}

presents {
  display: block;
  opacity: 0.5;
  font-size: 0.7em;
  text-align: center;
}

gamename {
  display: block;
  font-size: 2em;
  line-height: 1em;
  font-family: var(--themeFont);
  text-align: center;
}

cta {
  display: inline-block;
  color: hsl(var(--linkColorLightHSL));
  font-family: var(--themeFont);
}

flogo {
  display: none;
}

version {
  padding: var(--halfGap) var(--defaultGap);
  color: hsla(var(--appBackgroundLightestHSL), 1);
  font-size: 14px;
}

version span {
  cursor: pointer;
  color: hsl(var(--messageColorHSL));
}

checkbox p icon {
  display: inline-block;
  transform: translate(-4px, 5px);
}

/*#endregion  */

/*#region containers  */
leftright {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--halfGap);
  width: 100%;
}

message {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-color: hsl(var(--messageColorHSL));
  width: 100%;
  line-height: 1.4em;
  user-select: none;
  text-align: center;
  text-shadow: 0px -1px 2px black;
  -webkit-user-select: none;
}

message span {
  display: none;
}

.solved .show message {
  pointer-events: all;
}

.solved message span {
  display: inline;
}

message.clickable {
  cursor: pointer;
}

message.error {
  color: hsl(var(--alertTextHSL));
}

message.success {
  color: hsl(var(--linkColorLightHSL));
}

message small {
  color: hsl(var(--linkColorLightHSL));
  line-height: 140%;
}

message em {
  color: hsl(var(--appForegroundHSL));
  font-style: normal;
}

splash message,
notification message {
  gap: calc(0.25 * var(--defaultGap));
  box-sizing: border-box;
  margin: var(--defaultGap);
  border: 1px solid hsl(var(--messageColorHSL));
  border-radius: var(--borderRadius);
  background: black;
  padding: calc(1.5 * var(--defaultGap)) var(--defaultGap);
  width: calc(100% - 2 * var(--defaultGap));
  max-width: calc(2.5 * var(--cardSize));
  pointer-events: none;
  color: hsl(var(--appForegroundHSL));
  font-size: 1.1em;
  line-height: 1.5em;
}

controls {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--mediumTransition) ease-in-out;
  transition-property: background-color, border-color;
  padding: 0;
  height: 100%;
}

highlight {
  display: block;
  border: var(--glassBorder);
  border-radius: calc(2 * var(--borderRadius));
  background-color: hsla(var(--appBackgroundDarkestHSL), 0.7);
  padding: var(--defaultGap);
  width: calc(100% - 2 * var(--defaultGap));
  font-size: 1em;
}

highlight h3 {
  margin-top: 0;
  line-height: 110%;
}

highlight leftright {
  margin: var(--halfGap) 0 0;
}

tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: calc(2 * var(--defaultGap)) 0 0;
  border: 1px solid hsla(var(--appForegroundHSL), 0.2);
  border-width: 0 0 1px 0;
  width: 100%;
  color: hsl(var(--appBackgroundLightestHSL));
  font-size: 1.17em;
  font-family: var(--wordFont);
  text-transform: uppercase;
}

tab {
  display: flex;
  flex-shrink: 1;
  flex-direction: row;
  justify-content: end;
  transition: var(--mediumTransition);
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom-width: 0px;
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  padding: var(--halfGap) var(--defaultGap);
}

tab span {
  padding-left: 6px;
  font-size: 0.7em;
}

/* fresh dot — a tiny red marker riding at the top of the tab label (superscript), shown when the tab
   holds fully-fresh items. align-self pins it to the top of the flex row so it hugs the name instead
   of floating in the corner of a borderless, unselected tab. */
tab.freshdot::after {
  display: block;
  position: absolute;
  align-self: flex-start;
  justify-self: flex-start;
  transform: translate(8px, 0);
  border-radius: 50%;
  background-color: hsl(var(--alertHSL));
  width: 6px;
  height: 6px;
  content: "";
}

tab.on {
  backdrop-filter: var(--glassBackdropFilter);
  border: var(--glassBorder);
  border-bottom-width: 0px;
  background-image: var(--glassBackgroundImage);
  background-color: var(--glassBackgroundColor);
  color: hsl(var(--appForegroundHSL));
}

tabcontent {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--halfGap);
  box-sizing: border-box;
  padding: var(--defaultGap) calc(0.75 * var(--defaultGap)) var(--footerHeight);
  width: calc(100% + calc(1.5 * var(--defaultGap)));
  overflow-x: visible;
  overflow-y: scroll;
}

tabcontent::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: auto;
}

tabcontent.empty message {
  margin-top: var(--defaultGap);
}

tabcontent.empty gamelinks {
  display: none;
}

tabcontent gamelinks {
  flex: 1;
}

tabcontent.archived gamelinks item {
  filter: grayscale();
}

/* tabcontent.archived gamelinks item:hover {
  filter: grayscale(0);
} */

conditional {
  display: flex;
  flex-direction: column;
  width: 100%;
}

authcta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 70%;
}

authcta p {
  max-width: calc(2.5 * var(--cardSize));
  color: hsl(var(--appForegroundHSL));
  font-size: 1.3em;
  line-height: 150%;
  text-align: center;
}

authcta a,
authcta a:hover,
authcta a:focus,
authcta a:visited,
authcta a:active {
  padding: 0px;
  font-size: 1.3em;
}

callout,
select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: var(--mediumTransition) ease-in-out all;
  background: hsla(var(--appBackgroundHSL), 1);
  padding: var(--halfGap) var(--defaultGap);
  width: 100%;
  max-width: calc(2 * var(--cardSize) + (4 * var(--defaultGap)));
  text-align: center;
}

select {
  outline: none;
  border: none;
  background: hsla(var(--appBackgroundHSL), 1);
  color: hsl(var(--appForegroundHSL));
  font-family: var(--wordFont);
  -webkit-tap-highlight-color: transparent;
  appearance: unset;
  border-radius: var(--borderRadius);
  -webkit-appearance: unset;
}

row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--halfGap);
  backdrop-filter: var(--glassBackdropFilter);
  transition:
    var(--mediumTransition) ease-in-out border-color,
    background-color;
  transition-property: background-color, border-color;
  margin: 0px;
  border: var(--glassBorder);
  border-radius: var(--borderRadius);
  background-image: var(--glassBackgroundImage);
  background-color: var(--glassBackgroundColor);
  padding: 5px 0px;
  width: calc(100%);
}

row.clear {
  border: none;
  background: none;
}

row.stacked {
  backdrop-filter: none;
  margin-top: var(--defaultGap);
}

row.stacked button {
  flex-direction: column;
  gap: 4px;
  backdrop-filter: none;
  border: none;
  background: none;
  padding: calc(0.32 * var(--defaultGap));
  color: hsl(var(--appBackgroundLightestHSL));
  font-size: 0.9em;
}

row.stacked button span {
  display: none;
}

row message,
row callout,
leftright callout,
row p {
  border-radius: var(--borderRadius);
  width: calc(1 * var(--cardSize));
  text-align: left;
}

row p {
  flex: 1;
  padding-left: var(--defaultGap);
}

row callout,
row select {
  flex: 2;
  margin: 0 5px 0 0;
  border-radius: var(--borderRadius) calc(0.5 * var(--borderRadius)) calc(0.5 * var(--borderRadius)) var(--borderRadius);
  padding: calc(0.3 * var(--defaultGap)) var(--halfGap);
  width: unset;
}

leftright callout {
  margin: 0;
  border-radius: var(--borderRadius);
  padding: calc(0.3 * var(--defaultGap)) var(--halfGap);
  width: 100%;
}

row callout input,
leftright callout input {
  text-align: left;
}

colors {
  display: flex;
  justify-content: space-evenly;
  gap: calc(0.25 * var(--defaultGap));
  padding: 4px 0;
  width: 100%;
}

color {
  display: block;
  transition: var(--mediumTransition) ease-in-out;
  cursor: pointer;
  border: 1px solid hsla(var(--appBackgroundDarkestHSL), 1);
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

color.selected {
  border-color: hsl(var(--appForegroundHSL));
}

greeting {
  display: flex;
  flex-direction: column;
  align-content: end;
  justify-content: center;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0;
  color: hsl(var(--messageColorHSL));
  font-size: 1.3em;
  line-height: 140%;
}

greeting small {
  color: hsl(var(--appForegroundDiminishedHSL));
  font-size: 80%;
}

toast {
  display: flex;
  position: fixed;
  top: 0;
  justify-content: center;
  gap: var(--halfGap);
  transform: translateY(-100%);
  z-index: 10001;
  transition: var(--mediumTransition);
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  background-image: var(--glassBackgroundImageStrong);
  background-color: hsla(var(--messageColorHSL), 1);
  padding: var(--defaultGap);
  width: 80%;
  max-width: calc(2 * var(--cardSize) + 0.5 * var(--defaultGap));
  touch-action: none;
  color: hsl(var(--appBackgroundDarkestHSL));
  font-size: 0.9em;
  line-height: 130%;
}

toast icon.medium {
  flex-shrink: 0;
  background-color: hsl(var(--appBackgroundDarkestHSL));
  width: 24px;
  height: 24px;
}

toast.open {
  transform: translateY(0);
  box-shadow: var(--statShadow);
}

toast.dragging {
  transition: none;
}

toast small {
  display: block;
  padding-top: var(--halfGap);
  font-size: 90%;
  line-height: 130%;
}

toast small icon {
  display: inline-block;
  transform: translateY(4px);
  background: hsl(var(--appBackgroundDarkestHSL));
}

/*#endregion  */

/*#region tips */

.disabled.pointoutparent {
  opacity: 1;
}

hint.pointout,
rotators.pointoutparent button icon,
button#shareButton.pointout,
spot.pointout,
spot.pointadjacent,
hints hint.pointoutparent {
  animation: var(--pointoutAnimation);
}

.creating hints hint input.pointout,
.creating hints hint input.pointout::placeholder {
  margin-top: -2px;
  padding-bottom: 66px;
  color: hsl(var(--tipColorHSL));
  font-size: 1.13em;
}

word.pointout {
  animation: var(--pointoutAnimation);
  color: hsl(var(--tipColorHSL));
}

tray spot.pointout,
tray spot.pointadjacent {
  outline: 1px solid hsl(var(--tipColorHSL));
  background: hsla(var(--appBackgroundDarkestHSL), 0.2);
}

button#shareButton.pointout span {
  opacity: 1;
}

tray spot.pointout rotators button icon {
  animation: var(--pointoutAnimation);
  background: hsl(var(--linkColorLightHSL));
}

parking spot.pointout {
  animation: pointout 2s var(--transitionEase) 0s infinite;
}

.mobile parking spot.pointout:nth-of-type(1) {
  animation-delay: 0s;
}

.mobile parking spot.pointout:nth-of-type(2) {
  animation-delay: 0.5s;
}

.mobile parking spot.pointout:nth-of-type(3) {
  animation-delay: 1s;
}

.mobile parking spot.pointout:nth-of-type(4) {
  animation-delay: 1.5s;
}

arrow {
  position: absolute;
  transform: translate(-10px, 2px);
  transform-origin: 50% 50%;
  rotate: 180deg;
  z-index: 199;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transition: var(--mediumTransition) ease-in-out;
  transition-property: margin, rotate, opacity, left, transform, top;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  background: hsl(var(--tipColorHSL));
  width: 18px;
  height: 12px;
}

arrow.top {
  transform: translate(10px, -14px);
  rotate: 0deg;
}

hintcard {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  margin-bottom: var(--defaultGap);
  border: none;
  width: 100%;
  pointer-events: none;
  font-size: 90%;
}

hintcard card {
  border: none;
  background: none;
  color: hsl(var(--appForegroundHSL));
}

pointer {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  z-index: 199;
  transition: var(--mediumTransition) ease-in-out;
  transition-property: left, top;
  margin-right: var(--defaultGap);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  background: hsl(var(--tipColorHSL));
  width: 100%;
  max-width: calc(2 * var(--cardSize) + 0.5 * var(--defaultGap));
  min-height: 100px;
  color: hsl(var(--appBackgroundDarkestHSL));
  font-size: 14px;
  font-family: Arial, sans-serif;
  white-space: nowrap;
}

pointer p {
  mix-blend-mode: luminosity;
  padding: var(--halfGap) calc(0.75 * var(--defaultGap)) 0;
  width: calc(100% - 2 * 0.75 * var(--defaultGap));
  font-size: 16px;
  font-family: var(--wordFont);
  text-align: left;
  text-wrap: wrap;
}

pointer p.controls {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(0.75 * var(--defaultGap));
  font-size: 13px;
  text-align: right;
}

pointer p.controls button {
  display: inline-block;
  backdrop-filter: none;
  border: none;
  border-radius: 0px;
  background: none;
  padding: var(--halfGap) 0;
  width: auto;
  font-family: var(--wordFont);
  text-align: left;
  white-space: nowrap;
}

pointer p.controls button,
pointer p.controls button:hover,
pointer p.controls button:focus,
pointer p.controls button:visited,
pointer p.controls button:active {
  mix-blend-mode: luminosity;
  color: hsl(0, 20%, 40%);
}

pointer p.controls button.right {
  text-align: right;
  text-transform: uppercase;
}

pointer p.controls button:hover {
  color: hsl(0, 10%, 30%);
}

pointer p.controls seekers {
  display: flex;
  justify-content: end;
  gap: var(--halfGap);
  width: 100%;
}

pointer p.controls seekers a {
  width: auto;
}

/*#endregion*/

/*#region modal */

modal {
  display: flex;
  position: absolute;
  top: 0;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: var(--defaultGap);
  transform: translateY(100vh);
  opacity: 1;
  z-index: 500;
  transition:
    400ms cubic-bezier(0.4, 0, 0.6, 1) transform,
    opacity;
  background-image: var(--ultimateBackgroundImage);
  background-position: center center;
  background-size: cover, cover, var(--textureSize);
  background-repeat: no-repeat, no-repeat, repeat;
  background-color: hsl(var(--appBackgroundDarkestHSL));
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  pointer-events: none;
}

modal.show {
  transform: translateY(0px);
  transition:
    400ms cubic-bezier(0.165, 0.84, 0.44, 1) transform,
    opacity;
  pointer-events: all;
}

modal.centered {
  gap: calc(4 * var(--defaultGap));
  background-image: var(--textureSourceAlt);
  font-size: 100%;
}

modal.disabled {
  opacity: 0;
}

modal section,
modal confirmation {
  display: flex;
  position: fixed;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: var(--defaultGap);
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

modal section {
  gap: var(--halfGap);
  padding: 0 calc(100% - (100% - 600px) / 2);
  width: 600px;
}

modal section.clean {
  gap: 0px;
  padding-bottom: var(--footerHeight);
}

modal section.clean footerspace {
  display: none;
}

modal.centered section,
modal.centered confirmation {
  justify-content: center;
  gap: 0px;
  margin-bottom: var(--cardSize);
}

modal hider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--halfGap);
}

modal section footerspace {
  display: block;
  width: 100%;
  min-height: calc(var(--footerHeight) + (var(--defaultGap) + env(safe-area-inset-bottom)));
}

modal controls {
  position: fixed;
  bottom: 0px;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: var(--halfGap);
  will-change: filter;
  box-sizing: border-box;
  box-shadow: 0px -5px 7px hsla(var(--appBackgroundDarkestHSL), 0.5);
  border-top: 1px solid hsla(var(--appBackgroundLighterHSL), 1);
  background-color: hsla(var(--appBackgroundHSL), 0.9);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  height: var(--footerHeight);
}

modal controls button {
  backdrop-filter: none;
  box-sizing: border-box;
  border: none;
  background: none;
  padding: var(--halfGap);
  max-width: 130px;
  color: hsl(var(--linkColorLightHSL));
  font-size: 140%;
  font-family: var(--themeFont);
}

modal message {
  margin-bottom: var(--defaultGap);
}

modal section message {
  margin-top: 0;
  color: hsl(var(--messageColorHSL));
}

modal section message greeting {
  color: hsl(var(--appForegroundHSL));
  font-size: 0.8em;
}

modal credit {
  text-align: center;
}

modal instructions {
  margin-top: var(--defaultGap);
  width: 100%;
  max-width: calc(100% - 2 * var(--defaultGap));
  color: hsl(var(--appForegroundDiminishedHSL));
  line-height: 150%;
}

modal small,
modal legal {
  display: block;
  transition: var(--mediumTransition) ease-in-out;
  transition-property: opacity, color, background-color;
  margin-bottom: calc(0.75 * var(--defaultGap));
  width: 100%;
  max-width: calc(100% - 2 * var(--defaultGap));
  color: hsl(var(--appForegroundDiminishedHSL));
  font-size: 0.7em;
  line-height: 120%;
  font-family: var(--wordFont);
}

modal legal {
  position: absolute;
  bottom: calc(var(--footerHeight) + (2 * var(--defaultGap)));
  width: 80%;
  max-width: calc(2.5 * var(--cardSize));
  line-height: 150%;
  text-align: center;
}

modal section leftright a,
modal section leftright button {
  width: 100%;
  color: hsl(var(--appForegroundHSL));
}

modal section highlight leftright button {
  width: auto;
}

modal section highlight button {
  padding: calc(0.3 * var(--defaultGap)) var(--halfGap);
  color: hsl(var(--linkColorLightHSL));
  font-size: 1em;
}

modal section highlight button icon {
  background-color: hsl(var(--linkColorLightHSL));
}

modal callout,
modal select {
  border: 1px solid hsla(var(--appBackgroundLighterHSL), 0.5);
}

modal select option {
  color: unset;
}

modal input {
  outline: none;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  color: hsl(var(--appForegroundHSL));
  font-size: 100%;
  line-height: 120%;
  font-family: var(--wordFont);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

modal input.large {
  font-size: 120%;
}

modal input::placeholder {
  color: hsl(var(--appBackgroundLightestHSL));
}

modal img {
  margin: var(--defaultGap) 0;
  width: 100%;
  max-width: calc(2.5 * var(--cardSize));
  user-select: none;
  -webkit-user-select: none;
}

.guessing.reviewing modal cards,
.guessing modal cards,
modal cards {
  background: none;
}

modal.disabled cards {
  pointer-events: none;
}

modal cards {
  transition: 0 linear all;
  transition-delay: 150ms;
  height: auto;
  pointer-events: all;
}

modal cards card {
  background: hsla(255, 100%, 100%, 0.2);
}

modal cards card.intray {
  opacity: 0.5;
}

modal icon.spinner {
  margin: var(--defaultGap) 0;
}

/* specificity counter (0-1-3) to beat modal icon.spinner (0-1-2) which would otherwise override button icon.spinner's margin:0 */
modal button icon.spinner {
  position: relative;
  margin: 0;
}

modal::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: auto;
}

/*#endregion  */

/*#region notification  */

notification {
  display: flex;
  position: fixed;
  top: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(2 * var(--defaultGap));
  opacity: 0;
  z-index: 2001;
  backdrop-filter: blur(10px);
  transition: var(--mediumTransition) ease-in-out opacity;
  will-change: filter;
  box-sizing: border-box;
  background: hsla(var(--appBackgroundDarkestHSL), 0.4);
  padding: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

notification.show {
  opacity: 1;
  pointer-events: all;
}

notification.meta {
  justify-content: center;
  gap: calc(0.75 * var(--defaultGap));
  transform: translateY(100vh);
  opacity: 1;
  z-index: 300;
  transition:
    400ms cubic-bezier(0.4, 0, 0.6, 1) transform,
    opacity;
  background-image: var(--ultimateBackgroundImage);
  background-position: center center;
  background-size: cover, cover, var(--textureSize);
  background-repeat: no-repeat, no-repeat, repeat;
  background-color: hsl(var(--appBackgroundDarkestHSL));
  overflow: auto;
  pointer-events: none;
}

notification.meta.show {
  transform: translateY(0px);
  opacity: 1;
  transition:
    400ms cubic-bezier(0.165, 0.84, 0.44, 1) transform,
    opacity;
  pointer-events: all;
}

notification.meta p {
  color: hsl(var(--messageColorHSL));
}

notification.meta row {
  gap: calc(0.25 * var(--defaultGap));
  border: none;
  background: none;
  padding: 0;
  max-width: calc(2 * var(--cardSize));
}

notification.meta authcta p {
  max-width: calc(2.5 * var(--cardSize));
  color: hsl(var(--appForegroundHSL));
  font-size: 1.3em;
  line-height: 150%;
  text-align: center;
}

notification section {
  display: flex;
  flex-basis: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(0.25 * var(--defaultGap));
  padding-bottom: var(--defaultGap);
  width: 80%;
  color: hsla(var(--linkColorDarkHSL), 1);
}

notification row {
  width: 100%;
}

notification header {
  flex: unset;
  flex-direction: column;
  gap: 0px;
  margin-bottom: calc(2 * var(--defaultGap));
}

notification header flogo {
  background-size: contain;
  width: calc(2 * var(--massiveIconSize));
  height: var(--massiveIconSize);
}

notification h2,
notification p {
  margin: 10px 0 0 0;
  padding: 0;
  color: hsl(var(--appForegroundHSL));
  line-height: 1.4em;
  text-align: center;
}

notification p {
  margin: 0;
}

notification message {
  flex-basis: auto;
}

notification message > p {
  margin-bottom: var(--defaultGap);
}

notification message input {
  outline: none;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  line-height: 120%;
  -webkit-tap-highlight-color: transparent;
  color: hsl(var(--appForegroundHSL));
  font-size: 110%;
  font-family: var(--wordFont);
  text-align: left;
}

notification message input:-internal-autofill-selected {
  font-size: 100%;
}

notification message input:-webkit-autofill,
notification message input:-webkit-autofill:hover,
notification message input:-webkit-autofill:focus,
notification message input:-webkit-autofill:active {
  transition: all 5000s;
  -webkit-transition-delay: 99999s;
  -webkit-background-clip: text;
  appearance: none;
  outline: none !important;
  border: none !important;
  background: none !important;
  -webkit-text-fill-color: hsl(var(--hueGuessing), 100%, 70%) !important;
  color: hsl(var(--hueGuessing), 100%, 70%) !important;
}

notification message input::placeholder {
  color: hsl(var(--appBackgroundLightestHSL));
}

notification message shareText + small {
  display: block;
  color: hsl(var(--messageColorHSL));
}

notification message name {
  display: flex;
  justify-content: center;
}

notification message name icon {
  margin: 0 4px 0 16px;
}

notification message subtitle {
  display: block;
  padding-bottom: 0;
  color: hsl(var(--appForegroundDiminishedHSL));
  font-size: 0.8em;
  text-transform: capitalize;
}

notification message.interactive {
  gap: var(--defaultGap);
  border-color: hsl(var(--appBackgroundLightestHSL));
  border-radius: calc(2 * var(--borderRadius));
}

notification message.interactive header {
  white-space: unset;
}

notification message.interactive header small {
  color: hsl(var(--appForegroundDiminishedHSL));
}

notification message.interactive subtitle {
  color: hsl(var(--appBackgroundLightestHSL));
  font-size: 110%;
}

notification message.interactive icon.btg {
  mask-image: url(/images/big_tent_logo.svg);
  -webkit-mask-image: url(/images/big_tent_logo.svg);
  mask-size: contain;
}

notification.show message.interactive {
  pointer-events: all;
}

notification message.highlighted {
  box-shadow:
    0px 0px 4px hsl(var(--messageColorHSL)),
    inset 0px 0px 4px hsl(var(--highlightColorHSL)),
    0px 0px 15px hsl(var(--messageColorHSL)),
    inset 0px 0px 20px hsl(var(--messageColorHSL));
  border-color: hsl(var(--highlightColorHSL));
}

/*#endregion  */

/*#region lists of items */
friendlinks,
gamelinks {
  display: flex;
  flex-direction: column;
  gap: var(--halfGap);
  counter-reset: recent-game-counter;
  margin-bottom: calc(1.5 * var(--defaultGap));
  width: 100%;
}

item {
  display: flex;
  flex-direction: column;
  gap: var(--halfGap);
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: var(--glassBackdropFilter);
  cursor: pointer;
  border: var(--glassBorder);
  border-radius: var(--borderRadius);
  background-image: var(--glassBackgroundImage);
  background-color: var(--glassBackgroundColor);
  padding: var(--halfGap) var(--threeQuarterGap);
}

gamelinks item {
  transition: var(--shortTransition);
}

friendlinks item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0 var(--halfGap) 0 0;
}

friendlinks.pending item {
  padding-left: var(--threeQuarterGap);
}

item p {
  padding-top: 4px;
}

item p text {
  flex: 1;
  overflow: hidden;
  color: hsl(var(--linkColorLightHSL));
  text-align: left;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

item p text small {
  max-width: unset;
  overflow: visible;
  font-style: italic;
}

friendlinks.clear,
gamelinks.clear {
  gap: 0px;
}
.clear item {
  gap: 0px;
  backdrop-filter: none;
  border-width: 0px 0px 1px 0px;
  border-radius: 0px;
  background: none;
  padding: var(--threeQuarterGap) 0px;
}
.clear item:last-of-type {
  border-width: 0px;
}

.clear item p {
  line-height: 110%;
}

.clear item p.nickname small {
  display: inline;
  position: absolute;
  transform: translateY(calc(100% + 6px));
  color: hsl(var(--appBackgroundLightestHSL));
  font-size: 0.7em;
  text-transform: uppercase;
}

friendlinks item input {
  font-size: 110%;
  text-align: left;
}

gamelinks item button {
  padding: 0 0 0 var(--halfGap);
}

friendlinks item p text,
gamelinks item p text {
  mask-image: linear-gradient(-90deg, transparent var(--halfGap), red var(--defaultGap));
  padding: 0;
}

friendlinks item p {
  flex: 1;
  min-width: 0;
}

friendlinks item.sent {
  color: hsl(var(--appForegroundDiminishedHSL));
}

friendlinks item.sent p {
  font-style: italic;
}

friendlinks item p span {
  display: inline-flex;
  justify-content: start;
  align-items: baseline;
  margin-right: 4px;
  color: hsl(var(--appBackgroundLightestHSL));
  font-size: 0.8em;
  line-height: 100%;
}

friendlinks item.sent p span,
checkbox.sent p span {
  color: hsl(var(--messageColorHSL));
  font-style: normal;
}

checkbox.sent p {
  color: hsl(var(--appForegroundDiminishedHSL));
}

checkbox.sent p span {
  font-size: 0.8em;
}

friendlinks.clear item p > span > icon {
  display: inline-block;
  transform: translate(2px, 6px);
}

item p span {
  line-height: 100%;
}

friendlinks item button {
  flex-shrink: 0;
  backdrop-filter: none;
  box-sizing: border-box;
  border: none;
  background: none;
  padding: var(--halfGap);
  width: auto;
}

friendlinks item button icon.check {
  background-color: green;
}

friendlinks item button icon.nope {
  background-color: red;
}

gamelinks p {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  width: 100%;
  font-size: 1.2em;
}

gamelinks p a,
gamelinks p a:hover {
  display: block;
  flex: 1;
  gap: 0px;
  transition: var(--shortTransition) ease-in-out scale;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--borderRadius);
  padding: 0px;
  overflow: hidden;
  color: hsl(var(--linkColorLightHSL));
  user-select: none;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

gamelinks item p > icon:first-of-type {
  /* position: absolute; */
  transform: translate(calc(-0.2 * 100%), calc(-0.5 * 100%));
}

gamelinks item p a small span {
  display: block;
  margin-top: var(--halfGap);
  color: hsl(var(--appForegroundHSL));
}
/* 
gamelinks item.awaiting_solution {
  filter: grayscale(0.6);
  border-color: hsla(var(--hueYay), 100%, 16%, 1);
  background-color: hsla(var(--hueYay), 100%, 12%, calc(var(--dm) * 0.2));
}

gamelinks item.awaiting_solution p text {
  color: hsla(var(--hueYay), 100%, 78%, 1);
}

gamelinks item.awaiting_solution p a > span {
  color: hsla(var(--hueYay), 100%, 28%, 1);
  text-decoration: line-through;
}

gamelinks item.awaiting_solution.yay {
  filter: none;
  border-color: hsla(var(--hueYay), 100%, 16%, 1);
  background-color: hsla(var(--hueYay), 100%, 12%, calc(var(--dm) * 0.5));
}

gamelinks item.awaiting_solution.yay p a > span {
  color: hsla(var(--hueYay), 100%, 58%, 1);
  font-style: normal;
  text-decoration: none;
} */

gamelinks item.deleted {
  text-decoration: line-through;
}

gamelinks item.awaiting_review p a {
  color: hsl(var(--appForegroundDiminishedHSL));
}

gamelinks item.guess {
  border-color: hsla(var(--hueGuessing), 100%, 16%, 1);
  background-color: hsla(var(--hueGuessing), 100%, 12%, calc(var(--dm) * 0.5));
}

gamelinks item.guess p a {
  color: hsla(var(--hueNope), 100%, 58%, 1);
}

/* "fresh" — an unseen inbox entry, or a creation with new (unseen) reactions. A steady amber glow
   (the --messageColorHSL "new" color) + border draws the eye. Placed after the status rules so the
   fresh edge wins the border cascade; the status tint still shows through the background. */
gamelinks item.fresh {
  /* box-shadow: 0 0 4px hsla(var(--messageColorHSL), 0.3); */
  border-color: hsla(var(--messageColorHSL), calc(var(--lm) * 0.6));
}

/* "completely fresh" (INBOX only) — a brand-new entry the player hasn't been shown yet pulses a
   couple of times to announce itself, then the finite animation ends and it rests on the steady
   .fresh glow above (the keyframe endpoints match that glow, so it settles seamlessly). Creations
   don't use this — they have no two-step path. */
gamelinks item.fresh.completelyfresh {
  animation: freshpulse 7s var(--transitionEase) 2;
}

@keyframes freshpulse {
  0%,
  100% {
    box-shadow: 0 0 0px hsla(var(--messageColorHSL), 0);
  }
  33%,
  66% {
    box-shadow: 0 0 6px hsla(var(--messageColorHSL), 0.25);
  }
  16.5%,
  50%,
  82.5% {
    box-shadow: 0 0 12px hsla(var(--messageColorHSL), 0.5);
  }
}
/* respect reduced-motion: keep the static glow, drop the pulse */
@media (prefers-reduced-motion: reduce) {
  gamelinks item.fresh.completelyfresh {
    animation: none;
  }
}

reactions {
  font-style: normal;
}

/* a specific reaction emoji pulses like a heartbeat while its reaction is fresh (IsReactionWiggling):
   it dips in scale twice per beat (the 72%->100% hold is the rest between beats) and runs a few beats,
   then stops. will-change keeps it on its own compositor layer so the pulse doesn't make the glass
   item's backdrop-filter re-rasterize (and soften) the sibling text/emoji. inline-block lets the
   transform apply (reactions is otherwise inline). */
reactions.wiggle {
  display: inline-block;
  animation: reactionwiggle 1.25s ease-in-out 6;
  will-change: transform;
}

@keyframes reactionwiggle {
  0% {
  }
  18% {
    scale: 0.8;
  }
  50% {
    scale: 1;
  }
  54% {
    scale: 0.8;
  }
  72%,
  100% {
  }
}

@media (prefers-reduced-motion: reduce) {
  reactions.wiggle {
    animation: none;
  }
}

gamelinks p button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  z-index: 100;
  backdrop-filter: none;
  transition: none;
  box-sizing: border-box;
  border: none;
  background: none;
  background-image: none;
  padding: 0 0 0 var(--defaultGap);
  width: calc(3 * var(--defaultGap) - 5px);
  height: calc(2.5 * var(--defaultGap) - 5px);
  color: hsl(var(--appForegroundDiminishedHSL));
  font-size: 0.5em;
  font-family: var(--wordFont);
  text-transform: uppercase;
  white-space: nowrap;
}

gamelinks p button icon {
  display: block;
  opacity: 1;
  transition: none;
  background-color: hsla(var(--appForegroundDiminishedHSL), 1);
}

/* gamelinks item:hover p button.delete icon {
  display: none;
}

gamelinks item p button.delete icon.trash {
  display: none;
}

gamelinks item:hover p button.delete icon.trash {
  display: block;
} */

gamelinks item:hover p button icon {
  opacity: 1;
  background-color: hsla(var(--appForegroundHSL), 1);
}

gamelinks item.done p button icon {
  opacity: 1;
  transition: var(--shortTransition) ease-in-out background-color;
  background-color: hsl(var(--linkColorLightHSL));
}

gamelinks item.done p button icon.alertbackground {
  background-color: hsl(var(--alertHSL));
}

gamelinks item:hover p button {
  color: hsl(var(--appForegroundHSL));
}

gamelinks item p icon.check,
gamelinks item p icon.cancel,
gamelinks item p icon.eye,
gamelinks item p icon.inprogress,
gamelinks item p icon.new,
gamelinks item p icon.question {
  position: absolute;
  transform: translate(-102%, -56%);
}

gamelinks item p icon.new {
  background-color: hsl(var(--messageColorHSL));
}

gamelinks item p icon.check {
  background-color: hsla(var(--hueYay), 100%, calc(var(--lm) * 56%), 1);
}
gamelinks item p icon.cancel {
  background-color: hsla(var(--alertHSL), 1);
}

modal gamelinks small {
  margin-bottom: 2px;
  text-align: left;
}

modal gamelinks small span {
  font-style: normal;
}

modal gamelinks a small {
  font-size: 0.7em;
}

/* vue transition-group hooks: dynamic list items animate in, out, and on reorder so list state never changes invisibly */
item.listitem-enter-from {
  transform: translateY(calc(-1 * var(--halfGap)));
  opacity: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  max-height: 0px;
}

item.listitem-enter-active,
item.listitem-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    max-height 0.3s ease,
    padding 0.3s ease;
  max-height: 200px;
  overflow: hidden;
}

item.listitem-leave-to {
  transform: translateX(calc(2 * var(--defaultGap)));
  opacity: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  max-height: 0px;
}

item.listitem-move {
  transition: transform 0.35s ease;
}

/*#endregion lists of items */

/*#region Reaction Picker  */
reactionpicker {
  position: fixed;
  z-index: 600;
  inset: 0;
  pointer-events: none;
}

reactionpicker.show {
  pointer-events: all;
}

reactionpicker section {
  display: grid;
  position: fixed;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--defaultGap) * 0.25);
  transform: translate(calc(-50% + -3 * var(--defaultGap)), calc(-0.8 * var(--defaultGap)));
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: opacity 150ms ease;
  will-change: filter;
  box-sizing: border-box;
  border: var(--glassBorder);
  border-radius: calc(var(--borderRadius) * 1.5);
  background-image: var(--glassBackgroundImage);
  background-color: var(--glassBackgroundColor);
  padding: calc(var(--defaultGap) * 0.75);
  width: min(90vw, 260px);
}

reactionpicker.show section {
  opacity: 1;
}

reactionpicker section button {
  backdrop-filter: none;
  transition: transform 100ms ease;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  border-radius: var(--defaultGap);
  background: none;
  background-image: none;
  padding: calc(var(--defaultGap) * 0.4);
  width: auto;
  font-size: clamp(1.4rem, 8vw, 2rem);
  line-height: 1;
}

reactionpicker section button:active {
  transform: scale(0.85);
}

/*#endregion  */

/*#region class modifiers  */

icon.spinner {
  opacity: 0;
  animation: spin 1s steps(10, start) infinite;
  transition-delay: 0ms;
  -webkit-animation: spin 1s steps(10, start) infinite;
  transition: var(--mediumTransition) linear opacity;
  margin: var(--halfGap) 0;
  background-color: hsl(var(--appBackgroundLightestHSL));
}

icon.spinner.show {
  opacity: 1;
}

pointer.hidden,
arrow.hidden,
a.hidden {
  opacity: 0;
  pointer-events: none;
}

.clickable {
  cursor: pointer;
}

.deemphasize {
  opacity: 0.6;
}

.blueText {
  color: hsl(var(--hueCreating), 100%, 68%);
}

.greenText {
  color: hsl(var(--hueGuessing), 80%, 50%);
}

.alertText {
  color: hsl(var(--alertHSL));
}

.highlightText {
  color: hsl(var(--messageColorHSL));
}

.highlightBackground {
  background-color: hsl(var(--messageColorHSL));
}

.alertbackground {
  background-color: hsl(var(--alertHSL));
}

.redText {
  color: hsl(var(--hueReviewing), 100%, 60%);
}

app.portrait {
  justify-content: space-between;
  align-items: center;
}

[v-cloak] {
  opacity: 0;
  transition: 0ms ease-out opacity;
}

.disabled {
  opacity: 0.3;
  pointer-events: none;
}

app.dragging,
.dragging tray,
.dragging card,
.dragging spot,
.dragging rotators button,
.dragging input,
.dragging words,
.dragging word,
.dragging rotators,
.dragging spot.empty card {
  cursor: grabbing;
}

/*#endregion  */

/*#region wrapper */

wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  gap: var(--defaultGap);
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1124px;
}

wrapper button {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--defaultGap) / 4);
  transition-property: color, background-color, opacity, border-color;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: var(--borderRadius);
  background: none;
  padding: calc(0.75 * var(--defaultGap)) var(--defaultGap);
  color: hsl(var(--linkColorLightHSL));
  font-family: var(--themeFont);
  -webkit-tap-highlight-color: transparent;
  transition: var(--shortTransition) ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  backdrop-filter: none;
}

/* the re-roll ("New") action reads as a neutral utility, not a primary link */
#shareButton.newpuzzle {
  color: hsl(var(--appForegroundHSL));
}

/* header wrapper */
wrapper controls {
  justify-content: center;
}

wrapper controls button {
  background: none;
  width: 150px;
  height: 100%;
  font-size: 145%;
}

wrapper controls:first-of-type button {
  justify-content: start;
}

wrapper:first-of-type {
  justify-content: space-between;
  align-items: center;
  gap: calc(2.5 * var(--defaultGap));
  padding: var(--halfGap) 0 0;
  max-width: calc(1124px - 7 * var(--defaultGap));
  min-height: unset;
}

wrapper:first-of-type controls {
  flex: 1;
  justify-content: start;
  padding: 0;
}

wrapper:first-of-type controls:first-of-type button {
  backdrop-filter: var(--glassBackdropFilter);
  box-sizing: border-box;
  border: var(--glassBorder);
  background-image: var(--glassBackgroundImage);
  background-color: var(--glassBackgroundColor);
  padding: var(--halfGap) calc(1 * var(--defaultGap));
  width: unset;
  height: unset;
  color: hsl(var(--appForegroundHSL));
  font-size: 90%;
  font-family: var(--wordFont);
}

wrapper:first-of-type controls button {
  padding: 0;
  height: 100%;
}

wrapper:first-of-type controls:last-of-type {
  justify-content: end;
}

/* tray wrapper */
wrapper.main {
  justify-content: center;
  align-items: center;
  padding: var(--defaultGap);
  width: calc(100% - 2 * var(--defaultGap));
}

wrapper.main > rotators {
  width: calc(3.25 * var(--cardSize));
}

wrapper > rotators {
  transform: translateY(calc(-1.35 * var(--cardSize)));
}

wrapper > rotators button {
  width: auto;
}

rotators,
tray,
hints {
  display: flex;
  justify-content: center;
  gap: var(--defaultGap);
}

rotators {
  position: absolute;
  justify-content: space-between;
  z-index: 100;
  padding: 0;
  width: calc(var(--cardSize) * 2 + (calc(var(--defaultGap) * 10)));
  pointer-events: none;
}

rotators button {
  justify-content: center;
  align-items: center;
  transition: var(--mediumTransition) ease-in-out;
  transition-property: opacity, color;
  background: none;
  padding: calc(1.25 * var(--defaultGap));
  pointer-events: all;
  font-size: 200%;
  line-height: 100%;
}

rotators button icon {
  mask-image: url(/images/icon-rotatearrow.svg);
  -webkit-mask-image: url(/images/icon-rotatearrow.svg);
  mask-size: var(--mediumIconSize) var(--mediumIconSize);
  -webkit-mask-size: var(--mediumIconSize) var(--mediumIconSize);
  background-color: hsl(var(--messageColorHSL));
  padding-top: 12px;
  width: var(--mediumIconSize);
}

rotators button:first-of-type {
  transform: scaleX(-1);
}

rotators button:last-of-type {
  display: block;
}

parking rotators button:last-of-type,
cards rotators button:last-of-type {
  display: flex;
}

rotators button:hover {
  color: white;
}

ghost {
  display: block;
  position: fixed;
  transform-origin: 50% 50%;
  z-index: 200;
  width: var(--cardSize);
  height: var(--cardSize);
  -webkit-transform-origin: 50% 50%;
  top: calc(-0.5 * var(--cardSize));
  left: calc(-0.5 * var(--cardSize));
  pointer-events: none;
}

ghost card,
ghost card.empty,
ghost card.show.empty {
  opacity: 0;
  transition: 0ms ease-in 0ms opacity;
  border: 1px solid hsla(var(--hueGuessing), 100%, 70%, 0.7);
  background: hsla(var(--appBackgroundDarkestHSL), 0.8);
  pointer-events: none;
}

.creating ghost card {
  border: 1px solid hsla(var(--hueCreating), 100%, 70%, 0.7);
}

.guessing ghost card {
  border: 1px solid hsla(var(--hueGuessing), 100%, 70%, 0.7);
}

.solved ghost card {
  border: 1px solid hsla(var(--hueSolved), 100%, 70%, 0.7);
}

.reviewing ghost card {
  border: 1px solid hsla(var(--hueReviewing), 100%, 70%, 0.7);
}

ghost card.show {
  opacity: 0.9;
  transition: 0ms ease-in 150ms opacity;
}

parking {
  display: flex;
  flex-direction: column;
  gap: var(--defaultGap);
  padding: var(--defaultGap);
}

parking spot {
  opacity: 1;
  outline: 1px solid hsla(var(--hueGuessing), 100%, 70%, 0.7);
  background: hsla(var(--appBackgroundDarkestHSL), 0.8);
}

parking spot.empty {
  opacity: 0.5;
}

.creating parking spot {
  outline: 1px solid hsla(var(--hueCreating), 100%, 70%, 0.7);
}

.guessing parking spot {
  outline: 1px solid hsla(var(--hueGuessing), 100%, 70%, 0.7);
}

.reviewing parking spot {
  outline: 1px solid hsla(var(--hueReviewing), 100%, 70%, 0.7);
}

.solved parking spot {
  outline: 1px solid hsla(var(--hueSolved), 100%, 70%, 0.7);
}

.reviewing parking spot.empty {
  opacity: 1;
}

parking spot.empty {
  outline-style: dashed;
}

tray {
  border-radius: calc(2 * var(--borderRadius));
  min-width: calc(3 * var(--cardSize));
  min-height: calc(3 * var(--cardSize));
}

tray diamond {
  position: absolute;
  z-index: -1;
  mask-repeat: no-repeat;
  background-image: url(/images/diamond.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
}

tray.rotating {
  transition: var(--longTransition) ease-in-out;
  transition-property: transform, rotate;
}

diamond.back {
  opacity: 1;
  mask-image: url(/images/diamond-back.svg);
  -webkit-mask-image: url(/images/diamond-back.svg);
  mask-size: cover;
  -webkit-mask-size: cover;
  background: hsl(var(--trayGuessingBackgroundHSL));
}

.creating diamond.back {
  background: hsl(var(--trayCreatingBackgroundHSL));
}

.guessing diamond.back {
  background: hsl(var(--trayGuessingBackgroundHSL));
}

.reviewing diamond.back {
  background: hsl(var(--trayReviewingBackgroundHSL));
}

.solved diamond.back {
  background: hsla(var(--traySolvedBackgroundHSL));
}

hints {
  position: absolute;
  transform: translateY(60px);
  z-index: -1;
  width: 100%;
  height: 100%;
  font-size: 130%;
}

hints hint {
  display: block;
  position: absolute;
  perspective: var(--cardSize);
  background-size: 256px 256px;
  padding: calc(var(--defaultGap) / 4) calc(var(--defaultGap) / 4) calc(var(--defaultGap));
  width: calc(1.75 * var(--cardSize));
  height: var(--wordHeight);
}

hints hint input {
  outline: none;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  color: hsl(var(--hueGuessing), 100%, 70%);
  line-height: 120%;
  font-family: "ClueFont";
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transform: rotateX(24deg) rotateY(0deg);
  transform-style: preserve-3d;
  font-size: 120%;
  text-shadow: 0px -1px 1px hsla(var(--appBackgroundDarkestHSL), 0.6);
}

.creating hints hint input {
  color: hsla(var(--hueCreating), 100%, 70%, 1);
}

hints hint input::placeholder {
  color: hsla(var(--hueGuessing), 70%, 48%, 1);
  user-select: none;
  -webkit-user-select: none;
}

.creating hints hint input::placeholder {
  color: hsla(var(--hueCreating), 70%, 48%, 1);
}

.guessing hints hint input::placeholder {
  color: hsla(var(--hueGuessing), 70%, 48%, 1);
}

.reviewing hints hint input::placeholder {
  color: hsla(var(--hueReviewing), 70%, 48%, 1);
}

.solved hints hint input::placeholder {
  color: hsla(var(--hueSolved), 70%, 48%, 1);
}

.monocolor.creating hints hint input::placeholder,
.monocolor.guessing hints hint input::placeholder,
.monocolor.reviewing hints hint input::placeholder,
.monocolor.solved hints hint input::placeholder {
  color: hsla(var(--hueGuessing), 70%, 68%, 1);
}

.monocolor.creating hints hint input,
.monocolor.guessing hints hint input,
.monocolor.reviewing hints hint input,
.monocolor.solved hints hint input {
  color: hsla(var(--hueGuessing), 70%, 100%, 1);
}

hints hint input.readonly {
  opacity: 1;
  color: hsl(var(--hueGuessing), 100%, 70%);
}

.creating hints hint input.readonly {
  color: hsl(var(--hueCreating), 100%, 70%);
}

.guessing hints hint input.readonly {
  color: hsl(var(--hueGuessing), 94%, 80%);
}

.reviewing hints hint input.readonly {
  color: hsl(var(--hueReviewing), 94%, 80%);
}

.solved hints hint input.readonly {
  color: hsl(var(--hueSolved), 94%, 80%);
}

hints hint:nth-child(1) {
  transform: translate(0px, calc(-1.825 * var(--wordHeight)));
  rotate: 0deg;
}

hints hint:nth-child(2) {
  transform: translate(calc(var(--cardSize) + (var(--defaultGap) / 8)), calc(-1 * var(--cardSize) + calc(var(--wordHeight) * -1.9)));
  rotate: 90deg;
}

hints hint:nth-child(3) {
  transform: translate(calc(-1 * var(--cardSize) - var(--defaultGap) / 8), calc(-1 * var(--cardSize) + calc(var(--wordHeight) * -1.9)));
  rotate: -90deg;
}

hints hint:nth-child(4) {
  transform: translate(0px, calc(var(--cardSize) * -2.33));
  rotate: 180deg;
}

cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--defaultGap);
  transform: translateY(60px);
  padding: var(--defaultGap);
  width: calc(var(--cardSize) * 2 + var(--defaultGap));
  height: calc(var(--cardSize) * 2 + var(--defaultGap));
}

cards.disabled {
  opacity: 1;
}

spot {
  display: block;
  outline: 1px dotted transparent;
  width: var(--cardSize);
  height: var(--cardSize);
  pointer-events: none;
}

.guessing spot,
.reviewing spot {
  pointer-events: all;
}

spot.empty card {
  cursor: default;
  background: transparent;
}

spot rotators {
  position: absolute;
  opacity: 1;
  z-index: 100;
  margin-top: 0px;
  padding: 0px 0px 0px;
  width: var(--cardSize);
}

.creating spot rotators {
  opacity: 0;
  pointer-events: none;
}

.creating spot rotators button {
  transition: var(--mediumTransition) ease-in-out;
  transition-property: opacity, color;
  pointer-events: none;
}

spot.empty rotators,
spot.empty:hover rotators {
  display: none;
  opacity: 0;
}

spot rotators:last-of-type {
  transform: translateY(calc(0.3 * var(--cardSize)));
  scale: -1;
}

spot rotators button {
  display: flex;
  justify-content: end;
  align-items: start;
  box-sizing: border-box;
  padding: 0px 6px;
  width: calc(0.3 * var(--cardSize));
  height: calc(0.3 * var(--cardSize));
  font-size: 100%;
}

spot rotators button:first-of-type {
  padding-left: 5px;
}

spot rotators button:hover {
  color: black;
}

spot rotators button icon {
  mask-size: var(--extraSmallIconSize) var(--extraSmallIconSize);
  width: var(--extraSmallIconSize);
  height: var(--extraSmallIconSize);
  -webkit-mask-size: var(--extraSmallIconSize) var(--extraSmallIconSize);
  background: hsla(var(--appBackgroundDarkestHSL), 0.2);
}

parking spot rotators button icon {
  scale: var(--scale);
  background: hsla(var(--appForegroundHSL), 0.2);
}

cards spot:hover rotators button icon,
parking spot:hover rotators button icon {
  background: hsl(var(--linkColorLightHSL));
}

card {
  display: block;
  z-index: 100;
  background: transparent;
  background-size: 100% 100%;
  width: var(--cardSize);
  height: var(--cardSize);
  color: hsl(var(--hueGuessing), 100%, 90%);
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  touch-action: none;
}

card.empty {
  background: transparent;
}

card.rotating {
  transition: var(--mediumTransition) ease-in-out all;
}

.guessing card {
  color: hsl(var(--hueGuessing), 100%, 86%);
}

.guessing cards card {
  background: none;
}

.creating card {
  color: hsl(var(--hueCreating), 100%, 86%);
}

.reviewing card {
  color: hsl(var(--hueReviewing), 94%, 90%);
}

.solved card,
.solved.guessing card,
.solved.reviewing card {
  color: hsl(var(--hueSolved), 94%, 90%);
}

cards spot.wrong card {
  background-image: url(/images/icon-quit.svg);
  background-position: center center;
  background-size: 30px;
  background-repeat: no-repeat;
}

.unaided cards spot.wrong card {
  background: none;
}

words {
  display: block;
}

word {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: baseline;
  padding-top: 2px;
  width: var(--cardSize);
  height: calc(var(--cardSize) - 2px);
  overflow: visible;
  font-size: calc(var(--wordScale) * 90%);
  line-height: 100%;
  font-family: var(--wordFont);
  user-select: none;
  text-align: center;
  -webkit-user-select: none;
}

parking word {
  padding-top: 8px;
  height: calc(var(--cardSize) - 8px);
}

cards word {
  text-transform: capitalize;
}

/* Refresh deals a fresh set of words; ease them in instead of letting them blink into place. */
cards.refreshing word {
  animation: wordfadein var(--longTransition) ease-in-out;
}

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

word:nth-child(1) {
  rotate: 0deg;
}

word:nth-child(2) {
  rotate: 90deg;
}

word:nth-child(3) {
  rotate: 180deg;
}

word:nth-child(4) {
  rotate: -90deg;
}

/* portrait parked wrapper */
wrapper.mobile {
  transform-origin: center bottom;
  padding-bottom: calc(2 * var(--defaultGap));
  -webkit-transform-origin: center bottom;
  pointer-events: none;
}

wrapper.mobile parking,
wrapper.mobile button {
  display: flex;
  width: 100%;
  pointer-events: all;
}

.mobile {
  display: none;
}

.mobile parking {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: visible;
}

.portrait wrapper.main {
  height: calc(100% - var(--cardSize));
}

.portrait parking {
  display: none;
}

.portrait wrapper.mobile {
  display: flex;
  gap: 0px;
  transform: unset;
}

.portrait wrapper.mobile.extra {
  scale: 0.85;
  max-height: calc(0.85 * var(--cardSize) + var(--defaultGap));
}

.portrait wrapper.mobile button.scroller {
  display: none;
  position: absolute;
  left: 0;
  align-items: center;
  transform: translateY(calc(-0.13 * var(--cardSize)));
  z-index: 100;
  margin-top: 0;
  border-radius: 0px;
  background: none;
  padding: 0;
  width: 40px;
  height: calc(var(--scale) * var(--cardSize));
}

.portrait wrapper.mobile button.scroller icon {
  background: hsl(var(--messageColorHSL));
}

.portrait wrapper.mobile button.scroller:last-of-type {
  right: 0;
  left: unset;
  justify-content: end;
}

.portrait .mobile parking spot rotators {
  display: none;
}

.portrait .mobile parking spot rotators button {
  width: calc(0.2 * var(--cardSize));
  height: calc(0.2 * var(--cardSize));
}

/*#endregion wrapper  */

/*#region animations */

@keyframes pointout {
  5% {
    transform: rotate(3deg);
  }

  10% {
    transform: translateY(-3px) rotate(0deg);
  }

  15% {
    transform: rotate(-3deg);
  }

  20% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(3deg);
  }

  30% {
    transform: translateY(-3px) rotate(0deg);
  }

  35% {
    transform: rotate(-3deg);
  }

  40%,
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes pointout {
  5% {
    transform: rotate(3deg);
  }

  10% {
    transform: translateY(-3px) rotate(0deg);
  }

  15% {
    transform: rotate(-3deg);
  }

  20% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(3deg);
  }

  30% {
    transform: translateY(-3px) rotate(0deg);
  }

  35% {
    transform: rotate(-3deg);
  }

  40%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 300ms ease-in-out;
}

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

.blink {
  animation: 700ms ease-in-out 0s 0.5 blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/*#endregion  */

@media screen and (max-height: 844px) {
  controls {
    padding-top: 0;
    padding-bottom: 0;
  }

  modal.centered section {
    align-content: center;
    gap: 0px;
    margin-bottom: 0px;
  }

  wrapper controls button {
    height: 100%;
  }

  wrapper message {
    padding: 0px var(--defaultGap) var(--defaultGap);
    height: calc(1 * var(--defaultGap) + 6px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }

  wrapper.mobile.extra,
  .portrait wrapper.mobile.extra {
    scale: 0.6;
  }

  .portrait wrapper.mobile parking {
    transform-origin: center center;
    -webkit-transform-origin: center center;
  }
}

@media screen and (max-height: 719px) {
  .portrait wrapper.mobile parking {
    transform-origin: center center;
    -webkit-transform-origin: center center;
  }
}

@media screen and (max-height: 668px) {
  notification.meta {
    gap: var(--halfGap);
  }
}

@media screen and (max-width: 768px) {
  .mobile parking {
    transform-origin: 50% 50%;
    scale: 0.85;
  }
}

@media screen and (max-width: 678px) {
  :root {
    --tiniestIconSize: 11px;
  }

  html {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    font-size: 1.15em;
  }

  app {
    justify-content: start;
    align-items: start;
    gap: 0px;
  }

  splash message {
    max-width: calc(2 * var(--cardSize) - 3 * var(--defaultGap));
  }

  p {
    padding: 0;
    width: 100%;
    font-size: 110%;
  }

  h3 {
    margin: var(--defaultGap) var(--defaultGap) calc(var(--halfGap));
  }

  button.update {
    font-size: 100%;
  }

  header {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  header icon {
    display: block;
    scale: 0.8;
  }

  section section {
    padding: 0 var(--defaultGap);
    width: calc(100% - var(--defaultGap));
  }

  checkbox {
    font-size: 110%;
  }

  controls {
    padding: 0;
  }

  highlight p {
    font-size: 90%;
  }

  authcta {
    /* font-size: 0.6em; */
  }

  authcta p {
    box-sizing: border-box;
    padding: 0px var(--defaultGap);
  }

  select {
    font-size: 110%;
  }

  callout {
    margin: 0 var(--defaultGap);
    width: calc(100% - (2 * var(--defaultGap)));
    max-width: unset;
    font-size: 110%;
  }

  modal {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin-bottom: 60px;
    font-size: 18px;
  }

  confirmation {
    max-width: 90%;
  }

  modal section {
    gap: var(--halfGap);
    padding: 0 7%;
    width: 86%;
    height: 100%;
  }

  modal small {
    padding: 0px;
    width: 100%;
    font-size: 0.8em;
  }

  modal legal {
    bottom: calc(var(--footerHeight) + (1 * var(--defaultGap)));
  }
  modal legal a {
    display: inline;
    padding: 0px;
  }

  notification.meta {
    gap: var(--halfGap);
  }

  notification message {
    gap: var(--halfGap);
    box-sizing: border-box;
    padding: calc(1.5 * var(--defaultGap));
    width: calc(100% - 2 * var(--defaultGap));
    font-size: 0.9em;
  }

  subtitle {
    font-size: 130%;
  }

  notification message.interactive {
    gap: var(--halfGap);
  }

  gamelinks item {
    font-size: 0.9em;
  }

  gamelinks p button.inline {
    width: calc(3 * var(--defaultGap) - 10px);
    height: calc(2 * var(--defaultGap));
  }

  reactionpicker section {
    transform: translate(calc(-50% + -1 * var(--halfGap)), calc(-1 * var(--defaultGap)));
  }

  icon.info.small {
    padding-bottom: 2px;
  }

  app.portrait {
    padding: 0px;
  }

  wrapper {
    font-size: 110%;
  }

  wrapper controls {
    padding: 0 calc(1 * var(--defaultGap));
  }

  wrapper controls button {
    padding: 0px var(--defaultGap);
    font-size: 125%;
  }

  wrapper message {
    padding-top: var(--defaultGap);
    padding-bottom: 0px;
  }

  wrapper:first-of-type {
    justify-content: space-between;
    align-items: start;
    gap: 0px;
    padding: var(--halfGap) 0px;
    font-size: 85%;
  }

  wrapper:first-of-type controls:first-of-type button {
    border: none;
    background: none;
    padding: 6px calc(1 * var(--defaultGap));
    font-size: 125%;
  }

  wrapper:first-of-type controls button {
    padding: 6px calc(1 * var(--defaultGap));
    min-width: 70px;
  }

  wrapper.main {
    margin-top: var(--defaultGap);
    padding: 0;
    max-height: 400px;
    overflow: visible;
    /* font-size: 1.3em; */
  }

  wrapper.main > rotators {
    scale: 0.7;
    padding: 0px;
    min-width: 540px;
    max-width: 145%;
  }

  ghost card,
  ghost card.empty,
  .guessing ghost card.empty,
  .reviewing ghost card.empty {
    scale: 0.7;
  }

  parking,
  .portrait parking,
  parking spot,
  .portrait parking spot {
    display: none;
    padding: 0px;
  }

  tray {
    scale: 0.7;
  }

  words word {
    font-size: calc(var(--wordScale) * 100%);
  }

  parking words word {
    padding-top: 10px;
    height: calc(var(--cardSize) - 10px);
    font-size: calc(var(--wordScale) * 140%);
  }

  cards words word {
    align-items: start;
    font-size: calc(var(--wordScale) * 100%);
  }

  /* fixed invalid selectors: .mobile.parking → .mobile parking (parking is an element, not a class) */
  wrapper.mobile parking,
  .portrait wrapper.mobile parking {
    display: flex;
    scale: 0.45;
    width: 100%;
  }

  wrapper.mobile parking spot,
  .portrait wrapper.mobile parking spot {
    display: block;
  }

  .portrait wrapper.mobile {
    bottom: 0px;
    padding: 0px;
    font-size: 70%;
  }

  wrapper.mobile.extra,
  .portrait wrapper.mobile.extra {
    scale: 0.825;
  }

  .portrait wrapper.mobile parking spot {
    outline-width: 2px;
  }

  .focuser {
    display: flex;
  }
}

@media screen and (max-width: 375px) {
  pointer {
    max-width: calc(100% - 4 * var(--defaultGap));
  }

  tab {
    padding: var(--halfGap) var(--threeQuarterGap);
  }
}

@media screen and (max-height: 670px) {
  wrapper.subtitle {
    display: none;
  }

  wrapper controls {
    padding-bottom: 0px;
  }

  wrapper.mobile parking,
  .portrait wrapper.mobile parking {
    display: flex;
    transform-origin: center center;
    scale: 0.45;
    -webkit-transform-origin: center center;
  }

  wrapper.mobile.extra,
  .portrait wrapper.mobile.extra {
    transform-origin: center center;
    scale: 0.825;
    -webkit-transform-origin: center center;
  }
}

@media screen and (max-height: 640px) {
  app {
    gap: 0px;
  }

  h2 {
    margin-bottom: var(--defaultGap);
  }

  authcta {
    margin-bottom: var(--defaultGap);
  }

  greeting small,
  notification icon.spinner,
  modal.centered small,
  notification header h1 {
    display: none;
  }

  modal.centered introheader {
    margin-bottom: calc(2 * var(--defaultGap));
  }

  modal.centered h3 {
    margin-bottom: 0px;
  }

  modal.centered authcta,
  modal.centered icon,
  modal.centered footspace {
    display: none;
  }

  notification.meta {
    gap: var(--halfGap);
  }

  notification header {
    flex: unset;
    flex-direction: column;
    gap: 0px;
    margin-bottom: calc(0 * var(--defaultGap));
  }

  item {
    margin: 4px 0px;
  }

  app.portrait {
    justify-content: start;
  }

  wrapper:first-of-type {
    padding-bottom: 0px;
  }

  .portrait wrapper.mobile {
    position: absolute;
  }

  .portrait wrapper.mobile parking {
    transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    margin-bottom: var(--halfGap);
  }
}

@media (prefers-reduced-motion: reduce) {
  item.listitem-enter-active,
  item.listitem-leave-active,
  item.listitem-move {
    transition: none;
  }
}