/* สรุปภาพรวมกิจกรรม — เจ้าเสมาเล่าเรื่อง */
.rc { position: relative; padding: 7.5rem 0 1.4rem; color: #fff; min-height: 100vh; background: radial-gradient(ellipse 60% 50% at 12% 0, rgba(53, 94, 252, .4), transparent 70%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(255, 61, 154, .32), transparent 70%), #07123a; overflow: hidden; }
.rc-in { display: grid; grid-template-columns: 280px 1fr; gap: 1.4rem; align-items: end; min-height: 560px; }
.rc-mas { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.rc-mas img { width: 210px; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); animation: rcbob 3s ease-in-out infinite; }
.rc-mas img.pop { animation: rcpop .4s ease-out, rcbob 3s ease-in-out .4s infinite; }
.rc-bub { position: relative; background: #fff; color: #17375e; border-radius: 18px 18px 18px 4px; padding: .8rem 1rem; font-size: .95rem; line-height: 1.55; margin-bottom: .9rem; min-height: 3.4rem; width: 100%; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.rc-stage { position: relative; min-height: 520px; }
.rc-slide { position: absolute; inset: 0; opacity: 0; transform: translateX(40px); pointer-events: none; transition: opacity .5s, transform .5s; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 1.4rem 1.6rem; border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.rc-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.rc-slide h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.2; margin: 0; color: #fff; }
.rc-slide h1 span { background: linear-gradient(90deg, #ff9ccc, #ffd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-slide h2 { font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 0 .4rem; }
.rc-slide h2 small { font-size: .9rem; color: #b8c6f2; font-weight: 600; }
.rc-eye { display: inline-block; align-self: flex-start; padding: .25rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-weight: 700; letter-spacing: .08em; }
.rc-sub { color: #d6defa; margin: 0; }
.rc-go { align-self: flex-start; border: 0; border-radius: 999px; padding: .75rem 1.6rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff7a1a, #ff3d9a); cursor: pointer; }
.rc-tag { font-size: clamp(1.6rem, 4.4vw, 2.8rem) !important; background: linear-gradient(90deg, #ffd34d, #ff9ccc, #8fd3fb); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.rc-links { display: flex; gap: .6rem; flex-wrap: wrap; } .rc-links a { padding: .5rem 1.1rem; border-radius: 999px; background: #fff; color: #17375e; font-weight: 800; text-decoration: none; }
.rc-nums { display: flex; gap: 1rem; flex-wrap: wrap; } .rc-nums > div { flex: 1 1 120px; text-align: center; padding: 1rem .6rem; border-radius: 18px; background: rgba(255, 255, 255, .1); }
.rc-nums b { display: block; font-size: 3rem; font-weight: 800; line-height: 1.1; color: #ffd34d; } .rc-nums span { color: #d6defa; }
.rc-cats > div { display: flex; align-items: center; gap: .7rem; margin-top: .5rem; } .rc-cats span { width: 64px; } .rc-cats em { width: 56px; font-style: normal; text-align: right; color: #d6defa; }
.rc-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; } .rc-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff7aae, #4db7f5); }
.rc-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rc-rank li { display: grid; grid-template-columns: 2rem 8rem 1fr 3.6rem; align-items: center; gap: .6rem; }
.rc-rank .no { width: 2rem; height: 2rem; border-radius: 50%; background: #fff; color: #17375e; font-weight: 800; display: grid; place-items: center; }
.rc-rank li:first-child .no { background: #ffd34d; }
.rc-rank .nm { font-weight: 700; } .rc-rank b { text-align: right; font-size: 1.2rem; }
.rc-rank .bar { height: 18px; border-radius: 99px; background: rgba(255, 255, 255, .13); overflow: hidden; } .rc-rank .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--tc, #6B7280); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.rc-slide:not(.on) .rc-rank .bar i { width: 0 !important; }
.rc-medals { display: grid; gap: .5rem; } .rc-medals > div { display: grid; grid-template-columns: 1fr repeat(3, 4.6rem); gap: .5rem; align-items: center; padding: .55rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .1); border-left: 6px solid var(--tc, #6B7280); }
.rc-medals .n { font-weight: 700; display: flex; align-items: center; gap: .5rem; } .rc-medals .skp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc, #6B7280); display: inline-block; }
.rc-votes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; } .rc-votes > div { padding: 1rem; border-radius: 16px; background: rgba(255, 255, 255, .1); } .rc-votes small { color: #ffb6da; display: block; } .rc-votes b { font-size: 1.35rem; display: block; } .rc-votes span { color: #d6defa; }
.rc-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .rc-photos figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: #0a1f4d; } .rc-photos img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-photos figcaption { position: absolute; inset: auto 0 0 0; padding: .3rem .6rem; font-size: .8rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.rc-eval { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .rc-eval li { display: grid; grid-template-columns: 1fr auto 3rem; gap: .8rem; align-items: center; } .rc-eval em { font-style: normal; color: #ffd34d; letter-spacing: .12em; } .rc-eval b { text-align: right; }
.rc-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; } .rc-notes figure { margin: 0; padding: 1rem; border-radius: 6px 18px 18px 18px; background: #fffbe9; color: #3a2a1a; } .rc-notes small { color: #b3541a; font-weight: 800; } .rc-notes blockquote { margin: .3rem 0; line-height: 1.65; } .rc-notes figcaption { font-weight: 800; color: #b3541a; font-size: .9rem; }
.rc-ctl { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.2rem; }
.rc-ctl button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.rc-dots { display: flex; gap: .4rem; } .rc-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .3); } .rc-dots button.on { background: #ffd34d; width: 28px; border-radius: 99px; }
.rc-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .1); } .rc-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff7aae, #4db7f5); }
@keyframes rcbob { 50% { transform: translateY(-8px); } } @keyframes rcpop { 0% { transform: scale(.85); } 60% { transform: scale(1.07); } 100% { transform: none; } }
@media (max-width: 820px) { .rc { padding-top: 6.5rem; } .rc-in { grid-template-columns: 1fr; } .rc-mas { flex-direction: row; align-items: flex-end; gap: .6rem; } .rc-mas img { width: 110px; order: -1; } .rc-bub { margin-bottom: 1.4rem; } .rc-stage { min-height: 600px; } .rc-rank li { grid-template-columns: 1.8rem 5.5rem 1fr 3rem; } .rc-photos { grid-template-columns: repeat(2, 1fr); } .rc-medals > div { grid-template-columns: 1fr repeat(3, 3.6rem); } }
@media (prefers-reduced-motion: reduce) { .rc-mas img, .rc-slide, .rc-rank .bar i { animation: none; transition: none; } }