.tkWrap{ max-width: 960px; padding-bottom: 96px; }
.tkSummary{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.tkSum{ padding: 18px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 0 var(--lav-100); }
.tkSum b{ display: block; font: 800 34px/1 var(--font-display); color: #7B3FE4; letter-spacing: -.02em; }
.tkSum small{ display: block; margin-top: 6px; color: var(--ink-2); font-weight: 600; }
.tkSum.isReady{ background: linear-gradient(140deg, #A06BF5, #7B3FE4); border-color: transparent; box-shadow: 0 6px 0 #5B2BB8; }
.tkSum.isReady b, .tkSum.isReady small{ color: #fff; }

.tkTabs{ display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--lav-400) transparent; }
.tkTab{ position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 700 14px/1 var(--font-body, inherit); cursor: pointer; transition: background .15s ease, color .15s ease; }
.tkTab img{ width: 20px; height: 20px; object-fit: contain; }
.tkTab i{ color: var(--lav-600); }
.tkTab.active{ background: var(--lav-900); border-color: var(--lav-900); color: #fff; }
.tkTab.active i{ color: #fff; }
.tkTab em{ display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #F0436B; color: #fff; font: 800 11px/1 var(--font-body, inherit); font-style: normal; }

.tkList{ display: grid; gap: 12px; }
.tkCard{ display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 5px 0 var(--lav-100); }
.tkCheck{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lav-50); color: var(--lav-700); font-size: 20px; }
.tkCheck img{ width: 32px; height: 32px; object-fit: contain; }
.tkCard.is-ready .tkCheck{ background: linear-gradient(140deg, #A06BF5, #7B3FE4); color: #fff; }
.tkCard.is-claimed{ opacity: .72; }
.tkCard.is-claimed .tkCheck{ background: #DDF1EA; color: #2C8A69; }
.tkHead{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tkHead h3{ margin: 0; font: 800 18px/1.2 var(--font-display); color: var(--ink); }
.tkBadge{ padding: 5px 10px; border-radius: 999px; background: var(--lav-100); color: var(--lav-800); font-size: 12px; font-weight: 800; }
.tkCard.is-ready .tkBadge{ background: #7B3FE4; color: #fff; }
.tkCard.is-claimed .tkBadge{ background: #DDF1EA; color: #2C8A69; }
.tkBody p{ margin: 4px 0 12px; color: var(--ink-2); }
.tkBar{ height: 12px; border-radius: 999px; background: var(--lav-100); overflow: hidden; }
.tkBar span{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8A4FF0, #C9A7FF); }
.tkCard.is-claimed .tkBar span{ background: #6CCB9F; }
.tkFoot{ display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); flex-wrap: wrap; }
.tkReward{ color: #7B3FE4; }
.tkState{ padding: 50px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); text-align: center; color: var(--ink-2); font-weight: 600; }
.tkState .btn{ display: inline-flex; }

@media (max-width: 560px){
  .tkSummary{ grid-template-columns: 1fr 1fr; }
  .tkSum.isReady{ grid-column: 1 / -1; order: -1; }
  .tkSum b{ font-size: 28px; }
  .tkCard{ grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .tkCheck{ width: 42px; height: 42px; border-radius: 14px; font-size: 16px; }
}

.tkClaim{ display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(120deg, #8A4FF0, #B784FF, #8A4FF0); background-size: 200% 100%; color: #fff; font: 800 14px/1 var(--font-body, inherit); cursor: pointer; box-shadow: 0 4px 0 #5B2BB8, 0 0 0 0 rgba(138,79,240,.5); animation: tkPulse 1.8s ease-in-out infinite, tkShine 3s linear infinite; transition: transform .15s ease; }
.tkClaim:hover{ transform: translateY(-2px) scale(1.03); }
.tkClaim:disabled{ animation: none; opacity: .8; cursor: progress; }
@keyframes tkPulse{ 0%,100%{ box-shadow: 0 4px 0 #5B2BB8, 0 0 0 0 rgba(138,79,240,.45); } 50%{ box-shadow: 0 4px 0 #5B2BB8, 0 0 0 10px rgba(138,79,240,0); } }
@keyframes tkShine{ to{ background-position: -200% 0; } }
.tkReward{ display: inline-flex; align-items: center; gap: 6px; }
.tkReward img{ width: 22px; height: 22px; object-fit: contain; }

.tkCelebrate{ position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(28,22,56,.55); backdrop-filter: blur(6px); animation: tkFade .25s ease; overflow: hidden; }
.tkCelebrate.is-out{ opacity: 0; transition: opacity .25s ease; }
@keyframes tkFade{ from{ opacity: 0; } }
.tkConfetti{ position: absolute; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; }
.tkBit{ position: absolute; width: 10px; height: 16px; border-radius: 3px; opacity: 0; animation: tkBurst 1.6s cubic-bezier(.15,.8,.3,1) var(--d) forwards; }
.tkBit.circle{ width: 11px; height: 11px; border-radius: 50%; }
.tkBit.star{ width: 16px; height: 16px; border-radius: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes tkBurst{
  0%{ opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(var(--x), calc(var(--y) + 40vh)) rotate(var(--r)) scale(1); }
}
.tkPrize{ position: relative; width: min(420px, 100%); padding: 34px 28px 28px; border-radius: 32px; background: #fff; text-align: center; box-shadow: 0 30px 80px rgba(28,22,56,.4); animation: tkPop .55s cubic-bezier(.22,1.4,.36,1); }
@keyframes tkPop{ from{ opacity: 0; transform: scale(.7) translateY(20px); } }
.tkGlow{ position: absolute; left: 50%; top: 18px; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(201,167,255,.0), rgba(201,167,255,.55), rgba(255,216,107,.45), rgba(201,167,255,.0) 60%, rgba(242,141,178,.45), rgba(201,167,255,0)); filter: blur(14px); animation: tkSpin 4s linear infinite; pointer-events: none; }
@keyframes tkSpin{ to{ transform: rotate(360deg); } }
.tkBox{ position: relative; display: block; width: 140px; height: 140px; margin: 0 auto 10px; object-fit: contain; font-size: 90px; line-height: 140px; color: #7B3FE4; animation: tkBounce 1.2s ease-in-out .5s infinite; filter: drop-shadow(0 14px 18px rgba(60,48,130,.3)); }
@keyframes tkBounce{ 0%,100%{ transform: translateY(0) rotate(0); } 25%{ transform: translateY(-10px) rotate(-6deg); } 50%{ transform: translateY(0) rotate(0); } 75%{ transform: translateY(-6px) rotate(5deg); } }
.tkPrizeKicker{ position: relative; margin: 0; color: #8A4FF0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tkPrize h3{ position: relative; margin: 8px 0 14px; font: 800 24px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.tkPrize h3 b{ color: #7B3FE4; }
.tkLevelUp{ position: relative; display: inline-flex; gap: 8px; align-items: center; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px; background: #FFF1C2; color: #8A6400; font-weight: 800; }
.tkPrize .btn{ position: relative; min-height: 48px; padding: 0 28px; }
@media (prefers-reduced-motion: reduce){
  .tkBit, .tkGlow, .tkBox, .tkClaim{ animation: none !important; }
  .tkBit{ display: none; }
}