:root {
  --ink: #07131d;
  --cream: #f7e6c2;
  --cyan: #2fd6ee;
  --gold: #ffc62e;
  --pink: #ff5c7a;
  --panel: rgba(255, 255, 255, 0.95);
  --shadow: 0 10px 30px rgba(7, 19, 29, 0.25);
  --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; overscroll-behavior: none; background: #3aa8ff; color: var(--ink); font-family: 'Fredoka', 'Jua', system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
#app { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100vw, 62vh); transform: translateX(-50%); overflow: hidden; background: #3aa8ff; }
html { background: #1f6cf0; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#touch { position: fixed; inset: 0; z-index: 4; touch-action: none; display: none; }
body.playing #touch { display: block; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* 아이콘 */
i { display: inline-block; flex: none; font-style: normal; }
.i-play { width: 0; height: 0; border-left: 22px solid currentColor; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 4px; }
.i-pause { width: 16px; height: 18px; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
.i-sound { width: 24px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-sound.off .i-sound { opacity: .35; }
.i-out { width: 12px; height: 12px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; margin-left: 4px; }
.i-again { width: 22px; height: 22px; border: 4px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.i-share { width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.4 1.2l-6.7-3.4a3 3 0 0 0 0-1.6l6.7-3.4A3 3 0 1 0 15 7l-6.7 3.4a3 3 0 1 0 0 3.2L15 17a3 3 0 1 0 3-1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.4 1.2l-6.7-3.4a3 3 0 0 0 0-1.6l6.7-3.4A3 3 0 1 0 15 7l-6.7 3.4a3 3 0 1 0 0 3.2L15 17a3 3 0 1 0 3-1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.i-home { width: 22px; height: 20px; background: currentColor; clip-path: polygon(50% 0, 100% 45%, 86% 45%, 86% 100%, 14% 100%, 14% 45%, 0 45%); }
.i-crown { width: 20px; height: 16px; background: var(--gold); clip-path: polygon(0 100%, 0 20%, 25% 55%, 50% 0, 75% 55%, 100% 20%, 100% 100%); }
.i-grid { width: 20px; height: 20px; background: radial-gradient(circle, currentColor 0 3.5px, transparent 4px) 0 0 / 10px 10px; }
.i-flag { width: 18px; height: 20px; background: linear-gradient(90deg, #07131d 0 3px, transparent 3px), conic-gradient(from 90deg at 50% 50%, #fff 0 25%, #07131d 0 50%, #fff 0 75%, #07131d 0) 3px 0 / 8px 8px no-repeat; background-size: auto, 15px 12px; }
.i-next { width: 0; height: 0; border-left: 16px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; position: relative; margin-right: 8px; }
.i-next::after { content: ''; position: absolute; left: 1px; top: -11px; width: 5px; height: 22px; background: currentColor; }
.i-torch { width: 22px; height: 30px; position: relative; background: linear-gradient(180deg, transparent 0 40%, #fff 40%); clip-path: polygon(0 40%, 100% 40%, 70% 100%, 30% 100%); }
.i-torch::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: radial-gradient(ellipse at 50% 80%, #fff6a0, #ffc62e 50%, #ff5c3a 75%, transparent 76%); }
.ev-ic { width: 28px; height: 28px; display: inline-grid; place-items: center; }
.ev-ic svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }

/* 메달 */
.medal-b { position: relative; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 35% 30%, #ffffff, #c9d3de 45%, #8e9aa8); box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.12); }
.medal-b span { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); position: relative; z-index: 1; }
.medal-b.m1 { background: radial-gradient(circle at 35% 30%, #fff6c2, #ffcf3a 45%, #d99a00); }
.medal-b.m3 { background: radial-gradient(circle at 35% 30%, #ffe2c9, #e39a62 45%, #a85f2c); }
.medal-b.m4 { background: #c8ced6; box-shadow: none; }
.medal-b.m1::after, .medal-b.m2::after, .medal-b.m3::after { content: ''; position: absolute; top: -50%; left: -80%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: rotate(25deg); animation: shine 2.4s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -80%; } 100% { left: 140%; } }
.medal-b.big { width: 78px; height: 78px; box-shadow: 0 0 0 5px #fff, 0 6px 0 5px rgba(0,0,0,.12), 0 0 30px rgba(255,200,40,.6); animation: medalIn .7s cubic-bezier(.2,1.6,.4,1) both; }
.medal-b.big span { font-size: 40px; }
.medal-b.big.m4 { box-shadow: 0 0 0 5px #fff; }
@keyframes medalIn { from { transform: scale(0) rotate(-200deg); } }

/* 버튼 */
.big-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 200px; height: 68px; padding: 0 30px; border-radius: 999px; font-size: 28px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #ffb13b, #ff7a1a); box-shadow: 0 7px 0 #c4520a, 0 14px 28px rgba(196, 82, 10, .35); text-shadow: 0 2px 0 rgba(0,0,0,.18); transition: transform .08s; animation: pulse 1.6s ease-in-out infinite; }
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #c4520a; }
.mid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 52px; padding: 0 16px; border-radius: 18px; font-size: 19px; font-weight: 700; background: #fff; box-shadow: 0 5px 0 rgba(7,19,29,.18), 0 8px 18px rgba(7,19,29,.12); }
.mid-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(7,19,29,.18); }
.ic-btn { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(7,19,29,.15); }
@keyframes pulse { 50% { transform: scale(1.04); } }

/* 화면 */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 10; }
.screen.dim { background: rgba(7, 19, 29, .45); justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.row.col { flex-direction: column; gap: 18px; }

#menu { justify-content: space-between; padding: calc(14px + var(--safe-t)) 16px calc(14px + var(--safe-b)); pointer-events: none; overflow-y: auto; }
#menu > * { pointer-events: auto; }
.hub-link { position: absolute; left: 14px; top: calc(14px + var(--safe-t)); z-index: 20; }
.logo-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 4px; animation: drop .7s cubic-bezier(.2,1.6,.4,1) both; }
.logo-img { width: min(64vw, 400px); height: auto; filter: drop-shadow(0 8px 16px rgba(7,19,29,.3)); }
.logo-img + .logo { display: none; }
.logo { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .82; font-weight: 700; font-style: italic; letter-spacing: -1px; }
.logo span { font-size: clamp(44px, 13vw, 96px); color: var(--cream); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--cyan), 7px 9px 0 var(--ink); transform: skew(-8deg); }
.logo span + span { color: #fff; }
@keyframes drop { from { transform: translateY(-60px) scale(.8); opacity: 0; } }
.best-m { margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(7,19,29,.55); color: #fff; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.best-m b { color: var(--gold); font-size: 19px; }
.best-m .sep { width: 1px; height: 16px; background: rgba(255,255,255,.35); }
.mtot { display: flex; gap: 8px; }
.mtot span { display: flex; align-items: center; gap: 3px; }
.mtot .medal-b { width: 18px; height: 18px; }
.mtot .medal-b span { display: none; }
.mtot b { color: #fff; font-size: 15px; }
.menu-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
#board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: min(100%, 360px); }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 62px; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(7,19,29,.16); color: #1f6cf0; }
.tile .ev-ic { width: 30px; height: 30px; }
.tile small { font-size: 11px; font-weight: 700; color: var(--ink); opacity: .6; font-variant-numeric: tabular-nums; }
.tile .medal-b { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; }
.tile .medal-b span { font-size: 10px; }
.tile.m1 { box-shadow: 0 0 0 2.5px #ffcf3a, 0 4px 0 rgba(7,19,29,.16); background: linear-gradient(180deg, #fffaf0, #fff0c2); }
.tile.m2 { box-shadow: 0 0 0 2.5px #c9d3de, 0 4px 0 rgba(7,19,29,.16); }
.tile.m3 { box-shadow: 0 0 0 2.5px #e39a62, 0 4px 0 rgba(7,19,29,.16); }
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(7,19,29,.16); }
.play-row { display: flex; align-items: center; gap: 12px; }
.play-row .big-btn { min-width: 0; padding: 0 26px; }
.studio { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 700; font-size: 13px; letter-spacing: 1px; box-shadow: 0 4px 12px rgba(7,19,29,.3); }
.chal-m { margin-top: 6px; display: flex; gap: 8px; align-items: center; padding: 5px 14px; border-radius: 999px; background: #fff; font-size: 17px; box-shadow: 0 4px 0 rgba(7,19,29,.15); animation: pulse 1.4s infinite; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { position: absolute; }
#btnPause { left: 14px; top: calc(14px + var(--safe-t)); pointer-events: auto; z-index: 20; }
#btnPause::before, .hub-link::before { content: ''; position: absolute; inset: -14px; }
#btnPause { position: absolute; }
#btnMenuHud { position: absolute; left: 76px; top: calc(14px + var(--safe-t)); pointer-events: auto; z-index: 20; }
#btnMenuHud::before { content: ''; position: absolute; inset: -10px; }
#evTag { left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(7,19,29,.6); color: #fff; font-size: 18px; font-family: 'Jua', 'Fredoka', sans-serif; white-space: nowrap; }
#evTag b { font-weight: 400; }
#evTag small { font-size: 13px; opacity: .7; font-family: 'Fredoka', sans-serif; }
#evTag .ev-ic { width: 24px; height: 24px; color: var(--cyan); }
.tr { right: 14px; top: calc(66px + var(--safe-t)); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#evStat { font-size: 42px; font-weight: 700; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(7,19,29,.35); font-variant-numeric: tabular-nums; line-height: 1; }
#tries { display: flex; gap: 5px; }
#tries i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 2px rgba(7,19,29,.35); }
#tries i.on { background: var(--gold); box-shadow: inset 0 0 0 2px #b77d00; }
#tries i.cur { background: #fff; transform: scale(1.2); }
#tries .tn { padding: 2px 9px; border-radius: 999px; background: rgba(7,19,29,.55); color: #fff; font-weight: 700; font-size: 14px; }
#wr { display: flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(7,19,29,.5); color: var(--gold); font-weight: 700; font-size: 14px; }
#wr:empty { display: none; }
#wind { left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 22px; font-weight: 700; box-shadow: 0 4px 0 rgba(7,19,29,.15); }
.w-ar { width: 40px; height: 20px; background: linear-gradient(90deg, #8fd9ff, #1f8cf0); clip-path: polygon(0 30%, 65% 30%, 65% 0, 100% 50%, 65% 100%, 65% 70%, 0 70%); transform-origin: center; }
#wind .w-ar { animation: windArr .8s ease-in-out infinite alternate; }
@keyframes windArr { to { translate: 4px 0; } }
#combo { right: 14px; top: calc(170px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; color: #ffe14d; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; font-weight: 700; }
#combo b { font-size: 40px; line-height: 1; }
#combo small { font-size: 13px; letter-spacing: 1px; }
#combo.bump { animation: bump .25s; }
@keyframes bump { from { transform: scale(1.4); } }

/* 조작 패드 */
#pads { left: 0; right: 0; bottom: 0; height: 34%; }
#pads .pad { position: absolute; display: none; place-items: center; border-radius: 28px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#pads .pad.l { left: 12px; bottom: calc(14px + var(--safe-b)); width: calc(50% - 18px); height: 62%; }
#pads .pad.r { right: 12px; bottom: calc(14px + var(--safe-b)); width: calc(50% - 18px); height: 62%; }
#pads .pad.c { left: 50%; bottom: calc(18px + var(--safe-b)); width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; }
.ctl-lr .pad.l, .ctl-lr .pad.r, .ctl-runjump .pad.l, .ctl-runjump .pad.r, .ctl-one .pad.c, .ctl-swipe .pad.c { display: grid !important; }
.pad.hit { animation: padHit .16s ease-out; background: rgba(255,255,255,.45) !important; }
.pad.bad { animation: padBad .25s; background: rgba(255,60,90,.4) !important; }
@keyframes padHit { from { transform: scale(.94); } }
@keyframes padBad { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.paw { width: 58px; height: 58px; background: #fff; opacity: .9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='14' cy='26' rx='7' ry='9'/%3E%3Cellipse cx='50' cy='26' rx='7' ry='9'/%3E%3Cellipse cx='24' cy='12' rx='6' ry='8'/%3E%3Cellipse cx='40' cy='12' rx='6' ry='8'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='15' ry='13'/%3E%3Cellipse cx='14' cy='26' rx='7' ry='9'/%3E%3Cellipse cx='50' cy='26' rx='7' ry='9'/%3E%3Cellipse cx='24' cy='12' rx='6' ry='8'/%3E%3Cellipse cx='40' cy='12' rx='6' ry='8'/%3E%3C/svg%3E") center/contain no-repeat; }
.pad.l .paw { transform: scaleX(-1) rotate(-12deg); }
.pad.r .paw { transform: rotate(12deg); }
.ctl-runjump .pad.r .paw { width: 64px; height: 64px; -webkit-mask: none; mask: none; background: #fff; clip-path: polygon(50% 0, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0 50%); transform: none; }
.tapi { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #fff 0 38%, transparent 40% 55%, rgba(255,255,255,.7) 57% 66%, transparent 68%); }
.ctl-swipe .pad.c { width: 180px !important; height: 180px !important; margin-left: -90px !important; background: rgba(255,255,255,.1) !important; }
.ctl-swipe .tapi { width: 110px; height: 110px; border-radius: 0; background: #fff; opacity: .7; clip-path: polygon(50% 0, 62% 20%, 55% 20%, 55% 45%, 80% 45%, 80% 38%, 100% 50%, 80% 62%, 80% 55%, 55% 55%, 55% 80%, 62% 80%, 50% 100%, 38% 80%, 45% 80%, 45% 55%, 20% 55%, 20% 62%, 0 50%, 20% 38%, 20% 45%, 45% 45%, 45% 20%, 38% 20%); }

/* 게이지·각도·리듬 */
#meter { left: 50%; bottom: calc(24% + var(--safe-b)); width: 200px; margin-left: -100px; height: 14px; border-radius: 99px; background: rgba(7,19,29,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); overflow: hidden; }
#meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5ce07a, #ffe14d, #ff7a1a); transition: width .08s; }
#meter.max { box-shadow: inset 0 0 0 2px #fff, 0 0 14px #ffe14d; }
#gauge { right: 22px; bottom: calc(38% + var(--safe-b)); width: 34px; height: 220px; border-radius: 18px; background: rgba(7,19,29,.5); box-shadow: inset 0 0 0 3px #fff; overflow: hidden; display: flex; align-items: flex-end; }
#gauge::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7%; background: rgba(255,225,77,.55); }
#gauge i { display: block; width: 100%; background: linear-gradient(0deg, #5ce07a, #ffe14d 70%, #ff3b6b); border-radius: 0 0 16px 16px; }
#gauge.hot { box-shadow: inset 0 0 0 3px #fff, 0 0 22px #ffe14d; }
#gauge.lock { box-shadow: inset 0 0 0 3px #ffe14d; }
#clock { left: 50%; top: calc(112px + var(--safe-t)); width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: conic-gradient(#ffe14d calc(var(--c, 1) * 360deg), rgba(7,19,29,.35) 0); -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); }
#dial { left: 22px; bottom: calc(30% + var(--safe-b)); width: 170px; height: 170px; }
#dial .arc { position: absolute; left: 0; bottom: 0; width: 170px; height: 170px; border-radius: 0 170px 0 0; background: rgba(7,19,29,.45); box-shadow: inset 0 0 0 3px #fff; }
#dial .sweet { position: absolute; left: 0; bottom: 0; width: 170px; height: 170px; border-radius: 0 170px 0 0; background: conic-gradient(from 41deg at 0 100%, #5ce07a 0 8deg, transparent 0); opacity: .9; }
#dial .needle { position: absolute; left: 0; bottom: 0; width: 160px; height: 7px; margin-bottom: -3px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px var(--ink); transform-origin: 3px 50%; }
#dial b { position: absolute; left: 6px; bottom: 6px; font-size: 22px; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
#dial.hot .needle { background: #5ce07a; box-shadow: 0 0 0 2px var(--ink), 0 0 16px #5ce07a; }
#liftBar { left: 50%; bottom: calc(27% + var(--safe-b)); width: 280px; margin-left: -140px; height: 34px; border-radius: 18px; background: rgba(7,19,29,.5); box-shadow: inset 0 0 0 3px #fff; }
#liftBar .zone { position: absolute; top: 4px; bottom: 4px; border-radius: 10px; background: #5ce07a; box-shadow: 0 0 14px #5ce07a; }
#liftBar .mk { position: absolute; top: -8px; bottom: -8px; width: 8px; margin-left: -4px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
#beat { left: 50%; bottom: calc(18px + 75px + var(--safe-b)); width: 0; height: 0; }
#beat .core { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(47,214,238,.8), rgba(47,214,238,.25)); box-shadow: 0 0 0 4px #fff; }
#beat .ring { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 5px #ffe14d, 0 0 14px #ffe14d; }
#beat.near .core { box-shadow: 0 0 0 4px #ffe14d, 0 0 20px #ffe14d; }
#beat.perfect .core { animation: beatP .3s; }
#beat.good .core { animation: beatG .3s; }
#beat.miss .core { animation: beatM .3s; }
@keyframes beatP { from { transform: scale(1.35); background: #ffe14d; } }
@keyframes beatG { from { transform: scale(1.2); background: #5ce07a; } }
@keyframes beatM { from { background: #ff3b6b; } }
#reticle { left: 0; top: 0; width: 0; height: 0; }
#reticle i { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(7,19,29,.5); background: linear-gradient(#fff, #fff) center/2px 64px no-repeat, linear-gradient(#fff, #fff) center/64px 2px no-repeat; }
#reticle::after { content: ''; position: absolute; left: -42px; top: -42px; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#ffe14d calc(var(--c, 1) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 38px, #000 39px); mask: radial-gradient(circle, transparent 38px, #000 39px); }

/* 손 힌트 */
#hint { left: 50%; bottom: calc(22% + var(--safe-b)); width: 0; height: 0; z-index: 6; animation: fade 2.6s both; }
#hint .hand { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; font-size: 60px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(7,19,29,.35)); }
#hint::before { content: ''; position: absolute; left: -46px; top: -60px; width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.85); animation: hintRing 1s ease-out infinite; }
#hint.h-drag::before { display: none; }
@keyframes hintRing { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
#hint { animation-duration: 3.2s !important; }
#hint .hand::before { content: '👆'; }
#hint.h-alt .hand { animation: hAlt .5s ease-in-out infinite alternate; }
#hint.h-runjump .hand { animation: hAlt .7s steps(1) infinite; }
#hint.h-hold .hand { animation: hHold 1.2s ease-in-out infinite; }
#hint.h-tap .hand { animation: hTap .45s ease-in-out infinite alternate; }
#hint.h-mash .hand, #hint.h-rhythm .hand { animation: hTap .22s ease-in-out infinite alternate; }
#hint.h-rhythm .hand { animation-duration: .3s; }
#hint.h-swipe .hand, #hint.h-tramp .hand { animation: hSwipe .8s ease-in-out infinite; }
#hint.h-drag .hand { animation: hDrag 1.6s ease-in-out infinite; }
@keyframes hAlt { from { transform: translateX(-90px); } to { transform: translateX(90px); } }
@keyframes hHold { 0%, 100% { transform: translateY(0) scale(1); } 30%, 70% { transform: translateY(10px) scale(.88); } }
@keyframes hTap { to { transform: translateY(12px) scale(.9); } }
@keyframes hSwipe { 0% { transform: translate(-50px, 20px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(50px, -40px); opacity: 0; } }
@keyframes hDrag { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-40px, -30px); } 50% { transform: translate(30px, -50px); } 75% { transform: translate(20px, 10px); } }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* 팝업 글자 */
#pops { position: fixed; left: 50%; top: 40%; width: 0; height: 0; z-index: 7; pointer-events: none; }
.pop { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); font-size: 38px; font-weight: 700; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; white-space: nowrap; animation: popUp 1s ease-out forwards; }
.pop.good { color: #ffe14d; font-size: 44px; }
.pop.bad { color: #ff5c7a; }
@keyframes popUp { 0% { transform: translate(-50%, 10px) scale(.5); opacity: 0; } 18% { transform: translate(-50%, -10px) scale(1.2); opacity: 1; } 30% { transform: translate(-50%, -14px) scale(1); } 100% { transform: translate(-50%, -80px) scale(1); opacity: 0; } }
#banner { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 12px; font-size: 46px; font-weight: 700; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; opacity: 0; white-space: nowrap; font-family: 'Jua', 'Fredoka', sans-serif; }
#banner b { font-weight: 400; }
#banner .ev-ic { width: 64px; height: 64px; padding: 10px; border-radius: 20px; background: #1f8cf0; color: #fff; box-shadow: 0 0 0 4px #fff, 0 6px 0 4px rgba(7,19,29,.3); }
#banner.rec { color: var(--gold); font-family: 'Fredoka', sans-serif; font-size: 34px; top: 16%; }
#banner.rec .i-crown { width: 50px; height: 40px; }
#banner.show { animation: banner 1.3s ease-out forwards; }
#banner.rec.show { animation-duration: 2.2s; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.9); } }
#count { position: fixed; left: 0; right: 0; top: 30%; text-align: center; font-size: 120px; font-weight: 700; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; z-index: 30; pointer-events: none; }
#count.go { animation: cnt .6s ease-out both; }
@keyframes cnt { from { transform: scale(2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }

/* 종목 결과 */
#evres { justify-content: flex-end; padding: calc(12px + var(--safe-t)) 14px calc(12px + var(--safe-b)); overflow-y: auto; }
.panel { width: min(100%, 400px); background: var(--panel); border-radius: 28px; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow); animation: pop .45s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.ev-h { display: flex; align-items: center; gap: 8px; font-family: 'Jua', sans-serif; font-size: 22px; color: #1f6cf0; }
.ev-h b { font-weight: 400; color: var(--ink); }
.res-top { display: flex; align-items: center; gap: 18px; }
.res-val { font-size: 54px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.res-val small { font-size: 24px; margin-left: 4px; opacity: .6; }
.badge { padding: 4px 14px; border-radius: 999px; background: linear-gradient(90deg, #ff5c7a, #ffb13b); color: #fff; font-weight: 700; letter-spacing: 2px; animation: pulse 1s infinite; }
.res-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.res-list li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 12px; background: #f2f4f8; font-size: 16px; }
.res-list li.me { background: linear-gradient(90deg, #fff3c4, #ffe58a); box-shadow: inset 0 0 0 2px #ffcf3a; }
.res-list .dot { width: 12px; height: 12px; border-radius: 50%; }
.res-list span { flex: 1; font-weight: 600; }
.res-list em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-pts { display: flex; gap: 12px; align-items: baseline; }
.res-pts:empty { display: none; }
.res-pts span { font-size: 22px; font-weight: 700; color: #2bc46a; }
.res-pts b { font-size: 30px; }
.res-prog { display: flex; gap: 4px; }
.res-prog:empty { display: none; }
.res-prog i { width: 30px; height: 30px; border-radius: 9px; padding: 4px; background: #e6eaf0; color: #9aa3ad; }
.res-prog i.m1 { background: #ffcf3a; color: #fff; } .res-prog i.m2 { background: #c9d3de; color: #fff; } .res-prog i.m3 { background: #e39a62; color: #fff; } .res-prog i.m4 { background: #8d99a6; color: #fff; }
.res-prog i.now { transform: scale(1.18); box-shadow: 0 0 0 2px #1f8cf0; }
.res-prog svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.over-card { width: 100%; max-width: 180px; border-radius: 16px; box-shadow: 0 6px 18px rgba(7,19,29,.25); cursor: pointer; }
.share-big { background: linear-gradient(180deg, #4fd2ff, #1f8cf0); box-shadow: 0 7px 0 #135ea8, 0 14px 28px rgba(19,94,168,.35); }
.share-big:active { box-shadow: 0 2px 0 #135ea8; }

/* 최종 결과 */
#over { justify-content: flex-start; padding: calc(150px + var(--safe-t)) 14px calc(12px + var(--safe-b)); overflow-y: auto; touch-action: pan-y; }
#over .panel { gap: 9px; }
.rank { padding: 6px 18px; border-radius: 999px; color: #fff; font-family: 'Jua', 'Fredoka', sans-serif; font-size: 20px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.big-num { font-size: 56px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mcount { display: flex; gap: 18px; font-size: 22px; font-weight: 700; }
.mcount span { display: flex; align-items: center; gap: 6px; }
.mcount .medal-b { width: 28px; height: 28px; }
#evlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
#evlist li { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 10px; background: #f2f4f8; font-size: 13px; }
#evlist .ev-ic { width: 20px; height: 20px; color: #1f6cf0; }
#evlist .medal-b { width: 16px; height: 16px; }
#evlist .medal-b span { font-size: 9px; }
#evlist em { font-style: normal; font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }
.chal-o { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.chal-o em { font-style: normal; font-weight: 700; padding: 2px 10px; border-radius: 8px; color: #fff; }
.chal-o em.win { background: #2bc46a; } .chal-o em.lose { background: #8d99a6; }
#over .row .mid-btn { padding: 0 14px; }

#toast { position: fixed; left: 50%; bottom: calc(30px + var(--safe-b)); transform: translate(-50%, 30px) scale(.8); opacity: 0; padding: 10px 18px; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 0 0 3px #ffc62e, var(--shadow); z-index: 60; pointer-events: none; transition: .35s cubic-bezier(.2,1.6,.4,1); font-weight: 700; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-height: 700px) {
  .logo-img { width: min(54vw, 320px); }
  .tile { height: 54px; } .tile .ev-ic { width: 26px; height: 26px; }
  .big-btn { height: 60px; font-size: 24px; }
  .res-val { font-size: 44px; } .medal-b.big { width: 62px; height: 62px; } .medal-b.big span { font-size: 32px; }
  #over { padding-top: calc(90px + var(--safe-t)); }
}
@media (min-width: 700px) and (min-height: 700px) {
  #evres, #over { justify-content: center; }
}

/* 누른 자리 표시 */
.ripple { position: absolute; z-index: 6; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 4px rgba(255,255,255,.9), inset 0 0 18px rgba(255,255,255,.6); animation: rip .45s ease-out forwards; }
@keyframes rip { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }