/* THE DUCK on FictionVision: the card, and the room the game draws in */
.duck-art { position: absolute; inset: 0; display: block; background: #06080a; overflow: hidden; }
.duck-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.duck-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 8, 10, .6), rgba(6, 8, 10, 0) 50%); pointer-events: none; }
.duck-art .ttl { position: absolute; z-index: 2; left: 6%; top: 9%; text-align: left; font: 700 clamp(16px, 7.2cqw, 36px)/.94 var(--display); letter-spacing: .02em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
@container (max-width: 330px) { .duck-art .ttl { display: none; } }
.duck-page { padding: 0 0 32px; }
.duck-stage { position: relative; width: 100%; height: min(82vh, 62vw); min-height: 420px; background: #06080a; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.duck-canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
.duck-hud { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; padding: 0 16px; text-align: center; font: 400 14px/1.4 var(--body, sans-serif); color: rgba(236, 228, 211, .62); pointer-events: none; }
@media (max-width: 700px) { .duck-stage { height: calc(100svh - 120px); min-height: 0; } }
/* how to play sits under the stage, never over the tub (the wall already says what to do) */
.duck-page > .duck-hud { position: static; margin: 14px auto 0; max-width: 62ch; }

/* the quacks' credit, quiet under the stage */
.duck-credit { margin: 10px auto 0; max-width: 62ch; text-align: center; font-size: 12px; line-height: 1.4; color: rgba(236, 228, 211, 0.5); }
.duck-credit a { color: inherit; }