/* Redesign preview additions, on top of /css/style.css */

.hero-visual .pv-viz { width: 100%; max-width: 420px; height: 220px; display: block; }

/* Game art on cards */
.pv-card { overflow: hidden; }
.pv-cover {
  position: relative; display: block; aspect-ratio: 16 / 9;
  margin: 0; background: var(--bg-surface); overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.pv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pv-cover:hover img { transform: scale(1.03); }
.pv-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.85), rgba(10,10,10,0) 55%);
}
.pv-visits, .pv-play {
  position: absolute; bottom: 12px; z-index: 1;
  font: 600 12px var(--font-body); letter-spacing: .02em;
}
.pv-visits { left: 14px; color: #fff; }
.pv-play { right: 14px; color: var(--accent-h); }
.pv-cover-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 30% 30%, var(--accent-dim), transparent 60%), var(--bg-surface);
}
.pv-cover-empty::after { display: none; }
.pv-cover-empty span { font: 700 22px var(--font-head); color: #fff; opacity: .85; text-align: center; padding: 0 16px; }
.pv-cover-empty em { font: 400 12px var(--font-body); color: var(--text-subtle); font-style: normal; }

/* Bottom player */
.pv-dock {
  position: fixed; left: 50%; bottom: 16px; z-index: 200;
  transform: translate(-50%, 140%); transition: transform .35s ease;
  width: min(760px, calc(100% - 24px));
  display: grid; grid-template-columns: auto auto auto 1fr auto auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(17,17,17,.92); backdrop-filter: blur(12px);
  border: 1px solid var(--border-lg); box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.pv-dock.show { transform: translate(-50%, 0); }
.pv-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-lg);
  background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer;
}
.pv-btn:hover { border-color: var(--accent); color: var(--accent-h); }
.pv-toggle { width: 40px; height: 40px; background: var(--accent); border-color: var(--accent); }
.pv-toggle:hover { background: var(--accent-h); color: #fff; }
.pv-info { min-width: 0; }
.pv-title { font: 600 14px var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sub { font: 400 12px var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-mini { width: 96px; height: 28px; }
.pv-bar {
  grid-column: 1 / 5; grid-row: 2; height: 4px; border-radius: 2px; background: var(--border-lg); cursor: pointer; position: relative;
}
.pv-bar::before { content: ''; position: absolute; inset: -8px 0; } /* bigger tap target */
.pv-fill { height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.pv-time { font: 400 12px var(--font-body); color: var(--text-muted); text-align: right; white-space: nowrap; }

@media (max-width: 600px) {
  .pv-mini { display: none; }
  .pv-dock { grid-template-columns: auto auto auto 1fr auto; padding: 10px 12px; bottom: 10px; }
  .pv-bar { grid-column: 1 / 4; }
  .pv-time { grid-column: 4; }
  .pv-knob { grid-column: 5; }
  .hero-visual .pv-viz { height: 140px; margin: 0 auto; }
}

/* Work cards in two tight columns (no gaps beside tall cards) */
.projects-grid.pv-masonry { display: flex; gap: 24px; align-items: flex-start; }
.pv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* Volume knob (right edge of the player, spans both rows) */
.pv-time { grid-column: 5; grid-row: 2; }
.pv-knob {
  grid-column: 6; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%;
  cursor: ns-resize; touch-action: none; position: relative; outline: none;
  /* orange arc shows the level, from 7 o'clock to 5 o'clock */
  background: conic-gradient(from -135deg, var(--accent) calc(var(--vol, 80) * 2.7deg), var(--border-lg) 0 270deg, transparent 0);
  padding: 4px;
}
.pv-knob:focus-visible { box-shadow: 0 0 0 2px var(--accent-h); }
.pv-knob-dial {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #2a2a2a, #141414); border: 1px solid #2c2c2c;
  transition: transform .05s linear;
}
.pv-knob-dot { position: absolute; top: 4px; left: 50%; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--accent-h); }
.pv-knob.muted .pv-knob-dot { background: var(--text-subtle); }
@media (max-width: 600px) {
  .pv-time { grid-column: 4; }
  .pv-knob { grid-column: 5; width: 40px; height: 40px; }
}

/* Small label above the name: no decorative line, calmer spacing (owner: the line looked AI-made) */
.hero-eyebrow::before { display: none; }
.hero-eyebrow { letter-spacing: 0.08em; font-size: 12px; }