/* Media: game/video embeds, link cards, image lightbox, composer uploads. Float tokens only. */

/* ---------- video embeds (YouTube, Twitch) ---------- */
.embed { display: block; margin: var(--s-3) 0; max-width: 640px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-solid); box-shadow: var(--e-1), inset 0 0 0 1px var(--border); color: var(--text); text-decoration: none;
  transition: transform var(--t-med) var(--ease-liquid), box-shadow var(--t-med) var(--ease-liquid); }
.embed:hover { transform: translateY(-2px); box-shadow: var(--e-2), inset 0 0 0 1px var(--border); }
.embed-poster { position: relative; display: block; aspect-ratio: 16 / 9; background: #0c0d10 center / cover; overflow: hidden; }
.embed-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease-liquid), opacity var(--t-med); }
.embed:hover .embed-poster img { transform: scale(1.03); }
.embed-twitch .embed-poster { background: radial-gradient(120% 90% at 20% 10%, #a970ff 0%, #6441a5 45%, #1f1235 100%); }
.embed-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 13, 16, .55); backdrop-filter: blur(var(--glass-blur, 14px)) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform var(--t-med) var(--ease-spring), background var(--t-med); }
.embed-play svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.embed:hover .embed-play { transform: scale(1.08); background: var(--accent); }
.embed-meta { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; font-size: var(--fs-sm); }
.embed-src { flex: none; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.embed-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.embed-video.playing .embed-poster { cursor: default; }
.embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; animation: embed-in var(--t-med) var(--ease-liquid); }
@keyframes embed-in { from { opacity: 0; transform: scale(.985); } }

/* ---------- link cards (Steam, itch.io) ---------- */
.embed-card { display: grid; grid-template-columns: minmax(120px, 230px) 1fr; align-items: stretch; max-width: 600px; }
.embed-card .embed-thumb { display: block; width: 100%; height: 100%; min-height: 96px; object-fit: cover; background: var(--surface-2); }
.embed-steam .embed-thumb { aspect-ratio: 460 / 215; height: auto; align-self: center; }
.embed-itch span.embed-thumb { background: linear-gradient(135deg, #fa5c5c, #c23c62); }
.embed-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.embed-card .embed-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.embed-desc { font-size: var(--fs-xs); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.embed-desc:empty, .embed-extra:empty { display: none; }
.embed-extra { margin-top: auto; align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent);
  font: 700 var(--fs-xs)/1.4 var(--font-ui); }
.embed[data-card]:not(.hydrated) .embed-title { animation: embed-shimmer 1.4s ease-in-out infinite; }
@keyframes embed-shimmer { 50% { opacity: .55; } }
.embed.hydrated .embed-title, .embed.hydrated .embed-desc { animation: embed-fade var(--t-med) var(--ease-liquid); }
@keyframes embed-fade { from { opacity: 0; } }
@media (max-width: 560px) {
  .embed-card { grid-template-columns: 1fr; }
  .embed-card .embed-thumb { aspect-ratio: 460 / 215; min-height: 0; }
}
.sig .embed { max-width: 420px; }

/* ---------- images in posts and the lightbox ---------- */
.content .bb-img, .post-body .bb-img { cursor: zoom-in; max-width: 100%; transition: transform var(--t-med) var(--ease-liquid), box-shadow var(--t-med); }
.content .bb-img:hover, .post-body .bb-img:hover { box-shadow: var(--e-2); }
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px;
  background: rgba(8, 9, 12, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  cursor: zoom-out; animation: lb-in var(--t-med) var(--ease-liquid); }
.lightbox img { max-width: min(96vw, 2560px); max-height: 92vh; border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  animation: lb-pop var(--t-slow) var(--ease-spring); }
.lightbox.out { animation: lb-in var(--t-fast) reverse forwards; }
.lightbox a { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }

/* ---------- composer: drop zone and upload progress ---------- */
.editor .toolbar .attach-btn { margin-left: auto; color: var(--accent); }
.editor .toolbar .attach-btn:hover { background: var(--accent-soft); color: var(--accent); }
.drop-ready { position: relative; }
.drop-ready::after { content: "Drop images to attach"; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  border-radius: inherit; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent); font: 700 var(--fs-sm)/1 var(--font-ui); animation: lb-in var(--t-fast) var(--ease-liquid); }
.uploading { position: relative; }
.uploading::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 40%; z-index: 6; border-radius: 3px; background: var(--accent);
  animation: up-bar 1s var(--ease-glide, ease-in-out) infinite; }
@keyframes up-bar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
textarea.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.seo-list { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--fs-sm); }
.form-actions.start { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .embed, .embed-poster img, .embed-play, .lightbox, .lightbox img, .embed-video iframe { transition: none; animation: none; }
  .embed:hover { transform: none; }
}