/* 티드립 미니게임(/minigame) — 레이아웃 토큰(td-tokens)을 그대로 쓴다. 휴대폰 먼저 */
.td-game { display: grid; gap: var(--td-s-4); }
.td-game__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.td-game__title h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--td-t-2xl); font-weight: 800; letter-spacing: -0.03em; }
.td-game__title h1 .td-icon { color: var(--td-brand-text); }
.td-game__title p { margin: 4px 0 0; color: var(--td-text-3); font-size: var(--td-t-sm); }
.td-game__wallet { display: grid; justify-items: end; padding: 10px 16px; border-radius: var(--td-r-md); background: var(--td-hl); color: #2A2100; }
.td-game__wallet small { font-size: var(--td-t-xs); font-weight: 700; opacity: .75; }
.td-game__wallet b { font-size: var(--td-t-xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.td-game__wallet.is-bump b { animation: td-game-bump .5s var(--td-ease); }
@keyframes td-game-bump { 40% { transform: scale(1.15); } }

.td-game__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.td-game__tabs button { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--td-line); border-radius: var(--td-r-md); background: var(--td-surface); color: var(--td-text-2); font: inherit; font-size: var(--td-t-sm); font-weight: 700; cursor: pointer; }
.td-game__tabs button small { color: var(--td-text-3); font-size: var(--td-t-2xs); font-weight: 600; }
.td-game__tabs button[aria-selected="true"] { border-color: var(--td-brand); background: var(--td-brand-soft); color: var(--td-brand-text); }
.td-game__emoji { font-size: 26px; line-height: 1.1; }

.td-game__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--td-s-4); align-items: start; }
@media (min-width: 1024px) { .td-game__layout { grid-template-columns: minmax(0, 1fr) var(--td-aside, 320px); } }
.td-game__side { display: grid; gap: var(--td-s-4); }
.td-game__panel { display: grid; gap: var(--td-s-4); padding: var(--td-s-5); }
.td-game__rule { margin: 0; color: var(--td-text-2); font-size: var(--td-t-sm); line-height: 1.65; word-break: keep-all; }
.td-game__rule em { font-style: normal; font-weight: 700; color: var(--td-text); }
.td-game__pay { display: block; margin-top: 4px; color: var(--td-text-3); font-size: var(--td-t-xs); }

/* 결과 띠 */
.td-game__result { display: grid; justify-items: center; gap: 6px; padding: var(--td-s-4); border-radius: var(--td-r-md); background: var(--td-surface-2); text-align: center; }
.td-game__result b { font-size: var(--td-t-xl); font-weight: 800; letter-spacing: -0.02em; }
.td-game__result em { font-style: normal; font-size: var(--td-t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.td-game__result.is-win { background: var(--td-brand-soft); color: var(--td-brand-text); }
.td-game__result.is-lose { background: var(--td-hot-soft); color: var(--td-hot-text); }
.td-game__result small { color: var(--td-text-3); font-size: var(--td-t-xs); }
.td-game__result.is-pop { animation: td-game-pop .35s var(--td-ease); }
@keyframes td-game-pop { from { transform: scale(.94); opacity: 0; } }

/* 숫자야구 */
.td-bb__setup, .td-bb__play { display: grid; gap: var(--td-s-3); }
.td-bb__row { display: flex; gap: 8px; align-items: center; }
.td-bb__num { flex: 1; min-width: 0; height: 52px; font-size: 24px; font-weight: 800; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.td-bb__mine { margin: 0; color: var(--td-text-3); font-size: var(--td-t-sm); }
.td-bb__mine b { margin-left: 4px; padding: 2px 10px; border-radius: 8px; background: var(--td-surface-3); color: var(--td-text); font-size: var(--td-t-md); letter-spacing: .2em; }
.td-bb__boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.td-bb__boards h3 { margin: 0 0 6px; color: var(--td-text-3); font-size: var(--td-t-xs); font-weight: 700; }
.td-bb__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; min-height: 40px; counter-reset: bb; }
.td-bb__list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--td-surface-2); counter-increment: bb; }
.td-bb__list li::before { content: counter(bb); color: var(--td-text-3); font-size: var(--td-t-2xs); font-weight: 700; min-width: 14px; }
.td-bb__list li b { flex: 1; font-size: var(--td-t-md); letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.td-bb__sb { display: inline-flex; gap: 4px; }
.td-bb__sb i { padding: 1px 6px; border-radius: 99px; font-size: var(--td-t-2xs); font-style: normal; font-weight: 800; }
.td-bb__sb .is-s { background: var(--td-brand-soft); color: var(--td-brand-text); }
.td-bb__sb .is-b { background: var(--td-hl-soft, #FFF6CC); color: #6B5200; }
.td-bb__list li.is-new { animation: td-game-pop .3s var(--td-ease); }
.td-bb__giveup { justify-self: center; color: var(--td-text-3); }

/* 가위바위보 */
.td-rps__bet { display: grid; gap: 6px; }
.td-rps__amount { width: 120px; flex: none; height: 44px; font-size: var(--td-t-lg); font-weight: 800; text-align: center; }
.td-rps__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-rps__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.td-rps__picks button { display: grid; justify-items: center; gap: 4px; padding: 18px 6px 14px; border: 1px solid var(--td-line); border-radius: var(--td-r-lg); background: var(--td-surface); color: var(--td-text); font: inherit; font-weight: 800; cursor: pointer; transition: transform .12s var(--td-ease), border-color .12s; }
.td-rps__picks button span { font-size: 40px; line-height: 1; }
.td-rps__picks button:hover { border-color: var(--td-brand); transform: translateY(-2px); }
.td-rps__picks button:disabled { opacity: .5; cursor: progress; transform: none; }
.td-rps__stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; }
.td-rps__stage div { display: grid; gap: 4px; }
.td-rps__stage small { color: var(--td-text-3); font-size: var(--td-t-xs); font-weight: 700; }
.td-rps__stage span { font-size: 56px; line-height: 1; }
.td-rps__stage b { color: var(--td-text-3); font-weight: 800; }
.td-rps__stage.is-rolling span { animation: td-rps-shake .18s linear infinite; }
@keyframes td-rps-shake { 50% { transform: translateY(-6px) rotate(-8deg); } }

/* 복권 */
.td-lotto__table { width: 100%; border-collapse: collapse; font-size: var(--td-t-sm); }
.td-lotto__table th, .td-lotto__table td { padding: 7px 10px; border-bottom: 1px solid var(--td-line); text-align: right; font-variant-numeric: tabular-nums; }
.td-lotto__table thead th { color: var(--td-text-3); font-size: var(--td-t-xs); font-weight: 700; }
.td-lotto__table th:first-child { text-align: left; }
.td-lotto__table tbody tr:first-child td:nth-child(2) { color: var(--td-brand-text); font-weight: 800; }
.td-lotto__pool { margin: 0; }
.td-lotto__ticket { position: relative; display: grid; place-items: center; height: 150px; border-radius: var(--td-r-md); overflow: hidden; background: var(--td-hl); color: #2A2100; user-select: none; touch-action: none; }
.td-lotto__answer { display: grid; justify-items: center; gap: 4px; text-align: center; }
.td-lotto__answer b { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; }
.td-lotto__answer span { font-size: var(--td-t-md); font-weight: 700; }
.td-lotto__cover { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.td-lotto__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.td-lotto__actions .td-btn { flex: 1; }

/* 옆 칸 */
.td-game__rank { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.td-game__rank li { display: flex; align-items: center; gap: 8px; padding: 7px 4px; font-size: var(--td-t-sm); }
.td-game__rank li b { font-weight: 700; }
.td-game__rank li em { margin-left: auto; color: var(--td-brand-text); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.td-game__recent { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.td-game__recent li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "g t d" "g s s"; column-gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--td-line); font-size: var(--td-t-sm); }
.td-game__recent li:last-child { border-bottom: 0; }
.td-game__recent span { grid-area: g; color: var(--td-text-3); font-size: var(--td-t-xs); }
.td-game__recent b { grid-area: t; font-weight: 700; }
.td-game__recent em { grid-area: d; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.td-game__recent em.is-plus { color: var(--td-brand-text); }
.td-game__recent em.is-minus { color: var(--td-hot-text); }
.td-game__recent small { grid-area: s; color: var(--td-text-3); font-size: var(--td-t-2xs); }
.td-game__note { margin: 0; text-align: center; }