| |
|
|
| :root { |
| --pink: #ff2d95; |
| --cyan: #19f5ff; |
| --yellow: #fff23a; |
| --bg: #05060c; |
| --panel: rgba(8, 9, 20, 0.82); |
| --text: #e8e6f4; |
| --muted: #8d8aa8; |
| --font: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html, body { |
| margin: 0; |
| height: 100%; |
| background: var(--bg); |
| color: var(--text); |
| font-family: var(--font); |
| overflow: hidden; |
| -webkit-tap-highlight-color: transparent; |
| } |
|
|
| body { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(60, 40, 120, 0.25), transparent 60%), |
| radial-gradient(ellipse at 50% 100%, rgba(255, 45, 149, 0.08), transparent 60%), |
| var(--bg); |
| user-select: none; |
| -webkit-user-select: none; |
| } |
|
|
| #stage { |
| --u: 1; |
| position: relative; |
| width: 480px; |
| height: 640px; |
| overflow: hidden; |
| touch-action: none; |
| box-shadow: 0 0 0 1px rgba(80, 90, 160, 0.35), 0 0 40px rgba(25, 245, 255, 0.08), 0 0 120px rgba(255, 45, 149, 0.06); |
| background: #07070f; |
| } |
|
|
| #gl { display: block; width: 100%; height: 100%; } |
|
|
| .layer { position: absolute; inset: 0; } |
| .hidden { display: none !important; } |
|
|
| |
|
|
| #hud { |
| pointer-events: none; |
| font-size: calc(var(--u) * 13px); |
| text-shadow: 0 0 calc(var(--u) * 6px) rgba(0, 0, 0, 0.9); |
| } |
|
|
| .hud-top { |
| position: absolute; |
| top: calc(var(--u) * 10px); |
| left: calc(var(--u) * 12px); |
| right: calc(var(--u) * 12px); |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| } |
|
|
| .score { |
| font-size: calc(var(--u) * 26px); |
| font-weight: 800; |
| letter-spacing: 0.02em; |
| font-variant-numeric: tabular-nums; |
| color: #fff; |
| text-shadow: 0 0 calc(var(--u) * 10px) rgba(25, 245, 255, 0.6); |
| line-height: 1; |
| } |
|
|
| .sub { margin-top: calc(var(--u) * 4px); display: flex; gap: calc(var(--u) * 10px); font-weight: 700; } |
| .mult { color: var(--yellow); } |
| .graze { color: var(--cyan); letter-spacing: 0.08em; } |
|
|
| .hud-right { text-align: right; } |
| .lives { font-size: calc(var(--u) * 16px); letter-spacing: 0.1em; line-height: 1; } |
| .time { margin-top: calc(var(--u) * 4px); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; } |
| .modeinfo { margin-top: calc(var(--u) * 2px); color: var(--pink); font-weight: 700; font-size: calc(var(--u) * 12px); } |
|
|
| .pbtn { |
| pointer-events: auto; |
| position: absolute; |
| top: calc(var(--u) * 8px); |
| left: 50%; |
| transform: translateX(-50%); |
| width: calc(var(--u) * 30px); |
| height: calc(var(--u) * 22px); |
| border-radius: calc(var(--u) * 6px); |
| border: 1px solid rgba(255, 255, 255, 0.25); |
| background: rgba(10, 12, 30, 0.45); |
| color: rgba(255, 255, 255, 0.7); |
| font-family: inherit; |
| font-weight: 800; |
| font-size: calc(var(--u) * 11px); |
| line-height: 1; |
| letter-spacing: 0.1em; |
| cursor: pointer; |
| opacity: 0.7; |
| } |
| .pbtn:hover, .pbtn:active { opacity: 1; border-color: var(--cyan); color: #fff; } |
|
|
| #hud.overclock .score { color: var(--cyan); animation: oc-pulse 0.4s ease-in-out infinite alternate; } |
| @keyframes oc-pulse { from { text-shadow: 0 0 calc(var(--u) * 8px) var(--cyan); } to { text-shadow: 0 0 calc(var(--u) * 22px) var(--pink); } } |
|
|
| .hud-bottom { |
| position: absolute; |
| left: calc(var(--u) * 12px); |
| right: calc(var(--u) * 12px); |
| bottom: calc(var(--u) * 10px); |
| display: flex; |
| align-items: center; |
| gap: calc(var(--u) * 10px); |
| } |
|
|
| .gauge { |
| flex: 1; |
| height: calc(var(--u) * 6px); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.08); |
| box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); |
| overflow: hidden; |
| } |
| #gaugeFill { |
| height: 100%; |
| width: 0%; |
| background: linear-gradient(90deg, var(--cyan), var(--pink)); |
| box-shadow: 0 0 calc(var(--u) * 8px) rgba(25, 245, 255, 0.7); |
| transition: width 0.08s linear; |
| } |
|
|
| .dash { |
| position: relative; |
| width: calc(var(--u) * 34px); |
| height: calc(var(--u) * 34px); |
| border-radius: 50%; |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: calc(var(--u) * 7.5px); |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| color: rgba(255, 255, 255, 0.5); |
| background: rgba(0, 0, 0, 0.35); |
| } |
| #dashFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: rgba(25, 245, 255, 0.28); } |
| .dash span { position: relative; } |
| .dash.ready { border-color: var(--cyan); color: #fff; box-shadow: 0 0 calc(var(--u) * 10px) rgba(25, 245, 255, 0.45); } |
| .dash.ready #dashFill { background: rgba(25, 245, 255, 0.4); } |
|
|
| .focus { |
| font-size: calc(var(--u) * 10px); |
| font-weight: 800; |
| letter-spacing: 0.12em; |
| padding: calc(var(--u) * 3px) calc(var(--u) * 7px); |
| border-radius: 999px; |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| color: rgba(255, 255, 255, 0.25); |
| } |
| .focus.on { color: #fff; border-color: var(--yellow); box-shadow: 0 0 calc(var(--u) * 10px) rgba(255, 242, 58, 0.5); } |
|
|
| |
| .budget { |
| position: absolute; |
| top: calc(var(--u) * 62px); |
| left: calc(var(--u) * 12px); |
| right: calc(var(--u) * 12px); |
| } |
| .budget .label { display: flex; justify-content: space-between; font-size: calc(var(--u) * 10px); letter-spacing: 0.1em; color: var(--muted); font-weight: 700; } |
| .budget .bar { height: calc(var(--u) * 5px); border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: calc(var(--u) * 2px); } |
| #budgetFill { height: 100%; width: 100%; background: var(--yellow); box-shadow: 0 0 calc(var(--u) * 8px) rgba(255, 242, 58, 0.6); transition: width 0.05s linear; } |
| .budget.low #budgetFill { background: var(--pink); box-shadow: 0 0 calc(var(--u) * 8px) rgba(255, 45, 149, 0.7); } |
| .exhausted { margin-top: calc(var(--u) * 4px); text-align: center; color: var(--pink); font-weight: 800; font-size: calc(var(--u) * 12px); animation: blink 0.5s steps(2) infinite; } |
| @keyframes blink { to { opacity: 0.2; } } |
|
|
| |
| .banner { |
| position: absolute; |
| left: 0; right: 0; |
| top: 34%; |
| text-align: center; |
| opacity: 0; |
| pointer-events: none; |
| } |
| .banner.show { animation: banner-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; } |
| #bannerMain { |
| font-size: calc(var(--u) * 34px); |
| font-weight: 900; |
| letter-spacing: 0.08em; |
| color: #fff; |
| text-shadow: 0 0 calc(var(--u) * 14px) var(--cyan), 0 0 calc(var(--u) * 2px) #fff; |
| } |
| #bannerSub { margin-top: calc(var(--u) * 4px); font-size: calc(var(--u) * 13px); color: var(--text); font-weight: 600; } |
| .banner.phase #bannerMain { color: var(--cyan); } |
| .banner.hit #bannerMain { color: var(--pink); text-shadow: 0 0 calc(var(--u) * 16px) var(--pink); } |
| .banner.overclock #bannerMain { color: var(--yellow); text-shadow: 0 0 calc(var(--u) * 18px) var(--pink), 0 0 calc(var(--u) * 4px) #fff; letter-spacing: 0.16em; } |
| .banner.slow #bannerMain { color: #b9c3ff; text-shadow: 0 0 calc(var(--u) * 14px) #6c7cff; } |
| .banner.mult #bannerMain { color: var(--yellow); font-size: calc(var(--u) * 26px); } |
| .banner.go #bannerMain { font-size: calc(var(--u) * 46px); color: var(--yellow); } |
| .banner.clear #bannerMain { color: var(--cyan); } |
| .banner.wave #bannerMain { font-size: calc(var(--u) * 28px); } |
| @keyframes banner-in { |
| from { opacity: 0; transform: translateY(calc(var(--u) * 14px)) scale(0.9); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
|
|
| .subbanner { |
| position: absolute; |
| left: 0; right: 0; |
| top: 52%; |
| text-align: center; |
| font-size: calc(var(--u) * 15px); |
| font-weight: 800; |
| letter-spacing: 0.1em; |
| color: var(--yellow); |
| opacity: 0; |
| text-shadow: 0 0 calc(var(--u) * 10px) rgba(255, 242, 58, 0.7); |
| } |
| .subbanner.show { animation: sub-in 0.3s ease-out forwards; } |
| @keyframes sub-in { from { opacity: 0; transform: translateY(calc(var(--u) * 8px)); } to { opacity: 1; transform: none; } } |
|
|
| |
| .flash { |
| position: absolute; inset: 0; |
| background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 45, 95, 0.45) 100%); |
| opacity: 0; |
| } |
| .flash.on { animation: flash 0.5s ease-out forwards; } |
| @keyframes flash { from { opacity: 1; } to { opacity: 0; } } |
|
|
| |
| .touch { |
| position: absolute; |
| left: 0; right: 0; |
| bottom: calc(var(--u) * 28px); |
| display: flex; |
| justify-content: space-between; |
| padding: 0 calc(var(--u) * 14px); |
| pointer-events: none; |
| } |
| .tbtn { |
| pointer-events: auto; |
| width: calc(var(--u) * 64px); |
| height: calc(var(--u) * 64px); |
| border-radius: 50%; |
| border: 2px solid rgba(255, 255, 255, 0.35); |
| background: rgba(10, 12, 30, 0.55); |
| color: #fff; |
| font: 800 calc(var(--u) * 12px) var(--font); |
| letter-spacing: 0.1em; |
| touch-action: none; |
| } |
| #btnFocus.on, .tbtn:active { background: rgba(25, 245, 255, 0.3); border-color: var(--cyan); } |
| #btnDash { border-color: rgba(255, 45, 149, 0.6); } |
|
|
| |
|
|
| .panel { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: var(--panel); |
| backdrop-filter: blur(6px); |
| -webkit-backdrop-filter: blur(6px); |
| font-size: calc(var(--u) * 12px); |
| } |
| .panel-inner { |
| width: 92%; |
| max-height: 96%; |
| overflow-y: auto; |
| padding: calc(var(--u) * 14px); |
| text-align: center; |
| scrollbar-width: thin; |
| } |
| .panel-inner.narrow { width: 70%; } |
|
|
| h1.title { |
| margin: 0; |
| font-size: calc(var(--u) * 52px); |
| font-weight: 900; |
| letter-spacing: 0.02em; |
| line-height: 1; |
| } |
| h1.title .t1 { color: #fff; text-shadow: 0 0 calc(var(--u) * 18px) rgba(25, 245, 255, 0.8); } |
| h1.title .t2 { color: var(--pink); margin-left: 0.25em; text-shadow: 0 0 calc(var(--u) * 18px) rgba(255, 45, 149, 0.8); } |
| .title-sub { margin-top: calc(var(--u) * 6px); color: var(--cyan); font-weight: 700; letter-spacing: 0.2em; font-size: calc(var(--u) * 11px); } |
| .tagline { margin: calc(var(--u) * 10px) 0 calc(var(--u) * 14px); color: var(--muted); font-size: calc(var(--u) * 12px); } |
|
|
| .modes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8px); text-align: left; } |
| .mode { |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: calc(var(--u) * 10px); |
| padding: calc(var(--u) * 10px) calc(var(--u) * 11px); |
| background: rgba(255, 255, 255, 0.03); |
| cursor: pointer; |
| transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; |
| } |
| .mode:hover, .mode:focus-visible { border-color: var(--cyan); background: rgba(25, 245, 255, 0.07); transform: translateY(-1px); outline: none; } |
| .mode[data-mode="rhythm"]:hover { border-color: var(--pink); background: rgba(255, 45, 149, 0.08); } |
| .mode[data-mode="zero"]:hover { border-color: var(--yellow); background: rgba(255, 242, 58, 0.07); } |
| .mname { font-weight: 800; font-size: calc(var(--u) * 14px); color: #fff; } |
| .msub { color: var(--cyan); font-size: calc(var(--u) * 10px); letter-spacing: 0.14em; font-weight: 700; margin-top: 1px; } |
| .mdesc { color: var(--muted); font-size: calc(var(--u) * 10.5px); margin-top: calc(var(--u) * 5px); line-height: 1.45; } |
| .labpick { display: block; margin-top: calc(var(--u) * 6px); font-size: calc(var(--u) * 10.5px); color: var(--text); } |
| .labpick select { |
| margin-top: 2px; |
| width: 100%; |
| background: #0d0f20; |
| color: #fff; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 6px; |
| padding: calc(var(--u) * 4px); |
| font: inherit; |
| } |
|
|
| .options { display: flex; gap: calc(var(--u) * 16px); justify-content: center; align-items: center; margin: calc(var(--u) * 14px) 0 calc(var(--u) * 8px); font-size: calc(var(--u) * 11.5px); } |
| .options label { display: flex; gap: 6px; align-items: center; cursor: pointer; } |
| .options input { accent-color: var(--cyan); width: calc(var(--u) * 14px); height: calc(var(--u) * 14px); } |
|
|
| .controls { text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: calc(var(--u) * 8px); } |
| .ctitle { font-weight: 800; color: var(--yellow); font-size: calc(var(--u) * 11px); letter-spacing: 0.1em; } |
| .ctext { color: var(--muted); font-size: calc(var(--u) * 10.5px); line-height: 1.55; white-space: pre-line; margin-top: 2px; } |
| .tip { color: var(--cyan); font-size: calc(var(--u) * 10.5px); line-height: 1.5; margin: calc(var(--u) * 10px) 0 0; opacity: 0.9; } |
|
|
| button { |
| font: 700 calc(var(--u) * 13px) var(--font); |
| color: #fff; |
| background: rgba(255, 255, 255, 0.06); |
| border: 1px solid rgba(255, 255, 255, 0.22); |
| border-radius: 999px; |
| padding: calc(var(--u) * 9px) calc(var(--u) * 20px); |
| cursor: pointer; |
| transition: background 0.12s ease, border-color 0.12s ease; |
| } |
| button:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } |
| button.primary { background: linear-gradient(90deg, rgba(25, 245, 255, 0.25), rgba(255, 45, 149, 0.25)); border-color: var(--cyan); box-shadow: 0 0 calc(var(--u) * 14px) rgba(25, 245, 255, 0.25); } |
| button.small { padding: calc(var(--u) * 4px) calc(var(--u) * 12px); font-size: calc(var(--u) * 11px); } |
| .btnrow { display: flex; gap: calc(var(--u) * 8px); justify-content: center; flex-wrap: wrap; margin-top: calc(var(--u) * 14px); } |
|
|
| h2 { margin: 0 0 calc(var(--u) * 6px); font-size: calc(var(--u) * 30px); font-weight: 900; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 calc(var(--u) * 16px) rgba(25, 245, 255, 0.7); } |
| .result-mode { color: var(--pink); font-weight: 800; letter-spacing: 0.14em; font-size: calc(var(--u) * 11px); } |
| .analysis-title { margin: calc(var(--u) * 12px) 0 calc(var(--u) * 8px); color: var(--yellow); font-weight: 800; letter-spacing: 0.14em; font-size: calc(var(--u) * 11px); } |
| .analysis { display: flex; gap: calc(var(--u) * 12px); align-items: flex-start; text-align: left; } |
| .stats { flex: 1; display: grid; grid-template-columns: auto auto; gap: calc(var(--u) * 5px) calc(var(--u) * 10px); font-size: calc(var(--u) * 11px); align-content: start; } |
| .sl { color: var(--muted); } |
| .sv { color: #fff; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } |
| .sn { display: block; color: var(--muted); font-weight: 500; font-size: 0.8em; } |
| .heat { width: 42%; flex: none; text-align: center; } |
| .heat-title { font-size: calc(var(--u) * 9.5px); color: var(--cyan); font-weight: 700; margin-bottom: 4px; letter-spacing: 0.06em; } |
| #heatmap { width: 100%; height: auto; border-radius: 6px; display: block; } |
| .heat-note { font-size: calc(var(--u) * 9px); color: var(--muted); margin-top: 4px; } |
|
|
