* { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }
body { background: #ffffff; color: #000000; font-family: Arial, sans-serif; }

.home-link { display: block; margin: 20px auto; width: fit-content; color: #565758; text-decoration: none; font-size: 14px; font-weight: 600; }
.home-link:hover { text-decoration: underline; }

.lemot { width: min(100vw, 420px); margin: 0 auto; padding: 20px 10px; text-align: center; }
.lemot h1 { font-size: clamp(28px, 8vw, 36px); font-weight: 700; color: #000000; letter-spacing: 2px; margin: 0 0 4px; text-transform: uppercase; }
.lemot .sub { font-size: clamp(13px, 4vw, 16px); color: #787c7e; margin: 0 0 16px; }

.board { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; }
.row { display: flex; gap: 4px; }
.tile { width: clamp(48px, 14vw, 62px); height: clamp(48px, 14vw, 62px); border: 2px solid #d3d6da; display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 7vw, 32px); font-weight: 700; color: #000000; text-transform: uppercase; user-select: none; }
.tile.filled { border-color: #878a8c; }
.tile.correct { background: #6aaa64; border-color: #6aaa64; color: #ffffff; }
.tile.present { background: #c9b458; border-color: #c9b458; color: #ffffff; }
.tile.absent { background: #D7707E; border-color: #D7707E; color: #ffffff; }

.tile.flip { animation: flip 0.5s ease; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.row.shake { animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.msg { min-height: 24px; line-height: 24px; font-size: 14px; font-weight: 600; margin: 4px 0; color: #000000; }
.msg.ok { color: #6aaa64; }
.msg.err { color: #c9b458; }

.kb { width: 100%; margin-top: 8px; user-select: none; }
.kr { display: flex; justify-content: center; gap: 3px; margin-bottom: 4px; }
.k { flex: 1 1 0; min-width: 0; height: clamp(42px, 11vw, 50px); border: none; border-radius: 4px; background: #d3d6da; color: #000000; font-size: clamp(13px, 3.5vw, 16px); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.k:hover { background: #bbb; }
.k.yes { background: #6aaa64; color: #ffffff; }
.k.may { background: #c9b458; color: #ffffff; }
.k.no { background: #D7707E; color: #ffffff; }
.k.w { flex-grow: 1.6; font-size: clamp(14px, 3.8vw, 17px); }

@media (min-width: 421px) {
  .kb { width: min(90vw, 580px); margin: 14px 0 0 50%; transform: translateX(-50%); }
  .kr { gap: 6px; margin-bottom: 6px; }
  .k { height: 58px; font-size: 18px; border-radius: 6px; }
  .k.w { font-size: 18px; }
}

@media (max-width: 360px) {
  .lemot { padding-left: 6px; padding-right: 6px; }
  .kr { gap: 2px; }
  .k { padding: 0 2px; }
}