/* Huruf Type Quest — DEV build */
#htStage { background: linear-gradient(180deg, #fef9e7 0%, #e0f2fe 100%); }
#htStage[data-state="play"], #htStage[data-state="win"] {
  background-image: none;
  background-color: #fffbeb;
}
.ht-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ht-chip {
  background: #f0f9ff; border: 2px solid #bae6fd; color: #075985;
  font-size: 13px; font-weight: 1000; padding: 7px 12px; border-radius: 999px;
}
.ht-streak { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.ht-prompt {
  text-align: center; font-size: clamp(17px, 3.4vw, 23px); font-weight: 1000;
  color: #173653; padding: 12px 14px 0; min-height: 34px;
}
.ht-card {
  margin: 4px auto 0; max-width: 560px; padding: 6px 16px 14px;
  text-align: center;
}
.ht-card.shake { animation: htShake .38s ease-in-out; }
@keyframes htShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.ht-glyph {
  font-family: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  font-size: clamp(96px, 24vw, 158px); line-height: 1.45; font-weight: 700;
  color: #173653; min-height: 1.45em;
}
.ht-glyph.ht-word { font-size: clamp(72px, 19vw, 118px); }
.ht-name {
  font-size: clamp(19px, 4vw, 26px); font-weight: 1000; color: #6d28d9; margin-top: -6px;
}
.ht-name .ht-meaning { color: #426373; }
.ht-slots {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; min-height: 58px; direction: ltr;
}
.ht-slot {
  width: 46px; height: 56px; display: grid; place-items: center;
  font-size: 27px; font-weight: 1000; color: #173653; text-transform: uppercase;
  background: #fff; border: 3px solid #d8e6ee; border-bottom: 6px solid #9fc3d4;
  border-radius: 13px;
}
.ht-slot.current { border-color: #6d28d9; border-bottom-color: #6d28d9; box-shadow: 0 0 0 3px #ddd6fe; }
.ht-slot.filled {
  background: #dcfce7; border-color: #22c55e; border-bottom-color: #16a34a; color: #14532d;
  animation: htPop .25s ease-out;
}
@keyframes htPop { from { transform: scale(1.18); } to { transform: scale(1); } }
.ht-slot.hint {
  border-color: #f59e0b; border-bottom-color: #f59e0b; background: #fef3c7;
  animation: htGlow .55s ease-in-out infinite alternate;
}
@keyframes htGlow { from { box-shadow: 0 0 0 2px #fde68a; } to { box-shadow: 0 0 0 7px #f59e0b66; } }
.ht-keyboard {
  max-width: 620px; margin: 10px auto 4px; padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.ht-kb-row { display: flex; justify-content: center; gap: 6px; }
.ht-keyboard .ht-key {
  appearance: none; -webkit-appearance: none;
  font: inherit; flex: 1 1 0; max-width: 56px; min-width: 0; height: 54px;
  font-size: 19px; font-weight: 1000; text-transform: uppercase; cursor: pointer;
  color: #173653; background: #fff; border: 2px solid #c3dcea; border-bottom-width: 4px;
  border-radius: 13px; padding: 0;
}
.ht-keyboard .ht-key:hover { background: #f0f9ff; }
.ht-keyboard .ht-key:active { transform: translateY(2px); border-bottom-width: 2px; }
.ht-keyboard .ht-key.pressed { background: #dcfce7; border-color: #22c55e; }
.ht-keyboard .ht-key.hint {
  background: #fef3c7; border-color: #f59e0b; color: #92400e;
  animation: htGlow .55s ease-in-out infinite alternate;
}
.ht-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  z-index: 15; max-width: 88%; text-align: center;
  background: #6d28d9; color: #fff; font-size: clamp(18px, 4vw, 26px); font-weight: 1000;
  padding: 16px 26px; border-radius: 20px; box-shadow: 0 10px 30px #17365340;
  pointer-events: none;
}
.ht-banner.pop { animation: htBanner 1.5s ease-out both; }
@keyframes htBanner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}
/* ---- v2 additions: letter forms, missing-letter roman line, speed ---- */
.ht-glyph.ht-form { font-size: clamp(80px, 20vw, 132px); }
.ht-roman {
  display: block; direction: ltr; text-transform: uppercase;
  font-size: clamp(22px, 5vw, 30px); font-weight: 1000; letter-spacing: 4px;
  color: #173653; margin-bottom: 2px;
}
.ht-blank {
  display: inline-block; min-width: .85em; text-align: center;
  color: #f59e0b; border-bottom: 4px solid #f59e0b;
}
.ht-blank.filled { color: #16a34a; border-bottom-color: #22c55e; }
.arc-welcome .ht-speed-btn, .arc-dialog .ht-speed-btn {
  margin-top: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; border-color: #92400e;
  box-shadow: 0 4px 0 #92400e;
}
.arc-welcome .ht-speed-btn:hover, .arc-dialog .ht-speed-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.ht-chip.ht-time-low { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
@media (max-width: 480px) {
  .ht-keyboard .ht-key { height: 50px; font-size: 16px; border-radius: 10px; }
  .ht-kb-row { gap: 4px; }
  .ht-keyboard { padding: 8px 7px 10px; }
  .ht-slot { width: 40px; height: 50px; font-size: 23px; }
}