:root { --ink: #07131d; --cream: #fff3d1; --gold: #ffc62e; --pink: #ff5c7a; --cyan: #2fd6ee; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); font-family: 'Fredoka', 'Jua', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; background: linear-gradient(180deg, #8fd8ff 0%, #c9efff 55%, #ffe9b8 100%); }
button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding-top: var(--safe-t); }
#stage { position: relative; flex: 1; min-height: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#c { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 위: 플레이어 카드 */
#top { display: flex; gap: 6px; padding: 8px 8px 2px; }
.pc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 3px 0 rgba(7,19,29,.14); border: 3px solid transparent; transition: transform .2s, opacity .3s; position: relative; }
.pc.turn { border-color: var(--c); transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 0 rgba(7,19,29,.2); animation: bob .7s ease-in-out infinite; }
.pc.dead { filter: grayscale(1); opacity: .55; }
.pc .av { width: 34px; height: 34px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 21px; flex: none; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.pc .av img { width: 100%; height: 100%; object-fit: cover; }
.pc .nb { min-width: 0; line-height: 1.05; }
.pc .cash { display: block; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc .cash.up { color: #0a9d3c; } .pc .cash.down { color: #e5284a; }
.pc small { font-size: 12px; opacity: .65; white-space: nowrap; }
@keyframes bob { 50% { transform: translateY(-5px) scale(1.04); } }

/* 가운데 카드 */
#cc { position: absolute; z-index: 5; pointer-events: none; display: grid; place-items: center; opacity: 0; transform: scale(.4) rotate(-6deg); transition: opacity .15s; }
#cc.show { opacity: 1; animation: ccpop .5s cubic-bezier(.2,1.7,.4,1) both; }
@keyframes ccpop { from { transform: scale(.3) rotate(-14deg); } 60% { transform: scale(1.1) rotate(3deg); } to { transform: scale(1) rotate(0); } }
.tc { min-width: 150px; max-width: 94%; padding: 12px 16px 10px; border-radius: 22px; background: #fff; border: 4px solid var(--c, var(--ink)); box-shadow: 0 8px 0 rgba(7,19,29,.2); text-align: center; }
.tc .e { font-size: 52px; line-height: 1; display: block; font-style: normal; }
.tc b { display: block; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 21px; margin-top: 2px; }
.tc .nums { display: flex; gap: 10px; justify-content: center; font-size: 19px; font-weight: 700; margin-top: 4px; }
.tc .nums span { padding: 1px 10px; border-radius: 999px; background: #f2f4f8; }
.tc.big { transform: none; } .tc.big .e { font-size: 70px; }
.tc.bad { background: #ffe4e8; } .tc.good { background: #e4ffe8; } .tc.gold { background: linear-gradient(180deg, #fff6c2, #ffe070); }
.tc.card { animation: flip .6s ease-out both; }
@keyframes flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }

/* 아래 */
#bottom { padding: 4px 10px calc(10px + var(--safe-b)); }
#bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.chip { padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 17px; font-weight: 700; box-shadow: 0 3px 0 rgba(7,19,29,.12); }
.chip small { opacity: .55; font-weight: 500; }
.chip.pulse { animation: chipPulse .5s; } @keyframes chipPulse { 50% { transform: scale(1.25); } }
.ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 4px 0 rgba(7,19,29,.15); font-size: 20px; position: relative; }
.ic::before { content: ''; position: absolute; inset: -6px; }
.ic:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(7,19,29,.15); }
.ic.on { background: var(--gold); }
#act { height: 96px; display: grid; place-items: center; }
.roll { width: min(100%, 360px); height: 92px; border-radius: 999px; font-size: 38px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #ffb13b, #ff7a1a); box-shadow: 0 8px 0 #c4520a, 0 14px 26px rgba(196,82,10,.35); text-shadow: 0 2px 0 rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; gap: 14px; animation: rollPulse 1.1s ease-in-out infinite; }
.roll .rd { font-size: 54px; display: inline-block; animation: rdSpin 1.1s ease-in-out infinite; }
.roll:active { transform: translateY(6px); box-shadow: 0 2px 0 #c4520a; }
@keyframes rollPulse { 50% { transform: scale(1.04); } } @keyframes rdSpin { 50% { transform: rotate(25deg) scale(1.1); } }
#yn { display: flex; gap: 12px; width: min(100%, 380px); height: 92px; }
.no, .yes { border-radius: 26px; font-size: 40px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; }
.no { width: 30%; background: linear-gradient(180deg, #ff6b7f, #e5284a); box-shadow: 0 8px 0 #a3132e; }
.yes { flex: 1; background: linear-gradient(180deg, #5fdc6c, #1fae3a); box-shadow: 0 8px 0 #0c7a24; text-shadow: 0 2px 0 rgba(0,0,0,.2); animation: rollPulse 1s ease-in-out infinite; }
.yes span { font-size: 46px; } .yes i { font-style: normal; font-size: 34px; }
.no:active, .yes:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
#wait { display: flex; align-items: center; gap: 10px; font-size: 44px; }
#wait span { font-size: 54px; animation: bob .6s ease-in-out infinite; }
#wait i { font-style: normal; font-size: 30px; opacity: .6; animation: dot 1s infinite; } #wait i:nth-of-type(2) { animation-delay: .2s; } #wait i:nth-of-type(3) { animation-delay: .4s; }
@keyframes dot { 50% { transform: translateY(-8px); opacity: 1; } }

/* 결과 순위표 (공통 UI 킷 결과 패널 안) */
.rk { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 16px; background: #f2f4f8; font-size: 20px; font-weight: 700; }
.rk.me { outline: 3px solid var(--c); background: #fff8e0; }
.rk .av { width: 36px; height: 36px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 22px; overflow: hidden; }
.rk .av img { width: 100%; height: 100%; object-fit: cover; }
.rk .n { flex: 1; } .rk .m { font-size: 24px; width: 30px; text-align: center; }
.rk.dead { opacity: .6; }
.rk .v { font-variant-numeric: tabular-nums; }
.rk em { font-style: normal; }
.kk-extra #overList{display:flex;flex-direction:column;gap:6px;width:100%}

#game.menu #top, #game.menu #bottom { visibility: hidden; }
#game.menu #stage { margin-top: 0; }
#waitA img { width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(7,19,29,.2); }
.tc .nums b { font-size: 22px; }
#stage { --cur: transparent; }
#stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 6px solid var(--cur); border-radius: 18px; opacity: .85; transition: border-color .3s; z-index: 4; }
#game.menu #stage::after { display: none; }
.pc .sh { font-style: normal; font-size: 15px; color: var(--c); position: absolute; right: 6px; top: 2px; line-height: 1; }
.pc.turn { transform: translateY(-3px) scale(1.07); }
.rk .m + .av + .n::after { content: ''; }
.pc .av { width: 46px; height: 46px; } .pc { padding: 4px 6px; } .pc .cash { font-size: 17px; }
#waitA img { width: 76px; height: 76px; }