/* ══════════════════════════════════════
   Pedantix — Game Elements
   ══════════════════════════════════════ */

/* ── Article card ── */
.article-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  min-height: 300px
}

.article-title-area {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 2.5;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border)
}

.article-body {
  line-height: 2.6;
  font-size: .95rem;
  word-spacing: 3px
}

.article-body p {
  margin-bottom: 1.8rem
}

.section-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent);
  margin: 2rem 0 .8rem;
  letter-spacing: .03em;
  border-left: 3px solid var(--accent);
  padding: .35rem 0 .35rem .8rem;
  border-bottom: none;
  background: rgba(99, 102, 241, .04)
}

.section-title.h3 {
  font-size: .8rem;
  margin-left: 1.2rem;
  border-left-color: var(--text-3);
  color: var(--text-2)
}

/* ── Word blocks ── */
.word-block {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  vertical-align: middle;
  cursor: default;
  height: 1.2em;
  margin: 0 2px;
  transition: background-color .45s ease
}

.word-block.hidden {
  cursor: pointer;
  margin-bottom: 1.4em;
  border: 1px solid rgba(255, 255, 255, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums
}

[data-theme=light] .word-block.hidden {
  border-color: rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, .3)
}

.word-block.hidden:hover {
  filter: brightness(1.25);
  border-color: rgba(255, 255, 255, .2)
}

[data-theme=light] .word-block.hidden:hover {
  border-color: rgba(0, 0, 0, .2)
}

.word-block.hidden::after {
  content: attr(data-best-guess);
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px;
  font-style: italic;
  font-weight: 400;
  color: rgba(160, 180, 220, .45);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1
}

.word-block.stopword {
  background: transparent !important;
  border: none !important;
  color: var(--text-3) !important;
  font-size: .82rem;
  font-weight: 400;
  height: auto;
  margin-bottom: 0;
  cursor: default;
  padding: 0 1px
}

.word-block.stopword::after {
  display: none
}

.word-block.revealed {
  color: #fff !important;
  background-color: var(--success) !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, .4), 0 0 2px rgba(34, 197, 94, .6);
  animation: wordReveal .35s ease-out;
  cursor: default;
  padding: 1px 5px;
  height: auto;
  margin-bottom: 0;
  border-radius: 4px;
  border: none;
  font-size: .88rem;
  font-weight: 600
}

.word-block.flash-new {
  animation: flashNew .9s ease-out forwards !important
}

.word-block.title-block {
  height: 1.25em
}

.word-block.win-cascade {
  animation: winCascade .45s ease-out forwards !important;
  color: #fff !important;
  padding: 1px 4px;
  height: auto;
  margin-bottom: 0;
  border-radius: 3px
}

/* ── Word block animations ── */
@keyframes wordReveal {
  from { transform: scale(.88); opacity: .4 }
  to { transform: scale(1); opacity: 1 }
}

@keyframes flashNew {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .9), 0 0 18px rgba(34, 197, 94, .6); filter: brightness(1.8) }
  55% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); filter: brightness(1.1) }
  100% { box-shadow: none; filter: brightness(1) }
}

@keyframes winCascade {
  0% { opacity: 0; transform: scale(.75) translateY(5px); background-color: #16a34a }
  100% { opacity: 1; transform: scale(1) translateY(0); background-color: #16a34a }
}