/* Kal Kagitham Kathirikol — two hands, the "kal… kagitham… kathirikol!" shake and the reveal. */
.kk-head { text-align: center; margin-bottom: 6px; }
.kk-head b { display: block; font-size: 19px; }
.kk-head small { color: var(--muted); font-size: 12px; }
.kk-arena { width: min(100%, 400px); border-radius: 18px; padding: 10px; background: radial-gradient(ellipse at center, #3a2a5c, #1b1430); box-shadow: inset 0 0 24px #0009; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kk-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kk-name { font-weight: 700; font-size: 14px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-dots { display: flex; gap: 6px; }
.kk-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold); }
.kk-dots i.on { background: var(--gold); box-shadow: 0 0 10px #ffc533aa; animation: kk-pop .4s ease both; }
.kk-hand { font-size: 74px; line-height: 1; height: 86px; transition: transform .2s, filter .3s; }
.kk-hand.opp { transform: rotate(180deg); }
.kk-hand.shake.me { animation: kk-shake-me .36s ease-in-out 3; }
.kk-hand.shake.opp { animation: kk-shake-opp .36s ease-in-out 3; }
@keyframes kk-shake-me { 50% { transform: translateY(-26px) rotate(-12deg); } }
@keyframes kk-shake-opp { 50% { transform: rotate(180deg) translateY(-26px) rotate(-12deg); } }
.kk-hand.reveal { animation: kk-reveal .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.kk-hand.opp.reveal { animation-name: kk-reveal-opp; }
@keyframes kk-reveal { from { transform: scale(.3); } to { transform: scale(1); } }
@keyframes kk-reveal-opp { from { transform: rotate(180deg) scale(.3); } to { transform: rotate(180deg) scale(1); } }
.kk-hand.won { filter: drop-shadow(0 0 16px #ffc533); }
.kk-hand.lost { filter: grayscale(.8) brightness(.6); }
.kk-tag { min-height: 20px; font-size: 13px; font-weight: 700; color: var(--gold); }
.kk-vs { font-weight: 900; color: var(--primary); letter-spacing: 2px; min-height: 22px; transition: transform .2s; }
.kk-vs.chant { animation: kk-pop .36s ease both; }
.kk-turn { font-weight: 700; min-height: 24px; margin: 10px 0 6px; text-align: center; }
.kk-picks { display: flex; gap: 10px; justify-content: center; width: min(100%, 400px); }
.kk-pick { flex: 1; min-height: 92px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .12s, border-color .2s; }
.kk-pick span { font-size: 40px; }
.kk-pick small { font-size: 13px; font-weight: 700; }
.kk-pick:active { transform: scale(.95); }
.kk-pick.on { border-color: var(--gold); box-shadow: 0 0 14px #ffc53366; transform: translateY(-4px); }
.kk-pick[disabled] { opacity: .45; cursor: default; }
.kk-picks.off .kk-pick:not(.on) { opacity: .4; }
.kk-log { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: min(100%, 400px); }
.kk-log li { background: var(--card); border-radius: 10px; padding: 3px 8px; font-size: 14px; }
.kk-log li.w { box-shadow: inset 0 0 0 2px var(--ok); } .kk-log li.l { box-shadow: inset 0 0 0 2px var(--bad); }
@keyframes kk-pop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }