body { background: #efefef; margin: 0; overflow-x: hidden; }

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  background-color: #eee;
  width: 300px;
  max-width: 80vw;
  height: 100%;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin: 0 auto;
  font-family: 'Patrick Hand', cursive;
  border-radius: 13px;
  color: black;
  user-select: none; 
  cursor: pointer;
}

.flip-card h2 {
  letter-spacing: 0.03rem;
}

.flip-card img {
  border-radius: 6px;
  max-width: 74%;
  max-height: 50%;
}

.flip-card .flip-card-front:before {
  position: absolute;
  top: 13px;
  left: 13px;
  background: #fff;
  backface-visibility: hidden;
}

.flip-card h2,
.flip-card h3,
.flip-card h4,
.flip-card span,
.flip-card img {
  pointer-events: none;
  user-select: none; 
}

.flipped,
.flip-card:first-child,
.done
 { z-index: 900; }

.flip-card:nth-child(2) { z-index: 600; }


/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-inner img,
.flip-card-inner h2,
.flip-card-inner h3,
.flip-card-inner .icon-settings,
.flip-card-inner .icon-word-known-check {
  pointer-events: none;
}

#new-user .flip-card-inner {
  transition: transform 0.8s;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 13px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center; 
  flex-direction: column;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
  padding-top: 2rem;
  box-sizing: border-box;
}

.flip-card .written {
  font-size: 8.4rem;
}

.medium-length-value .written { font-size: 6.4rem; }
.long-value .written { font-size: 4.2rem; }
.really-long-value .written { font-size: 3rem; }

img.solo { max-height: 80%; }
h2 { font-size: 4.2rem; font-weight: 100; margin: 0; }


.roll-in {
	-webkit-animation: roll-in 0.6s ease-out both;
	        animation: roll-in 0.6s ease-out both;
}


@-webkit-keyframes roll-in {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

#ordkort-container {
  width: 300px;
  max-width: 80vw;
  height: 420px;
  max-height: 70vh;
  min-height: 300px;
  position: relative;
  cursor: pointer;
  border-radius: 13px;
  transition: all 1s ease;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.single-or-no-language-in-pile .flag { display: none; }

.flag {
    position: absolute;
    max-height: 20px; 
    margin: 0 auto; 
    bottom: 22px; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
}

.flag-japanese {
  border: 1px solid #ddd;
}

.flag-polish {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

#ordkort-container {
  cursor: default;
  transition: max-height 0.84s ease-in 1s;
  background: repeating-linear-gradient(
  -55deg,
  #e5e5e5,
  #e5e5e5 10px,
  #eee 10px,
  #eee 20px
  );
}

.flip-card { 
  position: absolute;
}




.done {
  animation: roll-out-right 0.54s ease-in both;
  pointer-events: none;
}

@keyframes roll-out-right {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) rotate(540deg);
    opacity: 0.3;
  }
}

.done-up {
  animation: roll-out-up 0.42s ease-in both;
  pointer-events: none;
}

@keyframes roll-out-up {
  30% {
    transform: translateY(-200px) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-500px) rotate(-26deg) translateX(-42px);
  }
  100% {
    transform: translateY(-1300px) rotate(-84deg) translateX(-300px);
    opacity: 0.3;
  }
}






summary { cursor: pointer }


.long-word h2 { font-size: 3.5rem; }
.really-long-word h2 { font-size: 2.6rem; }

#above-the-fold {
  min-height: 100vh; 
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 2s;
}

#maximum-number-of-characters,
#number-of-words {
  -moz-appearance: textfield;
  width: 2.2rem;
  padding: 3px;
  text-align: center;
  border-radius: 4px;
}

  /* Chrome, Safari, Edge, Opera */
#maximum-number-of-characters::-webkit-outer-spin-button,
#maximum-number-of-characters::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#testing {
  padding: 2rem 0;
}

#list-languages,
#list-modes { 
  list-style: none;
  margin: 1rem auto 2rem;
  padding: 0;
}

#list-languages li,
#list-modes li { 
  margin-bottom: 3px;
}

details { margin-bottom: 1.3rem; padding-left: 1rem; }



.style-translation {
  font-size: 3.3rem;
  color: #ccc;
  font-family: caveat-regular;
  font-weight: 100;
  margin: 0;
  letter-spacing: -.2rem;
  text-transform: uppercase;
}


@font-face {
    font-family: 'caveat-regular';
    src: url('/fonts/caveat-regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('/fonts/caveat-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'Patrick Hand';
    src: url('/fonts/patrick-hand/patrick-hand-regular.woff2') format('woff2'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('/fonts/patrick-hand/patrick-hand-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'dinomouse';
    src: url('/fonts/dinomouse/dinomouse.regular.woff2') format('woff2'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('/fonts/dinomouse/dinomouse-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}



#table {
  position: relative;
}


#table > .flip-card {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2000
}


#table[data-lettercase="upper"] {
  text-transform: uppercase;
}

#settings-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 0px);
  width: 100%;
  box-sizing: border-box;
}

/* CLICK AREAS */

#clickarea-bottom-left,
#clickarea-top-left,
#clickarea-top-right {
  width: 70px;
  height: 84px;
  position: absolute;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  z-index: 8000;
  cursor: pointer;
  opacity: 1;
  transition:
    background-size .84s ease 0s,         /* all other transitions run på en gång */
    opacity 360ms ease 0s;  /* opacity fades in with 1s delay */
}

.disabled {
  pointer-events: none;
}


#clickarea-top-left {
  left: -13px;
  top: -13px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 60% 100%, 0% 100%);
}

#clickarea-top-right {
  right: -13px;
  top: -13px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 100%, 0% 60%);
}

#clickarea-bottom-left {
  left: -13px;
  bottom: -13px;
  clip-path: polygon(0% 0%, 40% 0%, 100% 60%, 100% 100%, 0% 100%);
}

#ordkort-container:empty ~ #clickarea-bottom-left,
#ordkort-container:empty ~ #clickarea-top-left,
#table.settingspanel-is-open #clickarea-top-left,
#table.settingspanel-is-open #clickarea-bottom-left {
  display: none;
}

#clickarea-bottom-left:hover:not(.disabled) ~ #ordkort-container .icon-play-audio,
#clickarea-top-left:hover ~ #ordkort-container .icon-word-known-check,
#clickarea-top-right:hover ~ #ordkort-container .icon-settings,
.icon-play-audio.center:hover {
  animation: soft-wiggle 0.54s ease-in-out;
  background-size: 26px 26px;
}


.icon-container {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-size: 24px 24px; /* or tweak as needed */
  background-position: center center;
}

.icon-container.center {
  position: relative;
}

.hide-icons .icon-container {
  opacity: 0;
}


.icon-settings {
  top: 1px;
  right: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M482.7 299.3l-32.6-18.8a195.2 195.2 0 0 0 0-48.9l32.6-18.8c9.6-5.5 14.2-16.9 11-27.5-11.2-37.7-31.2-71.7-57.5-99.6-7.6-8.1-19.8-9.8-29.4-4.3l-32.6 18.8a194.1 194.1 0 0 0 -42.3-24.5V38c0-11.1-7.7-20.8-18.5-23.4-37.6-8.9-77.1-8.9-114.8 0-10.8 2.6-18.5 12.2-18.5 23.4v37.6a194.1 194.1 0 0 0 -42.3 24.5L105.2 81.3c-9.6-5.6-21.8-3.8-29.4 4.3-26.4 27.9-46.3 61.8-57.5 99.6-3.1 10.6 1.5 22 11 27.5l32.6 18.8a195.2 195.2 0 0 0 0 48.9l-32.6 18.8c-9.6 5.5-14.2 16.9-11 27.5 11.2 37.7 31.2 71.7 57.5 99.6 7.6 8.1 19.8 9.8 29.4 4.3l32.6-18.8a194.1 194.1 0 0 0 42.3 24.5v37.6c0 11.1 7.7 20.8 18.5 23.4 37.6 8.9 77.1 8.9 114.8 0 10.8-2.6 18.5-12.2 18.5-23.4v-37.6a194.1 194.1 0 0 0 42.3-24.5l32.6 18.8c9.6 5.6 21.8 3.8 29.4-4.3 26.4-27.9 46.3-61.8 57.5-99.6 3.1-10.6-1.5-22-11-27.5zm-65.5 100.5l-46.3-26.7c-27 23.1-36.6 28.9-71 41.1v53.5a217.1 217.1 0 0 1 -87.7 0v-53.5c-33.6-11.9-43.4-17.4-71-41.1l-46.3 26.7c-19.7-22.1-34.7-48-43.9-76l46.3-26.7c-6.5-35.4-6.5-46.6 0-82.1l-46.3-26.7c9.2-28 24.2-53.9 43.9-76l46.3 26.8c27.4-23.4 37.1-29.1 71-41.1V44.5a216.8 216.8 0 0 1 87.7 0v53.5c34 12 43.7 17.6 71 41.1l46.3-26.8c19.7 22.1 34.7 48 43.9 76l-46.3 26.7c6.5 35.4 6.5 46.6 0 82.1l46.3 26.7c-9.2 28-24.2 53.9-43.9 76zM256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm0 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z'/%3E%3C/svg%3E");
}


.icon-word-known-check {
  top: 1px;
  left: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3E%3Cpath fill='%23111' d='M345.3 182.5a8 8 0 0 0 -5.7-2.3c-2.1 0-4.1 .8-5.7 2.3L226.5 289.9l-48.6-48.6a8 8 0 0 0 -5.7-2.3c-2.1 0-4.1 .8-5.7 2.3l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l65.5 65.5c1.6 1.6 3.6 2.3 5.7 2.3s4.1-.8 5.7-2.3l124.5-124.5c3.1-3.1 3.1-8.2 0-11.3l-11.3-11.3zM512 256c0-35.5-19.4-68.2-49.6-85.5 9.1-33.6-.3-70.4-25.4-95.5s-61.9-34.5-95.5-25.4C324.2 19.4 291.5 0 256 0s-68.2 19.4-85.5 49.6c-33.6-9.1-70.4 .3-95.5 25.4s-34.5 61.9-25.4 95.5C19.4 187.8 0 220.5 0 256s19.4 68.2 49.6 85.5c-9.1 33.6 .3 70.4 25.4 95.5 26.5 26.5 63.4 34.1 95.5 25.4 17.4 30.2 50 49.6 85.5 49.6s68.1-19.4 85.5-49.6c32.7 8.9 69.4 .7 95.5-25.4 25.1-25.1 34.5-61.9 25.4-95.5 30.2-17.3 49.6-50 49.6-85.5zm-91.1 68.3c5.3 11.8 29.5 54.1-6.5 90.1-28.9 28.9-57.5 21.3-90.1 6.5C319.7 433 307 480 256 480c-52.1 0-64.7-49.5-68.3-59.1-32.6 14.8-61.3 22.2-90.1-6.5-36.8-36.7-10.9-80.5-6.5-90.1C79 319.7 32 307 32 256c0-52.1 49.5-64.7 59.1-68.3-5.3-11.8-29.5-54.1 6.5-90.1 36.8-36.9 80.8-10.7 90.1-6.5C192.3 79 205 32 256 32c52.1 0 64.7 49.5 68.3 59.1 11.8-5.3 54.1-29.5 90.1 6.5 36.8 36.7 10.9 80.5 6.5 90.1C433 192.3 480 205 480 256c0 52.1-49.5 64.7-59.1 68.3z'/%3E%3C/svg%3E");
}

.icon-play-audio {
  bottom: 1px;
  left: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 640 512'%3E%3Cpath fill='black' d='M140 192h-24a16 16 0 0 0 -16 16v96a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16v-96a16 16 0 0 0 -16-16zm-96 32H20a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zM236 96h-24a16 16 0 0 0 -16 16v288a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V112a16 16 0 0 0 -16-16zm384 128h-24a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zM524 64h-24a16 16 0 0 0 -16 16v352a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16zm-96 64h-24a16 16 0 0 0 -16 16v224a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V144a16 16 0 0 0 -16-16zM332 0h-24a16 16 0 0 0 -16 16v480a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V16a16 16 0 0 0 -16-16z'/%3E%3C/svg%3E");
}


























#table.hide-icons #clickarea-bottom-left {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 640 512'%3E%3Cpath fill='black' d='M140 192h-24a16 16 0 0 0 -16 16v96a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16v-96a16 16 0 0 0 -16-16zm-96 32H20a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zM236 96h-24a16 16 0 0 0 -16 16v288a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V112a16 16 0 0 0 -16-16zm384 128h-24a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zM524 64h-24a16 16 0 0 0 -16 16v352a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16zm-96 64h-24a16 16 0 0 0 -16 16v224a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V144a16 16 0 0 0 -16-16zM332 0h-24a16 16 0 0 0 -16 16v480a16 16 0 0 0 16 16h24a16 16 0 0 0 16-16V16a16 16 0 0 0 -16-16z'/%3E%3C/svg%3E") 16 16, auto;
}

#table.hide-icons #clickarea-top-right {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M482.7 299.3l-32.6-18.8a195.2 195.2 0 0 0 0-48.9l32.6-18.8c9.6-5.5 14.2-16.9 11-27.5-11.2-37.7-31.2-71.7-57.5-99.6-7.6-8.1-19.8-9.8-29.4-4.3l-32.6 18.8a194.1 194.1 0 0 0 -42.3-24.5V38c0-11.1-7.7-20.8-18.5-23.4-37.6-8.9-77.1-8.9-114.8 0-10.8 2.6-18.5 12.2-18.5 23.4v37.6a194.1 194.1 0 0 0 -42.3 24.5L105.2 81.3c-9.6-5.6-21.8-3.8-29.4 4.3-26.4 27.9-46.3 61.8-57.5 99.6-3.1 10.6 1.5 22 11 27.5l32.6 18.8a195.2 195.2 0 0 0 0 48.9l-32.6 18.8c-9.6 5.5-14.2 16.9-11 27.5 11.2 37.7 31.2 71.7 57.5 99.6 7.6 8.1 19.8 9.8 29.4 4.3l32.6-18.8a194.1 194.1 0 0 0 42.3 24.5v37.6c0 11.1 7.7 20.8 18.5 23.4 37.6 8.9 77.1 8.9 114.8 0 10.8-2.6 18.5-12.2 18.5-23.4v-37.6a194.1 194.1 0 0 0 42.3-24.5l32.6 18.8c9.6 5.6 21.8 3.8 29.4-4.3 26.4-27.9 46.3-61.8 57.5-99.6 3.1-10.6-1.5-22-11-27.5zm-65.5 100.5l-46.3-26.7c-27 23.1-36.6 28.9-71 41.1v53.5a217.1 217.1 0 0 1 -87.7 0v-53.5c-33.6-11.9-43.4-17.4-71-41.1l-46.3 26.7c-19.7-22.1-34.7-48-43.9-76l46.3-26.7c-6.5-35.4-6.5-46.6 0-82.1l-46.3-26.7c9.2-28 24.2-53.9 43.9-76l46.3 26.8c27.4-23.4 37.1-29.1 71-41.1V44.5a216.8 216.8 0 0 1 87.7 0v53.5c34 12 43.7 17.6 71 41.1l46.3-26.8c19.7 22.1 34.7 48 43.9 76l-46.3 26.7c6.5 35.4 6.5 46.6 0 82.1l46.3 26.7c-9.2 28-24.2 53.9-43.9 76zM256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm0 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z'/%3E%3C/svg%3E") 16 16, auto;
}


#table.hide-icons #clickarea-top-left {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3E%3Cpath fill='%23111' d='M345.3 182.5a8 8 0 0 0 -5.7-2.3c-2.1 0-4.1 .8-5.7 2.3L226.5 289.9l-48.6-48.6a8 8 0 0 0 -5.7-2.3c-2.1 0-4.1 .8-5.7 2.3l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l65.5 65.5c1.6 1.6 3.6 2.3 5.7 2.3s4.1-.8 5.7-2.3l124.5-124.5c3.1-3.1 3.1-8.2 0-11.3l-11.3-11.3zM512 256c0-35.5-19.4-68.2-49.6-85.5 9.1-33.6-.3-70.4-25.4-95.5s-61.9-34.5-95.5-25.4C324.2 19.4 291.5 0 256 0s-68.2 19.4-85.5 49.6c-33.6-9.1-70.4 .3-95.5 25.4s-34.5 61.9-25.4 95.5C19.4 187.8 0 220.5 0 256s19.4 68.2 49.6 85.5c-9.1 33.6 .3 70.4 25.4 95.5 26.5 26.5 63.4 34.1 95.5 25.4 17.4 30.2 50 49.6 85.5 49.6s68.1-19.4 85.5-49.6c32.7 8.9 69.4 .7 95.5-25.4 25.1-25.1 34.5-61.9 25.4-95.5 30.2-17.3 49.6-50 49.6-85.5zm-91.1 68.3c5.3 11.8 29.5 54.1-6.5 90.1-28.9 28.9-57.5 21.3-90.1 6.5C319.7 433 307 480 256 480c-52.1 0-64.7-49.5-68.3-59.1-32.6 14.8-61.3 22.2-90.1-6.5-36.8-36.7-10.9-80.5-6.5-90.1C79 319.7 32 307 32 256c0-52.1 49.5-64.7 59.1-68.3-5.3-11.8-29.5-54.1 6.5-90.1 36.8-36.9 80.8-10.7 90.1-6.5C192.3 79 205 32 256 32c52.1 0 64.7 49.5 68.3 59.1 11.8-5.3 54.1-29.5 90.1 6.5 36.8 36.7 10.9 80.5 6.5 90.1C433 192.3 480 205 480 256c0 52.1-49.5 64.7-59.1 68.3z'/%3E%3C/svg%3E") 16 16, auto;
}












#settings-container {
  z-index: -1;
}

#table.settingspanel-is-open #settings-container {
  z-index: 1000;
}

.user-input-write-word {
  margin-top: 13px;
  padding: 5px 13px;
  font-size: 1.2rem;
  box-sizing: border-box;
  max-width: 80%;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  box-shadow: none; /* Remove the default shadow */
  appearance: none;
  user-select: text;
  pointer-events: auto; /* Re-enables interaction just for this */
}



#settings-panel {
  transform: translateY(840px);
  transition: transform 1.3s ease;
  top: 0px;
  left: 0px;
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  z-index: 2400;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 3rem;
  will-change: transform;
}


#table.settingspanel-is-open #settings-panel {
  transform: translateY(0);
  transition: transform 0.8s ease;
}

#table.settingspanel-is-closing #settings-panel {
  transform: translateY(840px);
  transition: transform .84s ease;
}

#settings-panel input[type=checkbox] {
  margin-left: 5px;
}


#practice-modes {
  margin: 20px 0 20px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#practice-mode-say-sound,
#practice-mode-say-flip,
#practice-mode-read,
#practice-mode-write {
  display: none;
}


#practice-modes label {
  margin: 0 4px;
  height: 30px;
  width: 30px;
  border: 1px solid #bbb;
  border-radius: 5px;
  font-size: 0;
  display: inline-block;
  cursor: pointer;
  transition: all 1.3s ease;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
  color: black;
  position: relative;
}

#practice-modes label:hover {
  background-color: #fafafa;
  transition: all 0s ease;
}

#practice-modes :checked + label {
  background-color: #ddd;
  transition: all 0.6s ease;
  margin: 0 6px;
  transform: rotate(90deg);
  width: 40px;
  height: 40px;
}

label svg {
  width: 90%;
  height: 90%;
  display: block;
  position: absolute;
  top: 5%;
  left: 5%;
}

#link-profile {
  display: block;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  position: absolute;
  left: 10px;
  bottom: -10px;
}

#link-profile {
  width: 44px;
  margin: 0 auto 20px;
  padding: 3px 20px 0px 13px;
  border-radius: 9px;
}

#link-profile:hover {
  background-color: #fafafa;
  border-radius: 5px;
  border: 1px solid #b0b0b0;
}



.profile-stats-icon .bar {
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 0.3s ease;
}

#link-profile:hover .profile-stats-icon .bar1 {
  transform: scaleY(1.2);
  transition-delay: 0s;
}

#link-profile:hover .profile-stats-icon .bar2 {
  transform: scaleY(1.2);
  transition-delay: 0.08s;
}

#link-profile:hover .profile-stats-icon .bar3 {
  transform: scaleY(1.2);
  transition-delay: 0.16s;
}

/* Reset delay on mouseout for smooth return */
.profile-stats-icon .bar1,
.profile-stats-icon .bar2,
.profile-stats-icon .bar3 {
  transition-delay: 0s;
}



.logout-icon .arrow {
  transition: transform 0.3s ease;
}

.logout-icon:hover .arrow {
  transform: translateX(2px);
}

.answer {
  font-size: 1.3rem;
  margin: 0;
}

.answer-correct {
  color: green;
  font-weight: bold;
}

.answer-almost {
  color: darkorange;
}

.answer-wrong {
  font-style: italic;
}

.answer-wrong:before {
  content: "( ";
  font-style: normal;
}
.answer-wrong:after {
  content: " )";
  font-style: normal;
}

.answer-almost .almost {
  font-size: 0.8em;
  margin-left: 0.5em;
  color: gray;
}

.wrong-letter,
.letter-diff {
  color: red;
  font-weight: bold;
}

.accent-diff {
  color: orange;
  font-style: italic;
}

.missing-letter {
  color: gray;
  border-bottom: 1px dashed gray;
  padding: 0 2px;
}

.custom-keyboard {
  flex-wrap: wrap;
  gap: 0.2em;
  justify-content: center;
  opacity: 0;
  display: flex;
  pointer-events: none;
  transform: translateY(10px);
  margin-bottom: -2rem;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.84s ease;
  margin-left: auto;
  margin-right: auto;
}

.custom-keyboard.removing {
  height: auto;
}

.custom-keyboard.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-bottom: 0px;
  height: auto;
  padding-bottom: 1rem;
  margin-top: 1.3em;
}

.custom-keyboard button {
  font-size: 1.2em;
  padding: 0.4em 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
  width: 1.9rem;
  text-align: center;
}

.custom-keyboard button:active {
  background-color: #e0e0e0;
}

.custom-keyboard .backspace-key {
  width: 60px;
  font-weight: bold;
}

.custom-keyboard .enter-key {
  width: 84px;
  font-weight: bold;
  margin-left: 1px;
}

#login-form-container {
  margin-top: 5rem;
}

#login-form-container label {
  display: block;
}

#login-form-container input {
  margin-bottom: 1.3rem;
  font-size: 1.3rem;
  max-width: 100%;
  padding: .6rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#login-form-container input::placeholder {
  color: black;
  opacity: 1;
}

#login-form-container button {
  display: block;
}

#login-form {
  max-width: 600px;
  margin: 0 auto;
}


.hidden { display: none; }

/* Define a soft wiggle animation */
@keyframes soft-wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}


#ios-pwa-autofocus-bugfix { position: absolute; top: 0; left:0; height: 50px; width: 100%; background: #efefef }
#ios-pwa-autofocus-bugfix + #above-the-fold { margin-top: -50px; }
#evening #ios-pwa-autofocus-bugfix { background: #000 }


#evening-returning-visitor,
#evening { background: #000; color: #fff; }
#evening a { color: #fff; }
#evening-returning-visitor .flip-card,
#evening .flip-card { background: #000; color: #eee; border: none; }
#evening-returning-visitor .flip-card-front, #evening-returning-visitor .flip-card-back,
#evening .flip-card-front, #evening .flip-card-back { background: #999; }

#evening-returning-visitor #default-card, #returning-visitor #default-card { display: none; }
#evening #settings-panel { background: #666; color: #fff; } 
#evening #link-profile { border: none; background: #000; fill: #aaa; }
#evening #link-profile:hover { fill: #fff; }
#evening #link-logout { color: #ddd; background-color: #000; border: none; letter-spacing: .02rem; left: 13px; bottom: 13px; }
#evening #link-logout:hover { color: #fff; }
#evening label     { background: #000; border: none; }
#evening label svg { fill: #bbb; }
#evening #practice-modes :checked + label { background-color: #000; }
#evening #practice-modes :checked + label svg { fill: #f0f0f0; transition: all 3s ease; }
#evening #practice-modes label:hover { background-color: #000; }
#evening #practice-modes label:hover svg { fill: #fff;}
#evening #login-form-container { background: #000; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
#evening #known-words {background: none; }



/* Narrow screens */
@media screen and (max-width: 700px) {
    
  #above-the-fold {
    padding-bottom: 4rem;
  }

  #ordkort-container {
    height: 420px;
    max-height: 78vh!important;
  }

  .flip-card {
    height: 100%;
  }
}

/* Larger screens */
@media screen and (min-width: 1300px) {
  .custom-keyboard { max-width: 600px; }
}

img[src="/images/cards/colour-white.png"] {
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2));
}


/* WRITE-mode på mobiltelefoner / skärmar med låg höjd)  */
@media (max-height: 710px) {
  [data-practice-mode="write"] .flip-card-front,
  #evening[data-practice-mode="write"] .flip-card-front,
  [data-practice-mode="write"] .flip-card-back,
  #evening[data-practice-mode="write"] .flip-card-back { 
    justify-content: flex-end;
    padding-bottom: 20px;
    border-radius: 0 0 13px 13px;
    box-sizing: border-box;
  }
  [data-practice-mode="write"] #ordkort-container,
  #evening[data-practice-mode="write"] #ordkort-container { height: 350px; border-radius: 0 0 13px 13px; }
  [data-practice-mode="write"] #above-the-fold        { justify-content: flex-start; }
  [data-practice-mode="write"] .user-input-write-word { margin-top: 22px; }
  [data-practice-mode="write"] .flip-card img         { max-height: 60%; }
}


@media screen and (min-device-width: 1000px) {
  #ios-workaround-keys-for-logging-in-pwa-ios {
    display: none;
  }
}

#link-to-show-more-cards {
  padding: 16px 0 12px;
  margin-top: 2rem;
}
  
#link-to-memory {
  padding: 15px 0 13px;
  font-size: 0;
}

#link-to-show-more-cards svg {
  height: 1.1rem;
}
  
#link-to-memory svg {
  height: 1rem;
  margin: 2px 1px 0;
}

#link-to-memory, #link-to-show-more-cards {
  margin-bottom: 1rem;
  width: 6.4rem;
  text-align: center;
  cursor: pointer;
}

.user-input-write-word.is-touch {
  pointer-events: none;
}


[data-practice-mode="read"] .flip-card-front .icon-play-audio {
  display: none;
}