/* 사이트 전체 공통 스타일 — 허브/게임 페이지가 함께 쓰는 테마 */
/* 게임 화면용 디스플레이 폰트 — 여기어때 잘난체(자체 호스팅, CDN 비의존). 한글 전체음절 서브셋 */
@font-face {
  font-family: 'YeogiOttaeJalnan';   /* 기존 2048/beat/astrorush와 동일 패밀리명 — CDN 대신 자체 호스팅으로 통일 */
  src: url('/assets/fonts/jalnan.woff2') format('woff2');
  font-weight: 100 900;   /* 단일 두께 폰트 — 모든 굵기를 이 페이스로(가짜 볼드 방지) */
  font-style: normal;
  font-display: swap;
}
/* 가독용 폰트 — 조선굴림(자체 호스팅, CDN 비의존). 한자 제외·한글 전체음절 서브셋 woff2. 입력창·순위표 데이터 행 등 작은 글씨에 사용 */
@font-face {
  font-family: 'JoseonGulim';
  src: url('/assets/fonts/chosungu.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-game: 'YeogiOttaeJalnan', system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --font-read: 'JoseonGulim', system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --bg: #0f1226;
  --bg-soft: #181c3a;
  --card: #1e2350;
  --accent: #5b7cfa;
  --accent-2: #f5a623;
  --text: #eef1ff;
  --text-dim: #a4abd6;
  --radius: 16px;
  --maxw: 960px;
  font-family: var(--font-game);   /* 사이트 기본 폰트 = 잘난체(폴백 system) */
}

* { box-sizing: border-box; }

/* 드래그로 텍스트 선택·iOS 롱프레스 콜아웃(번역/복사 팝업) 방지 — 게임 조작 중 오작동 차단.
   본문 텍스트(.content/.modal)와 입력창은 예외로 선택 허용. */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.content, .content *, .modal, .modal *, input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img { -webkit-user-drag: none; user-drag: none; }

html, body {
  margin: 0;
  padding: 0;
  /* 단색 배경을 먼저 깔아야 홈화면(standalone) 하단 세이프에어리어가 흰색으로 비지 않음 */
  background-color: var(--bg);
  background-image: radial-gradient(1200px 600px at 50% -10%, #23285a 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100%;
  /* 모바일 확대/축소(더블탭·핀치) 억제 — 비율 유지 */
  touch-action: manipulation;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 64px; }

/* 상단 바 */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; padding: 12px max(16px, calc((100% - var(--maxw)) / 2));
  background: rgba(15, 18, 38, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--text); }
.brand .logo {
  width: 32px; height: 32px; display: block; object-fit: contain;
}
.nav { display: flex; align-items: center; gap: 12px; }
.nav a { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.nav a:hover { color: var(--text); text-decoration: none; }
.lang-btn {
  margin-left: 16px; background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  font-size: 13px; font-weight: 700; padding: 6px 14px; cursor: pointer;
}
.lang-btn:hover { background: rgba(255,255,255,.12); }

/* 언어 선택(국기) 드롭다운 */
.lang-btn.lang-pick { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; }
.lang-flag { width: 20px; height: 14px; border-radius: 3px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.lang-caret { font-size: 9px; color: var(--text-dim); line-height: 1; }
.lang-menu { position: fixed; z-index: 95; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.55); min-width: 152px; }
.lang-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: var(--text);
  font-size: 14px; font-weight: 600; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.lang-item:hover { background: rgba(255,255,255,.07); }
.lang-item.active { background: rgba(91,124,250,.18); color: var(--accent-2); }
.lang-item .lang-flag { width: 24px; height: 16px; }
/* 모바일: 화면 가운데 언어 선택 모달 */
.lang-back { position: fixed; inset: 0; z-index: 110; background: rgba(6,8,20,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.lang-modal { width: 100%; max-width: 320px; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55); animation: langModalIn .18s ease; }
@keyframes langModalIn { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
.lang-modal-title { font-weight: 800; font-size: 15px; text-align: center; color: var(--text); margin: 4px 0 12px; }
.lang-menu.in-modal { position: static; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
.lang-menu.in-modal .lang-item { padding: 13px 12px; font-size: 15px; }

/* 메인 상단 공유 버튼(아이콘 CTA) + 첫 방문 안내 말풍선 */
.share-hdr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  background: linear-gradient(135deg, var(--accent), #7a92ff); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(91,124,250,.4); }
.share-hdr:hover { filter: brightness(1.07); }
.share-hdr svg { width: 17px; height: 17px; display: block; }
.share-hint { position: fixed; z-index: 80; max-width: 230px; background: #fff; color: #16192e; font-size: 13px; font-weight: 700;
  line-height: 1.35; padding: 10px 13px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.share-hint.show { opacity: 1; transform: translateY(0); }
.share-hint::after { content: ""; position: absolute; top: -7px; right: 12px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid #fff; }

/* 히어로 */
.hero { text-align: center; padding: 28px 8px 8px; }
.hero h1 { font-size: clamp(28px, 6vw, 44px); margin: 0 0 10px; letter-spacing: -.02em; }
.hero p { color: var(--text-dim); font-size: clamp(15px, 3.5vw, 18px); margin: 0 auto; max-width: 560px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px auto 0; max-width: 560px; }
.hero-chips .hchip { font-size: 13px; font-weight: 700; color: var(--text); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
/* 브랜드 옆 '미니게임' 태그 — 사이트 정체성 각인 */
.brand-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent-2);
  background: rgba(91,124,250,.16); border: 1px solid rgba(91,124,250,.4); border-radius: 999px; padding: 2px 9px; }
@media (max-width: 600px) { .hero-chips .hchip { font-size: 11px; padding: 5px 10px; } .brand-tag { font-size: 10px; padding: 2px 7px; } }

/* 게임 카드 그리드 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 28px; }
.card {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.35); text-decoration: none; }
.card .thumb { position: relative; aspect-ratio: 16/10; display: grid; place-items: center; font-size: 54px; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card .thumb > img[data-default-src]{
	opacity:0;
	transition:opacity .18s ease;
}
.card .thumb > img[data-default-src].is-ready{
	opacity:1;
}
.card .thumb::after{
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:30px;
	margin:-18px 0 0 -18px;
	border:3px solid rgba(255,255,255,.18);
	border-top-color:var(--accent);
	border-radius:50%;
	content:"";
	opacity:1;
	pointer-events:none;
	animation:thumb-loading-spin .72s linear infinite;
}
.card .thumb:not(.is-loading)::after{
	display:none;
}
@keyframes thumb-loading-spin{
	to{
		transform:rotate(360deg);
	}
}
.card .body { padding: 14px 16px 18px; }
.card h3 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.card p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5;
  height: calc(1.5em * 3); overflow-y: auto; scrollbar-width: thin; }
.card p::-webkit-scrollbar { width: 4px; }
.card p::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 999px; padding: 2px 8px; margin-top: 10px; }
/* 게임 카드 이미지 좌하단 개선 상태 배지 */
.status-badge { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(0,0,0,.4); backdrop-filter: blur(2px); }
.status-badge.improving { background: linear-gradient(135deg, #ffc061, #f5a623); color: #3a2600; }
.status-badge.planned { background: rgba(18,22,40,.82); color: #cfe0ff; border: 1px solid rgba(150,180,255,.45); }
.status-badge.dev { background: linear-gradient(135deg, #ff6b9d, #c23a6b); color: #fff; }

/* 썸네일 좌상단: 게임 아이콘 배지(둥근 반투명 원) */
.thumb .game-ic { position: absolute; top: 6px; left: 6px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,.5); font-size: 18px; line-height: 1; z-index: 2; pointer-events: none;
  color: #fff; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.thumb .game-ic svg { width: 21px; height: 21px; display: block; }
.thumb .game-ic .tapzy-game-icon-img { width: 22px; height: 22px; opacity: 1; }
/* 순위표 게임 아이콘(SVG) — 이모지 자리와 동일 크기 */
.gic { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; }
.gic svg { width: 18px; height: 18px; display: block; }
.gic .tapzy-game-icon-img { width: 18px; height: 18px; }
.hub-lb .ce .gic svg { width: 22px; height: 22px; }
.hub-lb .ce .gic .tapzy-game-icon-img { width: 22px; height: 22px; }
.tapzy-game-icon-img { object-fit: contain; display: block; }
/* 좁은 화면(폴더블 커버 등)에서 게임오버 이름 입력칸이 기본 최소너비(~180px)로 패널을 밀어내
   가로 스크롤을 만들던 문제 → 입력칸이 화면 폭에 맞춰 줄어들도록 허용(전 게임 공통) */
.name-row input { min-width: 0; }
/* .overlay는 grid+place-items:center라 자동 컬럼이 패널 max-content(입력칸 자연폭)로 커져
   좁은 화면에서 뷰포트를 넘겨 가로 스크롤이 생겼다 → 컬럼을 minmax(0,1fr)로 고정해 폭에 맞춤(전 게임 공통) */
.overlay { grid-template-columns: minmax(0, 1fr); }
/* PC 게임 시작·게임오버 오버레이(및 방법 모달) 스크롤바 — 기본 두꺼운 시스템 스크롤바 대신 얇고 은은한 알약형(전 게임 공통) */
.overlay, .modal { scrollbar-width: thin; scrollbar-color: rgba(148,163,255,.35) transparent; }
.overlay::-webkit-scrollbar, .modal::-webkit-scrollbar { width: 10px; }
.overlay::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.overlay::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb {
  background: rgba(148,163,255,.32); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;   /* 트랙 여백을 둔 슬림한 알약 모양 */
}
.overlay::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover { background: rgba(148,163,255,.55); background-clip: padding-box; }
/* 썸네일 우상단: 즐겨찾기 별 버튼 */
.fav-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85);
  font-size: 16px; line-height: 1; cursor: pointer; z-index: 3;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fav-btn.on { color: #ffd54a; border-color: rgba(255,213,74,.5); }

/* 콘텐츠 페이지 */
.content { background: var(--bg-soft); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 24px; margin-top: 20px; }
.content h1 { margin-top: 0; }
.content h2 { color: var(--text); margin-top: 28px; }
.content p, .content li { color: var(--text-dim); line-height: 1.7; }
.content .howto-shot, .modal.doc .howto-shot { display: block; max-width: 100%; max-height: 340px; width: auto; margin: 14px auto 6px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4); background: #0c1027; }
.content .howto-cap, .modal.doc .howto-cap { text-align: center; font-size: 12px; color: var(--text-dim); margin: 0 0 6px; }
.dico { height: 1.5em; width: auto; vertical-align: -0.42em; margin: 0 1px; }   /* 게임 설명 속 실제 개체 이미지 아이콘 */

/* 광고 슬롯 자리 — 애드센스 승인 후 이 안의 placeholder를 광고 코드로 교체 */
.ad-slot {
  margin: 22px auto; max-width: 728px; min-height: 90px;
  display: grid; place-items: center;
  border: 1px dashed rgba(255,255,255,.15); border-radius: 12px;
  color: var(--text-dim); font-size: 12px; letter-spacing: .08em;
}
/* 게임오버 오버레이 안의 광고는 가로 배너 높이로 컴팩트하게(너무 높지 않게) */
.overlay .ad-slot { min-height: 50px; margin: 14px auto; }

/* 푸터 */
.site-footer { text-align: center; color: var(--text-dim); font-size: 13px; padding: 30px 16px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px; }
.site-footer a { color: var(--text-dim); margin: 0 8px; }

.btn {
  display: inline-block; background: linear-gradient(135deg, var(--accent), #7a92ff);
  color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 12px; margin-top: 18px;
  box-shadow: 0 6px 18px rgba(91,124,250,.45);
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }

/* ===== 계정바 + 프리미엄(광고 제거) ===== */
.account-bar { display: flex; align-items: center; gap: 8px; }
.account-bar .acc-email { color: var(--text-dim); font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-btn { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 13px; font-weight: 700; padding: 9px 18px; line-height: 1.1; cursor: pointer; }
.acc-btn:hover { background: rgba(255,255,255,.12); }
a.acc-btn { text-decoration: none; display: inline-flex; align-items: center; }
.acc-btn.primary { background: linear-gradient(135deg, var(--accent), #7a92ff); border-color: transparent; }
.acc-badge { color: #62d69a; font-size: 12px; font-weight: 700; }

/* ---- 계정: 프로필 칩 + 드롭다운 ---- */
.account-bar { position: relative; }
.acc-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-size: cover; background-position: center; background-color: #3a4170; color: #fff; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.acc-avatar.noimg { background-color: #5b7cfa; }
.acc-avatar.big { width: 72px; height: 72px; font-size: 30px; }
.acc-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 13px 5px 5px; cursor: pointer; color: var(--text); max-width: 190px; }
.acc-chip:hover { background: rgba(255,255,255,.12); }
.acc-nick { font-size: 13px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-chip .acc-dot { color: #62d69a; font-size: 8px; }
.acc-chip .acc-caret { color: var(--text-dim); font-size: 11px; }
.acc-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 190px; background: var(--card); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; }
.acc-mi { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; }
.acc-mi:hover { background: rgba(255,255,255,.08); }
.acc-mi.head { color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 6px 12px 8px; cursor: default; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-mi.head:hover { background: transparent; }
.acc-mi.danger { color: #ff8a8a; }
/* 모바일: 계정 메뉴를 화면 가운데 모달로(언어선택과 동일) */
.acc-menu-back { position: fixed; inset: 0; z-index: 110; background: rgba(6,8,20,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.acc-menu.as-modal { position: static; width: 100%; max-width: 300px; min-width: 0; padding: 8px; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55); animation: langModalIn .18s ease; }
.acc-menu.as-modal .acc-mi { padding: 14px 14px; font-size: 15px; }
.acc-menu.as-modal .acc-mi.head { padding: 8px 14px 10px; font-size: 13px; }

/* ---- 계정: 로그인/회원가입·프로필 모달 ---- */
.acc-modal .modal { max-width: 360px; }
.acc-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.acc-auth .acc-tabs { margin-top: 20px; }   /* 우측 상단 X 버튼과 겹치지 않게 탭을 아래로 */
.acc-tab { flex: 1; background: rgba(255,255,255,.06); color: var(--text-dim); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 9px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.acc-tab.on { background: var(--accent); color: #fff; border-color: transparent; }
.acc-form { display: flex; flex-direction: column; gap: 9px; }
.acc-form.hidden { display: none; }
.acc-in { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--text); border-radius: 11px; padding: 12px 13px; font-size: 15px; }
.acc-in:focus { outline: none; border-color: var(--accent); }
.acc-err { color: #ff8a8a; font-size: 13px; min-height: 16px; }
/* 로그인/회원가입/저장 주버튼 — .play-btn(게임 페이지 전용) 의존 제거, 어디서나 동일한 높이·모양 */
.acc-submit { margin-top: 4px; width: 100%; height: 46px; background: linear-gradient(135deg, var(--accent), #7a92ff); color: #fff; border: 0; border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; }
.acc-submit:hover { filter: brightness(1.06); }
.acc-submit:active { transform: translateY(1px); }
.acc-submit:disabled { opacity: .55; cursor: default; }
.acc-or { display: flex; align-items: center; text-align: center; color: var(--text-dim); font-size: 12px; margin: 14px 0 10px; }
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.acc-or span { padding: 0 10px; }
#acc-gsi, .gsi-holder { display: flex; justify-content: center; }
.acc-profile h3 { margin: 0 0 14px; }
.acc-av-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.acc-av-btns { display: flex; flex-direction: column; gap: 6px; }
.acc-mini { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.acc-mini.ghost { background: transparent; color: var(--text-dim); }
.acc-lbl { display: block; font-size: 12px; color: var(--text-dim); margin: 10px 0 5px; font-weight: 600; }
.acc-pwd { margin-top: 12px; }
.acc-pwd summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 700; padding: 6px 0; }
.acc-pwd .acc-in { margin-top: 8px; }

/* 순위표 프로필 아바타(닉네임 앞) */
.lb-av { display: inline-block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 5px; background: #3a4170 center/cover; }
/* 프로필 이미지 없을 때 기본 유저 아이콘 */
.lb-av-default { overflow: hidden; color: #c7cef2; }
.lb-av-default svg { width: 100%; height: 100%; display: block; }

/* 프리미엄이면 모든 광고 숨김 (계정 단위 광고 제거) */
/* 게임 중 하단 광고 배너 (모바일 포함 · 유료 결제 시 숨김) — play-area 아래 flow에 놓여 캔버스가 그만큼 줄어듦(컨트롤과 안 겹침) */
.ad-bottom {
  flex: 0 0 auto; width: calc(100% - 24px); max-width: 728px; height: 56px;
  margin: 2px auto 8px; display: grid; place-items: center;
  border: 1px dashed rgba(255,255,255,.15); border-radius: 10px;
  background: rgba(255,255,255,.02); color: var(--text-dim);
  font-size: 12px; letter-spacing: .08em;
}
@media (min-width: 1001px) { .ad-bottom { height: 90px; } }
/* 모바일 게임 화면에선 하단 광고 숨김 — 드래그 조작 중 오터치 방지(게임오버 광고는 유지) */
@media (max-width: 700px) { .game-shell .ad-bottom { display: none; } }

/* 게임오버 창의 인라인 광고 숨김 — 버튼(한판더·공유·다른 게임)이 스크롤 없이 보이도록. 광고는 주기적 전면광고(adBreak)로 표시 */
#overOverlay .ad-slot { display: none; }

/* 몰입 모드(모바일): 플레이 중엔 상단바를 숨기고 뒤로/일시정지만 캔버스 위에 띄워 세로 공간 확보 */
/* 게임 에셋 프리로드 오버레이('게임 준비중') — 탭비트 곡 로딩과 동일한 이퀄라이저+shimmer 룩(gameready.js가 사용) */
.game-ready { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #0a0d20; transition: opacity .32s ease; }
.game-ready.hide { opacity: 0; pointer-events: none; }
.game-ready .gr-box { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.game-ready .gr-eq { display: flex; gap: 7px; height: 60px; align-items: center; }
.game-ready .gr-eq i { width: 10px; height: 16px; border-radius: 6px; background: linear-gradient(180deg, #9fb8ff, #5b7cfa); animation: grEq .85s ease-in-out infinite; }
.game-ready .gr-eq i:nth-child(2) { animation-delay: -.15s; background: linear-gradient(180deg,#ffd17a,#f5a623); }
.game-ready .gr-eq i:nth-child(3) { animation-delay: -.3s; background: linear-gradient(180deg,#8fe6b8,#42d392); }
.game-ready .gr-eq i:nth-child(4) { animation-delay: -.45s; background: linear-gradient(180deg,#ff9ec0,#ff5a8a); }
.game-ready .gr-eq i:nth-child(5) { animation-delay: -.6s; }
@keyframes grEq { 0%,100% { height: 16px; } 50% { height: 58px; } }
.game-ready .gr-text { font-size: 18px; font-weight: 900; letter-spacing: .06em; background: linear-gradient(90deg,#5b7cfa 0%,#fff 50%,#5b7cfa 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grShimmer 1.5s linear infinite; }
@keyframes grShimmer { to { background-position: -200% 0; } }

.float-ctrls { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 10px; right: 10px; display: none; justify-content: space-between; z-index: 40; pointer-events: none; }
.float-ctrls .fbtn { pointer-events: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(18,22,44,.6); border: 1px solid rgba(255,255,255,.16); color: #eef1ff; font-size: 18px; font-weight: 700;
  text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.float-ctrls .fbtn:active { background: rgba(40,48,90,.75); }
@media (max-width: 820px) {
  body.is-playing .game-shell .topbar { display: none; }
  body.is-playing .float-ctrls { display: flex; }
  /* 몰입 플레이 중 상단바가 사라지면 게임 영역이 화면 최상단(노치/상태바)까지 올라오므로, 영역 전체를 safe-area만큼 내려 HUD·보드가 안 가리게 */
  body.is-playing .game-shell .play-area { padding-top: env(safe-area-inset-top); }
  /* 메모리 상단 타이머 게이지(절대배치)가 좌우 뒤로가기·일시정지 플로팅 버튼과 겹치지 않도록 가운데로 좁힘 */
  body.is-playing .mem-timer { left: 64px !important; right: 64px !important; width: auto !important; }
}

/* 안드로이드 PWA에서 하단 시스템 내비바(기기 버튼)에 게임 하단이 가려지는 문제 대응.
   env(safe-area-inset-bottom)이 안드로이드에선 0으로 잡히는 경우가 많아, JS로 측정한 실제 가시 높이(--app-h)를
   게임 영역 높이의 기준으로 사용한다(내비바를 제외한 높이 → 내비바 뒤로 안 넘어감). 미측정 시 100dvh 폴백. */
body .game-shell { min-height: var(--app-h, 100dvh); height: var(--app-h, 100dvh); box-sizing: border-box; }
/* 사이트 전체 기본 = 잘난체. 버튼은 폰트 미상속이라 상속시킴 → 순위표 탭(통합/전체/게임별·일간/주간/월간/역대)·제목은 잘난체가 걸림 */
button { font-family: inherit; }
/* 가독용 = 조선굴림. 입력창과 순위표의 작은 데이터 행(순위·닉네임·점수)만 적용 — 작은 글씨에서 잘난체는 잘 안 보이므로 */
input, textarea, select,
.lb-row, .lb-empty, .lb-pending, .rank-line, .name-row {
  font-family: var(--font-read);
}

/* Bubble Pop 발사 버튼(모바일 · 플레이 중) — 드래그로 조준 후 눌러서 발사. 좌·우 하단 양쪽에 반투명 배치. */
.bubble-fire { position: fixed; bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); width: 64px; height: 64px;
  border-radius: 50%; display: none; z-index: 46; padding: 0; cursor: pointer; color: #fff; opacity: .4;
  background: radial-gradient(circle at 38% 32%, rgba(255,170,130,.92), rgba(226,72,47,.85)); border: 2px solid rgba(255,255,255,.32);
  box-shadow: 0 4px 14px rgba(0,0,0,.28); -webkit-tap-highlight-color: transparent; touch-action: none; transition: opacity .12s, transform .08s; }
.bubble-fire.bubble-fire-left { left: 16px; }
.bubble-fire.bubble-fire-right { right: 16px; }
.bubble-fire:active { opacity: .78; transform: scale(.93); }
.bubble-fire svg { width: 30px; height: 30px; display: block; margin: 0 auto; }
@media (max-width: 820px), (pointer: coarse) { body.is-playing .bubble-fire { display: grid; place-items: center; } }

/* 좌우 이동 조이스틱(모바일 · 플레이 중) — 화면 드래그와 병행. 손가락이 게임을 안 가리도록 좌하단 별도 영역. 반투명. */
.move-joy { position: fixed; left: 16px; bottom: max(20px, env(safe-area-inset-bottom)); width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.045), rgba(255,255,255,.008)); border: 1px solid rgba(255,255,255,.08);
  display: none; z-index: 45; touch-action: none; -webkit-tap-highlight-color: transparent; }
.move-joy::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 6px; height: 6px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.12); }
.move-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #9fb0ff, #4b63d6); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 3px 10px rgba(0,0,0,.35); opacity: .58; pointer-events: none; }
.move-joy:active { background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.move-joy:active .move-knob { opacity: .82; }
@media (max-width: 820px), (pointer: coarse) { body.is-playing .move-joy { display: block; } }
body.joy-off .move-joy { display: none !important; }

/* 조이스틱 켜기/끄기 토글(조이스틱 위) */
.joy-toggle { position: fixed; left: 22px; bottom: max(146px, calc(env(safe-area-inset-bottom) + 128px)); width: 42px; height: 30px; border-radius: 999px;
  background: rgba(18,22,44,.45); border: 1px solid rgba(255,255,255,.14); color: #eef1ff; font-size: 15px; line-height: 1;
  display: none; z-index: 46; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; }
.joy-toggle.off { opacity: .5; filter: grayscale(1); }
@media (max-width: 820px), (pointer: coarse) { body.is-playing .joy-toggle { display: block; } }

/* 모바일 몰입 모드 — 플레이 중엔 상단바를 캔버스 위로 띄우고 뒤로·사운드·일시정지만 남겨 세로 공간 최대 확보 */
@media (max-width: 700px) {
  body.is-playing .game-shell .topbar {
    position: absolute; top: 0; left: 0; right: 0; max-width: none;
    padding: 8px 10px; background: transparent; z-index: 40; pointer-events: none;
  }
  body.is-playing .game-shell .topbar .right,
  body.is-playing .game-shell .topbar .lang-btn,
  body.is-playing .game-shell .topbar .guide-btn,
  body.is-playing .game-shell .topbar .account-bar { display: none !important; }
  body.is-playing .game-shell .topbar .left { pointer-events: none; gap: 8px; }
  body.is-playing .game-shell .topbar a.back,
  body.is-playing .game-shell .topbar .sound-btn,
  body.is-playing .game-shell .topbar .pause-btn {
    pointer-events: auto;
    background: rgba(10, 14, 30, .5); border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  body.is-playing .game-shell .topbar a.back { font-size: 13px; padding: 5px 12px; }
}

/* ===== 모바일 햄버거 메뉴 + 드로어 ===== */
.menu-btn { display: none; background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px; font-size: 20px; line-height: 1;
  padding: 5px 11px; cursor: pointer; }
.menu-btn:hover { background: rgba(255,255,255,.12); }

.drawer-back { position: fixed; inset: 0; height: 100dvh; background: rgba(0,0,0,.5); z-index: 90;
  overscroll-behavior: contain; touch-action: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.drawer-back.hidden { display: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; height: 100dvh; width: min(84vw, 320px); z-index: 91;
  background: var(--bg-soft); border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -12px 0 40px rgba(0,0,0,.5); display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateX(0); transition: transform .22s ease; }
.drawer.hidden { transform: translateX(102%); }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-title { font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.drawer-logo { width: 24px; height: 24px; border-radius: 6px; display: block; }
.drawer-close { background: none; border: 0; color: var(--text-dim); font-size: 20px; cursor: pointer; padding: 4px 8px; }
/* 모바일 드로어: 로그인/프로필은 왼쪽, 언어·후원은 같은 줄 오른쪽으로 */
.drawer-acc { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-acc:empty { display: none; }
.drawer-acc .account-bar { width: auto; min-width: 0; gap: 6px; }
.drawer-acc .lang-btn { margin-left: auto; flex: 0 0 auto; }   /* 언어부터 오른쪽으로 밀기 */
.drawer-acc .support-btn, .drawer-acc .contact-btn { flex: 0 0 auto; }
.drawer-acc .acc-email { max-width: 100%; }
.drawer-sec { font-size: 11px; letter-spacing: .12em; color: var(--text-dim); text-transform: uppercase; padding: 14px 2px 6px; }
.drawer-games { display: flex; flex-direction: column; gap: 2px; }
.drawer-games a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; color: var(--text); font-weight: 600; }
.drawer-games a:hover, .drawer-games a.active { background: rgba(255,255,255,.07); text-decoration: none; }
.drawer-games a.active { color: var(--accent-2); }
.drawer-games .dg-ic { font-size: 20px; width: 24px; text-align: center; }
.drawer-games .dg-ic svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.drawer-games .dg-ic .tapzy-game-icon-img { width: 22px; height: 22px; margin: 0 auto; }
.drawer-links { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; }
.drawer-links a { color: var(--text-dim); font-size: 13px; }
@media (max-width: 700px) { .menu-btn { display: inline-flex; align-items: center; } }

/* ===== 게임 목록 카드: ? 로 게임방법 모달(PC·모바일 공통, 썸네일 우하단) ===== */
/* ? 버튼: 썸네일 우하단 코너 — PC·모바일 모두 표시. 별/아이콘과 충돌 방지 */
.howto-btn { display: inline-flex; align-items: center; justify-content: center; position: absolute; bottom: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; z-index: 2; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.howto-btn:hover { background: var(--accent); border-color: transparent; }
.howto-btn:active { background: var(--accent); border-color: transparent; }
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; align-items: start; }
  .card { position: relative; }
  .card:hover { transform: none; box-shadow: none; }
  .card .thumb { aspect-ratio: 4 / 3; font-size: 42px; }
  .card .body { padding: 8px 10px 12px; }
  .card h3 { margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
  .card p { display: block; margin: 6px 0 0; font-size: 11px; line-height: 1.45;
    height: calc(1.45em * 3); overflow-y: auto; }
  .card .badge { display: none; }
  .howto-btn { width: 24px; height: 24px; font-size: 13px; }
}

/* 허브(메인) PC 좌우 세로 광고 — 콘텐츠(960px) 양옆에 여유가 있는 넓은 화면에서만 표시 · 결제 시 숨김 */
.side-ad {
  position: fixed; top: 96px; width: 160px; height: 600px; max-height: 78vh;
  display: none; place-items: center; z-index: 1;
  border: 1px dashed rgba(255,255,255,.15); border-radius: 12px;
  color: var(--text-dim); font-size: 12px; letter-spacing: .08em;
}
.side-ad.left  { left:  calc((100vw - 960px) / 2 - 176px); }
.side-ad.right { right: calc((100vw - 960px) / 2 - 176px); }
@media (min-width: 1320px) { .side-ad { display: grid; } }

/* 프리미엄이면 모든 광고 숨김 (계정 단위 광고 제거) */
body.is-premium .ad-slot,
body.is-premium .ad-rail,
body.is-premium .ad-bottom,
body.is-premium .side-ad,
body.is-premium #adBreak { display: none !important; }

/* 애드센스 승인 전(ads-off): 광고 자리표시·게임오버 전면광고 전부 숨김 (adsEnabled=true로 바꾸면 표시) */
body.ads-off .ad-slot,
body.ads-off .ad-rail,
body.ads-off .ad-bottom,
body.ads-off .side-ad,
body.ads-off #adBreak { display: none !important; }

/* 플랜 선택 모달 */
.modal-back { position: fixed; inset: 0; background: rgba(6,8,20,.7); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 120; padding: 20px; }
.modal-back.hidden { display: none; }
.modal { position: relative; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 22px; width: 100%; max-width: 360px; }
/* 우측 상단 X 닫기 버튼(모든 레이어 공통) */
.modal .x-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--text); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 2; }
.modal .x-close:hover { background: rgba(255,255,255,.14); }
.modal h3 { margin: 0 0 4px; padding-right: 34px; }
/* 문서(게임방법·개인정보) 레이어 — 넓고 왼쪽 정렬 */
.modal.doc { max-width: 640px; text-align: left; }
.modal.doc .content { }
.modal.doc h2 { font-size: 20px; margin: 0 0 12px; padding-right: 34px; }
.modal.doc h3 { font-size: 16px; margin: 16px 0 6px; padding-right: 0; }
.modal.doc p, .modal.doc li { color: var(--text-dim); font-size: 14px; line-height: 1.65; }
/* 문서(게임방법·개인정보) 게임별 구분선 + 플레이 버튼 아래 여백(구분 명확히) */
.modal.doc .btn, .content .btn { display: inline-block; margin: 10px 0 30px; padding: 9px 18px; font-size: 14px; }
.modal.doc h2, .content h2 { border-top: 1px solid rgba(255,255,255,.09); padding-top: 22px; margin-top: 22px; }
.modal .sub { color: var(--text-dim); font-size: 13px; margin: 0 0 16px; }
.plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; color: var(--text); }
.plan:hover { border-color: var(--accent); }
.plan .p-name { font-weight: 700; }
.plan .p-note { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.plan .p-price { font-weight: 800; white-space: nowrap; }
.plan.best { border-color: var(--accent-2); }
.plan.best .p-price { color: var(--accent-2); }
.modal .close { display: block; margin: 6px auto 0; background: transparent; border: 0; color: var(--text-dim); font-size: 13px; cursor: pointer; }

/* ===== 게임 방법 가이드 ===== */
.guide-btn { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; width: 28px; height: 28px; font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1; }
.guide-btn:hover { background: rgba(255,255,255,.12); }
.modal { max-height: 85vh; overflow-y: auto; }
.guide h4 { margin: 14px 0 6px; font-size: 15px; color: var(--text); }
.guide p, .guide li { color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.guide ul { margin: 0; padding-left: 18px; }
.guide .keys { display: inline-block; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 1px 7px; font-weight: 700; color: var(--text); font-size: 13px; }

/* ===== 후원(도네이션) ===== */
.support-btn { margin-left: 8px; background: rgba(255,209,94,.14); color: #ffd95e; border: 1px solid rgba(255,209,94,.3); border-radius: 999px; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.support-btn:hover { background: rgba(255,209,94,.24); }
.modal.support .tip-btn { display: block; text-align: center; background: linear-gradient(135deg, #ffd95e, #f5a623); color: #3a2b00; font-weight: 800; padding: 13px; border-radius: 12px; margin: 6px 0 16px; }
.modal.support .tip-btn:hover { filter: brightness(1.05); text-decoration: none; }
.crypto-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.crypto-box .c-label { font-weight: 700; margin-bottom: 10px; }
.crypto-box .c-qr { display: block; width: 150px; height: 150px; margin: 0 auto 12px; background: #fff; border-radius: 8px; padding: 6px; box-sizing: border-box; }
.c-addr-row { display: flex; gap: 8px; align-items: stretch; }
.c-addr { flex: 1; font-size: 12px; word-break: break-all; background: rgba(0,0,0,.28); padding: 9px 10px; border-radius: 8px; color: var(--text); font-family: ui-monospace, monospace; }
.c-addr-row .acc-btn { white-space: nowrap; }

/* ===== 문의 · 아이디어 ===== */
.contact-btn, .sound-btn, .pause-btn { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; width: 28px; height: 28px; font-size: 14px; cursor: pointer; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.contact-btn:hover, .sound-btn:hover, .pause-btn:hover { background: rgba(255,255,255,.12); }
.sound-btn svg { width: 16px; height: 16px; display: block; }
.bgm-btn.off { color: var(--text-dim); opacity: .75; }

/* 일시정지 전체화면 오버레이 */
.pause-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(6,8,20,.74); backdrop-filter: blur(5px); }
.pause-overlay.hidden { display: none; }
.pause-panel { text-align: center; }
.pause-title { font-size: 52px; line-height: 1; }
.pause-label { font-size: 22px; font-weight: 800; margin: 8px 0 18px; color: var(--text); }
.pause-resume { background: linear-gradient(135deg, var(--accent), #7a92ff); color: #fff; border: 0; font-weight: 800; font-size: 17px; padding: 12px 30px; border-radius: 14px; box-shadow: 0 8px 22px rgba(91,124,250,.5); cursor: pointer; }
.pause-resume:active { transform: translateY(1px); }
.pause-extra { display: block; margin: 12px auto 0; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.18); font-weight: 700; font-size: 15px; padding: 10px 24px; border-radius: 12px; cursor: pointer; }
.pause-extra:active { transform: translateY(1px); }

/* 게임 시작·종료·일시정지 버튼 상호작용 — PC 호버와 모바일 터치에 동일한 시각 피드백 제공 */
.game-shell .play-btn,
.game-shell .share-btn,
.game-shell .name-row button,
.game-shell .topbar a.back,
.pause-resume,
.pause-extra{
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
	transform-origin:center;
	transition:transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

@media (hover:hover) and (pointer:fine){
	.game-shell .play-btn:not(:disabled):hover,
	.game-shell .name-row button:not(:disabled):hover,
	.pause-resume:not(:disabled):hover{
		filter:brightness(1.13) saturate(1.08);
		transform:translateY(-2px) scale(1.02);
		box-shadow:0 11px 26px rgba(91,124,250,.62);
	}

	.game-shell .share-btn:not(:disabled):hover,
	.pause-extra:not(:disabled):hover{
		background-color:rgba(91,124,250,.18);
		border-color:rgba(139,163,255,.72);
		color:#ffffff;
		transform:translateY(-1px);
		box-shadow:0 7px 18px rgba(0,0,0,.22);
	}

	.game-shell .topbar a.back:hover{
		background-color:rgba(255,255,255,.09);
		color:var(--text);
		text-decoration:none;
	}
}

.game-shell .play-btn:not(:disabled):active,
.game-shell .name-row button:not(:disabled):active,
.pause-resume:not(:disabled):active{
	filter:brightness(.82) saturate(1.15);
	transform:translateY(2px) scale(.96);
	box-shadow:0 2px 7px rgba(91,124,250,.3), inset 0 2px 6px rgba(0,0,0,.24);
	transition-duration:.05s;
}

.game-shell .share-btn:not(:disabled):active,
.pause-extra:not(:disabled):active{
	background-color:rgba(91,124,250,.3);
	border-color:var(--accent);
	color:#ffffff;
	filter:brightness(.9);
	transform:translateY(2px) scale(.96);
	box-shadow:inset 0 2px 6px rgba(0,0,0,.28);
	transition-duration:.05s;
}

.game-shell .topbar a.back:active{
	background-color:rgba(91,124,250,.26);
	color:#ffffff;
	transform:scale(.94);
	text-decoration:none;
	transition-duration:.05s;
}

.game-shell .play-btn:focus-visible,
.game-shell .share-btn:focus-visible,
.game-shell .name-row button:focus-visible,
.game-shell .topbar a.back:focus-visible,
.pause-resume:focus-visible,
.pause-extra:focus-visible{
	outline:3px solid rgba(159,184,255,.9);
	outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
	.game-shell .play-btn,
	.game-shell .share-btn,
	.game-shell .name-row button,
	.game-shell .topbar a.back,
	.pause-resume,
	.pause-extra{
		transition-duration:0s;
	}
}
.contact-link { color: var(--text-dim); cursor: pointer; font-size: 13px; }
.contact-link:hover { color: var(--text); text-decoration: underline; }
.modal.contact label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); margin: 13px 0 5px; }
.modal.contact select, .modal.contact input, .modal.contact textarea {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: var(--text); border-radius: 10px; padding: 11px 12px; font-size: 15px; font-family: inherit; box-sizing: border-box;
}
.modal.contact textarea { min-height: 112px; resize: vertical; }
/* 네이티브 드롭다운 목록은 흰 배경에 렌더 → 옵션 글자는 검정으로(안 보이던 문제 해결) */
.modal.contact select option { color: #111; background: #fff; }
.modal.contact select:focus, .modal.contact input:focus, .modal.contact textarea:focus { outline: none; border-color: var(--accent); }
.modal.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-send { width: 100%; margin-top: 16px; background: linear-gradient(135deg, var(--accent), #7a92ff); color: #fff; border: 0; font-weight: 800; font-size: 16px; padding: 13px; border-radius: 12px; cursor: pointer; }
.contact-send:disabled { opacity: .6; cursor: default; }
.contact-msg { margin-top: 10px; font-size: 13px; min-height: 18px; text-align: center; }
.contact-msg.err { color: #ff8f8f; }
.contact-msg.ok { color: #62d69a; }

/* ===== Astro 폭탄 버튼 ===== */
.bomb-btn { position: absolute; right: 14px; bottom: 96px; z-index: 6; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe08a, #f5a623); color: #3a2b00; border: 0; font-size: 26px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); display: grid; place-items: center; line-height: 1; touch-action: manipulation; }
.bomb-btn span { position: absolute; right: 3px; bottom: 2px; font-size: 12px; font-weight: 800; background: rgba(0,0,0,.4); color: #fff; border-radius: 999px; padding: 1px 6px; }
.bomb-btn.empty { opacity: .35; }
.bomb-btn:active { transform: scale(.93); }
.bomb-btn--img { background: center/contain no-repeat url(/games/astro/item_bomb.png); box-shadow: none; border-radius: 0; overflow: visible; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }

/* 게임 상단바: 로그인 UI가 들어가도 안 찌그러지게(뒤로가기 줄바꿈 방지 + 데스크톱 폭 확대) */
.game-shell .topbar { max-width: 720px; }
.topbar a.back { white-space: nowrap; flex-shrink: 0; }
.topbar .left { flex-wrap: nowrap; min-width: 0; }
/* 게임 상단바 우측 그룹: 로그인·후원·문의를 오른쪽 정렬 */
.topbar .right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* 순위표 등수 칸("10등"·"2nd" 들어가게 넓힘) */
.lb-list .lb-row .rk { width: 46px; }

/* SCORE/BEST — 게임(스테이지) 안 상단에 오버레이(컴팩트, 게임 위 유틸바에서 분리) */
.stage > .game-scores { position: absolute; top: 6px; left: 0; right: 0; z-index: 5; margin: 0; padding: 0 12px;
  display: flex; justify-content: center; gap: 22px; pointer-events: none; }
.stage > .game-scores .item { display: flex; align-items: baseline; gap: 5px; text-align: left; }
.stage > .game-scores .label { font-size: 9px; letter-spacing: .1em; }
.stage > .game-scores .val { font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.75); }

/* ===== 모바일 상단바 정리(찌그러짐 방지) ===== */
@media (max-width: 480px) {
  .site-header { padding: 10px 12px; gap: 8px; }
  .brand { font-size: 17px; gap: 7px; }
  .brand .logo { width: 28px; height: 28px; }
  .nav { flex-wrap: nowrap; gap: 9px; }
  .nav .lang-btn { padding: 5px 10px; font-size: 12px; }
  .nav .support-btn, .topbar .support-btn { padding: 5px 8px; font-size: 13px; }
  .support-btn .lbl { display: none; }        /* 모바일: 후원 버튼은 💛 아이콘만 */
  .topbar .contact-btn { display: none; }     /* 모바일 게임 상단바에선 문의 숨김(허브에서 접근) */
  .account-bar { margin-left: 6px; }
  /* 게임 상단바 압축 */
  .topbar { padding: 10px 8px; gap: 6px; }
  .topbar .left { gap: 7px; flex-wrap: nowrap; min-width: 0; }
  .topbar a.back { font-size: 0 !important; white-space: nowrap; }   /* 텍스트 숨기고 화살표만 */
  .topbar a.back::before { content: "←"; font-size: 17px; }
  .support-btn { white-space: nowrap; }
  .lang-btn, .guide-btn, .contact-btn, .sound-btn, .pause-btn, .acc-btn, .support-btn { flex: 0 0 auto; }
  .topbar .left { gap: 6px; }
  /* 시작화면(모바일): 뒤로가기만 왼쪽, 나머지(언어·도움말·사운드·음악·메뉴 등)는 우측 끝으로 */
  .game-shell .topbar .left { flex: 1 1 auto; }
  .game-shell .topbar .left a.back { margin-right: auto; }
  .scores { gap: 12px; }
  .scores .val { font-size: 18px; }
}

/* ===== 메인 허브 순위표 (전체 챔피언 + 게임별) ===== */
.hub-lb { margin-top: 40px; }
.hub-lb-head { text-align: center; margin-bottom: 16px; }
.hub-lb-head h2 { font-size: clamp(20px, 4.5vw, 26px); margin: 0 0 6px; }
.hub-lb-head p { color: var(--text-dim); font-size: 14px; margin: 0; }
.lb-gtabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 91%, transparent); mask-image: linear-gradient(90deg, #000 91%, transparent); }
.lb-gtabs::-webkit-scrollbar { display: none; }   /* 두꺼운 흰 스크롤바 숨김 — 우측 페이드로 스크롤 가능 힌트 */
.lb-gtab { flex: 0 0 auto; background: rgba(255,255,255,.06); color: var(--text-dim); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.lb-gtab:hover { color: var(--text); }
.lb-gtab.active { background: var(--accent); color: #fff; border-color: transparent; }
.lb-ptabs { display: flex; gap: 6px; max-width: 420px; margin: 18px auto 18px; }
.lb-ptabs button { flex: 1; background: rgba(255,255,255,.05); color: var(--text-dim); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 8px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.lb-ptabs button.active { background: var(--accent-2); color: #231; border-color: transparent; }

.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.champ-card { background: linear-gradient(180deg, var(--card), var(--bg-soft)); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px 14px 14px; }
.champ-card.wide { max-width: 480px; margin: 0 auto; }
.champ-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.champ-head .ce { font-size: 20px; }
.champ-head .cn { font-weight: 800; font-size: 15px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-head .cgo { font-size: 12px; color: var(--text-dim); background: rgba(255,255,255,.07); border-radius: 8px; padding: 3px 8px; }
.champ-head .cgo:hover { color: #fff; background: var(--accent); text-decoration: none; }
.lb-info-btn{
	align-items:center;
	background:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.14);
	border-radius:50%;
	color:var(--text-dim);
	cursor:pointer;
	display:inline-flex;
	flex:0 0 auto;
	font-size:14px;
	font-weight:900;
	height:28px;
	justify-content:center;
	padding:0;
	transition:background .15s,color .15s,border-color .15s;
	width:28px;
}
.lb-info-btn:hover,
.lb-info-btn:focus-visible{
	background:var(--accent);
	border-color:transparent;
	color:#ffffff;
	outline:none;
}
.modal.lb-rank-info{
	max-width:720px;
	padding:24px;
	text-align:left;
}
.lb-rank-info h3{
	font-size:21px;
	margin:0 0 7px;
}
.lb-info-intro{
	color:var(--text-dim);
	font-size:13px;
	line-height:1.65;
	margin:0;
	padding-right:28px;
}
.lb-rank-info section{
	border-top:1px solid rgba(255,255,255,.09);
	margin-top:18px;
	padding-top:16px;
}
.lb-rank-info h4{
	color:var(--text);
	font-size:14px;
	margin:0 0 10px;
}
.lb-info-periods{
	display:grid;
	gap:8px;
	grid-template-columns:1fr 1fr;
}
.lb-info-period{
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.07);
	border-radius:10px;
	display:flex;
	gap:8px;
	padding:10px 11px;
}
.lb-info-period b{
	color:var(--accent-2);
	flex:0 0 42px;
	font-size:12px;
}
.lb-info-period span{
	color:var(--text-dim);
	font-size:12px;
	line-height:1.45;
}
.lb-info-formula{
	display:grid;
	gap:7px;
	list-style:none;
	margin:0;
	padding:0;
}
.lb-info-formula li{
	align-items:flex-start;
	display:flex;
	gap:9px;
}
.lb-info-formula li > span{
	align-items:center;
	background:rgba(91,124,250,.2);
	border:1px solid rgba(91,124,250,.35);
	border-radius:50%;
	color:#aebcff;
	display:inline-flex;
	flex:0 0 24px;
	font-size:11px;
	font-weight:900;
	height:24px;
	justify-content:center;
}
.lb-info-formula p{
	color:var(--text-dim);
	font-size:13px;
	line-height:1.55;
	margin:2px 0 0;
}
.lb-info-example{
	background:rgba(0,0,0,.2);
	border:1px solid rgba(255,255,255,.08);
	border-radius:12px;
	padding:12px 14px;
}
.lb-info-example p{
	color:var(--text-dim);
	font-size:12px;
	line-height:1.55;
	margin:4px 0;
}
.lb-info-example .lb-info-raw{
	border-bottom:1px dashed rgba(255,255,255,.12);
	color:var(--text);
	margin:0 0 8px;
	padding:0 0 8px;
}
.lb-info-example strong{
	background:rgba(77,226,183,.12);
	border-radius:8px;
	color:var(--accent-2);
	display:block;
	font-size:14px;
	margin-top:9px;
	padding:9px 10px;
}
.lb-info-tie{
	color:var(--text-dim);
	font-size:11px;
	line-height:1.55;
	margin:13px 0 0;
}
.hub-lb .lb-list { background: rgba(0,0,0,.18); border-radius: 10px; max-height: 174px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.hub-lb .lb-list::-webkit-scrollbar { width: 6px; }
.hub-lb .lb-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.hub-lb .lb-list::-webkit-scrollbar-track { background: transparent; }
.hub-lb .lb-row { display: flex; align-items: center; padding: 8px 10px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.hub-lb .lb-row:last-child { border-bottom: 0; }
.hub-lb .lb-row .rk { min-width: 40px; font-weight: 800; color: var(--text-dim); }
.hub-lb .lb-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.hub-lb .lb-row .sc { font-weight: 800; color: var(--text); }
.hub-lb .lb-row.top1 .rk { color: #ffd54a; } .hub-lb .lb-row.top2 .rk { color: #cfd6e6; } .hub-lb .lb-row.top3 .rk { color: #e8a06a; }
.hub-lb .lb-empty { text-align: center; color: var(--text-dim); padding: 16px; font-size: 13px; }
.hub-lb .lb-empty.small { padding: 12px; font-size: 12px; }
/* 순위 미집계 슬롯(3위까지 무조건 표시 · 비면 '집계 중...') */
.lb-row.pending { opacity: .55; }
.lb-pending, .wt-pending { color: rgba(255,255,255,.34); font-style: italic; }

/* 순위 등록 처리중 표시 — 버튼 비활성 + 스피너 인디케이터 */
.submitting { opacity: .75; cursor: progress; }
.submitting::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: btnspin .7s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
/* 탭 전환 로딩: 결과 높이를 미리 잡고 기존 내용 유지+흐리게 → 접힘/깜빡임 없이 교체 */
#lbBody { transition: opacity .15s ease; min-height: 220px; position: relative; }
#lbBody.lb-loading { opacity: .55; }
.lb-spinner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.lb-spinner::after { content: ""; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: lbspin .7s linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg); } }
/* 게임 오버 화면 순위표: 결과 높이를 미리 예약해 로딩→결과 전환 시 화면이 안 튀게 */
.overlay .lb-list { min-height: 300px; }
/* 시작화면 순위표(startlb.js 주입): 5행 높이 고정 + 스피너 오버레이용 relative */
.start-lb { margin-top: 18px; text-align: left; }
.start-lb > h3 { text-align: center; font-size: 15px; margin: 0 0 10px; color: var(--text); }
.start-lb .lb-list { position: relative; min-height: 190px; }
/* 시작화면 순위표 로딩 인디케이터(영역 정중앙 스피너 + 텍스트) */
.start-lb-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--text-dim); font-size: 13px; }
.start-lb-loading .sp { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: lbspin .7s linear infinite; }
/* 순위 메달 이미지(1~3위) */
.medal { height: 24px; width: auto; vertical-align: middle; display: inline-block; }
.hub-lb .rk .medal { height: 22px; }
.wt-medal .medal { height: 22px; }
@media (max-width: 600px) {
  .champ-grid { grid-template-columns: 1fr; gap: 10px; }
	.modal.lb-rank-info{
		padding:20px 16px;
	}
	.lb-info-periods{
		grid-template-columns:1fr;
	}
}

/* ===== 게임 시작화면 역대 TOP 3 ===== */
.gametop { margin: 14px auto 2px; max-width: 300px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px 12px; }
.gametop .gt-title { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--accent-2); text-align: center; margin-bottom: 8px; }
.gametop .gt-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 14px; }
.gametop .gm { width: 22px; text-align: center; }
.gametop .gn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; text-align: left; }
.gametop .gs { font-weight: 800; color: var(--text); }
.gametop .gt-none { text-align: center; color: var(--text-dim); font-size: 13px; padding: 2px 0 4px; }

/* ===== 현재 난이도 배지(상단 점수줄) ===== */
.scores .diff-item .val { color: var(--accent-2); }

/* ===== iOS "홈 화면에 추가" 안내 배너 ===== */
.a2hs { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; background: rgba(20,24,48,.96); color: #eef1ff; font-size: 13px; line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.a2hs b { color: var(--accent-2); }
.a2hs .a2hs-install { background: var(--accent); border: 0; color: #fff; font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; flex: 0 0 auto; }
.a2hs .a2hs-x { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; font-size: 13px; }
body.is-playing .a2hs { display: none; }   /* 플레이 중엔 숨김 */

/* 안드로이드 전용: 홈화면 추가 아이콘(항상 표시) + 말풍선 안내 */
.a2hs-fab-wrap { position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: 70; display: flex; align-items: center; gap: 9px; }
.a2hs-fab { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto; font-size: 26px; color: #fff;
  background: linear-gradient(135deg, var(--accent), #7a92ff); box-shadow: 0 6px 20px rgba(91,124,250,.55); animation: a2hsBob 1.8s ease-in-out infinite; }
.a2hs-fab:active { transform: scale(.94); }
.a2hs-fab-tip { position: relative; background: #fff; color: #1a1f3a; font-size: 13px; font-weight: 800; line-height: 1.3; padding: 9px 13px; border-radius: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.28); max-width: 46vw; }
.a2hs-fab-tip::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left-color: #fff; border-right: 0; }
@keyframes a2hsBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
body.is-playing .a2hs-fab-wrap { display: none; }   /* 플레이 중엔 숨김 */

/* 홈화면 웹앱(standalone)에서 iOS 상태바/노치 영역 확보 — 상단바가 상태바에 안 가리도록 */
@media (display-mode: standalone) {
  .site-header { padding-top: calc(12px + env(safe-area-inset-top)); }
  .game-shell .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* ===== Astro 아이템 범례(시작화면) ===== */
.astro-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; justify-content: center; margin: 14px 0 2px; }
.astro-legend .li { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.astro-legend b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #0a0f1e; font-weight: 800; font-size: 12px; }
.astro-legend b.bomb { background: transparent; width: auto; }
.astro-legend .li-ic { width: 24px; height: 24px; object-fit: contain; flex: none; }