/* Ibrahim Games — word-game UI (on-screen keyboard + word tray), shared by the
   3D word games. Layered over kit.css; built by assets/3d/words.js. */

/* ---------- On-screen keyboard ---------- */
.wk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10, 12, 24, 0), rgba(10, 12, 24, 0.72) 22%);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.wk.on { display: flex; }
.wk.off { opacity: 0.45; }
.wk-row { display: flex; gap: 5px; justify-content: center; width: 100%; max-width: 640px; }
.wk-key {
  flex: 1 1 0; min-width: 0; max-width: 58px; height: 52px; border-radius: 12px;
  background: linear-gradient(180deg, #fff9ea, #f1dfb8); color: #3a2410;
  font: 400 24px var(--display); letter-spacing: 0.02em;
  box-shadow: 0 4px 0 #b89a62, 0 8px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.06s;
}
.wk-key.down { transform: translateY(3px); box-shadow: 0 1px 0 #b89a62; }
.wk-key.wide { flex: 1.6 1 0; max-width: 92px; font-size: 20px; }
.wk-key.enter { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #1b1200; box-shadow: 0 4px 0 var(--accent-deep), 0 8px 16px rgba(0, 0, 0, 0.3); }
.wk-key.back { background: linear-gradient(180deg, #ffd6d6, #f3a9a9); box-shadow: 0 4px 0 #b86a6a, 0 8px 16px rgba(0, 0, 0, 0.3); }
/* Marks a game can set with setKey(ch, cls). Never colour alone: dim/strike too. */
.wk-key.hot { background: linear-gradient(180deg, #fff27a, #ffc81f); box-shadow: 0 4px 0 #c28a00, 0 8px 16px rgba(0, 0, 0, 0.3); }
.wk-key.used { opacity: 0.4; }
.wk-key.have { background: linear-gradient(180deg, #c9ffb8, #7fe46a); box-shadow: 0 4px 0 #3f9a2c, 0 8px 16px rgba(0, 0, 0, 0.3); }
@media (max-width: 400px) { .wk-row { gap: 4px; } .wk-key { height: 48px; font-size: 21px; border-radius: 10px; } .wk-key.wide { font-size: 17px; } }
@media (max-height: 460px) and (orientation: landscape) { .wk { gap: 4px; padding-top: 4px; } .wk-key { height: 38px; font-size: 19px; } }

/* ---------- The word being typed: a row of chunky DOM tiles ---------- */
.word-tray {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 96vw; z-index: 25;
  display: flex; gap: 5px; justify-content: center; align-items: center; min-height: 58px; padding: 6px 10px;
  border-radius: 18px; background: rgba(10, 14, 30, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.word-tray:empty::before { content: attr(data-hint); color: rgba(255, 255, 255, 0.6); font: 800 16px var(--font); padding: 0 8px; }
.word-tray .wt {
  width: 44px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff9ea, #f1dfb8); color: #3a2410; font: 400 30px var(--display);
  box-shadow: 0 4px 0 #b89a62; animation: wt-pop 0.16s ease-out;
}
.word-tray.good .wt { background: linear-gradient(180deg, #d8ffc9, #86ea70); box-shadow: 0 4px 0 #3f9a2c; }
.word-tray.bad { animation: wt-shake 0.35s; }
.word-tray.bad .wt { background: linear-gradient(180deg, #ffe0e0, #ffb4b4); box-shadow: 0 4px 0 #b86a6a; }
@keyframes wt-pop { from { transform: scale(0.4) translateY(10px); } to { transform: none; } }
@keyframes wt-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@media (max-width: 460px) { .word-tray .wt { width: 34px; height: 40px; font-size: 24px; } .word-tray { gap: 4px; min-height: 50px; } }
@media (prefers-reduced-motion: reduce) { .word-tray .wt, .word-tray.bad { animation: none; } }