/* 바다의 인생게임 기본 스킨: 도트 판 · 무대 · 조작판. 색은 먹색 · 레몬 · 강조색(관리자 설정), 글꼴은 Noto Sans KR */
.lifegame { --lg-ink: #141A16; --lg-lemon: #FFE15A; --lg-coral: #F0533F; --lg-paper: #F7F8F6; --lg-line: #DDE1DC; --lg-accent: #008741; --lg-accent-soft: #E3F4EA;
  position: relative; max-width: 1180px; margin: 0 auto; color: var(--lg-ink); font-family: "Noto Sans KR", system-ui, sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: -.01em; }
.lifegame *, .lifegame *::before, .lifegame *::after { box-sizing: border-box; }
.lifegame button { font: inherit; color: inherit; cursor: pointer; }
.lifegame svg { display: block; }
.lg__boot { padding: 80px 0; text-align: center; color: #6A726C; }
.lg-muted { margin: 6px 0; color: #6A726C; font-size: 12.5px; }
.lg-center-text { text-align: center; }
.lg-ic { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
.lg-die { width: 30px; height: 30px; flex: none; }

/* 단추 */
.lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 2px solid var(--lg-ink); border-radius: 11px; background: #fff; font-weight: 800; text-decoration: none; color: var(--lg-ink); box-shadow: 0 3px 0 var(--lg-ink); transition: transform .08s, box-shadow .08s; }
.lg-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--lg-ink); }
.lg-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--lg-ink); }
.lg-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.lifegame .lg-btn--go { background: var(--lg-accent); color: #fff; }
.lifegame .lg-btn--go:hover:not(:disabled) { filter: brightness(1.06); }
.lg-btn--ghost { background: var(--lg-paper); box-shadow: 0 2px 0 #B9BFB9; border-color: #B9BFB9; }
.lg-btn--danger { background: #FFECE8; border-color: var(--lg-coral); color: #A8352A; box-shadow: 0 2px 0 var(--lg-coral); }
.lg-btn--sm { min-height: 32px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; box-shadow: 0 2px 0 var(--lg-ink); }
.lg-btn.is-armed { background: var(--lg-lemon); }
.lg-link { display: inline-block; margin-top: 10px; color: var(--lg-accent); font-weight: 700; }

/* 상단 */
.lg-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: var(--lg-ink); color: #fff; }
.lg-hud__me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg-hud__me b { display: flex; align-items: baseline; gap: 6px; font-size: 17px; font-weight: 900; }
.lg-hud__me b em { padding: 0 7px; border-radius: 99px; background: var(--lg-lemon); color: var(--lg-ink); font-size: 11px; font-style: normal; line-height: 18px; }
.lg-hud__me small { display: block; color: #C9D2CC; font-size: 12px; }
.lg-face { display: block; flex: none; width: 46px; height: 46px; overflow: hidden; border: 2px solid var(--lg-lemon); border-radius: 12px; background: #fff; }
.lg-face svg { width: 100%; height: 100%; }
.lg-face--big { width: 72px; height: 72px; border-color: var(--lg-ink); }
.lg-meter { position: relative; display: block; width: 180px; max-width: 100%; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .18); }
.lg-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--lg-lemon); }
.lg-meter--love { width: 100%; height: 8px; background: #F6D6DE; }
.lg-meter--love > i { background: #E2486A; }
.lg-hud__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-hud__stats > span { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); cursor: help; }
.lg-hud__stats b { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lg-hud__stats small { color: #AEB8B1; font-size: 11px; }
.lg-hud__stats .is-gold b { color: var(--lg-lemon); }
.lg-hud__stats .is-debt b { color: #FF8A78; }
.lg-energy .lg-die { width: 20px; height: 20px; }
.lg-energy em { margin-left: 4px; color: #9FD3B0; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }

/* 판 + 오른쪽 */
.lg-main { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 16px; align-items: start; }
.lg-board { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 3px; aspect-ratio: 1; padding: 6px; border: 3px solid var(--lg-ink); border-radius: 16px; background: #1F5C96; background-image: linear-gradient(rgba(255, 255, 255, .06) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, .06) 2px, transparent 2px); background-size: 18px 18px; }
.lg-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 2px; border: 2px solid var(--lg-ink); border-radius: 8px; background: #fff; overflow: hidden; }
.lg-tile .lg-ic { width: 46%; height: auto; aspect-ratio: 1; }
/* 칸 이름: 원작처럼 종류마다 색 글씨(좋은 일 초록 · 나쁜 일 빨강 · 고르는 일 주황 · 운 파랑 · 인연 분홍) */
.lg-tile span { max-width: 100%; font-size: 11.5px; font-weight: 900; line-height: 1.1; text-align: center; word-break: keep-all; letter-spacing: -.05em; }
.lg-tile.is-good span { color: #187A42; }
.lg-tile.is-bad span { color: #D23A26; }
.lg-tile.is-pick span { color: #C96300; }
.lg-tile.is-luck span { color: #1F5DBF; }
.lg-tile.is-love span { color: #C2367A; }
.lg-tile.is-jail span, .lg-tile.is-home span { color: var(--lg-ink); }
.lg-tile.is-corner { border-width: 3px; }
.lg-tile.is-corner .lg-ic { width: 52%; }
.lg-tile.is-corner span { font-size: 13px; }
.lg-tile.is-home { background: var(--lg-lemon); }
.lg-tile.is-good { background: #E3F6EA; }
.lg-tile.is-bad { background: #FFE6E1; }
.lg-tile.is-pick { background: #FFF2C2; }
.lg-tile.is-luck { background: #E4EEF8; }
.lg-tile.is-love { background: #FCE3EC; }
.lg-tile.is-jail { background: #D9DCE2; }
.lg-tile:hover { outline: 3px solid var(--lg-lemon); outline-offset: -1px; z-index: 1; }
.lg-tile.is-here { box-shadow: inset 0 0 0 3px var(--lg-accent); }
.lg-center { grid-row: 2 / 9; grid-column: 2 / 9; display: flex; flex-direction: column; gap: 6px; margin: 6px; min-width: 0; min-height: 0; }

.lg-stage { position: relative; overflow: hidden; border: 3px solid var(--lg-ink); border-radius: 12px; background: #8CC8F5; }
.lg-stage__svg { width: 100%; height: auto; }
/* 장면 왼쪽 위의 칸 이름 */
.lg-sqname { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border: 2px solid var(--lg-ink); border-radius: 9px; background: #fff; font-size: 13.5px; font-weight: 900; box-shadow: 0 2px 0 var(--lg-ink); }
.lg-sqname .lg-ic { width: 18px; height: 18px; }
/* 주사위 · 굴리기 단추: 판 가운데, 장면 바로 아래 */
.lg-tray { display: flex; align-items: center; gap: 10px; padding: 8px; border: 2px solid var(--lg-ink); border-radius: 12px; background: #fff; }
.lg-tray .lg-roll__btn { flex: 1; min-width: 0; }
.lg-roll__btn.is-wait { background: var(--lg-paper); color: #6A726C; border-color: #B9BFB9; box-shadow: none; opacity: 1; font-size: 13.5px; }
.lg-roll__btn em { font-style: normal; }
.lg-only-m { display: none; }
.lg-dice.is-idle .lg-die { opacity: .45; }
.lg-dice { display: flex; gap: 6px; }
.lg-dice .lg-die { width: 48px; height: 48px; }
.lg-dice.is-rolling .lg-die { animation: lg-shake .16s steps(2) infinite; }
.lg-dice.is-double .lg-die { animation: lg-pop .5s ease-out; filter: drop-shadow(0 0 4px var(--lg-lemon)); }
@keyframes lg-shake { 50% { transform: translate(2px, -3px) rotate(8deg); } }
@keyframes lg-pop { 40% { transform: scale(1.25); } }
.lg-token { position: absolute; z-index: 3; width: calc((100% - 12px) / 9); height: calc((100% - 12px) / 9); margin: 6px; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: left .14s ease-out, top .14s ease-out; }
.lg-token svg { width: 96%; height: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.lg-token.is-hop svg { animation: lg-hop .16s ease-out; }
@keyframes lg-hop { 50% { transform: translateY(-30%); } }

/* 조작판 */
.lg-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lg-console { padding: 14px; border: 2px solid var(--lg-ink); border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--lg-ink); }
.lg-lines { display: grid; gap: 5px; }
.lg-line { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 7px 10px; border-radius: 9px; background: var(--lg-paper); font-size: 13.5px; }
.lg-line > .lg-ic { width: 18px; height: 18px; margin-top: 1px; }
.lg-line > span { flex: 1; min-width: 0; }
.lg-line.is-good { background: #E3F6EA; }
.lg-line.is-bad { background: #FFE8E4; }
.lg-line.is-title { background: var(--lg-lemon); font-weight: 800; }
.lg-duel { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.lg-duel > span { display: flex; align-items: center; gap: 4px; }
.lg-duel b { font-size: 18px; font-weight: 900; }
.lg-duel em { color: var(--lg-accent); font-style: normal; font-weight: 800; }
.lg-duel i { font-style: normal; font-weight: 900; color: var(--lg-coral); }
.lg-roll { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lg-roll__btn { flex: 1; min-height: 52px; font-size: 16px; font-weight: 900; }
.lg-pick { margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--lg-line); }
.lg-pick h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 16px; font-weight: 900; }
.lg-pick__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-pick__opts .lg-btn { flex: 1 1 120px; }
.lg-seg { display: inline-flex; margin-bottom: 10px; padding: 3px; border: 2px solid var(--lg-ink); border-radius: 11px; }
.lg-seg button { padding: 6px 12px; border: 0; border-radius: 8px; background: none; font-weight: 800; }
.lg-seg button[aria-pressed="true"] { background: var(--lg-ink); color: #fff; }
.lg-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.lg-cards--3 { grid-template-columns: repeat(3, 1fr); }
.lg-card { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: 6px; border: 2px solid var(--lg-ink); border-radius: 10px; background: repeating-linear-gradient(45deg, #B8466A 0 6px, #A33C5E 6px 12px); color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 3px 0 var(--lg-ink); transition: transform .12s; }
button.lg-card:hover { transform: translateY(-4px) rotate(-2deg); }
.lg-card--chance { background: repeating-linear-gradient(45deg, #24406E 0 6px, #1C3358 6px 12px); }
.lg-card--chance .lg-ic { width: 36px; height: 36px; }
.lg-cards.is-open .lg-card { background: #fff; color: var(--lg-ink); animation: lg-flip .4s ease-out both; }
.lg-cards.is-open .lg-card.is-win { background: var(--lg-lemon); }
.lg-cards.is-open .lg-card.is-pick { outline: 3px solid var(--lg-accent); outline-offset: 2px; }
.lg-cards.is-open .lg-card small { font-size: 11.5px; font-weight: 700; line-height: 1.35; text-align: center; }
@keyframes lg-flip { from { transform: rotateY(90deg); } }
.lg-balls { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 6px; }
.lg-ball { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px solid var(--lg-ink); border-radius: 50%; background: #fff; font-weight: 900; }
.lg-ball[aria-pressed="true"] { background: var(--lg-lemon); }
.lg-balls.is-open { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.lg-balls.is-open .lg-ball { width: 38px; }
.lg-balls.is-open .lg-ball.is-hit { background: var(--lg-lemon); }
.lg-suitor { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lg-suitor small { display: block; color: #6A726C; font-size: 12px; }
.lg-suitor b { font-size: 18px; font-weight: 900; }
.lg-suitor p { margin: 4px 0 0; font-size: 13px; }
.lg-autobar { margin-top: 10px; }
.lg-autobar i { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: var(--lg-line); }
.lg-autobar b { display: block; height: 100%; background: var(--lg-accent); transform-origin: left; animation: lg-autobar var(--t) linear forwards; }
.lg-autobar small { display: block; margin-top: 3px; color: #6A726C; font-size: 11.5px; }
@keyframes lg-autobar { to { transform: scaleX(0); } }

/* 탭 */
.lg-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.lg-tabs button, .lg-tabs a { padding: 7px 11px; border: 2px solid var(--lg-ink); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--lg-ink); }
.lg-tabs [aria-selected="true"] { background: var(--lg-ink); color: #fff; }
.lg-panel { min-height: 200px; padding: 14px; border: 2px solid var(--lg-ink); border-radius: 16px; background: #fff; }
.lg-panel h4 { margin: 12px 0 6px; font-size: 14px; font-weight: 900; }
.lg-log { display: grid; gap: 5px; max-height: 420px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.lg-log li { display: flex; gap: 8px; padding: 7px 9px; border-radius: 9px; background: var(--lg-paper); font-size: 12.5px; }
.lg-log li em { flex: none; color: var(--lg-accent); font-style: normal; font-weight: 800; }
.lg-log li.is-title, .lg-log li.is-ending { background: #FFF6CC; }
.lg-kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--lg-line); }
.lg-kv b { font-weight: 900; }
.lg-kv .is-debt { color: #C23A2A; }
.lg-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lg-row input { flex: 1 1 120px; min-width: 0; height: 40px; padding: 0 10px; border: 2px solid var(--lg-ink); border-radius: 10px; font: inherit; }
.lg-items, .lg-goods, .lg-ships, .lg-kids { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lg-items li, .lg-ships li, .lg-kids li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--lg-line); border-radius: 11px; }
.lg-items li > div, .lg-ships li > div, .lg-kids li > div { flex: 1; min-width: 0; }
.lg-items b, .lg-ships b, .lg-kids b { display: block; font-size: 13.5px; font-weight: 800; }
.lg-items small, .lg-ships small, .lg-kids small { display: block; color: #6A726C; font-size: 12px; }
.lg-items .lg-ic { width: 28px; height: 28px; }
.lg-goods li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--lg-line); }
.lg-goods span { font-variant-numeric: tabular-nums; color: #3F4741; }
.lg-cargo { display: grid; gap: 6px; padding: 12px; border: 2px dashed var(--lg-ink); border-radius: 12px; background: var(--lg-paper); }
.lg-cargo b { font-size: 15px; font-weight: 900; }
.lg-myship { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #DDEFFB; }
.lg-myship__art { width: 120px; flex: none; }
.lg-myship__art svg { width: 100%; height: auto; }
.lg-myship small { display: block; color: #3F4741; }
.lg-ships__art { width: 64px; flex: none; }
.lg-ships__art svg { width: 100%; height: auto; }
.lg-ships li.is-cur { background: var(--lg-accent-soft); }
.lg-kids .lg-face { width: 40px; height: 40px; border-color: var(--lg-ink); }
.lg-ladder { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.lg-ladder li { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 9px; background: var(--lg-paper); font-size: 12.5px; }
.lg-ladder li b { font-weight: 800; }
.lg-ladder li small { color: #6A726C; }
.lg-ladder li em { color: #3F4741; font-style: normal; font-variant-numeric: tabular-nums; }
.lg-ladder li.is-done { opacity: .55; }
.lg-ladder li.is-now { background: var(--lg-lemon); }
.lg-help p { margin: 0 0 8px; font-size: 13px; }

/* 첫 화면 */
.lg-intro { overflow: hidden; border: 3px solid var(--lg-ink); border-radius: 18px; background: #fff; }
.lg-intro__art { position: relative; }
.lg-intro__art .lg-stage__svg { width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.lg-intro__title { position: absolute; left: 20px; bottom: 18px; padding: 10px 16px; border: 3px solid var(--lg-ink); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--lg-ink); }
.lg-intro__title small { display: block; color: var(--lg-accent); font-size: 12px; font-weight: 800; }
.lg-intro__title h1 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.04em; }
.lg-intro__body { display: grid; gap: 14px; padding: 18px 20px 22px; }
.lg-intro__body p { margin: 0; font-size: 14.5px; }
.lg-intro__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lg-intro__facts li { display: grid; gap: 2px; padding: 10px; border: 2px solid var(--lg-ink); border-radius: 12px; }
.lg-intro__facts .lg-ic { width: 28px; height: 28px; }
.lg-intro__facts b { font-size: 14px; font-weight: 900; }
.lg-intro__facts span { color: #6A726C; font-size: 12px; }
.lg-intro__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.lg-intro__form label { display: grid; gap: 4px; flex: 1 1 200px; font-size: 12.5px; font-weight: 800; }
.lg-intro__form input { height: 44px; padding: 0 12px; border: 2px solid var(--lg-ink); border-radius: 11px; font: inherit; }
.lg-intro__form .lg-btn { min-height: 48px; }

/* 창 · 엔딩 */
.lg-modal { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lg-modal__dim { position: absolute; inset: 0; background: rgba(20, 26, 22, .6); }
.lg-modal__box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 0 0 18px; border: 3px solid var(--lg-ink); border-radius: 18px; background: #fff; box-shadow: 0 8px 0 var(--lg-ink); }
.lg-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 2px solid var(--lg-ink); border-radius: 10px; background: #fff; }
.lg-ending { display: grid; gap: 10px; }
.lg-ending__art { position: relative; border-bottom: 3px solid var(--lg-ink); }
.lg-ending__title { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-width: 70%; padding: 8px 14px; border: 3px solid var(--lg-ink); border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 4px 0 var(--lg-ink); }
.lg-ending__title small { display: block; color: #6A726C; font-size: 12px; }
.lg-ending__title b { font-size: 22px; font-weight: 900; }
.lg-ending__desc { margin: 0 18px; text-align: center; font-weight: 700; }
.lg-ending blockquote { margin: 0 18px; padding: 10px 14px; border-left: 4px solid var(--lg-accent); border-radius: 8px; background: var(--lg-paper); font-size: 13.5px; }
.lg-ending__score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 18px; }
.lg-ending__score span { padding: 8px; border: 2px solid var(--lg-ink); border-radius: 11px; text-align: center; }
.lg-ending__score small { display: block; color: #6A726C; font-size: 11px; }
.lg-ending__score b { font-size: 15px; font-weight: 900; }
.lg-ending h3 { margin: 6px 18px 0; font-size: 15px; font-weight: 900; }
.lg-heirs { display: grid; gap: 8px; margin: 0 18px; }
.lg-heirs .lg-btn { justify-content: flex-start; min-height: 56px; gap: 10px; text-align: left; }
.lg-heirs .lg-btn small { display: block; color: #6A726C; font-size: 12px; font-weight: 500; }
.lg-heirs .lg-face { width: 40px; height: 40px; border-color: var(--lg-ink); }
.lg-ending .lg-link { margin: 0 18px; }
.lg-celebrate { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lg-celebrate > div { display: grid; justify-items: center; gap: 4px; padding: 18px 28px; border: 3px solid var(--lg-ink); border-radius: 18px; background: var(--lg-lemon); box-shadow: 0 6px 0 var(--lg-ink); animation: lg-pop .6s ease-out; }
.lg-celebrate svg { width: 48px; height: 48px; }
.lg-celebrate small { font-weight: 800; }
.lg-celebrate b { font-size: 26px; font-weight: 900; }
.lg-celebrate.is-out { opacity: 0; transition: opacity .4s; }
.lg-toast { position: fixed; left: 50%; bottom: 24px; z-index: 9999; max-width: min(92vw, 460px); padding: 11px 18px; border-radius: 12px; background: var(--lg-ink); color: #fff; font-size: 14px; font-weight: 700; text-align: center; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.lg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.lg-toast.is-good { background: var(--lg-accent); }
.lg-toast.is-warn, .lg-toast.is-bad { background: var(--lg-coral); }
.lg-tip { position: fixed; z-index: 10000; max-width: 250px; padding: 8px 12px 9px; border-radius: 10px; background: var(--lg-ink, #141A16); color: #fff; font-family: "Noto Sans KR", sans-serif; font-size: 12.5px; line-height: 1.55; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.lg-tip.is-on { opacity: 1; transform: none; }
.lg-tip b { display: block; color: #FFE15A; font-size: 13px; font-weight: 900; }
.lg-tip span { display: block; margin-top: 2px; color: #E6EAE7; }
.lg-tip::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #141A16; }
.lg-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #141A16; }

/* 무대 장면 움직임 */
.lg-stage__svg g[class^="lg-"] { transform-box: fill-box; transform-origin: center; animation-delay: calc(var(--i, 0) * -.45s); }
.lg-walk__f1 { display: none; }
.lg-twinkle { animation: lg-twinkle 1.6s steps(2) infinite; }
@keyframes lg-twinkle { 50% { opacity: .2; } }
.lg-fly { animation: lg-fly 2.6s ease-in-out infinite; }
@keyframes lg-fly { 50% { transform: translate(6px, -5px); } }
.lg-drift { animation: lg-drift 9s ease-in-out infinite alternate; }
@keyframes lg-drift { to { transform: translateX(16px); } }
.lg-fog { animation: lg-drift 6s ease-in-out infinite alternate; }
.lg-rain { animation: lg-rain .6s linear infinite; }
@keyframes lg-rain { from { transform: translate(2px, -14px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-4px, 16px); opacity: .2; } }
.lg-flash { animation: lg-flash 3.2s steps(1) infinite; }
@keyframes lg-flash { 0%, 64%, 74%, 82%, 100% { opacity: 0; } 66%, 78% { opacity: 1; } }
.lg-rock { animation: lg-rock 2.4s ease-in-out infinite; transform-origin: center bottom; }
@keyframes lg-rock { 50% { transform: rotate(-3deg) translateY(2px); } }
.lg-spin { animation: lg-spin 1.2s linear infinite; transform-origin: center bottom !important; }
@keyframes lg-spin { to { transform: rotate(360deg); } }
.lg-flag { animation: lg-flag .8s steps(2) infinite; transform-origin: left center !important; }
@keyframes lg-flag { 50% { transform: scaleX(.85); } }
.lg-flick { animation: lg-twinkle .5s steps(2) infinite; }
.lg-float { animation: lg-float 3s ease-in-out infinite; }
@keyframes lg-float { 50% { transform: translateY(-5px); } }
.lg-note, .lg-steam { animation: lg-note 2.4s ease-out infinite; }
@keyframes lg-note { from { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }
.lg-splash { animation: lg-twinkle .8s steps(2) infinite; }
.lg-smoke { animation: lg-smoke 2.4s linear infinite; animation-delay: calc(var(--i, 0) * -.6s); }
@keyframes lg-smoke { to { transform: translateY(-40px); opacity: 0; } }
.lg-bubble { animation: lg-bubble 3s linear infinite; animation-delay: calc(var(--i, 0) * -.5s); }
@keyframes lg-bubble { to { transform: translateY(-110px); opacity: 0; } }
.lg-flame__b { opacity: 0; }
.lg-flame__a { animation: lg-fl-a .36s steps(1) infinite; animation-delay: calc(var(--i) * -.12s); }
.lg-flame__b { animation: lg-fl-b .36s steps(1) infinite; animation-delay: calc(var(--i) * -.12s); }
@keyframes lg-fl-a { 50% { opacity: 0; } }
@keyframes lg-fl-b { 50% { opacity: 1; } }
.lg-zz, .lg-say, .lg-q { font: 900 14px "Noto Sans KR", sans-serif; fill: #141A16; }
.lg-say { font-size: 20px; fill: #E2483A; }
.lg-q { font-size: 18px; text-anchor: middle; fill: #24406E; }

/* 순위 페이지 */
.lg-page { padding: 8px 0 40px; }
.lg-page__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lg-page__head h1 { margin: 0; font-size: 24px; font-weight: 900; }
.lg-tabs--page { margin-bottom: 12px; }
.lg-rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lg-rank li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--lg-ink); border-radius: 12px; background: #fff; }
.lg-rank li.is-me { background: var(--lg-lemon); }
.lg-rank em { font-size: 18px; font-style: normal; font-weight: 900; text-align: center; }
.lg-rank b { display: block; font-weight: 900; }
.lg-rank b small { color: #6A726C; font-size: 12px; font-weight: 500; }
.lg-rank span { display: block; color: #3F4741; font-size: 12.5px; }
.lg-rank strong { font-weight: 900; font-variant-numeric: tabular-nums; }

/* 바쁠 때 · 좁은 화면 · 움직임 줄이기 */
.lifegame.is-busy .lg-roll__btn { cursor: progress; }
@media (max-width: 960px) {
  .lg-main { grid-template-columns: 1fr; }
  .lg-only-pc { display: none; }
  .lg-only-m { display: inline; }
  .lg-left { max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .lg-board { gap: 2px; padding: 4px; border-radius: 12px; }
  .lg-tile { border-width: 1.5px; border-radius: 6px; }
  .lg-tile { padding: 0; gap: 0; }
  .lg-tile .lg-ic, .lg-tile.is-corner .lg-ic { width: 46%; }
  .lg-tile span, .lg-tile.is-corner span { font-size: 8.5px; letter-spacing: -.08em; line-height: 1.05; }
  .lg-tile.is-corner { border-width: 2px; }
  .lg-token { width: calc((100% - 8px) / 9); height: calc((100% - 8px) / 9); margin: 4px; }
  .lg-center { margin: 3px; gap: 4px; }
  .lg-stage { border-width: 2px; border-radius: 8px; }
  .lg-sqname { top: 4px; left: 4px; padding: 1px 6px 1px 3px; font-size: 11.5px; border-width: 1.5px; box-shadow: none; }
  .lg-sqname .lg-ic { width: 14px; height: 14px; }
  .lg-tray { gap: 6px; padding: 4px; border-radius: 8px; }
  .lg-dice { gap: 3px; }
  .lg-dice .lg-die { width: 32px; height: 32px; }
  .lg-roll__btn { min-height: 38px; padding: 0 8px; font-size: 14px; border-radius: 9px; }
  .lg-roll__btn.is-wait { font-size: 12px; }
  .lg-life__chips { display: none; }
  .lg-hud { padding: 10px; }
  .lg-hud__stats > span { height: 30px; padding: 0 7px; }
  .lg-intro__facts { grid-template-columns: 1fr; }
  .lg-intro__title h1 { font-size: 22px; }
  .lg-ending__score { grid-template-columns: repeat(2, 1fr); }
  .lg-balls { grid-template-columns: repeat(5, 1fr); }
  .lg-ladder li { grid-template-columns: 90px 1fr; }
  .lg-ladder li em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lifegame *, .lifegame *::before, .lifegame *::after { animation: none !important; transition: none !important; } }

/* 판 가운데: 인생 연표 · 배 · 짐 */
.lg-life { padding: 8px 10px 10px; border: 2px solid var(--lg-ink); border-radius: 12px; background: rgba(255, 255, 255, .94); }
.lg-life__bar { position: relative; height: 12px; margin: 16px 4px 2px; border: 2px solid var(--lg-ink); border-radius: 99px; background: #E4EEF8; }
.lg-life__fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #8CC8F5, var(--lg-accent)); }
.lg-life__mark { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--lg-ink); cursor: help; }
.lg-life__mark.is-retire { background: #9AA29B; }
.lg-life__mark.is-wed { width: 10px; height: 10px; top: -1px; margin-left: -5px; border: 2px solid var(--lg-ink); border-radius: 50%; background: #E2486A; }
.lg-life__mark.is-kid { width: 8px; height: 8px; top: 0; margin-left: -4px; border: 2px solid var(--lg-ink); border-radius: 50%; background: var(--lg-lemon); }
.lg-life__me { position: absolute; bottom: calc(100% + 3px); transform: translateX(-50%); padding: 0 6px; border-radius: 6px; background: var(--lg-ink); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.lg-life__ages { display: flex; justify-content: space-between; color: #6A726C; font-size: 10.5px; }
.lg-life__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lg-life__chips span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; border: 1.5px solid var(--lg-ink); border-radius: 99px; background: #fff; font-size: 11.5px; font-weight: 700; cursor: help; }
.lg-life__chips .lg-ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .lg-life { padding: 4px 6px 6px; border-radius: 8px; } .lg-life__bar { margin-top: 14px; height: 9px; } .lg-life__chips span { font-size: 10.5px; } }

/* 배경음 단추 */
.lg-music { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #AEB8B1; font-size: 17px; font-weight: 900; }
.lg-music.is-on { background: var(--lg-lemon); color: var(--lg-ink); }
@media (max-width: 640px) { .lg-music { width: 30px; height: 30px; } }

/* 사건 팝업: 화면 가운데 · 도트 장면 크게 · 도장 찍히듯 제목 · 튀는 동전 · 별 · 하트 */
.lg-pop { position: fixed; inset: 0; z-index: 9980; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lg-pop__dim { position: absolute; inset: 0; background: rgba(20, 26, 22, .38); animation: lg-ev-in .2s ease-out; }
.lg-pop.is-out { opacity: 0; transition: opacity .25s; }
.lg-pop__box { position: relative; width: min(460px, 100%); border: 3px solid var(--lg-ink); border-radius: 18px; background: #fff; box-shadow: 0 8px 0 var(--lg-ink); overflow: visible; animation: lg-pop-in .48s cubic-bezier(.2, 1.5, .4, 1) both; }
.lg-pop.is-good .lg-pop__box { border-color: #0D6B39; box-shadow: 0 8px 0 #0D6B39, 0 0 0 6px rgba(255, 225, 90, .35); }
.lg-pop.is-bad .lg-pop__box { border-color: #A8352A; box-shadow: 0 8px 0 #A8352A; }
.lg-pop__box.is-hit { animation: lg-pop-in .48s cubic-bezier(.2, 1.5, .4, 1) both, lg-hit .5s steps(2) .45s; }
.lg-pop__art { position: relative; overflow: hidden; border-bottom: 3px solid var(--lg-ink); border-radius: 15px 15px 0 0; background: #8CC8F5; }
.lg-pop__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 225, 90, .4), transparent 60%); animation: lg-ev-flash .9s ease-out both; pointer-events: none; }
.lg-pop.is-bad .lg-pop__art::after { background: radial-gradient(circle at 50% 55%, rgba(240, 83, 63, .45), transparent 60%); }
.lg-pop__art .lg-stage__svg { display: block; width: 100%; height: auto; }
.lg-pop__title { position: absolute; left: 50%; top: -18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px 5px 8px; border: 3px solid var(--lg-ink); border-radius: 99px; background: var(--lg-lemon); font-size: 19px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 4px 0 var(--lg-ink); animation: lg-stamp-x .5s cubic-bezier(.2, 1.6, .4, 1) .12s both; }
.lg-pop.is-good .lg-pop__title { background: #7FE3B0; }
.lg-pop.is-bad .lg-pop__title { background: #FFB3A6; }
.lg-pop__title .lg-ic { width: 24px; height: 24px; }
@keyframes lg-stamp-x { 0% { transform: translateX(-50%) scale(2.2) rotate(-8deg); opacity: 0; } 60% { transform: translateX(-50%) scale(.92) rotate(2deg); opacity: 1; } 100% { transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes lg-pop-in { 0% { transform: scale(.6) translateY(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lg-pop__body { display: grid; justify-items: center; gap: 8px; padding: 12px 16px 16px; text-align: center; }
.lg-pop__body p { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.lg-pop__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.lg-pop__ok { min-width: 140px; }
.lg-pop__fx { position: absolute; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; }
.lg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border: 2px solid var(--lg-ink); border-radius: 99px; background: #fff; font-size: 14px; font-weight: 900; animation: lg-chip .4s ease-out both; }
.lg-chip:nth-child(2) { animation-delay: .1s; } .lg-chip:nth-child(3) { animation-delay: .2s; } .lg-chip:nth-child(4) { animation-delay: .3s; }
.lg-chip .lg-ic { width: 22px; height: 22px; }
.lg-chip b { font-variant-numeric: tabular-nums; }
.lg-chip.is-up { background: #E3F6EA; color: #0D6B39; }
.lg-chip.is-down { background: #FFE8E4; color: #A8352A; }
.lg-chip.is-item { background: var(--lg-lemon); }
.lg-chip.is-love { background: #FCE3EC; color: #A8285A; }
.lg-chip.is-age { background: #E4EEF8; }
.lg-pt { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; animation: lg-pt-up 1.1s cubic-bezier(.2, .7, .4, 1) var(--d, 0s) both; }
.lg-pt .lg-ic { width: 100%; height: 100%; }
.lg-pt.is-down { animation-name: lg-pt-down; filter: saturate(.5) brightness(.9); }
@keyframes lg-pt-up { 0% { transform: translate(0, 10px) scale(.4); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(var(--dx), calc(var(--dy) * -1.2)) rotate(var(--r)) scale(1.1); } 100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) * -.4)) rotate(var(--r)) scale(.9); opacity: 0; } }
@keyframes lg-pt-down { 0% { transform: translate(0, -30px) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) * 1.2)) rotate(var(--r)) scale(.7); opacity: 0; } }
.lg-pt-item { position: absolute; left: -32px; top: -70px; width: 64px; height: 64px; padding: 5px; border: 3px solid var(--lg-ink); border-radius: 14px; background: var(--lg-lemon); box-shadow: 0 4px 0 var(--lg-ink); animation: lg-item-pop 1.8s ease-out both; }
.lg-pt-item .lg-ic { width: 100%; height: 100%; }
@keyframes lg-item-pop { 0% { transform: scale(0) rotate(-20deg); } 25% { transform: scale(1.3) rotate(6deg); } 40% { transform: scale(1) rotate(0); } 85% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes lg-ev-in { from { opacity: 0; } }
@keyframes lg-ev-flash { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.4); } }
@keyframes lg-chip { from { transform: translateY(8px) scale(.8); opacity: 0; } }
@keyframes lg-hit { 0%, 100% { transform: none; } 20% { transform: translate(-7px, 2px) rotate(-1deg); } 40% { transform: translate(6px, -2px) rotate(1deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
/* 상단으로 날아가는 동전 · 별 · 하트 */
.lg-fly { position: fixed; left: 0; top: 0; z-index: 9999; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.lg-fly .lg-ic { width: 100%; height: 100%; }
.lg-hud__stats > span.is-bump { animation: lg-bump .28s ease-out; }
.lg-hud__stats > span.is-bump b { color: #7FE3B0 !important; }
.lg-hud__stats > span.is-drop { animation: lg-hit .45s steps(2); }
.lg-hud__stats > span.is-drop b { color: #FF8A78 !important; }
@keyframes lg-bump { 40% { transform: scale(1.14); box-shadow: 0 0 0 3px rgba(255, 225, 90, .6); } }
@media (max-width: 640px) {
  .lg-pop { padding: 12px; }
  .lg-pop__title { font-size: 16px; top: -16px; }
  .lg-pop__title .lg-ic { width: 20px; height: 20px; }
  .lg-pop__body { padding: 10px 12px 12px; }
  .lg-pop__body p { font-size: 13px; }
  .lg-chip { font-size: 12.5px; }
  .lg-chip .lg-ic { width: 18px; height: 18px; }
}

/* 행운 상점(레이어 창) · 상단 단추 · 가운데 굴리기의 운명의 주사위 · 황금 주사위 · 수호 부적 */
.lg-shopbtn { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; background: var(--lg-lemon); color: var(--lg-ink); font-size: 13px; font-weight: 900; }
.lg-shopbtn .lg-ic { width: 20px; height: 20px; }
.lg-shop { padding: 18px 18px 4px; }
.lg-shop__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 20px; font-weight: 900; }
.lg-shop__h .lg-ic { width: 26px; height: 26px; }
.lg-shop__note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border: 2px dashed var(--lg-ink); border-radius: 12px; background: #FFF8D6; font-size: 13px; }
.lg-shop__note .lg-ic { width: 22px; height: 22px; }
.lg-shop__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lg-shop__list li { display: flex; align-items: center; gap: 10px; padding: 10px; border: 2px solid var(--lg-ink); border-radius: 13px; background: #fff; }
.lg-shop__list li.is-off { background: var(--lg-paper); }
.lg-shop__ic { display: flex; flex: none; width: 44px; height: 44px; padding: 5px; border: 2px solid var(--lg-ink); border-radius: 11px; background: var(--lg-lemon); }
.lg-shop__ic .lg-ic { width: 100%; height: 100%; }
.lg-shop__list li > div { flex: 1; min-width: 0; }
.lg-shop__list b { display: block; font-size: 14.5px; font-weight: 900; }
.lg-shop__list small { display: block; color: #4A524C; font-size: 12px; line-height: 1.45; }
.lg-shop__list em { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 6px; background: #E9ECE8; color: #6A726C; font-size: 11px; font-style: normal; font-weight: 700; }
.lg-shop__list .lg-btn { flex: none; white-space: nowrap; }
.lg-boost { display: flex; align-items: center; gap: 4px; }
.lg-boost:empty { display: none; }
.lg-boost select { height: 44px; padding: 0 6px; border: 2px solid var(--lg-ink); border-radius: 10px; background: var(--lg-lemon); font: inherit; font-size: 18px; font-weight: 900; }
.lg-boost__shield { display: flex; width: 34px; height: 34px; padding: 4px; border: 2px solid var(--lg-ink); border-radius: 10px; background: #E4EEF8; animation: lg-twinkle 1.6s steps(2) infinite; }
.lg-boost__shield .lg-ic { width: 100%; height: 100%; }
.lifegame .lg-roll__btn.is-gold { background: linear-gradient(180deg, #FFE15A, #F2B33A); color: var(--lg-ink); }
@media (max-width: 640px) {
  .lg-shopbtn { height: 30px; padding: 0 8px 0 4px; font-size: 12px; }
  .lg-shopbtn span { display: none; }
  .lg-boost select { height: 34px; font-size: 15px; }
  .lg-boost__shield { width: 28px; height: 28px; }
}