/* LuckyClimber — 원작 TypoRunner style.css의 색 · 키캡 · 패드 버튼을 따름 */
:root {
  --bg: #151826; --bg2: #1d2133; --card: #232842; --line: #343a5c;
  --text: #eef0fa; --muted: #9aa1c4; --accent: #ffcf3f; --good: #2ee59d; --bad: #ff4d6a;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px; border-radius: 5px; background: #f4f1ff; color: #111; font: 900 11px/1.4 system-ui, sans-serif; text-align: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }

#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- 로고 · 소식 ---------- */
.top { position: fixed; left: 14px; top: 12px; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, 60vw); }
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.logo-keys { display: flex; gap: 5px; font-size: 22px; line-height: 1; }
.logo-keys i {
  font-style: normal; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: .26em;
  background: var(--c); color: #111; font-weight: 900;
  box-shadow: inset 0 -0.12em 0 rgba(0,0,0,.22), 0 0.1em 0 rgba(0,0,0,.45); animation: keytype 4.8s infinite;
}
.logo-keys i:nth-child(1) { transform: rotate(-5deg); }
.logo-keys i:nth-child(2) { transform: rotate(3deg); animation-delay: .12s; }
.logo-keys i:nth-child(3) { transform: rotate(-2deg); animation-delay: .24s; }
.logo-keys i:nth-child(4) { transform: rotate(5deg); animation-delay: .36s; }
.logo-keys i:nth-child(5) { transform: rotate(-3deg); animation-delay: .48s; }
@keyframes keytype { 0%, 86%, 100% { translate: 0 0; } 90% { translate: 0 3px; } }
.logo-sub { font: 900 14px/1 system-ui, sans-serif; letter-spacing: .32em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.logo-sub small { letter-spacing: .05em; font-size: 10px; color: var(--muted); font-weight: 800; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.feed li { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: rgba(15,17,30,.78); border: 1px solid rgba(255,255,255,.1); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; animation: feedIn .3s ease both; }
.feed li.fall { color: #ff9aa9; } .feed li.star, .feed li.best, .feed li.summit, .feed li.mile { color: #ffd84a; } .feed li.anchor { color: #7fe9f0; }
@keyframes feedIn { from { transform: translateX(-20px); opacity: 0; } }

/* ---------- 순위 ---------- */
.rank { position: fixed; right: 40px; top: 12px; z-index: 3; width: 200px; padding: 10px 12px; border-radius: 14px; background: rgba(15,17,30,.8); border: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.rank h3 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 900; }
.rank ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rank li { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 7px; align-items: center; font-size: 13px; font-weight: 800; }
.rank li i { width: 10px; height: 10px; border-radius: 50%; }
.rank li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank li em { font-style: normal; font-size: 9px; color: var(--muted); margin-left: 4px; border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; }
.rank li b { font-variant-numeric: tabular-nums; }
.rank li small { grid-column: 2 / 4; font-size: 10px; color: var(--muted); margin-top: -2px; }
.rank li.me span, .rank li.me b { color: var(--accent); }

.net { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; padding: 6px 14px; border-radius: 999px; background: var(--bad); color: #fff; font-weight: 900; font-size: 13px; }

/* ---------- 아래 패드 (원작 .tp-*) ---------- */
.hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px max(12px, env(safe-area-inset-bottom)); pointer-events: none; animation: tpUp .3s ease both; }
.hud::before { content: ""; position: absolute; inset: -40px 0 0; background: linear-gradient(to top, rgba(13,15,26,.92), rgba(13,15,26,0)); z-index: -1; }
@keyframes tpUp { from { transform: translateY(110%); } }
.hint { width: min(720px, 100%); text-align: center; padding: 7px 14px; border-radius: 12px; background: rgba(40,46,84,.92); border: 1px solid rgba(255,255,255,.14); font-size: 13px; font-weight: 800; pointer-events: auto; }
.tp-bar { width: min(720px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: auto; }
.tp-tools { display: flex; gap: 6px; flex: none; }
.tp-status { min-width: 0; padding: 9px 15px; border-radius: 999px; background: rgba(15,17,30,.84); border: 1px solid rgba(255,255,255,.14); color: #fff; font: 800 13px/1.1 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.tp-status b { color: var(--accent); }
.tp-status .pend { color: #ffd84a; opacity: .75; }
.tp-close { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.32); background: rgba(12,14,26,.84); color: #fff; font: 900 14px/1 system-ui, sans-serif; box-shadow: 0 4px 0 rgba(0,0,0,.3); display: inline-flex; align-items: center; gap: 6px; }
.tp-close.round { width: 38px; padding: 0; justify-content: center; }
.tp-close:hover { border-color: #ffd84a; }
.tp-pad { width: min(720px, 100%); display: flex; gap: 8px; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.tp-btn {
  position: relative; flex: 1; min-width: 0; height: clamp(62px, 10vh, 86px); border: 0; border-radius: 16px; background: var(--c, #ccc); color: #111;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; line-height: 1;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 6px 0 rgba(0,0,0,.42); transition: transform .05s, box-shadow .05s, filter .1s, opacity .15s; touch-action: none;
}
.tp-btn b { max-width: 94%; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-btn small { font-size: 12px; font-weight: 800; opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-btn.down { transform: translateY(5px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14), 0 1px 0 rgba(0,0,0,.42); }
.tp-btn.off { opacity: .42; }
.tp-btn.armed { filter: brightness(1.15); }
.tp-btn.armed::after { content: ""; position: absolute; inset: 3px; border-radius: 13px; border: 2px solid rgba(255,255,255,.95); pointer-events: none; animation: armed 1s infinite alternate; }
.tp-btn.armed small { opacity: 1; color: #fff; background: rgba(20,12,0,.55); padding: 3px 7px; border-radius: 999px; }
@keyframes armed { to { border-color: rgba(255,255,255,.35); } }
.tp-key { position: absolute; left: 7px; top: 6px; font-style: normal; font-size: 10px; font-weight: 900; line-height: 1; padding: 3px 5px; border-radius: 6px; background: rgba(0,0,0,.16); color: rgba(0,0,0,.7); }
@media (pointer: coarse) { .tp-key, .tp-close kbd { display: none; } }
@media (max-width: 720px) {
  .tp-pad { gap: 6px; } .tp-btn { border-radius: 14px; } .tp-btn b { font-size: 13px; } .tp-btn small { font-size: 11px; }
  .tp-status { font-size: 12px; padding: 8px 12px; }
  .rank { width: 150px; right: 34px; padding: 8px 10px; } .rank li { font-size: 11px; } .rank li small { display: none; }
  .logo-keys { font-size: 17px; } .feed li { font-size: 11px; }
}

/* ---------- 알림 · 결과 ---------- */
.toast { position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%); z-index: 6; padding: 9px 16px; border-radius: 999px; background: rgba(15,17,30,.95); border: 1px solid rgba(255,255,255,.2); font-weight: 900; font-size: 14px; pointer-events: none; }
.toast.bad { border-color: var(--bad); color: #ffb3bf; }
.toast.ok { border-color: var(--good); color: #b9ffe2; }
.result { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; min-width: 280px; padding: 18px 24px; border-radius: 18px; background: rgba(21,24,38,.96); border: 2px solid rgba(255,255,255,.14); text-align: center; pointer-events: auto; box-shadow: 0 10px 0 rgba(0,0,0,.35); }
.result.pop { animation: pop .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.result h3 { margin: 0 0 8px; font-size: 24px; font-weight: 900; }
.result h3.bad { color: var(--bad); } .result h3.ok { color: var(--good); }
.result p { margin: 4px 0; font-size: 14px; font-weight: 700; color: #d7dbf2; }
.result p b { color: #fff; }
.result p.big { font-size: 26px; font-weight: 900; color: #ffd84a; margin-top: 10px; }
.result .hint { color: var(--muted); font-size: 11px; }

/* ---------- 창 ---------- */
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(8,9,16,.6); padding: 16px; }
.card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 0 rgba(0,0,0,.35); }
.card header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.card h2 { margin: 0; font-size: 20px; font-weight: 900; flex: 1; }
.card h3 { margin: 16px 0 8px; font-size: 14px; color: var(--muted); }
.card .x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); }
.bolts { font-weight: 900; color: #ffd84a; font-size: 18px; }
.note { margin: 6px 0; font-size: 12px; color: var(--muted); }
.ups { display: grid; gap: 8px; }
.up { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.up-t { display: flex; align-items: center; gap: 8px; }
.up-t b { font-size: 15px; }
.up small { grid-column: 1; color: var(--muted); font-size: 12px; font-weight: 700; }
.up button { grid-column: 2; grid-row: 1 / 3; min-width: 78px; height: 40px; border: 0; border-radius: 12px; background: #ffd84a; color: #2a2100; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 rgba(0,0,0,.4); }
.up button:disabled { background: #3a4066; color: var(--muted); cursor: default; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 8px; height: 8px; border-radius: 2px; background: #3a4066; }
.pips i.on { background: #2ee59d; }
.lv { font-size: 11px; color: #2ee59d; font-weight: 900; }
.starts { display: flex; flex-wrap: wrap; gap: 8px; }
.starts button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); font-weight: 800; font-size: 12px; }
.starts button b { font-size: 15px; }
.starts button.on { border-color: #2ec99a; color: #b9ffe2; }
.rules { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: #d7dbf2; }
.rules .g { color: var(--good); font-weight: 900; } .rules .m { color: #c3c8e6; font-weight: 900; } .rules .o { color: #ffb02e; font-weight: 900; } .rules .r { color: var(--bad); font-weight: 900; }
.nick { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; width: min(380px, 100%); }
.nick .logo-keys.big { font-size: 34px; }
.nick p { margin: 0; color: #d7dbf2; font-weight: 700; line-height: 1.5; }
.nick input { width: 100%; height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); padding: 0 14px; font-size: 16px; font-weight: 800; outline: none; text-align: center; }
.nick input:focus { border-color: var(--accent); }
.nick button { width: 100%; height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: #2a2100; font-size: 17px; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 5px 0 rgba(0,0,0,.4); }

/* ---------- 능력치 · 경험치 ---------- */
.xpbar { position: relative; flex: 1; min-width: 0; height: 14px; border-radius: 999px; background: rgba(15,17,30,.84); border: 1px solid rgba(255,255,255,.14); overflow: hidden; pointer-events: auto; }
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4f9dff, #8fd0ff); transition: width .3s; }
.xpbar span { position: relative; display: block; text-align: center; font: 900 10px/14px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tp-status .lv { display: inline-block; padding: 1px 6px; margin-right: 2px; border-radius: 6px; background: #4f9dff; color: #fff; font-size: 11px; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font: 900 11px/18px system-ui, sans-serif; animation: armed .6s infinite alternate; }
.xpline { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin: 4px 0 8px; }
.xpline i { display: block; height: 100%; background: linear-gradient(90deg, #4f9dff, #8fd0ff); }
.up.stat { border-left: 4px solid var(--sc); }
.up.stat button { background: var(--sc); color: #111; }
.up.stat .lv { color: var(--sc); }
.up.stat button:disabled { background: #3a4066; color: var(--muted); }

/* ---------- 아래 버튼: 이동 · 메뉴 ---------- */
.moves { flex: 1; min-width: 0; display: flex; gap: 8px; transition: opacity .15s; }
.moves.wait { opacity: .45; pointer-events: none; }
.moves .tp-btn.wide b { font-size: 17px; }
.moves .tp-btn.dyno { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.tp-btn.more { flex: 0 0 auto; width: 96px; }
.tp-btn.more small { max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.menu { animation: tpUp .15s ease both; }
.menu .tp-btn { height: clamp(54px, 8vh, 70px); }
.result .ok-btn { display: block; width: 100%; margin: 14px 0 8px; height: 46px; border: 0; border-radius: 14px; background: #ffd84a; color: #111; font: 900 17px/1 system-ui, sans-serif; box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 5px 0 rgba(0,0,0,.42); cursor: pointer; }
.result .ok-btn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14), 0 1px 0 rgba(0,0,0,.42); }
.result .ok-btn kbd { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 560px) { .tp-btn.more { width: 70px; } .moves { gap: 6px; } }

/* ---------- 경험치 · 스태미나 줄 ---------- */
.meters { width: min(720px, 100%); display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.stam { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 3px 0 8px; border-radius: 999px; background: rgba(15,17,30,.84); border: 1px solid rgba(255,255,255,.14); cursor: pointer; }
.stam .ico { font-size: 13px; }
.sbar { position: relative; flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2ec99a, #7fe8ff); transition: width .3s; }
.stam.low .sbar i { background: linear-gradient(90deg, #ff8a3d, #ffd84a); }
.sbar span { position: relative; display: block; text-align: center; font: 900 10px/12px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.charge { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #ffd84a; font-size: 12px; line-height: 22px; box-shadow: 0 2px 0 rgba(0,0,0,.4); cursor: pointer; }
.stam.low .charge { animation: armed .6s infinite alternate; }
.stamline i { background: linear-gradient(90deg, #2ec99a, #7fe8ff) !important; }
.toggle { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: #2ec99a; }
.toggle span { display: flex; flex-direction: column; gap: 2px; } .toggle small { color: var(--muted); font-weight: 700; }
.ad .ad-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 220px; margin: 8px 0 4px; border-radius: 14px; background: repeating-linear-gradient(135deg, #2a3050 0 14px, #252a46 14px 28px); text-align: center; }
.ad .ad-box b { font-size: 64px; font-weight: 900; color: #ffd84a; }
.ad .ad-box small { color: var(--muted); font-weight: 700; line-height: 1.5; }
.ad .ok-btn { display: block; width: 100%; margin-top: 10px; height: 46px; border: 0; border-radius: 14px; background: #ffd84a; color: #111; font: 900 17px/1 system-ui, sans-serif; box-shadow: 0 5px 0 rgba(0,0,0,.42); }
.ad .ok-btn:disabled { background: #3a4066; color: var(--muted); box-shadow: none; }
.tp-btn b em { font-style: normal; font-size: .72em; margin-left: 4px; color: #0b4a5a; }
@media (max-width: 560px) { .meters { flex-direction: column; gap: 6px; } .meters > * { width: 100%; } }
.up button:disabled { background: #3a4066; color: var(--muted); box-shadow: none; }