:root { --ink: #2b1b3d; --o: #ff9a3c; --p: #ff5c8a; --y: #ffe14d; --g: #35c47e; --b: #4aa8ff; font-family: 'Jua', 'Fredoka', system-ui, sans-serif; color: var(--ink); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #ffd9b0; overscroll-behavior: none; touch-action: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#c { z-index: 1; position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
.stroke { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.pcard { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 8px; display: flex; gap: 8px; align-items: center; padding: 6px 12px 6px 6px; background: #fff; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 rgba(43,27,61,.35); max-width: 46vw; transition: transform .2s, box-shadow .2s; }
.pcard.right { left: auto; right: 8px; flex-direction: row-reverse; padding: 6px 6px 6px 12px; }
.pcard.on { transform: scale(1.07); box-shadow: 0 0 0 5px var(--y), 0 5px 0 rgba(43,27,61,.35); animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.av { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; background: #ffe9c9; display: grid; place-items: center; font-size: 30px; flex: none; position: relative; }
.av.em span.acc { position: absolute; top: -9px; right: -6px; font-size: 20px; }
.pc-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcard.right .pc-b { align-items: flex-end; }
.pc-n { font-size: 15px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-g { font-size: 12px; opacity: .75; line-height: 1; }
.pc-balls { display: flex; gap: 2px; flex-wrap: wrap; max-width: 100px; min-height: 14px; }
.mb { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 8px; color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; line-height: 1; }
.mb.st { background-image: linear-gradient(#fff 0 28%, transparent 28% 72%, #fff 72%); color: var(--ink); }
.solo { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: 6px 18px; box-shadow: 0 5px 0 rgba(43,27,61,.35); font-size: 26px; white-space: nowrap; }
.solo b { font-size: 34px; min-width: 70px; text-align: center; }
.turn { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); font-size: 54px; opacity: 0; white-space: nowrap; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(43,27,61,.3); pointer-events: none; }
.turn.show { animation: turnIn 1.1s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes turnIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
.bar { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; justify-content: center; gap: 14px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.ic { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); font-size: 24px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(43,27,61,.35); padding: 0; }
.ic:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43,27,61,.35); }
.ic.spin i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ddd); border: 2px solid var(--ink); position: relative; display: block; }
.ic.spin i::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #e63939; left: calc(50% + var(--sx, 0) * 7px - 4px); top: calc(50% - var(--sy, 0) * 7px - 4px); }
.ic.spin.off { opacity: .4; }
.ok { width: 150px; height: 58px; border-radius: 29px; background: var(--g); border: 4px solid var(--ink); font-size: 34px; color: #fff; box-shadow: 0 5px 0 rgba(43,27,61,.4); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
#spinPad { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); transform: translateX(-50%); background: #fff; border: 4px solid var(--ink); border-radius: 26px; padding: 12px; pointer-events: auto; box-shadow: 0 6px 0 rgba(43,27,61,.35); }
.sp-ball { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8); border: 4px solid var(--ink); position: relative; touch-action: none; }
.sp-ball::before, .sp-ball::after { content: ''; position: absolute; background: rgba(43,27,61,.18); }
.sp-ball::before { left: 50%; top: 8%; bottom: 8%; width: 2px; } .sp-ball::after { top: 50%; left: 8%; right: 8%; height: 2px; }
.sp-ball i { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #e63939; border: 2px solid var(--ink); left: calc(50% + var(--sx, 0) * 52px - 11px); top: calc(50% - var(--sy, 0) * 52px - 11px); }

#pops { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.pop { position: absolute; font-size: 30px; white-space: nowrap; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; transform: translate(-50%, -50%); animation: popUp 1s cubic-bezier(.2,1,.3,1) forwards; }
.pop.big { font-size: 42px; color: var(--y); }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.3); } 18% { opacity: 1; transform: translate(-50%, -70%) scale(1.15) rotate(-4deg); } 70% { opacity: 1; transform: translate(-50%, -110%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
.bub { position: absolute; padding: 4px 12px; font-size: 20px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; transform: translate(-50%, -100%); white-space: nowrap; animation: bub .9s ease-out forwards; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -6px; border: 6px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0; }
@keyframes bub { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: #fff; }
#flash.on { animation: fl .25s ease-out; }
@keyframes fl { 0% { opacity: .7; } 100% { opacity: 0; } }
#cutin { position: fixed; left: 0; right: 0; top: 40%; height: 150px; margin-top: -75px; z-index: 7; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 14px; opacity: 0; background: linear-gradient(90deg, rgba(255,92,138,0), #ff5c8a 12%, #ffb13b 50%, #ff5c8a 88%, rgba(255,92,138,0)); transform: skewY(-6deg); overflow: hidden; }
#cutin .lines { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255,255,255,.55) 0 3deg, transparent 3deg 9deg); animation: spinL 1.4s linear infinite; mask-image: radial-gradient(circle, transparent 18%, #000 60%); -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 60%); }
@keyframes spinL { to { transform: rotate(60deg); } }
#cutin img { width: 118px; height: 118px; border-radius: 50%; border: 5px solid #fff; position: relative; box-shadow: 0 6px 18px rgba(43,27,61,.35); }
#cutin b { font-size: 70px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; position: relative; white-space: nowrap; }
#cutin.show { animation: cutin 1.3s cubic-bezier(.2,1,.3,1) forwards; }
@keyframes cutin { 0% { opacity: 0; transform: skewY(-6deg) scaleY(0); } 12% { opacity: 1; transform: skewY(-6deg) scaleY(1); } 80% { opacity: 1; transform: skewY(-6deg) scaleY(1); } 100% { opacity: 0; transform: skewY(-6deg) scaleY(0); } }
@media (max-width: 420px) { #cutin b { font-size: 48px; } #cutin img { width: 88px; height: 88px; } }

/* 화면들 */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px); }
.screen.dim { background: rgba(43,27,61,.55); justify-content: center; }
.hub-link { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; text-decoration: none; color: var(--ink); }
.logo-wrap { margin-top: 6vh; text-align: center; position: relative; }
.logo { margin: 0; display: flex; flex-direction: column; line-height: .92; font-size: clamp(64px, 17vw, 110px); color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 0 9px 0 rgba(43,27,61,.3); transform: rotate(-3deg); }
.logo span:last-child { color: var(--y); }
.mascot { width: 96px; height: 96px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 6px 14px rgba(43,27,61,.35); position: absolute; right: -8px; bottom: -78px; animation: bob 1.3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(6deg); } }
.menu-bottom { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.big-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 76px; border-radius: 38px; background: linear-gradient(#ffd23f, #ff9a3c); border: 5px solid var(--ink); font-size: 34px; box-shadow: 0 7px 0 rgba(43,27,61,.4); color: #fff; }
.big-btn b { font-weight: 400; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.big-btn span { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.big-btn em { font-style: normal; font-size: 22px; background: #fff; color: var(--ink); border-radius: 14px; padding: 2px 10px; border: 3px solid var(--ink); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(43,27,61,.4); }
.big-btn.small { width: 120px; height: 62px; font-size: 30px; }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.mode-btn { background: #fff; border: 4px solid var(--ink); border-radius: 20px; padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 5px 0 rgba(43,27,61,.35); min-height: 92px; justify-content: center; }
.mode-btn:active { transform: translateY(3px); }
.mb-ic { font-size: 32px; line-height: 1.1; }
.mode-btn small { font-size: 13px; line-height: 1.1; text-align: center; }
.mode-btn em { font-style: normal; font-size: 13px; color: var(--p); min-height: 14px; }
.row { display: flex; gap: 12px; align-items: center; justify-content: center; }
.row.col { flex-direction: column; gap: 18px; }
.mid-btn { width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); font-size: 28px; box-shadow: 0 5px 0 rgba(43,27,61,.35); padding: 0; }
.mid-btn:active { transform: translateY(3px); }
.mid-btn.off { opacity: .45; }
.studio { font-size: 13px; color: var(--ink); opacity: .6; text-decoration: none; }

#map { background: rgba(255,233,200,.94); justify-content: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 74px); overflow: auto; }
.back { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; }
#mapGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 440px; }
.fr { background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 5px 0 rgba(43,27,61,.35); position: relative; }
.fr:active { transform: translateY(3px); }
.fr .face { font-size: 54px; line-height: 1; position: relative; }
.fr .face s { position: absolute; top: -12px; right: -14px; font-size: 26px; text-decoration: none; }
.fr b { font-weight: 400; font-size: 20px; }
.fr .st { font-size: 22px; letter-spacing: 2px; min-height: 26px; }
.fr.boss { grid-column: 1 / -1; background: linear-gradient(#fff, #ffe9a8); }
.fr.lock { filter: grayscale(1); opacity: .55; }
.fr .no { position: absolute; font-size: 32px; }
.fr .dot { position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); }

.sheet { background: #fff; border: 5px solid var(--ink); border-radius: 28px; padding: 18px; }
.cue-row { display: flex; gap: 14px; }
.cue-opt { width: 92px; height: 110px; border-radius: 22px; border: 4px solid var(--ink); background: #fff; font-size: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 5px 0 rgba(43,27,61,.35); }
.cue-opt small { font-size: 14px; }
.cue-opt.sel { background: var(--y); }

.panel { background: #fff; border: 5px solid var(--ink); border-radius: 30px; padding: 20px 22px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(92vw, 380px); box-shadow: 0 8px 0 rgba(43,27,61,.4); }
.dance { width: 104px; height: 104px; border-radius: 50%; border: 5px solid var(--ink); animation: dance .7s ease-in-out infinite; }
.dance.sad { animation: none; filter: grayscale(.6); transform: rotate(-8deg); }
@keyframes dance { 0%, 100% { transform: translateY(0) rotate(-10deg) scale(1); } 25% { transform: translateY(-18px) rotate(8deg) scale(1.08); } 50% { transform: translateY(0) rotate(10deg); } 75% { transform: translateY(-18px) rotate(-8deg) scale(1.08); } }
.over-t { font-size: 42px; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.stars { font-size: 52px; letter-spacing: 6px; min-height: 60px; }
.stars span { display: inline-block; opacity: 0; transform: scale(.2) rotate(-40deg); }
.stars span.in { animation: starIn .5s cubic-bezier(.2,1.6,.4,1) forwards; }
.stars span.off { filter: grayscale(1) brightness(1.3); }
@keyframes starIn { to { opacity: 1; transform: scale(1) rotate(0); } }
.big-num { font-size: 60px; line-height: 1; }
.over-sub { font-size: 22px; display: flex; gap: 14px; justify-content: center; }
#hofForm { width: 100%; }

#hofMenu { display: none !important; }

body.celeb #overKeke { display: none; }
body.celeb #over { background: transparent !important; justify-content: flex-end !important; pointer-events: none; }
body.celeb #over .kk-panel { pointer-events: auto; }
#hud, #pops { z-index: 3; }

body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 55%, rgba(70,24,100,.26) 100%); }

.mid-btn.hubl { display: grid; place-items: center; text-decoration: none; color: var(--ink); }
#over .more-games { margin-top: 4px; }

.cue-row { flex-wrap: wrap; justify-content: center; max-width: 330px; }
#sheet { z-index: 30; }

.ini { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-family: 'Jua', 'Fredoka', sans-serif; font-size: 24px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.fr .face .ini { width: 64px; height: 64px; font-size: 38px; border: 4px solid var(--ink); box-sizing: border-box; }
.fr .face s { text-decoration: none; font-size: 24px; color: #ffd23f; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }