/* ===== Ko-fi support widget =====
   Uses the game's own CSS variables so it inherits the
   light/dark theme automatically. Sits directly under the
   hits ticket in the same side column (inside .widget-rail),
   in normal document flow - never fixed. */

.ko-fi-widget {
  --kw-w: 268px;
  width: var(--kw-w);
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2px;
  box-shadow: 0 24px 70px rgba(58, 68, 130, 0.14), 0 2px 8px rgba(58, 68, 130, 0.06);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  user-select: none;
}
.ko-fi-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 80px at 92% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(120px 80px at -10% 118%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.ko-fi-widget > * { position: relative; }

.ko-fi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  outline: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ko-fi-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}
.ko-fi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ko-fi-card:active { transform: translateY(0); }

/* coffee cup + steam */
.ko-badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.ko-badge svg { width: 30px; height: 30px; display: block; }
.ko-cup { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ko-steam {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ko-steam 2.6s ease-in-out infinite;
}
.ko-steam.d { animation-delay: 1.3s; }

/* copy */
.ko-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ko-title { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.ko-sub { font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* heart */
.ko-heart {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: auto;
  display: grid;
  place-items: center;
}
.ko-heart svg { width: 20px; height: 20px; display: block; }
.ko-heart path { fill: var(--accent); animation: ko-heart 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.ko-fi-widget.hidden { display: none !important; }

@keyframes ko-steam {
  0%   { opacity: 0; transform: translateY(2px) scaleX(0.8); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-5px) scaleX(1.15); }
}
@keyframes ko-heart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .ko-steam, .ko-heart path { animation: none; }
  .ko-fi-card { transition: none; }
  .ko-fi-card:hover { transform: none; }
}

/* ===== Layout: side rail under the hits ticket =====
   Both the hits ticket and the ko-fi card live in a small
   vertical rail (.widget-rail) that is the flex companion to
   the right of the game card. The rail keeps the card's top
   edge alignment (align-items: flex-start on .hits-layout) and
   stacks the ko-fi card directly under the hits ticket. */
.widget-rail {
  flex: 0 0 auto;
  width: var(--kw-w, 268px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.widget-rail > * { min-width: 0; }