:root {
  /* 차분한 검정 바탕 + 흰 버튼, 금색은 코인·별에만, 브랜드 그라데이션은 로고에만 */
  --plum: #0b0b0f;
  --plum-2: #17171d;
  --plum-3: #23232b;
  --ink: #f4f4f6;
  --muted: #9b9ba8;
  --coin: #f4f4f6;
  --coin-deep: #b9b9c4;
  --coin-ink: #0b0b0f;
  --gold: #ecc66b;
  --brand: linear-gradient(100deg, #ff5a8a, #8b5cff 60%, #4cc9ff);
  --heart: #ff4d7d;
  --accent: #8b5cff;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --display: "Inter", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --text: "Inter", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--plum); color: var(--ink); font-family: var(--text); overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--coin); outline-offset: 3px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* 휴대폰 폭 기둥. 넓은 화면에서는 가운데 세로 화면 하나 */
.stage { position: relative; height: 100dvh; max-width: 480px; margin: 0 auto; overflow: hidden; background: #000; }
@media (min-width: 520px) { .stage { box-shadow: 0 0 0 1px #ffffff14, 0 30px 80px #0008; } }

.top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 0 16px; transition: opacity .25s; }
.mark { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 20px; letter-spacing: -.01em; color: #fffffff0; text-shadow: 0 1px 8px #0009; pointer-events: none; }
.mark img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 2px 8px #0007; }
.mark b { font-weight: 400; color: var(--coin); }
.find { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #0000004d; backdrop-filter: blur(8px); }
.filter-pill { display: flex; align-items: center; gap: 6px; max-width: 52%; padding: 7px 12px; border-radius: 99px; background: var(--coin); color: var(--coin-ink); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-pill::after { content: "✕"; font-size: 12px; opacity: .7; }
.stage.playing .top { opacity: 0; pointer-events: none; }

/* 직접 만든 세로 페이저: 손가락을 따라 움직이고 놓으면 다음 칸으로 붙음 */
.feed { position: absolute; inset: 0; overflow: hidden; touch-action: none; outline: none; }
.track { position: absolute; inset: 0; will-change: transform; }
.track.anim { transition: transform .36s var(--ease); }
.slide { position: relative; height: var(--h, 100dvh); overflow: hidden; background: var(--plum); }
.slide .frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; pointer-events: none; }
.slide.live .frame { pointer-events: auto; }

.cover { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 35%, color-mix(in srgb, var(--accent) 38%, var(--plum)) 0%, var(--plum) 70%); transition: opacity .35s; }
.cover img { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 18px 50px #0007; }
.cover .blur { position: absolute; inset: -10%; width: 120%; height: 120%; border-radius: 0; object-fit: cover; filter: blur(40px) saturate(1.4); opacity: .45; box-shadow: none; }
.cover .glyph { font-family: var(--display); font-size: 64px; color: var(--accent); }
.slide.loaded .cover { opacity: 0; pointer-events: none; }

.veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, #000c 0%, #0006 34%, #0000 60%), linear-gradient(to bottom, #0007 0%, #0000 18%); transition: opacity .3s; }
.slide.live .veil { opacity: 0; pointer-events: none; }

.info { padding: 0 92px calc(26px + var(--safe-b)) 18px; }
.title { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 9vw, 40px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.tagline { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #ffffffd9; max-width: 32ch; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.tags li { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: #ffffff1f; color: #ffffffe0; }
.creator { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* 코인 버튼: 이 피드에서 단 하나 크게 쓰는 요소 */
.play { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: grid; place-items: center; gap: 10px; text-align: center; }
.coin { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--coin) 38%, var(--coin-deep) 100%); box-shadow: inset 0 -5px 0 #0003, inset 0 0 0 5px #ffffff38, 0 10px 30px #0008; color: var(--coin-ink); transition: transform .15s; }
.coin svg { width: 38px; height: 38px; fill: currentColor; stroke: none; margin-left: 5px; }
.play:active .coin { transform: scale(.92); }
.play-label { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px #000a; }
.play.dropping .coin { animation: drop .32s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes drop { 40% { transform: scale(1.06); } 100% { transform: translateY(50px) scale(.2); opacity: 0; } }

.rail { position: absolute; right: 10px; bottom: calc(28px + var(--safe-b)); display: flex; flex-direction: column; gap: 18px; align-items: center; }
.rail button { display: grid; justify-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px #0009; min-width: 56px; }
.rail .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #0000004d; backdrop-filter: blur(8px); }
.rail svg { width: 26px; height: 26px; }
.rail .liked .ico { color: var(--heart); animation: pop .3s; }
.rail .liked svg { fill: var(--heart); }
@keyframes pop { 50% { transform: scale(1.25); } }

/* 첫 방문 안내 */
.coach { position: absolute; z-index: 4; left: 50%; top: 24%; white-space: nowrap; translate: -50% 0; display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 16px; background: #000000a6; backdrop-filter: blur(6px); font-size: 14px; font-weight: 700; pointer-events: none; animation: bob 1.4s ease-in-out infinite; }
.coach svg { width: 28px; height: 28px; color: var(--coin); }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* 광고 칸 (테스트) */
.slide.ad .adcard { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; padding: 32px; text-align: center; background: repeating-linear-gradient(135deg, #241c40 0 18px, #201936 18px 36px); }
.adcard .badge { justify-self: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: var(--coin); color: var(--coin-ink); }
.adcard h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; }
.adcard p { margin: 0; color: var(--muted); line-height: 1.55; }

/* 플레이 중 아래 손잡이 */
/* 플레이 중 아래 막대: 그만 · 손잡이(위아래로 밀어 다른 게임, 누르면 메뉴) · 저장 · 메뉴. 게임 화면은 막대 위까지만 → 게임 버튼을 가리지 않음 */
:root { --dock-h: 52px; }
.grab { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.dock { pointer-events: auto; width: 100%; height: calc(var(--dock-h) + var(--safe-b)); padding: 0 6px var(--safe-b); display: grid; grid-template-columns: 58px 1fr 58px 58px; align-items: center; background: #0b0816; border-top: 1px solid #ffffff14; }
.dock-btn { display: grid; justify-items: center; gap: 1px; font-size: 10.5px; font-weight: 700; color: #ffffffcc; padding: 4px 0; border-radius: 10px; }
.dock-btn svg { width: 22px; height: 22px; }
.dock-btn:active { background: #ffffff14; }
.dock-btn.on { color: var(--coin); }
.dock-btn.on svg { fill: currentColor; }
.grab-pill { touch-action: none; height: 100%; display: grid; place-content: center; justify-items: center; gap: 5px; border-radius: 12px; }
.grab-pill:active { background: #ffffff0d; }
.grab-bar { width: 54px; height: 5px; border-radius: 99px; background: #ffffffd9; }
.grab-label { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.grab-menu { pointer-events: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: min(94%, 420px); padding: 6px; border-radius: 18px; background: #0b0816f2; border: 1px solid #ffffff1a; backdrop-filter: blur(10px); animation: up .2s ease-out; }
.grab-menu button { display: grid; justify-items: center; gap: 5px; padding: 12px 6px; border-radius: 12px; font-size: 12.5px; font-weight: 600; text-align: center; }
.grab-menu button:active { background: #ffffff1f; }
.grab-menu button:disabled { opacity: .35; }
.grab-menu svg { width: 22px; height: 22px; }
/* iframe 은 height:auto 면 150px 로 줄어드므로 높이를 직접 계산 */
.slide .frame { top: var(--safe-t); bottom: auto; height: calc(100% - var(--safe-t)); }
.stage.playing .slide.live .frame { height: calc(100% - var(--safe-t) - var(--dock-h) - var(--safe-b)); }

/* 게임 찾기 */
.lib, .sub { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; background: var(--plum); animation: rise .28s var(--ease); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.lib-head { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 16px 8px 8px; }
.lib-head h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; }
.lib-count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.icon-btn:active { background: #ffffff14; }
.search { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--plum-2); color: var(--muted); }
.search svg { width: 20px; height: 20px; flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 500 16px var(--text); outline: none; }
.search input::placeholder { color: #b3abd6b3; }
.search:focus-within { box-shadow: 0 0 0 2px var(--coin); }
.chips { display: flex; gap: 6px; padding: 12px 16px 4px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 99px; background: var(--plum-2); font-size: 14px; font-weight: 600; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--plum); }
.chip .n { margin-left: 4px; font-size: 12px; opacity: .65; font-variant-numeric: tabular-nums; }
.sorts { display: flex; gap: 14px; padding: 6px 18px 0; flex: none; }
.sorts button { font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.sorts button[aria-pressed="true"] { color: var(--ink); border-color: var(--coin); }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 18px 12px; padding: 12px 16px 20px; }
.card { position: relative; display: grid; gap: 7px; text-align: left; min-width: 0; }
.card .thumb { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(100% 100% at 50% 30%, color-mix(in srgb, var(--accent) 45%, var(--plum-2)), var(--plum-2)); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb .glyph { font-family: var(--display); font-size: 48px; color: var(--accent); }
.card .badge2 { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #000000a6; color: #fff; }
.card .badge2.hot { background: var(--heart); }
.card .badge2.rising { background: #ff8a3d; }
.card .new { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--coin); color: var(--coin-ink); }
.card .heart { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0000006b; color: #fff; }
.card .heart svg { width: 18px; height: 18px; }
.card .heart[aria-pressed="true"] { color: var(--heart); }
.card .heart[aria-pressed="true"] svg { fill: var(--heart); }
.card h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card:active .thumb { transform: scale(.97); }
.lib-empty { flex: 1; display: grid; place-content: center; gap: 6px; padding: 32px; text-align: center; color: var(--muted); }
.lib-empty strong { font-size: 18px; color: var(--ink); }
.lib-foot { flex: none; display: grid; gap: 10px; padding: 12px 16px calc(12px + var(--safe-b)); background: linear-gradient(to top, var(--plum) 70%, #0b0b0f00); border-top: 1px solid #ffffff12; }
.primary-btn { padding: 15px; border-radius: 14px; background: var(--coin); color: var(--coin-ink); font-weight: 700; font-size: 16px; }
.primary-btn:disabled { opacity: .45; }
.lib-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none !important; }
.lang-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.lang-list button { padding: 12px; border-radius: 12px; background: #ffffff10; text-align: left; font-weight: 600; }
.lang-list button[aria-pressed="true"] { background: var(--coin); color: var(--coin-ink); }
.slide .hot-badge { position: absolute; z-index: 3; left: 16px; top: calc(52px + var(--safe-t)); padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--heart); color: #fff; }
.slide .hot-badge.rising { background: #ff8a3d; }
.slide .hot-badge.fresh { background: var(--coin); color: var(--coin-ink); }
.slide.live .hot-badge { display: none; }
.lib-links button { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.sub iframe { flex: 1; width: 100%; border: 0; background: var(--plum); }

/* 보상형 광고·안내 시트 */
.sheet { position: absolute; inset: 0; z-index: 20; display: grid; align-items: end; background: #0009; }
.sheet-card { margin: 0 10px calc(10px + var(--safe-b)); padding: 22px 20px 18px; border-radius: 22px; background: var(--plum-2); box-shadow: 0 -10px 40px #0007; animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.sheet-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--coin); }
.sheet h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.sheet p { margin: 0; color: var(--muted); line-height: 1.55; }
.sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.sheet-actions button { flex: 1; padding: 14px; border-radius: 14px; font-weight: 700; background: #ffffff14; }
.sheet-actions button.primary { background: var(--coin); color: var(--coin-ink); }
.sheet-actions button:disabled { opacity: .5; }

.toast { position: absolute; z-index: 30; left: 50%; top: calc(60px + var(--safe-t)); translate: -50% -10px; padding: 10px 16px; border-radius: 99px; background: #000000d9; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; white-space: nowrap; }
.toast.on { opacity: 1; translate: -50% 0; }

.empty { height: 100%; display: grid; place-content: center; gap: 8px; padding: 32px; text-align: center; color: var(--muted); }
.empty strong { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───── Sonoworld 패스 (pass.js): 레벨 버튼·내 기록·알림 ───── */
.me-btn { position: relative; width: 42px; height: 42px; margin-left: auto; border-radius: 50%; display: grid; place-items: center; background: #0000004d; backdrop-filter: blur(8px); }
.me-btn + .find { margin-left: 0; }
.me-btn svg { position: absolute; inset: 0; width: 42px; height: 42px; transform: rotate(-90deg); fill: none; stroke-width: 3.5; }
.me-btn .trk { stroke: #ffffff2e; }
.me-btn .arc { stroke: var(--coin); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.me-btn b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; }
.me-btn .dot { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--heart); box-shadow: 0 0 0 2px #0b0b0f; }
.slide .mybest { margin: 8px 0 0; display: inline-block; padding: 4px 10px; border-radius: 99px; background: #00000080; font-size: 12.5px; font-weight: 700; color: var(--coin); }
.slide .hot-badge.dpick { background: linear-gradient(90deg, #ffcc33, #ff8a3d); color: #3b2600; }

.me { position: absolute; inset: 0; z-index: 16; display: flex; flex-direction: column; background: var(--plum); animation: rise .28s var(--ease); }
.me[hidden] { display: none; }
.me-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(24px + var(--safe-b)); }
.me h2 { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 10px; font-family: var(--display); font-weight: 400; font-size: 20px; }
.me h2 small { margin-left: auto; font-family: var(--text); font-size: 12px; color: var(--muted); }
.me .muted { color: var(--muted); font-size: 14px; margin: 0; }
.me .bar { height: 8px; border-radius: 4px; background: #ffffff1a; overflow: hidden; }
.me .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--coin-deep), var(--coin)); transition: width .5s var(--ease); }
.lvcard { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 16px; border-radius: 22px; background: radial-gradient(120% 120% at 0% 0%, #4b3a8a, var(--plum-2)); box-shadow: inset 0 0 0 1px #ffffff14; }
.lvcard .ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--coin) calc(var(--f) * 360deg), #ffffff1f 0); position: relative; }
.lvcard .ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--plum-2); }
.lvcard .ring b { position: relative; font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--coin); }
.lvinfo { display: grid; gap: 6px; min-width: 0; }
.lvinfo strong { font-family: var(--display); font-weight: 400; font-size: 22px; }
.lvinfo small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.streak { grid-column: 1 / -1; padding: 9px 12px; border-radius: 12px; background: #ff8a3d22; color: #ffc08a; font-size: 14px; font-weight: 700; }
.streak.zero { background: #ffffff10; color: var(--muted); font-weight: 600; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats div { display: grid; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #00000026; text-align: center; min-width: 0; }
.stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.stats span { font-size: 11.5px; color: var(--muted); }
.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.missions li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--plum-2); }
.missions li b { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.missions .mi { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #ffffff12; font-size: 18px; color: var(--coin); }
.missions em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--coin); }
.missions li.done { background: #2a5c3a; }
.missions li.done .mi { background: #5ee08a; color: #0b2a14; }
.missions li.done b { margin: 0; }
.missions li.done .bar { display: none; }
.missions li.bonus { background: transparent; box-shadow: inset 0 0 0 1.5px #ffcc3355; }
.missions li.bonus b { margin: 0; color: var(--coin); }
.missions li.bonus.done { background: linear-gradient(90deg, #ffcc33, #ff8a3d); }
.missions li.bonus.done b { color: #3b2600; }
.pick { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 18px; text-align: left; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 40%, var(--plum-2)), var(--plum-2)); }
.pick img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.pick div { display: grid; gap: 4px; min-width: 0; }
.pick b { font-size: 17px; }
.pick span { font-size: 13px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--coin); }
.recent { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
.recent::-webkit-scrollbar { display: none; }
.recent button { flex: none; width: 104px; display: grid; gap: 5px; text-align: left; }
.recent img, .recent .glyph { width: 104px; height: 104px; border-radius: 16px; object-fit: cover; background: var(--plum-2); display: grid; place-items: center; font-family: var(--display); font-size: 40px; color: var(--coin); }
.recent b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent small { font-size: 11.5px; color: var(--coin); font-weight: 700; }
.badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.badges button { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.badges span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; background: #ffffff0d; color: #ffffff40; box-shadow: inset 0 0 0 2px #ffffff14; filter: grayscale(1); }
.badges b { font-size: 10.5px; letter-spacing: -.01em; hyphens: auto; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; }
.badges .got span { background: radial-gradient(circle at 35% 30%, #fff3b0, var(--coin) 45%, var(--coin-deep)); color: #3b2600; box-shadow: 0 4px 14px #ffcc3355; filter: none; }
.badges .got b { color: var(--ink); }

.pass-note { position: absolute; z-index: 31; left: 50%; top: calc(58px + var(--safe-t)); max-width: calc(100% - 32px); translate: -50% -14px; padding: 10px 16px; border-radius: 99px; background: #0b0b0ff2; box-shadow: 0 0 0 1.5px #ffcc3366, 0 8px 24px #0008; font-size: 14px; font-weight: 700; color: #fff; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s var(--ease); }
.pass-note.on { opacity: 1; translate: -50% 0; }
.pass-note.big { background: linear-gradient(90deg, #ffcc33, #ff8a3d); color: #3b2600; box-shadow: 0 8px 24px #0008; }
.pass-note.badge::before { content: "🏅 "; }
.stage.playing .pass-note { top: auto; bottom: calc(76px + var(--safe-b)); font-size: 13px; padding: 8px 14px; }
.xp-float { position: absolute; z-index: 31; right: 64px; top: calc(14px + var(--safe-t)); font-size: 13px; font-weight: 800; color: var(--coin); text-shadow: 0 1px 6px #000; pointer-events: none; animation: xpf 1.3s ease-out forwards; }
.stage.playing .xp-float { display: none; }
@keyframes xpf { 0% { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
.lvup { position: absolute; z-index: 32; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; background: radial-gradient(circle at 50% 45%, #0b0b0f99, #0b0b0f00 70%); animation: lvfade 2.4s ease-in forwards; }
.lvup .ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--coin) 45%, var(--coin-deep)); box-shadow: 0 0 0 6px #ffffff33, 0 0 60px #ffcc33aa; animation: lvpop .6s cubic-bezier(.3,1.7,.5,1) both; }
.lvup .ring b { font-family: var(--display); font-weight: 400; font-size: 54px; color: #3b2600; }
.lvup strong { font-family: var(--display); font-weight: 400; font-size: 34px; color: #fff; text-shadow: 0 3px 0 #0006, 0 0 20px #ffcc33; }
.lvup span { font-size: 15px; font-weight: 700; color: var(--coin); }
.lvup i { position: absolute; left: 50%; top: 45%; width: 10px; height: 10px; border-radius: 2px; background: var(--coin); transform: rotate(var(--a)) translateY(0); animation: lvburst 1s var(--d) ease-out forwards; }
.lvup i:nth-child(3n) { background: var(--heart); } .lvup i:nth-child(3n+1) { background: #8be9ff; }
.stage.playing .lvup { transform: scale(.7); }
@keyframes lvpop { from { transform: scale(0) rotate(-30deg); } }
@keyframes lvburst { to { transform: rotate(var(--a)) translateY(-160px) rotate(200deg); opacity: 0; } }
@keyframes lvfade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* ───── 이용 가이드 · 사용성 ───── */
.slide .pchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.slide .pchips .mybest { margin: 0; }
.slide .mybest, .slide .mchip { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; }
.slide .mchip { background: #5ee08a; color: #0b2a14; }
.resume-pill { position: absolute; z-index: 7; left: 50%; top: calc(100px + var(--safe-t)); translate: -50% -12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 99px; background: #ffffffee; color: #0b0b0f; font-size: 14px; font-weight: 800; box-shadow: 0 8px 24px #0008; opacity: 0; transition: opacity .3s, translate .3s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-pill.on { opacity: 1; translate: -50% 0; }
.resume-pill span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--coin); font-size: 11px; }
.stage.playing .resume-pill { display: none; }
.help-btn { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: #ffffff14; font-weight: 800; font-size: 17px; }
.recent-row { grid-column: 1 / -1; display: grid; gap: 8px; margin-bottom: 4px; }
.recent-row h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.recent-row > div { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.recent-row > div::-webkit-scrollbar { display: none; }
.recent-row button { flex: none; width: 76px; display: grid; gap: 4px; text-align: center; }
.recent-row img, .recent-row .glyph { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: var(--plum-2); display: grid; place-items: center; font-family: var(--display); font-size: 30px; color: var(--coin); }
.recent-row span { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: #0b0818d9; backdrop-filter: blur(6px); animation: rise .3s var(--ease); touch-action: pan-y; }
.guide-card { position: relative; width: min(100%, 360px); display: grid; justify-items: center; gap: 8px; padding: 26px 22px 20px; border-radius: 26px; background: linear-gradient(180deg, #33295c, var(--plum-2)); box-shadow: 0 20px 60px #000a, inset 0 0 0 1px #ffffff14; text-align: center; }
.guide-card h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: 26px; }
.guide-card p { margin: 0; color: #e6defa; line-height: 1.55; font-size: 15px; }
.guide-card .gstep { font-size: 12px; font-weight: 800; color: var(--coin); letter-spacing: .08em; }
.guide-card .gkeys { font-size: 12px; color: var(--muted); padding: 6px 10px; border-radius: 10px; background: #00000033; }
.gskip { position: absolute; right: 14px; top: 12px; font-size: 13px; color: var(--muted); padding: 6px; }
.gart svg { width: 132px; height: 132px; fill: none; stroke-width: 3; }
.gart .ph { stroke: #ffffff55; fill: #120e24; }
.gart .sc { fill: #ffcc3333; stroke: #ffcc33aa; }
.gart .a1 { animation: gslide 1.6s var(--ease) infinite; }
.gart .a2 { animation: gslide 1.6s var(--ease) infinite; }
.gart .ar { stroke: var(--coin); stroke-linecap: round; stroke-linejoin: round; }
.gart .ar.up { animation: gup 1.4s ease-in-out infinite; }
.gart .coinc { fill: var(--coin); stroke: none; }
.gart .tri { fill: #3b2600; stroke: none; }
.gart .ring { stroke: var(--coin); animation: gring 1.4s ease-out infinite; transform-origin: 60px 58px; }
.gart .bar1 { fill: #fff; stroke: none; }
.gart .lens { stroke: var(--coin); fill: #0b0b0fcc; }
.gart .ringbg { stroke: #ffffff22; stroke-width: 8; }
.gart .ringfg { stroke: var(--coin); stroke-width: 8; stroke-dasharray: 214; stroke-dashoffset: 70; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 56px; animation: gfill 2s var(--ease) infinite; }
.gart .lvt { fill: var(--coin); stroke: none; font: 400 30px var(--display); text-anchor: middle; }
.gdots { display: flex; gap: 6px; margin: 6px 0 2px; }
.gdots i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff33; transition: width .2s; }
.gdots i.on { width: 20px; border-radius: 4px; background: var(--coin); }
.gnext { width: 100%; margin-top: 6px; padding: 15px; border-radius: 16px; background: var(--coin); color: var(--coin-ink); font-weight: 800; font-size: 17px; }
@keyframes gslide { 0% { transform: translateY(0); } 50%, 100% { transform: translateY(-46px); } }
@keyframes gup { 0%, 100% { transform: translateY(6px); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes gring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes gfill { from { stroke-dashoffset: 214; } to { stroke-dashoffset: 40; } }

/* ---------- 취향 추천 · 데이터 절약 · 미리보기 휴식 ---------- */
.slide .why { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 10px 4px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 22%, #0000); border: 1px solid color-mix(in srgb, var(--accent) 55%, #0000); font-size: 12.5px; font-weight: 700; color: #fff; }
.slide .why::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lite-label, .nap-pill { display: none; }
.stage.lite .slide.game:not(.loaded):not(.loading) .play-label { display: none; }
.stage.lite .slide.game:not(.loaded):not(.loading) .lite-label { display: block; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px #000a; }
.slide.napping .nap-pill { display: block; justify-self: center; margin-bottom: 4px; padding: 5px 12px; border-radius: 99px; background: #000a; border: 1px solid #ffffff2a; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; animation: napIn .3s var(--ease); }
.slide.napping .frame { filter: saturate(.55) brightness(.8); transition: filter .4s; }
@keyframes napIn { from { opacity: 0; transform: translateY(6px); } }
.lib-links .lite-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.lite-btn .sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #ffffff2a; transition: background .2s; }
.lite-btn .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.lite-btn[aria-pressed="true"] .sw { background: var(--coin); }
.lite-btn[aria-pressed="true"] .sw::after { transform: translateX(12px); background: var(--coin-ink); }
.me .taste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.me .taste li { display: grid; grid-template-columns: minmax(80px, 34%) 1fr; align-items: center; gap: 10px; font-size: 14px; }
.me .taste b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .taste i { display: block; height: 10px; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--coin-deep), var(--coin)); }
.me .taste-reset { margin-top: 10px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }

/* ---------- 보관함 · 연속 플레이 ---------- */
.rail { gap: 14px; }
.rail .saved .ico { color: var(--coin); background: #ffcc3326; animation: pop .3s; }
.rail .saved svg { fill: currentColor; }
.find.saved-btn { margin-left: auto; position: relative; }
.me-btn + .find.saved-btn, .saved-btn + .find { margin-left: 0; }
.saved-btn svg { width: 22px; height: 22px; }
.saved-btn.has::after { content: ""; position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--coin); box-shadow: 0 0 0 2px #0b0b0f; }
.dl-pill { display: none; }
.slide.downloading .dl-pill { display: block; justify-self: center; margin-bottom: 4px; padding: 5px 12px; border-radius: 99px; background: #000a; border: 1px solid #ffffff2a; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slide.downloading .coin { animation: dlpulse 1.1s ease-in-out infinite; }
@keyframes dlpulse { 50% { transform: scale(.94); filter: brightness(.9); } }
.card .st { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: #ffffff14; color: var(--muted); }
.card .st.ready { background: #3ddc8a26; color: #7ff0b4; }
.card .st.loading { background: #ffcc3322; color: var(--coin); }


/* ---------- 보관함 저장 공간 · 카드 도구 · 더 보기 ---------- */
.store-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: 14px; background: #ffffff0d; font-size: 13.5px; }
.store-row span { color: var(--muted); }
.store-row button { margin-left: auto; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.card-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.card-tools button { padding: 6px 10px; border-radius: 8px; background: #ffffff14; font-size: 12px; font-weight: 600; }
.card-tools button:active { background: #ffffff26; }
.grid-more { grid-column: 1 / -1; padding: 14px; border-radius: 12px; background: #ffffff0d; color: var(--muted); font-weight: 700; }

/* ---------- 게임 고유코드 ---------- */
.slide .gcode { margin: 8px 0 0; font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; color: #ffffff8c; }
.code-open { display: block; margin: 12px auto 0; padding: 12px 18px; border-radius: 12px; background: var(--coin); color: var(--coin-ink); font-weight: 700; }

/* 지갑·도감 */
.me .lib-head .wallet-chip { margin-left: auto; margin-right: 6px; padding: 6px 12px; border-radius: 99px; background: #ffffff14; font-weight: 800; font-size: 14px; color: var(--coin); cursor: pointer; white-space: nowrap; }
.pass-note.coin { background: linear-gradient(90deg, #ffcc33, #ff8a3d); color: #3b2600; }
.slide .mchip.newstamp { background: #ffffff1f; color: #fff; }
.album-help { margin: -4px 0 10px !important; font-size: 12.5px !important; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.stamp { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--plum-2); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.stamp img, .stamp .glyph { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-family: var(--display); font-size: 26px; }
.stamp .stars { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; font-style: normal; font-size: 11px; letter-spacing: 1px; text-align: center; color: var(--coin); background: linear-gradient(transparent, #000c); }
.stamp.unseen { box-shadow: inset 0 0 0 2px #ffffff14; }
.stamp.unseen img { filter: grayscale(1) brightness(.28) blur(1.5px); }
.stamp .q { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-size: 26px; color: #ffffff55; }
.album-more { display: block; width: 100%; margin-top: 10px; padding: 11px; border-radius: 14px; background: #ffffff10; font-weight: 800; font-size: 14px; color: var(--muted); }
.chests { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 0 16px 4px; }
.chests::-webkit-scrollbar { display: none; }
.chest { flex: none; width: 92px; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: var(--plum-2); }
.chest span { font-size: 28px; }
.chest b { font-size: 12px; }
.chest small { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.chest.ready { background: linear-gradient(160deg, #ffcc33, #ff8a3d); color: #3b2600; animation: chestbob 1.2s ease-in-out infinite; }
.chest.ready small { color: #3b2600; }
.chest.done { opacity: .5; }
@keyframes chestbob { 50% { transform: translateY(-3px); } }
.asets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aset { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: var(--plum-2); text-align: left; }
.aset b { font-size: 13.5px; }
.aset small { font-size: 12px; font-weight: 800; color: var(--muted); }
.aset.ready { box-shadow: inset 0 0 0 2px var(--coin); }
.aset.ready small { color: var(--coin); }
.aset.done { background: #2a5c3a; }

/* ───── 쇼츠처럼 간결하게 (2026-11 정리) ───── */
/* 미리보기 위·아래를 충분히 어둡게: 상단바·정보 글자가 게임 화면과 겹쳐도 읽힘 */
.veil { background: linear-gradient(to top, #000d 0%, #0008 26%, #0000 52%), linear-gradient(to bottom, #000b 0%, #0005 12%, #0000 22%); }
.top { padding-top: calc(10px + var(--safe-t)); }
.mark { font-size: 18px; }
.mark img { width: 24px; height: 24px; }
/* 가운데 재생 버튼은 작고 조용하게 */
.coin { width: 74px; height: 74px; }
.coin svg { width: 30px; height: 30px; margin-left: 4px; }
.play { top: 44%; gap: 8px; }
.play-label { font-size: 13px; font-weight: 600; opacity: .92; }
/* 아래 정보: 이름 → 한두 줄 소개 → 한 줄 메타 */
.info { padding: 0 84px calc(22px + var(--safe-b)) 16px; }
.slide .kick { margin: 0 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.slide .kick .hot-badge { position: static; display: inline-block; }
.slide .kick .why { margin: 0; }
.title { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tagline { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #ffffffd0; max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slide .meta { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 12.5px; }
.slide .meta > span { flex: none; }
.slide .meta .tg { padding: 3px 9px; border-radius: 99px; background: #ffffff1c; color: #ffffffe0; font-weight: 600; max-width: 9em; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.slide .meta .gcode { margin: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.scale { padding: 3px 9px; border-radius: 99px; font-weight: 800; letter-spacing: .01em; }
.scale.quick { background: #ffffff14; color: #ffffffcc; box-shadow: inset 0 0 0 1px #ffffff26; }
.scale.epic { background: linear-gradient(90deg, #ffcc33, #ff8a3d); color: #3b2600; box-shadow: 0 2px 10px #ff8a3d55; }
.slide .pchips { margin-top: 8px; }
/* 오른쪽 버튼: 아이콘 위주, 이름표는 한 줄 */
.rail { gap: 16px; right: 8px; bottom: calc(24px + var(--safe-b)); }
.rail button { min-width: 0; width: 64px; font-size: 11px; line-height: 1.2; }
.rail button > :not(.ico) { display: block; }
.rail button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .ico { width: 44px; height: 44px; }
@media (pointer: coarse) { .rail [data-act="next"] { display: none; } }
/* 대작 칸: 금빛 테두리로 살짝 구분 */
.slide.epic .veil { box-shadow: inset 0 0 0 2px #ffcc3333; }
.rail button { width: 72px; font-size: 10.5px; letter-spacing: -.01em; }
/* 로고는 처음 몇 초만 — 그다음은 아이콘만 남아 게임 화면을 가리지 않음 (쇼츠처럼) */
.mark { animation: markfade .6s ease 4.5s forwards; }
@keyframes markfade { to { opacity: 0; transform: translateY(-6px); } }
.thumb { position: relative; }
.thumb .epic-mark { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 99px; background: linear-gradient(90deg, #ffcc33, #ff8a3d); color: #3b2600; font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px #0006; }

/* ---------- 게임 찾기: 한눈에 많이 (타일 3열 · 목록) + 이어하기 · 취향 저격 줄 ---------- */
.lib-head { padding-bottom: 4px; }
.lib-head h1 { font-size: 21px; }
.search { height: 40px; border-radius: 12px; }
.chips { padding-top: 8px !important; padding-bottom: 2px !important; }
.sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px 0 2px; flex: none; }
.sort-bar .sorts { padding-top: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.views { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--plum-2); flex: none; }
.views button { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.views button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.views button[aria-pressed="true"] { background: #ffffff1f; color: var(--ink); }
.grid { padding-top: 10px; }
.grid-title, .rail-row h4 { grid-column: 1 / -1; margin: 2px 0 -2px; font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.1px; }
.card .meta-line { display: none; }

/* 타일: 3열, 표지 + 이름 한 줄 */
.grid.v-tile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.v-tile .card { gap: 5px; }
.v-tile .card .thumb { border-radius: 14px; }
.v-tile .card h3 { font-size: 12.5px; font-weight: 700; }
.v-tile .card p, .v-tile .card .st { display: none; }
.v-tile .card .heart { right: 5px; top: 5px; width: 26px; height: 26px; }
.v-tile .card .heart svg { width: 14px; height: 14px; }
.v-tile .card .heart[aria-pressed="false"] { opacity: 0; }
.v-tile .card:hover .heart, .v-tile .card:focus-within .heart { opacity: 1; }
.v-tile .card .new, .v-tile .card .badge2 { font-size: 9.5px; padding: 2px 5px; left: 5px; }
.v-tile .card .new { top: 5px; }
.v-tile .card .badge2 { bottom: 5px; }
.v-tile .epic-mark { font-size: 9.5px !important; padding: 2px 5px !important; }
@media (min-width: 520px) { .grid.v-tile { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .grid.v-tile { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 목록: 작은 표지 + 이름 · 소개 한 줄 · 정보 */
.grid.v-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.v-list .card { grid-template-columns: 64px minmax(0, 1fr) 36px; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 6px 0; border-bottom: 1px solid #ffffff0d; }
.v-list .card .thumb { grid-row: 1 / 4; grid-column: 1; width: 64px; border-radius: 14px; }
.v-list .card .thumb .new, .v-list .card .thumb .badge2, .v-list .card .thumb .epic-mark { display: none; }
.v-list .card h3 { grid-column: 2; font-size: 15px; align-self: end; }
.v-list .card p { grid-column: 2; -webkit-line-clamp: 1; font-size: 12.5px; }
.v-list .card .meta-line { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; align-self: start; }
.v-list .card .meta-line i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #ffffff12; color: var(--muted); }
.v-list .card .meta-line i.ep { background: #ffcc3322; color: var(--coin); }
.v-list .card .heart { position: static; grid-column: 3; grid-row: 1 / 4; background: none; color: var(--muted); }
.v-list .card .st, .v-list .card .card-tools { grid-column: 2 / 4; }

/* 가로 줄 (이어하기 · 취향 저격) */
.rail-row { grid-column: 1 / -1; display: grid; gap: 8px; }
.rail-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-snap-type: x proximity; }
.rail-scroll::-webkit-scrollbar { display: none; }
.rc { flex: none; width: 112px; display: grid; gap: 4px; text-align: left; scroll-snap-align: start; }
.rc-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: radial-gradient(100% 100% at 50% 30%, color-mix(in srgb, var(--accent) 45%, var(--plum-2)), var(--plum-2)); }
.rc-img img { width: 100%; height: 100%; object-fit: cover; }
.rc-img .glyph { font-family: var(--display); font-size: 36px; color: var(--accent); }
.rc b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc small { font-size: 11px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail-row.cont .rc { width: 150px; }
.rail-row.cont .rc-img { aspect-ratio: 4 / 3; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, #0000); }
.rail-row.cont .rc small { color: var(--coin); font-weight: 700; }
.rc-play { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--coin); color: var(--coin-ink); font-size: 13px; box-shadow: 0 4px 12px #0006; }
.rc:active .rc-img { transform: scale(.97); }

/* 아래 버튼 줄은 얇게 */
.lib-foot { gap: 6px; padding: 8px 16px calc(8px + var(--safe-b)); }
.primary-btn { padding: 12px; font-size: 15px; }

/* 피드 슬라이드: 이어하기 */
.slide.cont .why { background: var(--coin); border-color: var(--coin); color: var(--coin-ink); }
.slide.cont .why::before { display: none; }

/* 내 기록: 플레이 성향 */
.me .style-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; }
.me .style-chips b { color: var(--muted); font-weight: 700; margin-right: 2px; }
.me .style-chips span { padding: 5px 10px; border-radius: 99px; background: linear-gradient(90deg, #7b5cff33, #ff2bd633); font-weight: 800; }


/* ---------- 고급스럽게: 글자 · 로고 · 금색 자리 ---------- */
.title, .lib-head h1, .sheet h2, .empty strong, .adcard h2, .me-btn b, .lvcard .ring b, .card .thumb .glyph, .cover .glyph { font-weight: 800 !important; letter-spacing: -.025em; }
.title { font-size: clamp(28px, 8.4vw, 38px); }
.lib-head h1 { font-size: 20px; }
h2, h3, h4, b, strong { letter-spacing: -.01em; }
.mark { font-weight: 800; font-size: 19px; letter-spacing: -.03em; text-shadow: none; }
.mark b { font-weight: 800; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark img { border-radius: 8px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: #8b5cff; }
/* 칩·검색·카드: 가는 테두리 */
.chip { background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff12; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--plum); box-shadow: none; }
.search { background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff14; }
.search:focus-within { box-shadow: inset 0 0 0 1.5px #8b5cff; }
.sorts button[aria-pressed="true"] { border-color: var(--ink); }
.primary-btn, .gnext, .sheet-actions button.primary, .code-open { background: var(--ink); color: var(--plum); font-weight: 700; letter-spacing: -.01em; }
.lib-foot { background: linear-gradient(to top, var(--plum) 75%, #0b0b0f00); border-top-color: #ffffff0f; }
/* 금색은 코인·별·기록에만 */
.me .lib-head .wallet-chip, .missions em, .missions li.bonus b, .pick em, .recent small, .xp-float, .lvup span, .aset.ready small, .rail-row.cont .rc small, .stamp .stars, .lvcard .ring b, .sheet-kicker, .guide-card .gstep { color: var(--gold); }
.lvup i, .gdots i.on, .resume-pill span, .saved-btn.has::after, .lite-btn[aria-pressed="true"] .sw { background: var(--gold); }
.chest.ready { background: linear-gradient(160deg, #f3d488, #c9973e); color: #2a1d05; }
.aset.ready { box-shadow: inset 0 0 0 1.5px var(--gold); }
.card .new, .slide .hot-badge.fresh, .adcard .badge { background: var(--ink); color: var(--plum); }
.v-list .card .meta-line i.ep { background: #ecc66b1f; color: var(--gold); }
.rc-play { background: var(--ink); color: var(--plum); }
.coach svg { color: var(--ink); }
.dock-btn.on { color: var(--gold); }
.filter-pill { background: var(--ink); color: var(--plum); }
.slide.cont .why { background: var(--ink); border-color: var(--ink); color: var(--plum); }
.rail .saved .ico { color: var(--gold); background: #ecc66b26; }
.card .st.loading { background: #ecc66b22; color: var(--gold); }
/* 표지 칸: 부드러운 그림자, 덜 둥글게 */
.card .thumb, .rc-img, .stamp { box-shadow: 0 1px 0 #ffffff0f inset, 0 6px 18px #0006; }
.lvcard, .missions li, .pick, .chest, .aset { background: #ffffff08 !important; box-shadow: inset 0 0 0 1px #ffffff0f; }
.me .style-chips span { background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff1a; }

/* ---------- 오늘의 도전 카드 · 도전장 ---------- */
.dc-row { grid-column: 1 / -1; }
.dc { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 22px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, #17171d), #121217); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, #ffffff10), 0 14px 40px #0007; margin-bottom: 14px; }
.dc-cover { position: relative; align-self: start; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #ffffff10; }
.dc-cover img { width: 100%; height: 100%; object-fit: cover; }
.dc-play { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--plum); font-size: 12px; }
.dc-body { min-width: 0; display: grid; gap: 3px; align-content: start; }
.dc-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.dc-streak { text-transform: none; letter-spacing: 0; padding: 2px 8px; border-radius: 99px; background: #ff7a3d26; color: #ffb08a; }
.dc-body > b { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-body > small { font-size: 12px; color: var(--muted); }
.dc ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.dc li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.dc li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: #ffffff14; color: var(--muted); }
.dc li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc li em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--gold); }
.dc li.ok i { background: var(--gold); color: #2a1d05; }
.dc li.ok span { color: var(--muted); text-decoration: line-through; text-decoration-color: #ffffff40; }
.dc-go { margin-top: 10px; justify-self: start; padding: 9px 16px; border-radius: 99px; background: var(--ink); color: var(--plum); font-weight: 800; font-size: 13.5px; }
.dc-done { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.dc.compact { grid-template-columns: 96px minmax(0, 1fr); padding: 12px; gap: 12px; }
.dc.compact ol { gap: 3px; margin-top: 6px; }
.dc.compact li { font-size: 12.5px; }
.me .dc { margin: 6px 0 4px; }
.dare-pill { position: absolute; z-index: 30; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 8px; padding: 11px 18px 11px 12px; border-radius: 99px; background: var(--ink); color: var(--plum); font-weight: 800; font-size: 14px; box-shadow: 0 12px 30px #0009; white-space: nowrap; transition: transform .3s var(--ease), opacity .3s; }
.dare-pill.on { transform: translate(-50%, 0); opacity: 1; }
.dare-pill span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 13px; }
.dare-pill.win { background: var(--gold); color: #2a1d05; }
.slide .mchip.dare { background: linear-gradient(90deg, #ff5a8a, #8b5cff); color: #fff; }
.slide .mchip.dcchip { background: #ecc66b26; color: var(--gold); box-shadow: inset 0 0 0 1px #ecc66b55; }
/* 알림 띠: 어두운 유리 + 금색 글자 (노란 덩어리 대신) */
.pass-note { white-space: nowrap; width: max-content; background: #15151bf2 !important; color: var(--ink) !important; box-shadow: 0 0 0 1px #ffffff1f, 0 10px 30px #000a !important; font-weight: 700; backdrop-filter: blur(10px); }
.pass-note.coin, .pass-note.big { color: var(--gold) !important; box-shadow: 0 0 0 1px #ecc66b55, 0 10px 30px #000a !important; }
.dare-pill { z-index: 12; }
.stage.playing .dare-pill { bottom: calc(132px + var(--safe-b)); }
.dc-shield { justify-self: start; margin-top: 8px; padding: 6px 11px; border-radius: 99px; background: #ffffff0f; box-shadow: inset 0 0 0 1px #ffffff1a; font-size: 12px; font-weight: 700; color: var(--ink); }
.dc-shield.full { color: var(--gold); box-shadow: inset 0 0 0 1px #ecc66b55; }
.dc-shield + .dc-go, .dc-shield + .dc-done { margin-top: 8px; }
.dc-rank { color: var(--brand-1) !important; font-weight: 700; }


/* ---------- QTapPlay 브랜드 ---------- */
/* 라임 하나로 "빠름"을, 나머지는 검정·흰색으로 차분하게. 금색은 코인·별에만. */
:root { --brand-1: #d4ff3a; --brand-2: #5cf2ff; --brand: linear-gradient(100deg, #d4ff3a, #8cff7a 55%, #5cf2ff); --accent: #d4ff3a; --cta: #d4ff3a; --cta-ink: #0b0b0f; }
.mark { gap: 8px; font-family: var(--text); }
.mark img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px #ffffff14, 0 4px 14px #0008; }
.mark .wm { display: inline-flex; align-items: baseline; gap: 0; line-height: 1; font-weight: 900; font-size: 20px; letter-spacing: -.045em; color: #fff; }
.mark .wm b { font-weight: 900; font-size: 21px; letter-spacing: -.02em; margin-right: 1px; color: var(--brand-1); background: none; -webkit-text-fill-color: var(--brand-1); }
/* 주요 버튼 = 라임 (탭하고 싶게) */
.primary-btn, .gnext, .sheet-actions button.primary, .code-open, .dc-go { background: var(--cta); color: var(--cta-ink); box-shadow: 0 6px 24px #d4ff3a33; }
.primary-btn:active, .gnext:active, .dc-go:active { transform: scale(.97); }
.slide .play .coin { background: var(--cta) !important; color: var(--cta-ink) !important; box-shadow: 0 0 0 10px #d4ff3a1f, 0 10px 40px #d4ff3a55 !important; }
.slide .play .coin svg { fill: var(--cta-ink); stroke: none; }
.chip[aria-pressed="true"] { background: var(--brand-1); color: var(--cta-ink); }
.sorts button[aria-pressed="true"] { border-color: var(--brand-1); }
.views button[aria-pressed="true"] { color: var(--brand-1); }
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand-1); }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--brand-1); }
.slide.cont .why { background: var(--brand-1); border-color: var(--brand-1); color: var(--cta-ink); }
.rc-play, .dc-play { background: var(--brand-1); color: var(--cta-ink); }
.dare-pill span { background: var(--brand); color: var(--cta-ink); }
.slide .mchip.dare { background: var(--brand); color: var(--cta-ink); }
.me-btn .arc { stroke: var(--brand-1) !important; }
.lvcard .ring { background: conic-gradient(var(--brand-1) calc(var(--f) * 1turn), #ffffff14 0) !important; }
.coach svg { color: var(--brand-1); }
/* 탭 반응: 누르면 살짝 눌림 */
.chip:active, .rc:active, .card .thumb:active, .views button:active, .sorts button:active { transform: scale(.96); }
/* 플레이 버튼: "탭탭" 두 번 퍼지는 고리 */
.slide .play .coin { position: relative; }
.slide .play .coin::before, .slide .play .coin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--brand-1); opacity: 0; animation: taptap 2.4s cubic-bezier(.2, .7, .3, 1) infinite; pointer-events: none; }
.slide .play .coin::after { animation-delay: .22s; }
@keyframes taptap { 0% { transform: scale(1); opacity: .9; } 30% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .slide .play .coin::before, .slide .play .coin::after { animation: none; } }

/* QTapPlay — 한 화면에 라임 버튼 하나: 선택된 칩은 흰색, 게임 찾기의 도전 카드 버튼은 흰색(아래 '전체 게임 넘기기'가 주 버튼) */
.chip[aria-pressed="true"] { background: var(--ink); color: #0b0b0f; }
.lib .dc-go { background: var(--ink); color: #0b0b0f; box-shadow: none; }
/* 첫 방문 안내 — 보라 대신 검정 유리판 + 라임 포인트 */
.guide { background: #050507d9; }
.guide-card { background: linear-gradient(180deg, #1a1d14, #111114 70%); box-shadow: 0 24px 70px #000c, inset 0 0 0 1px #d4ff3a22; }
.guide-card p { color: #d8d8de; }
.guide-card .gstep { color: var(--brand-1); }
.gdots i.on { background: var(--brand-1); }
/* 로고 뒤 게임 글자와 겹쳐 보이지 않게 위쪽에 옅은 그늘 */
.top::before { content: ""; position: absolute; inset: 0 0 -18px; z-index: -1; pointer-events: none; background: linear-gradient(#0b0b0fe6, #0b0b0f99 60%, #0b0b0f00); animation: markfade .6s ease 4.5s forwards; }

/* 게임 칸 전체가 눌림 */
.grid .card[data-card] { cursor: pointer; }
.grid .card[data-card] h3, .grid .card[data-card] p, .grid .card[data-card] .meta-line { -webkit-user-select: none; user-select: none; }