/* ここで ためす：大きな スクリーン（本物の 上映画面）と、スマホで よむ QR */
.tryz { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .tryz { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; } }
.tv { position: relative; background: #2B2F45; border-radius: 24px; padding: 12px; box-shadow: 0 18px 40px rgba(43, 47, 69, .18); }
.tv::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 20%; height: 10px; translate: -50% 0; border-radius: 0 0 12px 12px; background: #2B2F45; opacity: .85; }
.tv-in { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #DCEFD4; }
.tv-in iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-in:not(.on) .tv-poster { filter: saturate(.9); }
.tv-go { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 30px 12px 22px; border: 0; border-radius: 999px; background: #FFD23F; color: #2B2F45; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 0 rgba(43, 47, 69, .2), 0 10px 30px rgba(43, 47, 69, .25); white-space: nowrap; }
.tv-go .pl { width: 0; height: 0; border-left: 16px solid #2B2F45; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.tv-go:active { translate: -50% calc(-50% + 3px); }
.tv-toast { position: absolute; left: 50%; top: 26px; translate: -50% 0; z-index: 2; pointer-events: none; font-size: 16px; font-weight: 700; color: #FFFDF8; background: #2B2F45; padding: 8px 20px; border-radius: 999px; animation: tvtoast .4s cubic-bezier(.3, 1.6, .5, 1); white-space: nowrap; }
@keyframes tvtoast { from { scale: .6; opacity: 0; } }
/* QR の カード */
.try-card { background: var(--k-card); border: 2px solid var(--k-line); border-radius: 22px; padding: 22px; display: grid; gap: 14px; justify-items: center; text-align: center; box-shadow: 0 3px 0 var(--k-shadow); }
.try-card h3 { font-size: 18px; margin: 0; line-height: 1.5; }
.try-card .qr { width: 188px; aspect-ratio: 1; display: grid; place-items: center; background: #FFFFFF; border-radius: 16px; padding: 12px; box-shadow: inset 0 0 0 2px var(--k-line); }
.try-card .qr svg { width: 100%; height: 100%; display: block; }
.try-card .qr-wait svg { width: 56px; color: var(--k-line); }
.try-card[data-state="wait"] .qr-wait svg { color: var(--k-ink-2); animation: tvwait 1.1s ease-in-out infinite alternate; }
@keyframes tvwait { to { transform: translateY(-5px); opacity: .5; } }
.try-card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; counter-reset: s; font-size: 15px; line-height: 1.6; }
.try-card li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.try-card li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--k-sun); color: #2B2F45; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.try-card .msg { font-size: 14px; color: var(--k-mikan-text); min-height: 1em; }
.try-card .msg:empty { display: none; }
.try-card .note { font-size: 13px; color: var(--k-ink-2); line-height: 1.6; }
.try-card .here { display: none; }
.tryz.touch .try-card .here { display: inline-flex; }
.try-card .here-note { display: none; font-size: 14px; line-height: 1.7; text-align: left; margin: 0; }
/* スマホで 見ている 人：自分の スマホの QR は よめないので、ボタンで ひらく */
.tryz.touch .try-card .qr, .tryz.touch .try-card ol { display: none; }
.tryz.touch .try-card .here-note { display: block; }
.try-card[data-state="idle"] .here, .try-card[data-state="wait"] .here { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .try-card .qr-wait svg { animation: none; } }