/* Shared Brain Game UI components */
.bg-paper-texture {
  background-color: var(--bg-paper);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,.025) 0%, transparent 22%),
    radial-gradient(circle at 88% 78%, rgba(0,0,0,.02) 0%, transparent 24%);
}

.ink-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(43,43,43,.12);
  box-shadow: var(--shadow-paper);
  position: relative;
}

.ink-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../../assets/svg/paper-noise.svg');
  opacity: .045;
  pointer-events: none;
}

.seal-button,
.ghost-button,
.shell-btn {
  font-family: var(--font-title);
  border: 1px solid var(--ink-800);
  background: transparent;
  color: var(--ink-800);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--motion-fast), background var(--motion-normal), color var(--motion-normal), box-shadow var(--motion-normal);
}

.seal-button:hover,
.ghost-button:hover,
.shell-btn:hover {
  background: var(--ink-800);
  color: #fff;
}

.seal-button:active,
.ghost-button:active,
.shell-btn:active {
  transform: translateY(1px) scale(.98);
}

.mode-pill,
.game-tag,
.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid rgba(43,43,43,.12);
  background: var(--ink-wash);
  color: var(--ink-600);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
}

.result-panel {
  background: rgba(252, 249, 242, .96);
  border: 1px solid rgba(43,43,43,.14);
  box-shadow: 0 28px 80px rgba(0,0,0,.18);
  border-radius: var(--radius-card);
}

.player-badge-soft {
  background: var(--seal-red-soft);
  color: var(--seal-red);
  border: 1px solid rgba(196, 52, 45, .24);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .85rem;
}

.ink-play-surface {
  background-color: var(--bg-paper-soft);
  background-image:
    linear-gradient(var(--paper-fiber) 1px, transparent 1px),
    radial-gradient(circle at 20% 12%, rgba(20,20,20,.035), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(196,52,45,.045), transparent 24%),
    url('../../assets/svg/paper-noise.svg');
  background-size: 100% 42px, 100% 100%, 100% 100%, 220px 220px;
}

.ink-hud-panel {
  background: rgba(252, 249, 242, .9);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
  backdrop-filter: blur(10px);
}

.ink-symbol,
.ink-animal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-900);
  font-family: var(--font-title);
  line-height: 1;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), transparent 42%),
    radial-gradient(circle at 50% 56%, rgba(20,20,20,.09), transparent 64%),
    var(--bg-paper-soft);
  border: 1px solid rgba(43,43,43,.22);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.08);
}

.ink-symbol {
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  font-size: 1em;
}

.ink-animal-mark {
  width: 52px;
  height: 52px;
  border-radius: 45% 55% 48% 52%;
  font-size: 1.9rem;
}

.ink-symbol.is-seal,
.ink-animal-mark.is-seal {
  color: #fff;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.22), transparent 36%),
    var(--seal-red);
  border-color: rgba(105, 20, 16, .28);
}

.ink-brush-note {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink-600);
  font-family: var(--font-ui);
  font-size: .9rem;
}

.ink-brush-note::before {
  content: "";
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .45;
}

.ink-result-stamp {
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  min-height: 74px;
  padding: .45rem;
  color: var(--seal-red);
  border: 2px solid currentColor;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: .14em;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 4px rgba(196,52,45,.08);
}