/* style.css - Typing Game (v1.1) */
/* Black background, white boxes, spooky/horror accent, readable font color */

:root{
  --bg: #000000;
  --card: #050505;
  --accent: #e03b3b; /* red horror accent */
  --muted: #bfc6c8;
  --glass: rgba(255,255,255,0.02);
  --danger: #ff6b6b;
  --radius: 12px;
  --pad: 14px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Use the spooky font only for the title */
.tg-wrapper {
  padding: 18px;
  background: var(--bg);
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tg-ui {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.02);
  overflow: hidden;
}

.tg-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.02);
  gap:12px;
}

.tg-title {
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--accent);
  font-weight:700;
  font-size:20px;
  font-family: 'Creepster', cursive; /* spooky font for title */
  text-shadow: 0 2px 8px rgba(224,59,59,0.35);
}

.tg-controls {
  display:flex;
  gap:8px;
}

.tg-btn {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  padding:8px 12px;
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: all 160ms ease;
}
.tg-btn:hover { transform: translateY(-2px); color: white; border-color: rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(224,59,59,0.08); }

.tg-board {
  position:relative;
  height: 380px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(6,6,6,0.8));
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.02);
}

/* overlay styling - spooky */
.tg-overlay {
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.85);
  font-size:18px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.7));
  z-index: 10;
  text-align:center;
  padding: 12px;
  letter-spacing: 0.4px;
}

.tg-word {
  position:absolute;
  white-space:nowrap;
  background: #ffffff;   /* white box requested */
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  color: #000000;        /* black text inside white box */
  font-weight:700;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transform: translateZ(0);
  transition: transform 0.14s ease, opacity 0.14s ease;
  font-size:16px;
  z-index:5;
}

/* prefix highlight for typed letters (dark red) */
.tg-prefix {
  color: var(--accent);
  text-decoration: underline;
}

/* hit effect (fade out) */
.tg-word.tg-hit {
  transform: scale(0.88) translateY(-8px);
  opacity: 0;
}

/* bottom controls */
.tg-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
}

.tg-stats {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.stat {
  display:flex;
  flex-direction:column;
  font-size:13px;
  color:var(--muted);
  background: rgba(255,255,255,0.02);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
  min-width:72px;
  text-align:center;
}

.stat strong { font-size:11px; color: #d6d6d6; font-weight:700; display:block; margin-bottom:6px; }
.stat span { font-size:15px; color: #ffffff; font-weight:700; }

.tg-input { flex:1; display:flex; justify-content:flex-end; }
#tg-input {
  width:360px;
  max-width:65%;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.03);
  color: #ffffff;
  outline:none;
  font-size:14px;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
#tg-input:focus { box-shadow: 0 10px 26px rgba(0,0,0,0.7); transform: translateY(-2px); }
#tg-input.tg-bad { animation: tg-shake 160ms; border-color: var(--danger); background: rgba(255,100,100,0.03); }

@keyframes tg-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.tg-footer { padding:10px 14px; color:var(--muted); font-size:13px; text-align:center; }

@media (max-width:880px) {
  .tg-board { height:300px; }
  #tg-input { width: 220px; max-width: 60%; }
  .tg-stats { gap:8px; }
}

@media (max-width:560px) {
  .tg-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .tg-controls { width:100%; justify-content:flex-start; }
  .tg-bottom { flex-direction:column; align-items:stretch; gap:12px; padding-bottom:18px; }
  #tg-input { width:100%; max-width:100%; }
}