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

h2 { font-size: 4.2rem; font-weight: 100; margin: 0; }

#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;
  cursor: default;
  transition: max-height 0.84s ease-in 1s;
  background: repeating-linear-gradient(
  -55deg,
  #e5e5e5,
  #e5e5e5 10px,
  #eee 10px,
  #eee 20px
  );
}

.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;
  position: absolute;
}

.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; }

.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;
  }
}

.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; }

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

.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;
  }
}

#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;
}

@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;
}


#practice-modes {
  margin: 20px 0 20px;
  height: 60px;
}

#practice-modes > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

#settings-panel #practice-modes input[type=radio] {
  display: none;
}


#practice-modes label {
  margin: 0 4px;
  height: 40px;
  width: 40px;
  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;
  transform: rotate(90deg);
  width: 40px;
  height: 40px;
}

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

.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; }


/* 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); }
}

#evening-returning-visitor #default-card, #returning-visitor #default-card { display: none; }
#evening #settings-panel { background: #666; color: #fff; } 
#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; }


/* 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%;
  }
}

/* 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;
  }
}

.user-input-write-word.is-touch { pointer-events: none; }
[data-practice-mode="read"] .flip-card-front .icon-play-audio { display: none; }

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

.hidden { display: none; }

#evening-returning-visitor,
#evening { background: #000; color: #fff; }
#evening a { color: #fff; }
#evening-returning-visitor .flip-card,

#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; }



#listen-and-pick,
#read-and-pick { position: relative; background: #fff; height: 100%; border-radius: 13px; width: 100%;box-sizing: border-box; padding: 1rem;}
#listen-and-pick button,
#read-and-pick button { margin-bottom: 10px;}
#listen-and-pick img,
#read-and-pick img { max-height: 9vh; max-width: 84px}

.pick-options-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; /* ändra efter smak */ }
.pick-question { color: #333; padding: 13px 0; font-family: sans-serif;}
.pick-option { width: 100%; padding: 0; border: 0; background: transparent; aspect-ratio: 1 / 1; overflow: hidden; }
.pick-option img { display: block; width: 100%; height: auto; object-fit: contain; /* eller cover om du vill beskära */ }
.pick-no-more-today { background: #fff; height: 100%; width: 100%; display: flex; align-items: center; box-sizing: border-box; 
  padding: 2rem; font-size: 1.3rem; line-height: 145%; font-family: sans-serif; font-weight: 300;}

.pick-audio { cursor: pointer; border: 0; background: transparent; font-size: 28px; line-height: 1; }
.pick-word.is-hidden { display: none; }