/* 連続ログイン（/streak.mjs）。ヘッダーの小さな札（炎と日数）と、その日はじめての知らせ。 */
/* 色と丸みは「気に入りましたか？」の札（like-prompt.css）にそろえる：紙 #f6f3eb・朱 #a53924・紺 #1f3a6b。文字は詰めず、ポップに。 */
.streak{position:relative;display:inline-flex;align-items:center;flex:none}
.streak:empty{display:none}
/* ページの button の決まり（高さ・幅・余白）に引っぱられないよう、.streak の中で指定する。 */
.streak .streak-badge{display:inline-flex;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;width:auto;min-width:0;height:30px;min-height:0;margin:0;padding:0 10px 0 7px;border:2px solid #fff;border-radius:999px;background:#f6f3eb;color:#a53924;box-shadow:0 2px 0 rgba(31,58,107,.14),inset 0 0 0 1px #e6dccb;font:800 14px/1 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;cursor:pointer;white-space:nowrap;transition:transform .15s}
.streak-badge:hover{background:#fbf7ef}
.streak-badge:active{transform:scale(.95)}
.streak-badge:focus-visible{outline:3px solid #1f3a6b;outline-offset:2px}
.streak-badge[aria-expanded=true]{background:#fff;box-shadow:inset 0 0 0 2px #a53924}
.streak-flame{width:18px;height:18px;flex:none}
.streak-count{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.streak-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* 吹き出し：名札＋数の 2 行。画面の外へはみ出す分は /streak.mjs が --streak-shift でずらす。 */
.streak-pop{position:absolute;top:calc(100% + 10px);left:50%;z-index:70;box-sizing:border-box;width:max-content;min-width:180px;max-width:min(260px,calc(100vw - 24px));padding:8px;border:2px solid #fff;border-radius:18px;background:#f6f3eb;color:#1f3a6b;box-shadow:0 3px 0 rgba(31,58,107,.16),0 8px 20px rgba(20,14,8,.18);font:600 13px/1.3 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;text-align:left;transform:translateX(calc(-50% + var(--streak-shift, 0px)));animation:streak-pop-in .22s ease-out}
.streak-pop[hidden]{display:none}
.streak-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:6px 6px 6px 10px;border-radius:12px;background:#fff}
.streak-row+.streak-row{margin-top:5px}
.streak-num{flex:none;min-width:30px;padding:2px 9px;border-radius:999px;background:#a53924;color:#fff;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.streak-num.is-best{background:#1f3a6b}

/* その日はじめての知らせ：ヘッダーのすぐ下（動画には掛けない。top は /streak.mjs が決める）。 */
.streak-toast{position:fixed;left:50%;top:72px;z-index:1200;box-sizing:border-box;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);padding:6px 8px 6px 6px;border:2px solid #fff;border-radius:999px;background:#f6f3eb;color:#1f3a6b;box-shadow:0 3px 0 rgba(31,58,107,.16),0 8px 22px rgba(20,14,8,.2);font:800 14px/1.25 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;white-space:nowrap;cursor:pointer;transform:translateX(-50%);animation:streak-toast-in .5s cubic-bezier(.34,1.56,.64,1) backwards}
.streak-toast.is-leaving{animation:streak-toast-out .25s ease-in forwards}
.streak-toast-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #efe6d6}
.streak-toast-icon .streak-flame{width:22px;height:22px;animation:streak-wiggle .7s .4s ease-in-out}
.streak-toast-label{min-width:0;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.streak-day{flex:none;padding:4px 11px;border-radius:999px;background:#a53924;color:#fff;font-size:14px;font-weight:900;letter-spacing:.03em;transform:rotate(-3deg);box-shadow:0 0 0 2px #fff,0 2px 0 2px rgba(31,58,107,.14);font-variant-numeric:tabular-nums}
/* 節目の日：少し大きく、紙ふぶきを少しだけ。 */
.streak-toast.is-milestone{gap:11px;padding:8px 10px 8px 8px;font-size:16px;box-shadow:0 0 0 3px #f6c044,0 3px 0 3px rgba(31,58,107,.16),0 10px 26px rgba(20,14,8,.22)}
.streak-toast.is-milestone .streak-toast-icon{width:42px;height:42px}
.streak-toast.is-milestone .streak-toast-icon .streak-flame{width:28px;height:28px}
.streak-toast.is-milestone .streak-day{padding:5px 13px;font-size:16px}
.streak-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible}
.streak-confetti i{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:2px;background:#a53924;opacity:0;animation:streak-confetti 1.1s .25s ease-out forwards}
.streak-confetti i:nth-child(3n+2){background:#1f3a6b;border-radius:50%;width:6px;height:6px}
.streak-confetti i:nth-child(3n){background:#f6c044}
.streak-confetti i:nth-child(1){--x:-120px;--y:-30px;--r:-200deg}
.streak-confetti i:nth-child(2){--x:-90px;--y:-40px;--r:160deg}
.streak-confetti i:nth-child(3){--x:-55px;--y:-44px;--r:-120deg}
.streak-confetti i:nth-child(4){--x:-20px;--y:-46px;--r:220deg}
.streak-confetti i:nth-child(5){--x:20px;--y:-46px;--r:-180deg}
.streak-confetti i:nth-child(6){--x:55px;--y:-42px;--r:140deg}
.streak-confetti i:nth-child(7){--x:92px;--y:-38px;--r:-160deg}
.streak-confetti i:nth-child(8){--x:124px;--y:-26px;--r:200deg}
.streak-confetti i:nth-child(9){--x:-140px;--y:20px;--r:120deg}
.streak-confetti i:nth-child(10){--x:140px;--y:22px;--r:-140deg}
@keyframes streak-confetti{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 26px)) rotate(var(--r))}}
@keyframes streak-toast-in{0%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.8)}60%{opacity:1;transform:translateX(-50%) translateY(2px) scale(1.05)}100%{opacity:1;transform:translateX(-50%)}}
@keyframes streak-toast-out{to{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.92)}}
@keyframes streak-pop-in{from{opacity:0;transform:translateX(calc(-50% + var(--streak-shift, 0px))) translateY(-6px)}to{opacity:1}}
@keyframes streak-wiggle{0%,100%{transform:none}30%{transform:rotate(-12deg) scale(1.12)}60%{transform:rotate(8deg)}}
@media (max-width:560px){
  .streak .streak-badge{height:28px;padding:0 8px 0 6px;font-size:13px}
  .streak-flame{width:16px;height:16px}
  .streak-toast{font-size:13px}
  .streak-toast.is-milestone{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .streak-badge,.streak-pop,.streak-toast,.streak-toast.is-leaving,.streak-toast-icon .streak-flame{animation:none;transition:none}
  .streak-confetti{display:none}
}

/* ---- 連続ログインの特典（/streak-rewards.mjs）。短く・ポップに：名札＋数、額と時間は小さなシール。 ---- */
/* 吹き出しの特典の行：お休み・1本チケット（一覧へ）・友達に贈る・割引。 */
.streak-pop{max-width:min(300px,calc(100vw - 24px))}
.streak-rewards{display:grid;gap:5px;margin-top:5px;padding-top:6px;border-top:2px dashed #e6dccb}
.streak-rewards .streak-row{margin:0}
.streak-row svg{width:22px;height:22px;flex:none}
.streak-row-label{flex:1;min-width:0}
a.streak-row{color:inherit;text-decoration:none;transition:background .15s,transform .15s}
a.streak-row:hover{background:#fbf7ef}
a.streak-row:active{transform:scale(.98)}
.streak-row.is-rest,.streak-row.is-ticket{justify-content:flex-start;gap:8px}
.streak-num.is-rest{background:#1f3a6b}
.streak-row.is-gift,.streak-row.is-discount{flex-wrap:wrap;justify-content:flex-start;gap:6px 8px;padding:6px}
.streak .streak-give{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;width:auto;min-width:0;height:34px;min-height:0;margin:0;padding:0 12px 0 4px;border:0;border-radius:999px;background:#a53924;color:#fff;font:800 13px/1 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 rgba(31,58,107,.18);transition:transform .15s,background .15s}
.streak .streak-give:hover{background:#8e3020}
.streak .streak-give:active{transform:scale(.96)}
.streak .streak-give:disabled{opacity:.6;cursor:wait}
.streak-give .streak-row-icon{box-sizing:border-box;width:26px;height:26px;padding:3px;border-radius:50%;background:#fff}
.streak-give-count{padding:2px 7px;border-radius:999px;background:#fff;color:#a53924;font-size:12px;font-variant-numeric:tabular-nums}
.streak-taken{display:inline-flex;align-items:center;gap:4px;padding:0 4px;color:#6b6157;font-size:11.5px;font-weight:700}
.streak-taken-num{min-width:18px;padding:1px 6px;border-radius:999px;background:#ece4d6;color:#1f3a6b;text-align:center;font-variant-numeric:tabular-nums}
.streak-status{margin:0;padding:0 8px;color:#1f3a6b;font-size:12px;font-weight:700}
.streak-status:empty{display:none}
.streak-off{flex:none;padding:3px 10px;border-radius:999px;background:#a53924;color:#fff;font-weight:900;white-space:nowrap;letter-spacing:.02em;transform:rotate(-3deg);box-shadow:0 0 0 2px #fff,0 2px 0 2px rgba(31,58,107,.14)}
.streak-until{display:inline-flex;align-items:center;gap:5px;color:#5c5249;font-size:12px;font-weight:700}
.streak-date{color:#1f3a6b;font-weight:900}
.streak-go{margin-left:auto;padding:5px 11px;border-radius:999px;background:#1f3a6b;color:#fff;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.streak-go:hover{background:#2c4f8f}

/* 知らせに足すシール（1本チケット／額 OFF）。少し遅れて弾んで出る。 */
.streak-reward{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 3px;border-radius:999px;background:#fff;color:#a53924;font-size:13px;font-weight:900;white-space:nowrap;box-shadow:inset 0 0 0 2px #a53924;transform:rotate(3deg);animation:streak-reward-in .5s .45s cubic-bezier(.34,1.56,.64,1) backwards}
.streak-reward-icon{width:22px;height:22px;flex:none}
.streak-reward.is-off{padding:4px 11px;background:#1f3a6b;color:#fff;letter-spacing:.02em;box-shadow:0 0 0 2px #fff,0 2px 0 2px rgba(31,58,107,.14)}
/* left:50% の固定の札は幅が画面の半分に縮むので、シールが 2 つの日は中身の幅にする（max-width で画面に収める）。 */
.streak-toast.has-reward{width:max-content}
@keyframes streak-bounce-in{0%{opacity:0;transform:translateY(-10px) scale(.85)}60%{opacity:1;transform:translateY(2px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes streak-reward-in{0%{opacity:0;transform:scale(.4) rotate(-20deg)}100%{opacity:1;transform:rotate(3deg)}}

/* 会員限定の札の「チケットで見る」（公開の動画ページ）と、チケットで見ている間の小さな札。 */
.streak-ticket-use{margin:0 0 14px}
.streak-ticket-button{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;max-width:420px;min-height:50px;margin:0;padding:6px 18px 6px 6px;border:2px solid #fff;border-radius:999px;background:#a53924;color:#fff;font:800 15px/1.2 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;cursor:pointer;box-shadow:0 3px 0 rgba(31,58,107,.18),0 6px 16px rgba(20,14,8,.14);transition:transform .15s,background .15s;animation:streak-bounce-in .5s cubic-bezier(.34,1.56,.64,1) backwards}
.streak-ticket-button:hover{background:#8e3020}
.streak-ticket-button:active{transform:scale(.97)}
.streak-ticket-button:disabled{opacity:.65;cursor:wait}
.streak-ticket-button:focus-visible{outline:3px solid #1f3a6b;outline-offset:2px}
.streak-ticket-button .streak-ticket-icon{box-sizing:border-box;width:36px;height:36px;padding:5px;border-radius:50%;background:#fff}
.streak-hours{flex:none;padding:2px 8px;border-radius:999px;background:#f6c044;color:#1f3a6b;font-size:12px;font-weight:900;letter-spacing:.02em;transform:rotate(-4deg);font-variant-numeric:tabular-nums}
.streak-ticket-status{margin:6px 0 0;color:#a53924;font-size:13px;font-weight:700}
.streak-ticket-status:empty{display:none}
.streak-ticket-on{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:4px 6px 4px 4px;border-radius:999px;background:#f6f3eb;color:#1f3a6b;font:800 13px/1.2 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;box-shadow:inset 0 0 0 2px #e6dccb}
.streak-ticket-on .streak-ticket-icon{box-sizing:border-box;width:26px;height:26px;padding:3px;border-radius:50%;background:#fff}
.streak-ticket-on+.w-title{margin-top:8px}

/* 申し込みの 1 行（額のシール＋「連続ログイン特典」）。 */
.streak-discount-line{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#1f3a6b;font-size:14px;font-weight:800;line-height:1.3}
.streak-discount-line .streak-ticket-icon{box-sizing:border-box;width:28px;height:28px;padding:3px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #efe6d6}

/* 受け取りのページ（/gift/<印>）。 */
.gift-card{box-sizing:border-box;max-width:440px;margin:24px auto 40px;padding:30px 22px 26px;border:2px solid #fff;border-radius:28px;background:#f6f3eb;color:#1f3a6b;text-align:center;box-shadow:0 4px 0 rgba(31,58,107,.14),0 14px 32px rgba(20,14,8,.14)}
.gift-art{display:grid;place-items:center;width:104px;height:104px;margin:0 auto 6px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #efe6d6;animation:streak-bounce-in .6s cubic-bezier(.34,1.56,.64,1) backwards}
.gift-art-icon{width:64px;height:64px;animation:streak-wiggle .8s .5s ease-in-out}
.gift-card .gift-title{margin:10px 0 8px;color:#1f3a6b;font-size:clamp(22px,6vw,28px);line-height:1.3;letter-spacing:0}
.gift-lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin:0 0 6px;color:#5c5249;font-size:14px;font-weight:700;line-height:1.5}
.gift-card .gift-button{display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:52px;margin:14px 0 0;padding:0 28px;border:2px solid #fff;border-radius:999px;background:#a53924;color:#fff;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 rgba(31,58,107,.18)}
.gift-card .gift-button:hover{background:#8e3020}
.gift-status{min-height:1.4em;margin:12px 0 0;color:#a53924;font-size:14px;font-weight:700;line-height:1.5}
.gift-count{display:flex;width:fit-content;align-items:center;gap:10px;margin:4px auto 0;padding:6px 6px 6px 14px;border-radius:999px;background:#fff;font-weight:800}
.gift-link{display:inline-block;margin-top:12px;color:#1f3a6b;font-weight:700}
.gift-card.is-closed .gift-art{opacity:.7}
.gift-card.is-closed .gift-title{font-size:18px}
@media (max-width:560px){
  .streak-reward{font-size:12px;padding-right:8px}
  .streak-reward-icon{width:20px;height:20px}
  .streak-toast.has-reward{gap:6px}
  .streak-toast.has-reward .streak-toast-icon{width:30px;height:30px}
  /* シールが 2 つ並ぶ日は、名札を「…」で切らずに 2 行まで折り返す。 */
  .streak-toast.has-reward .streak-toast-label{white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
  .streak-toast.has-reward .streak-day{padding:4px 9px;font-size:13px}
  .streak-ticket-button{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .streak-reward,.streak-ticket-button,.gift-art,.gift-art-icon{animation:none}
}