/* style.css */
:root {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body {
  margin: 0;
  padding: 24px;
  background: #0b0f14;
  color: #e7eef7;
}
.wrap {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.card {
  background: #111826;
  border: 1px solid #243247;
  border-radius: 16px;
  padding: 16px;
}
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
h1 {
  margin: 0 0 8px 0;
  font-size: 20px;
}
.hint {
  font-size: 18px;
  line-height: 1.35;
}
.word {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 34px;
  letter-spacing: 6px;
  padding: 12px 10px;
  background: #000;
  border-radius: 12px;
  display: inline-block;
}
.meta {
  color: #a8b3c2;
  font-size: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kbd {
  background: #0b1220;
  border: 1px solid #243247;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.keys {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 6px;
}
button.key {
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid #2a3a52;
  background: #162238;
  color: #e7eef7;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
button.key:not([disabled]):hover {
  background: #22325a;
  color: #fff;
  border-color: #3a5ad7;
  box-shadow: 0 0 0 2px #3a5ad733;
}
button.key[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
button.primary {
  border: 1px solid #2a3a52;
  background: #1f2f4a;
  color: #e7eef7;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
button.primary:hover {
  background: #2a3a52;
  color: #fff;
  border-color: #3a5ad7;
}
button.secondary {
  border: 1px dashed #2a3a52;
  background: transparent;
  color: #cfe2ff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
button.secondary:hover {
  background: #1a2233;
  color: #fff;
  border-color: #3a5ad7;
}
.status {
  font-size: 15px;
}
.ok {
  color: #8bffb0;
  font-weight: 700;
}
.bad {
  color: #ff9b9b;
  font-weight: 700;
}
.small {
  font-size: 12px;
  color: #a8b3c2;
}
input[type='text'] {
  background: #0b1220;
  border: 1px solid #243247;
  color: #e7eef7;
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 240px;
}
input[type='text']:hover,
input[type='text']:focus {
  border-color: #3a5ad7;
  background: #181f2b;
}
.footer {
  color: #93a4bb;
  font-size: 12px;
}
.maskbox {
  display: inline-block;
  min-width: 32px;
  min-height: 38px;
  margin: 2px 2px;
  padding-left: 4px;
  border: 2px solid #243247;
  border-radius: 6px;
  background: #181f2b;
  font-size: 32px;
  text-align: center;
  vertical-align: middle;
  line-height: 38px;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 600;
  color: #e7eef7;
  transition: background 0.2s, color 0.2s;
}
.maskbox.letter {
  background: #181f2b;
}
.maskbox.letter:hover {
  background: #232e4a;
  color: #fff;
  border-color: #3a5ad7;
  cursor: pointer;
}
.maskbox.symbol {
  border: none;
  background: transparent;
}
.maskbox.symbol:hover {
  background: #232e4a22;
}
a {
  color: #7db7ff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s, text-decoration 0.2s;
}
a:hover,
a:focus {
  color: #fff;
  text-decoration: underline;
}

/* Visuelles Feedback für Maskboxen */
.maskbox.correct {
  animation: maskbox-correct 0.5s;
  background: #1fd67b !important;
  color: #111826 !important;
  border-color: #1fd67b !important;
}
@keyframes maskbox-correct {
  0% {
    background: #1fd67b;
    color: #111826;
  }
  80% {
    background: #1fd67b;
    color: #111826;
  }
  100% {
    background: #181f2b;
    color: #e7eef7;
  }
}
.maskbox.wrong {
  animation: maskbox-wrong 0.5s;
  background: #ff4d4d !important;
  color: #fff !important;
  border-color: #ff4d4d !important;
}
@keyframes maskbox-wrong {
  0% {
    background: #ff4d4d;
    color: #fff;
  }
  80% {
    background: #ff4d4d;
    color: #fff;
  }
  100% {
    background: #181f2b;
    color: #e7eef7;
  }
}

/* Button Pressed Animation */
button.key:active {
  transform: scale(0.96);
  background: #0e1a2a;
  box-shadow: 0 0 0 2px #3a5ad755;
}

/* Bereits verwendete Buchstaben */
button.key.used {
  background: #2a3a52;
  color: #a8b3c2;
  border-color: #3a5ad7;
  text-decoration: line-through;
}

/* Statusmeldungen Feedback */
.status.ok {
  animation: status-ok-fade 1.2s;
}
@keyframes status-ok-fade {
  0% {
    background: #1fd67b22;
  }
  100% {
    background: transparent;
  }
}
.status.bad {
  animation: status-bad-fade 1.2s;
}
@keyframes status-bad-fade {
  0% {
    background: #ff4d4d22;
  }
  100% {
    background: transparent;
  }
}

/* Shake-Animation für Wortbox */
.word.shake {
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-8px);
  }
  40%,
  60% {
    transform: translateX(8px);
  }
}

/* Tooltip Styles */
.key[title] {
  position: relative;
}
.key[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translateX(-50%);
  background: #232e4a;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  z-index: 10;
  box-shadow: 0 2px 8px #0003;
}
.key[title]::after {
  opacity: 0;
  transition: opacity 0.15s;
}

/* Animierte Zeilen im Adminbereich */
@keyframes admin-row-in {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes admin-row-out {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.admin-row-in {
  animation: admin-row-in 0.35s cubic-bezier(0.4, 1.6, 0.6, 1);
}
.admin-row-out {
  animation: admin-row-out 0.3s cubic-bezier(0.4, 1.6, 0.6, 1) forwards;
}

@media (max-width: 600px) {
  .wrap {
    padding: 0 2vw;
    gap: 8px;
  }
  .card {
    padding: 8px;
    border-radius: 8px;
  }
  .word {
    font-size: 22px;
    padding: 8px 4px;
    border-radius: 8px;
  }
  .maskbox {
    min-width: 22px;
    min-height: 28px;
    font-size: 20px;
    line-height: 28px;
    border-radius: 4px;
    margin: 1px 1px;
  }
  .kbd {
    padding: 6px;
    border-radius: 6px;
  }
  .keys {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }
  button.key,
  button.primary,
  button.secondary {
    font-size: 15px;
    padding: 8px;
    border-radius: 6px;
  }
  input[type='text'] {
    min-width: 120px;
    font-size: 15px;
    padding: 8px 8px;
    border-radius: 6px;
  }
  .meta,
  .row {
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
  }
}
/* End of style.css */