.raffle-page { padding-bottom: 150px; overflow: hidden; }
.raffle-hero { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-top: 44px; }
.raffle-hero h1 { margin: 18px 0; color: #f4faf8; font-size: clamp(3.3rem, 8vw, 7.4rem); line-height: .82; letter-spacing: -.075em; }
.raffle-hero h1 em { color: transparent; -webkit-text-stroke: 1px #00edac; font-style: normal; }
.raffle-hero p { max-width: 630px; margin: 0; color: #9db0aa; line-height: 1.7; }
.raffle-wallet { display: grid; gap: 7px; min-width: 250px; padding: 22px 24px; border: 1px solid #3b5951; background: rgba(5,24,25,.88); }
.raffle-wallet > span, .raffle-label { color: #00edac; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.raffle-wallet strong { color: #ffd45e; font-size: 28px; }
.raffle-wallet small { color: #a1b2ac; }
.raffle-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(520px,1.28fr); gap: 22px; margin-top: 44px; }
.checkin-panel, .wheel-panel { border: 1px solid #36524b; background: linear-gradient(145deg, rgba(5,25,26,.96), rgba(3,15,17,.96)); }
.checkin-panel { border-color: rgba(246,183,72,.42); background: radial-gradient(circle at 15% 0%,rgba(126,61,167,.22),transparent 38%),linear-gradient(145deg,#171225,#0d0c16 72%); box-shadow: inset 0 1px rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.28); }
.checkin-panel { position: relative; align-self: start; padding: 38px 34px; overflow: hidden; }
.checkin-panel::after { content: "24H"; position: absolute; right: -15px; bottom: -12px; color: rgba(0,237,172,.035); font: 900 110px/1 "Orbitron",sans-serif; }
.checkin-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; border: 1px solid rgba(246,183,72,.55); color: #ffc85d; background: linear-gradient(145deg,rgba(247,177,50,.18),rgba(123,61,170,.2)); box-shadow: 0 0 35px rgba(246,167,54,.12); }
.checkin-icon svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.checkin-panel h2, .wheel-heading h2 { margin: 10px 0 14px; color: #f3f8f6; font-size: clamp(1.8rem,3vw,2.7rem); }
.checkin-panel p { color: #99aca6; line-height: 1.7; }
.checkin-button, .spin-button, .reward-dialog button { position: relative; z-index: 1; width: 100%; min-height: 52px; border: 1px solid #00edac; color: #031713; background: #00edac; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.checkin-button { border-color: #f6b748; color: #241506; background: linear-gradient(100deg,#f39b32,#ffd56d,#e8952e); box-shadow: 0 10px 34px rgba(232,142,39,.18); }
.checkin-button:disabled, .spin-button:disabled { border-color: #3a514b; color: #81928d; background: #142523; cursor: not-allowed; }
.checkin-timer { min-height: 20px; margin-top: 14px; color: #c5d5d0; font-size: 13px; text-align: center; }
.checkin-streak { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 15px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #29433c; color: #91a49e; }
.checkin-streak strong { color: #ffd45e; }
.wheel-panel { padding: 30px; }
.wheel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wheel-spins { padding: 9px 13px; border: 1px solid #3b5951; color: #9fb1ab; font-size: 12px; }
.wheel-spins b { color: #ffd45e; }
.wheel-stage { position: relative; display: grid; place-items: center; width: min(560px,100%); margin: 12px auto 24px; aspect-ratio: 1; }
.wheel-pointer { position: absolute; z-index: 6; top: -5px; left: 50%; width: 46px; height: 64px; transform: translateX(-50%); clip-path: polygon(50% 100%,0 0,100% 0); background: #ffd45e; filter: drop-shadow(0 7px 8px rgba(0,0,0,.5)); }
.prize-wheel { position: relative; width: 90%; aspect-ratio: 1; border: 10px solid #16332d; border-radius: 50%; background: conic-gradient(#0ddfaf 0 12.5%,#112b28 12.5% 25%,#087c68 25% 37.5%,#183b35 37.5% 50%,#0aa789 50% 62.5%,#102924 62.5% 75%,#d6a83d 75% 87.5%,#16473e 87.5% 100%); box-shadow: 0 0 0 2px #00edac, 0 0 60px rgba(0,237,172,.12), inset 0 0 45px rgba(0,0,0,.45); transition: transform 5.4s cubic-bezier(.12,.7,.08,1); }
.prize-wheel::before { content: ""; position: absolute; inset: 4%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.wheel-label { --angle: calc(var(--i) * 45deg + 22.5deg); position: absolute; z-index: 2; top: 50%; left: 50%; width: 30%; height: 30%; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-105%) rotate(calc(var(--angle) * -1)); display: grid; place-items: center; color: white; text-align: center; }
.wheel-label span { display: grid; gap: 2px; font-size: clamp(15px,2vw,24px); font-weight: 900; text-shadow: 0 2px 5px rgba(0,0,0,.65); }
.wheel-label small { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.wheel-hub { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; place-items: center; width: 23%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 7px solid #d8b254; border-radius: 50%; color: #00edac; background: #061918; box-shadow: 0 0 24px rgba(0,0,0,.55); }
.wheel-hub span { font: 900 clamp(20px,4vw,42px)/1 "Orbitron",sans-serif; }
.spin-button { max-width: 360px; display: block; margin: 0 auto; background: linear-gradient(100deg,#00edac,#92ffd9); font-size: 16px; }
.spin-button span { font-size: 12px; font-weight: 600; }
.wheel-message { min-height: 22px; margin: 13px 0 0; color: #9eb0aa; font-size: 13px; text-align: center; }
.prize-table { margin-top: 76px; }
.prize-table .section-title-row > p { color: #91a49e; }
.prize-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.prize-item { display: grid; grid-template-columns: auto 1fr; gap: 13px; min-height: 112px; padding: 17px; border: 1px solid #304b44; background: rgba(5,23,24,.84); }
.prize-item > span { color: #00edac; font-size: 24px; }
.prize-item div { display: grid; gap: 5px; }
.prize-item strong { color: #f1f7f5; }
.prize-item small { color: #879a94; }
.prize-item > b { grid-column: 2; color: #00edac; font-size: 12px; }
.prize-item--legendary { border-color: rgba(255,210,91,.55); background: linear-gradient(135deg,rgba(128,91,15,.18),rgba(5,23,24,.9)); }
.prize-item--legendary > span, .prize-item--legendary > b { color: #ffd45e; }
.reward-dialog { width: min(450px,calc(100% - 28px)); overflow: hidden; padding: 42px 34px; border: 1px solid #00edac; color: #eef8f4; background: #071c1c; text-align: center; }
.reward-dialog::backdrop { background: rgba(0,8,10,.86); backdrop-filter: blur(6px); }
.reward-dialog > * { position: relative; z-index: 2; }
.reward-burst { position: absolute; z-index: 0; inset: -45%; background: repeating-conic-gradient(from 0deg,rgba(0,237,172,.09) 0 7deg,transparent 7deg 18deg); animation: rewardRotate 18s linear infinite; }
.reward-icon { display: block; color: #ffd45e; font-size: 58px; }
.reward-dialog small { display: block; margin: 12px 0; color: #00edac; letter-spacing: .14em; }
.reward-dialog h2 { margin: 0; font-size: 24px; }
.reward-dialog > strong { display: block; margin: 16px 0; color: #ffd45e; font-size: 38px; }
.reward-dialog p { color: #9fb2ac; line-height: 1.6; }
.reward-dialog button { margin-top: 12px; }
.checkin-dialog { width: min(1040px,calc(100% - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: 34px; border: 1px solid rgba(248,190,82,.55); color: #f8f2e9; background: radial-gradient(circle at 15% 5%,rgba(125,63,172,.28),transparent 34%),radial-gradient(circle at 92% 12%,rgba(240,134,44,.16),transparent 32%),#0d0b15; box-shadow: 0 35px 120px rgba(0,0,0,.75),inset 0 1px rgba(255,255,255,.07); }
.checkin-dialog::backdrop { background: rgba(4,3,9,.9); backdrop-filter: blur(9px); }
.checkin-dialog-close { position: absolute; z-index: 5; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); color: #f8d78e; background: rgba(255,255,255,.04); font-size: 27px; cursor: pointer; }
.checkin-dialog-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-right: 45px; }
.calendar-kicker { color: #f6b748; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.checkin-dialog h2 { margin: 8px 0 7px; font-size: clamp(2rem,4vw,4.2rem); line-height: .94; letter-spacing: -.045em; }
.checkin-dialog-head p { margin: 0; color: #aaa2b5; }
.calendar-streak { display: grid; min-width: 155px; padding: 15px 18px; border: 1px solid rgba(246,183,72,.36); background: rgba(247,175,59,.07); }
.calendar-streak small { color: #aaa2b5; }
.calendar-streak strong { margin-top: 4px; color: #ffd36d; font-size: 22px; }
.calendar-progress { height: 5px; margin: 26px 0 19px; overflow: hidden; background: rgba(255,255,255,.08); }
.calendar-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#7c3daf,#ed8736,#ffd467); transition: width .5s ease; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 9px; margin-bottom: 8px; color: #827a8c; font-size: 10px; font-weight: 900; text-align: center; }
.checkin-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 9px; }
.calendar-day { position: relative; display: grid; place-items: center; min-height: 105px; padding: 10px 6px; border: 1px solid rgba(255,255,255,.09); color: #716a7b; background: rgba(255,255,255,.025); text-align: center; }
.calendar-day > span { font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.calendar-day b { color: #8b8395; font-size: 23px; }
.calendar-day small { font-size: 9px; }
.calendar-day i { padding: 3px 6px; border-radius: 20px; color: #6d6677; background: rgba(255,255,255,.04); font-size: 8px; font-style: normal; font-weight: 900; }
.calendar-day.is-today { transform: translateY(-3px); border-color: #f6b748; color: #fff2d1; background: linear-gradient(145deg,rgba(120,57,165,.42),rgba(238,134,47,.22)); box-shadow: 0 12px 30px rgba(0,0,0,.3),0 0 24px rgba(246,183,72,.08); }
.calendar-day.is-today b { color: #ffd166; }
.calendar-day.is-today i { color: #261605; background: #f6b748; }
.calendar-day.is-claimed { border-color: rgba(146,92,185,.38); color: #cdb9dc; background: rgba(108,54,145,.14); }
.calendar-day.is-claimed b,.calendar-day.is-claimed i { color: #c596e8; }
.calendar-action { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 22px; padding: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.calendar-action > div { display: grid; gap: 5px; }
.calendar-action small { color: #928a9d; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.calendar-action strong { color: #ffd26a; font-size: 22px; }
.calendar-action button { min-width: 250px; padding: 13px 24px; border: 1px solid #f3ac43; color: #241405; background: linear-gradient(100deg,#e9862e,#ffd36b); font: inherit; font-weight: 900; cursor: pointer; }
.calendar-action button span,.calendar-action button small { display: block; color: inherit; }
.calendar-action button small { margin-top: 3px; opacity: .64; }
.calendar-action button:disabled { border-color: #49414f; color: #837b89; background: #211d27; cursor: not-allowed; }
@keyframes rewardRotate { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .raffle-layout { grid-template-columns: 1fr; } .checkin-panel { order: -1; } .prize-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .raffle-hero { align-items: stretch; flex-direction: column; } .raffle-wallet { min-width: 0; } .wheel-panel { padding: 23px 12px; } .wheel-pointer { width: 34px; height: 48px; } .prize-list { grid-template-columns: 1fr; } .wheel-label { width: 34%; height: 34%; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-94%) rotate(calc(var(--angle) * -1)); } }
@media (max-width: 760px) { .checkin-dialog { padding: 26px 14px 18px; } .checkin-dialog-head { align-items: stretch; flex-direction: column; padding-right: 42px; } .calendar-streak { min-width: 0; } .calendar-weekdays { display: none; } .checkin-calendar { grid-template-columns: repeat(5,1fr); gap: 5px; margin-top: 18px; } .calendar-day { min-height: 87px; } .calendar-action { align-items: stretch; flex-direction: column; } .calendar-action button { min-width: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .reward-burst { animation: none; } }
@media (max-width: 600px) { .raffle-page { padding-bottom: 105px; } .raffle-hero { gap: 22px; padding-top: 36px; } .raffle-hero h1 { font-size: clamp(3rem,16vw,4.8rem); } .raffle-wallet { padding: 20px; } .wheel-wrap { width: min(100%,340px); margin-inline:auto; } .checkin-panel,.wheel-panel { min-width:0; } .reward-dialog { width: calc(100% - 22px); padding: 32px 18px; } .checkin-dialog { inset: auto 0 0; width:100%; max-height:92dvh; margin:0; border-width:1px 0 0; border-radius:18px 18px 0 0; } .checkin-calendar { grid-template-columns:repeat(4,1fr); } }
@media(max-width:600px){.raffle-hero{gap:14px;padding-top:22px}.raffle-hero h1{font-size:clamp(2.7rem,14vw,3.8rem)}.raffle-hero p{font-size:.86rem;line-height:1.55}.raffle-wallet{padding:14px 16px}.raffle-layout{gap:12px;margin-top:18px}.wheel-panel{padding:17px 9px}.wheel-wrap{width:min(100%,290px)}.prize-list{gap:8px}.checkin-panel{padding:18px 14px}.calendar-day{min-height:72px;padding:7px 3px}.calendar-day b{font-size:19px}}
@media(max-width:640px){.raffle-page,.raffle-layout,.wheel-panel,.checkin-panel,.wheel-wrap{min-width:0;max-width:100%}.checkin-dialog,.reward-dialog{overflow-x:hidden}.calendar-action{padding:13px}.calendar-action strong{font-size:18px}}

/* Compact subpage masthead */
.raffle-hero{align-items:center;gap:28px;padding-top:26px;padding-bottom:20px}
.raffle-hero h1{margin:11px 0;font-size:clamp(2.65rem,5vw,4.4rem);line-height:.86}
.raffle-hero p{font-size:.86rem;line-height:1.55}
.raffle-wallet{min-width:220px;padding:16px 18px}
.raffle-wallet strong{font-size:23px}
@media(max-width:600px){.raffle-hero{gap:12px;padding-top:18px;padding-bottom:6px}.raffle-hero h1{font-size:clamp(2.25rem,11.5vw,3.15rem)}.raffle-hero p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.raffle-wallet{grid-template-columns:1fr auto;align-items:center;width:100%;padding:11px 13px}.raffle-wallet>span{grid-column:1}.raffle-wallet strong{grid-column:2;grid-row:1/3;font-size:20px}.raffle-wallet small{grid-column:1}}