/* =========================================================
 * 🏆 月間チャンピオン／努力賞 — 受け取りの演出・カードの裏面・ランキングの説明（2026-09-26）
 * assets/js/rank-reward.js と templates/fansite-game-ranking.php が使う。
 * 金の枠はカードの絵に焼きこみ済み（SEOツール card_frame.py）＝ここでは二重に枠を描かず、ほんのり光だけ。
 * ========================================================= */

.rrw-ico { width: 1.4em; height: 1.4em; object-fit: contain; vertical-align: -0.3em; flex: none; }

/* ---------- 演出の土台 ---------- */
html.rrw-open { overflow: hidden; }
.rrw {
	position: fixed; inset: 0; z-index: calc(var(--rds-z-overlay, 9000) + 50);
	display: flex; align-items: center; justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	font-family: var(--rds-font, inherit);
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}
.rrw__dim { position: absolute; inset: 0; background: rgba(12, 8, 24, .9); opacity: 0; transition: opacity .45s ease; }
.rrw.is-in .rrw__dim { opacity: 1; }
.rrw.is-away { opacity: 0; transition: opacity .4s ease; }
.rrw__stage {
	position: relative; z-index: 2; width: min(420px, 100%); max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
	overflow-y: auto; overscroll-behavior: contain; padding: 6px 0;
}

/* バナー */
.rrw__banner {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
	border-radius: var(--rds-radius-pill, 999px); font-weight: 800; letter-spacing: .04em;
	background: linear-gradient(135deg, #fff3c4, #f6c343 45%, #d99a1b);
	color: #5a3500; box-shadow: 0 6px 22px rgba(246, 195, 67, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
	font-size: clamp(16px, 4.6vw, 20px);
	opacity: 0; transform: translateY(-14px) scale(.9);
}
.rrw__banner b { font-size: 1.25em; }
.rrw.is-in .rrw__banner { animation: rrw-drop .55s .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* トロフィー */
.rrw__trophy { width: clamp(72px, 22vw, 110px); aspect-ratio: 1; opacity: 0; transform: scale(.3) translateY(20px); }
.rrw__trophyico { width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(255, 210, 90, .7)); }
.rrw.is-in .rrw__trophy { animation: rrw-pop .6s .15s cubic-bezier(.2, 1.5, .4, 1) forwards; }

/* 金の光 */
.rrw__rays {
	position: absolute; left: 50%; top: 46%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; z-index: 1;
	background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, .20) 0deg 8deg, transparent 8deg 22deg);
	-webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 18%, transparent 55%);
	mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 18%, transparent 55%);
	opacity: 0;
}
.rrw.is-in .rrw__rays { animation: rrw-fade .8s .9s forwards, rrw-spin 26s linear infinite; }

/* かみふぶき（金・ピンク・白） */
.rrw__confetti, .rrw__hearts { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.rrw__confetti i {
	position: absolute; top: -8%; left: calc(3% + var(--i) * 3.4%); width: 8px; height: 14px; border-radius: 2px;
	background: hsl(calc(40 + var(--i) * 37), 90%, 66%); opacity: 0;
}
.rrw.is-in .rrw__confetti i { animation: rrw-fall calc(2.6s + (var(--i) * .07s)) calc(1.1s + (var(--i) * .045s)) ease-in forwards; }

/* カード（飛び出して裏返る） */
.rrw__card { width: min(64vw, 260px); aspect-ratio: 1143 / 1600; perspective: 1200px; opacity: 0; transform: translateY(40vh) scale(.4) rotate(-8deg); }
.rrw.is-in .rrw__card { animation: rrw-fly .75s 1.15s cubic-bezier(.2, 1.1, .3, 1) forwards; }
.rrw__flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
.rrw.is-in .rrw__flip { animation: rrw-flip .7s 1.55s ease-out forwards; }
.rrw__face, .rrw__back { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rrw__face { box-shadow: 0 0 0 1px rgba(255, 230, 150, .5), 0 12px 44px rgba(255, 196, 64, .55); background: #222; }
.rrw__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rrw__back { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #ffe9a8, #d4981e 60%, #7a4a07); }
.rrw__back .rrw-ico { width: 40%; height: auto; }
.rrw__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); transform: translateX(-120%); }
.rrw.is-in .rrw__shine { animation: rrw-shine 1.6s 2.2s ease-in-out 2; }

.rrw__caption { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-weight: 800; font-size: clamp(15px, 4.2vw, 18px); color: #ffe7a0; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); opacity: 0; }
.rrw__meta { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .82); opacity: 0; }
.rrw__meta em { color: #ffd0e0; font-style: normal; }
.rrw__line { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; color: #fff; background: rgba(255, 255, 255, .1); border-radius: 12px; padding: 8px 12px; opacity: 0; }
.rrw__note { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .7); opacity: 0; }
.rrw.is-in .rrw__caption, .rrw.is-in .rrw__meta, .rrw.is-in .rrw__line, .rrw.is-in .rrw__note { animation: rrw-fade .5s 2.3s forwards; }

.rrw__ok {
	min-height: var(--rds-tap, 44px); min-width: 180px; margin-top: 4px; padding: 10px 26px; border: 0; cursor: pointer;
	border-radius: var(--rds-radius-pill, 999px); font: inherit; font-weight: 800; font-size: 17px;
	background: linear-gradient(135deg, #ffd66b, #f5a524); color: #4a2a00; box-shadow: 0 6px 18px rgba(245, 165, 36, .5);
	opacity: 0;
}
.rrw.is-in .rrw__ok { animation: rrw-fade .4s 2.4s forwards; }
.rrw__ok:disabled { cursor: default; filter: grayscale(.4) brightness(.85); }
.rrw__ok.is-ready { animation: rrw-fade .01s forwards, rrw-bounce 1.6s .1s ease-in-out infinite !important; }
.rrw__ok:focus-visible { outline: 3px solid var(--rds-focus, #fff); outline-offset: 3px; }

/* 1〜3位の色（バナーの色で分ける） */
.rrw--r2 .rrw__banner { background: linear-gradient(135deg, #ffffff, #cfd8e6 45%, #8f9bb0); color: #26324a; box-shadow: 0 6px 22px rgba(200, 215, 240, .45); }
.rrw--r3 .rrw__banner { background: linear-gradient(135deg, #ffe6cf, #e0a06b 45%, #a8612b); color: #3f1d00; box-shadow: 0 6px 22px rgba(224, 160, 107, .45); }

/* ---------- 努力賞（パステル・プレゼント箱がほどける） ---------- */
.rrw--effort { color: #5b3a5e; }
.rrw--effort .rrw__dim { background: linear-gradient(160deg, rgba(255, 228, 240, .96), rgba(226, 236, 255, .96)); }
.rrw__gift { position: relative; width: clamp(96px, 28vw, 130px); height: clamp(96px, 28vw, 130px); }
.rrw__box { position: absolute; left: 8%; right: 8%; bottom: 0; height: 62%; border-radius: 12px; background: linear-gradient(#ffc6dc, #ff9ec3); box-shadow: 0 8px 20px rgba(255, 140, 180, .35); }
.rrw__box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 16%; margin-left: -8%; background: #fff4b8; }
.rrw__lid { position: absolute; left: 2%; right: 2%; top: 26%; height: 20%; border-radius: 10px; background: linear-gradient(#ffd6e6, #ffb3cf); transform-origin: 10% 100%; }
.rrw__lid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 16%; margin-left: -8%; background: #fff4b8; }
.rrw__bow { position: absolute; left: 50%; top: 10%; width: 44%; height: 22%; margin-left: -22%; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 25% 50%, #fff4b8 30%, transparent 32%), radial-gradient(circle at 75% 50%, #fff4b8 30%, transparent 32%); }
.rrw__giftico { position: absolute; right: -14%; bottom: -8%; width: 42%; height: 42%; opacity: 0; }
.rrw--effort.is-in .rrw__gift { animation: rrw-wiggle .5s .2s ease-in-out 2; }
.rrw--effort.is-in .rrw__lid { animation: rrw-lid .7s 1.1s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.rrw--effort.is-in .rrw__bow { animation: rrw-bow .6s 1s ease-out forwards; }
.rrw--effort.is-in .rrw__giftico { animation: rrw-fade .4s 1.2s forwards; }
.rrw__banner--ribbon { background: linear-gradient(135deg, #fff, #ffd7e8); color: #c2185b; box-shadow: 0 6px 18px rgba(255, 150, 190, .35); position: relative; }
.rrw--effort.is-in .rrw__banner { animation: rrw-drop .55s 1.5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.rrw--effort .rrw__card { transform: translateY(24px) scale(.85); }
.rrw--effort.is-in .rrw__card { animation: rrw-float 1s 1.7s ease-out forwards; }
.rrw--effort .rrw__flip { transform: none; }
.rrw--effort.is-in .rrw__flip { animation: none; }
.rrw--effort .rrw__back { display: none; }
.rrw--effort .rrw__face { box-shadow: 0 0 0 1px rgba(255, 200, 225, .8), 0 12px 40px rgba(255, 150, 190, .45); }
.rrw--effort .rrw__caption { color: #c2185b; text-shadow: none; }
.rrw--effort .rrw__meta, .rrw--effort .rrw__note { color: #7b5a80; }
.rrw--effort .rrw__line { color: #5b3a5e; background: rgba(255, 255, 255, .7); }
.rrw--effort.is-in .rrw__caption, .rrw--effort.is-in .rrw__meta, .rrw--effort.is-in .rrw__line, .rrw--effort.is-in .rrw__note { animation: rrw-fade .5s 2.5s forwards; }
.rrw--effort .rrw__ok { background: linear-gradient(135deg, #ffb6d2, #ff8fb8); color: #fff; box-shadow: 0 6px 18px rgba(255, 143, 184, .45); }
.rrw--effort.is-in .rrw__ok { animation: rrw-fade .4s 2.6s forwards; }
.rrw__hearts i { position: absolute; bottom: -10%; left: calc(4% + var(--i) * 5.2%); width: 14px; height: 14px; opacity: 0; background: radial-gradient(circle at 30% 30%, #fff 0 20%, transparent 21%), #ff9ec3; transform: rotate(45deg); border-radius: 3px 50% 50% 50%; }
.rrw--effort.is-in .rrw__hearts i { animation: rrw-rise calc(3s + var(--i) * .08s) calc(1.4s + var(--i) * .07s) ease-out forwards; }

/* ---------- 横向き・小さい画面 ---------- */
@media (orientation: landscape) and (max-height: 560px) {
	.rrw__stage { width: min(760px, 100%); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "card top" "card cap" "card meta" "card line" "card ok" "card note"; column-gap: 20px; align-items: center; text-align: left; }
	.rrw__card { grid-area: card; width: auto; height: min(82vh, 330px); }
	.rrw__trophy, .rrw__gift { display: none; }
	.rrw__banner { grid-area: top; justify-self: start; }
	.rrw__caption { grid-area: cap; }
	.rrw__meta { grid-area: meta; }
	.rrw__line { grid-area: line; }
	.rrw__ok { grid-area: ok; justify-self: start; }
	.rrw__note { grid-area: note; }
}

/* ---------- 動きをへらす設定 ---------- */
.rrw.is-still *, .rrw.is-still { animation: none !important; transition: none !important; }
.rrw.is-still .rrw__dim, .rrw.is-still .rrw__banner, .rrw.is-still .rrw__trophy, .rrw.is-still .rrw__card, .rrw.is-still .rrw__caption,
.rrw.is-still .rrw__meta, .rrw.is-still .rrw__line, .rrw.is-still .rrw__note, .rrw.is-still .rrw__ok, .rrw.is-still .rrw__giftico { opacity: 1; transform: none; }
.rrw.is-still .rrw__flip { transform: none; }
.rrw.is-still .rrw__lid { transform: translate(-30%, -140%) rotate(-24deg); }
.rrw.is-still .rrw__rays, .rrw.is-still .rrw__confetti, .rrw.is-still .rrw__hearts { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rrw *, .rrw { animation: none !important; transition: none !important; }
	.rrw__dim, .rrw__banner, .rrw__trophy, .rrw__card, .rrw__caption, .rrw__meta, .rrw__line, .rrw__note, .rrw__ok { opacity: 1 !important; transform: none !important; }
	.rrw__flip { transform: none !important; }
	.rrw__rays, .rrw__confetti, .rrw__hearts { display: none; }
}

@keyframes rrw-fade { to { opacity: 1; } }
@keyframes rrw-drop { to { opacity: 1; transform: none; } }
@keyframes rrw-pop { to { opacity: 1; transform: none; } }
@keyframes rrw-spin { to { transform: rotate(360deg); } }
@keyframes rrw-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: .9; transform: translateY(115vh) rotate(720deg); } }
@keyframes rrw-rise { 0% { opacity: .95; transform: translateY(0) rotate(45deg); } 100% { opacity: 0; transform: translateY(-110vh) rotate(45deg); } }
@keyframes rrw-fly { to { opacity: 1; transform: none; } }
@keyframes rrw-flip { to { transform: rotateY(0); } }
@keyframes rrw-shine { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes rrw-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rrw-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes rrw-lid { to { transform: translate(-30%, -140%) rotate(-24deg); } }
@keyframes rrw-bow { to { opacity: 0; transform: translateY(-30px) scale(1.3); } }
@keyframes rrw-float { to { opacity: 1; transform: none; } }

/* ---------- 🏆カード：ほんのり光（枠は絵に焼きこみ済み） ---------- */
.rrw-glow { position: relative; }
.rrw-glow::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	box-shadow: 0 0 0 1px rgba(255, 222, 130, .55), 0 0 18px rgba(255, 200, 80, .45);
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%) no-repeat;
	background-size: 250% 100%; background-position: 130% 0;
	animation: rrw-glowshine 5.5s ease-in-out infinite;
}
@keyframes rrw-glowshine { 0%, 70% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .rrw-glow::after { animation: none; } }

/* ---------- カードの裏面 ---------- */
.rrw-back { margin: 10px 0; padding: 12px 14px; border-radius: var(--rds-radius-md, 12px); background: linear-gradient(160deg, #fffaf0, #fff3d6); border: 1px solid #f3d58a; color: #5a3e00; text-align: left; }
.rrw-back p { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.rrw-back__series { font-weight: 800; }
.rrw-back__one { font-size: 13px; color: #a0660a; }
.rrw-back__award b { display: block; }
.rrw-back__award small { display: block; font-size: 12px; color: #7a5a1a; }
.rrw-back__flavor { font-size: 13px; line-height: 1.6; color: #6b5020; }
.rrw-back__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 12.5px; }
.rrw-back__meta div { display: contents; }
.rrw-back__meta dt { color: #9a7a3a; }
.rrw-back__meta dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- ランキングページ：総合ポイント・限定カード・条件 ---------- */
.rrk { margin: 18px 0; padding: 16px; border-radius: var(--rds-radius-lg, 18px); background: var(--rds-surface, #fff); box-shadow: var(--rds-shadow-1, 0 2px 10px rgba(0, 0, 0, .06)); color: var(--rds-ink, #3a2e3f); }
.rrk__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rrk__head .rrw-ico { width: 44px; height: 44px; }
.rrk__kicker { display: block; font-size: 11px; letter-spacing: .12em; color: var(--rds-ink-faint, #9a8fa6); }
.rrk__title { margin: 0; font-size: var(--rds-text-lg, 18px); font-weight: 800; }
.rrk__lead { margin: 6px 0 10px; font-size: 14px; line-height: 1.7; }
.rrk__prize { display: grid; gap: 8px; margin: 10px 0; }
.rrk__prize li { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff8e6; border: 1px solid #f6dd9a; font-size: 13.5px; }
.rrk__prize li.is-effort { background: #fff0f6; border-color: #ffc8dd; }
.rrk__prize { padding: 0; }
.rrk__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rrk__row { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 10px; background: var(--rds-surface-2, #faf7fc); font-size: 14px; }
.rrk__row.is-top1 { background: #fff4cc; } .rrk__row.is-top2 { background: #eef2f8; } .rrk__row.is-top3 { background: #fbe9dc; }
.rrk__row.is-me { outline: 2px solid var(--rds-accent, #ff7eb3); }
.rrk__row .rrw-ico { width: 28px; height: 28px; }
.rrk__rank { font-weight: 800; text-align: center; }
.rrk__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrk__name em { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--rds-accent-strong, #d63384); }
.rrk__pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.rrk__me { margin: 10px 0 0; font-size: 13px; color: var(--rds-ink-soft, #6b5f73); }
.rrk__empty { padding: 10px; font-size: 13.5px; color: var(--rds-ink-soft, #6b5f73); }
.rrk__winners { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.rrk__win { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--rds-surface-2, #faf7fc); font-size: 12.5px; }
.rrk__win img.rrk__thumb { width: 26px; height: 36px; object-fit: cover; border-radius: 4px; filter: blur(3px) saturate(1.2); }
.rrk__win .rrw-ico { width: 22px; height: 22px; }
.rrk__rules { margin: 12px 0 0; border-radius: 12px; border: 1px solid var(--rds-line, #eadff0); background: var(--rds-surface-2, #fcf9fd); }
.rrk__rules > summary { display: flex; align-items: center; gap: 8px; min-height: var(--rds-tap, 44px); padding: 8px 12px; cursor: pointer; font-weight: 700; list-style: none; }
.rrk__rules > summary::-webkit-details-marker { display: none; }
.rrk__rules > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.rrk__rules[open] > summary::after { transform: rotate(-135deg); }
.rrk__rules > summary:focus-visible { outline: 3px solid var(--rds-focus, #ff7eb3); outline-offset: 2px; border-radius: 12px; }
.rrk__rbody { padding: 0 14px 12px; font-size: 13.5px; line-height: 1.75; }
.rrk__rbody h3 { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 14px; }
.rrk__rbody ul { margin: 0; padding-left: 1.2em; }
.rrk__pointtbl { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; padding: 0; list-style: none; }
.rrk__pointtbl li { padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--rds-line, #eadff0); font-size: 12.5px; }
.rrk__admin { margin-top: 12px; padding: 10px; border: 1px dashed #c9b; border-radius: 10px; font-size: 12.5px; }
.rrk__admin button { min-height: 40px; margin: 4px 6px 0 0; padding: 4px 12px; border-radius: 999px; border: 1px solid #c9b; background: #fff; cursor: pointer; }
.rrk__admin pre { max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 11px; background: #faf7fc; padding: 6px; border-radius: 8px; }

/* ゲームの更新情報（Discord・SNS）へ（2026-09-27） */
.rrk__news { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--rds-surface-2, #fcf9fd); font-size: 13.5px; line-height: 1.7; }
.rrk__news p { margin: 0; display: flex; align-items: flex-start; gap: 6px; }
.rrk__newsbtns { flex-wrap: wrap; margin-top: 8px !important; }
.rrk__newsbtn { display: inline-flex; align-items: center; min-height: var(--rds-tap, 44px); padding: 6px 16px; border-radius: 999px; border: 1px solid var(--rds-line, #eadff0); background: #fff; color: inherit; text-decoration: none; font-weight: 700; }
.rrk__newsbtn--dc { background: #5865f2; border-color: #5865f2; color: #fff; }