/* 딱콕 오락실 "친구와 점수 대결" (game-versus.js) */

.tt-vs { min-width: 0; margin: 18px 0 0; padding: 14px; border: 1px solid #d3c7e6; border-radius: 12px; background: #f6f1fd; color: var(--game-ink, #2c2541); }
.tt-vs h3 { margin: 0; }
.tt-game-panel .tt-vs p { margin: 8px 0; }
.tt-vs-lead { color: #4e4264; font-size: .92rem; }
.tt-vs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 8px 0; }
.tt-vs-field { display: inline-flex; flex: 1 1 14rem; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.tt-vs input[type="text"] { box-sizing: border-box; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid #8d809f; border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.tt-vs-nick { flex: 1 1 8rem; width: 100%; max-width: 20rem; }
.tt-vs-code { flex: 1 1 9rem; width: 9rem; letter-spacing: .08em; text-transform: uppercase; }
.tt-vs-link { flex: 1 1 100%; width: 100%; }
.tt-vs button { min-height: 44px; touch-action: manipulation; }
.tt-vs-head { overflow-wrap: anywhere; }
.tt-vs-code-text { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.tt-vs-hint { min-width: 0; color: #4e4264; font-size: .9rem; }
.tt-vs-note { min-height: 1.4em; color: #4e4264; overflow-wrap: anywhere; }
.tt-vs-note a { color: #53386d; font-weight: 700; }

.tt-vs-list, .tt-vs-people, .tt-vs-ranks { margin: 8px 0; padding: 0; list-style: none; }
.tt-vs-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e4daf0; }
.tt-vs-list li span { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.tt-vs-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid #e4daf0; }
.tt-vs-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.tt-vs-tag { padding: 1px 8px; border-radius: 999px; background: #e7dcf5; color: #53386d; font-size: .8rem; white-space: nowrap; }
.tt-vs-wins { margin-inline-start: auto; color: #564864; font-size: .85rem; white-space: nowrap; }
.is-me > .tt-vs-name { color: #53386d; }

.tt-vs-count { margin: 10px 0; color: #53386d; font-size: 3rem; font-weight: 800; line-height: 1; text-align: center; }
.tt-vs-board { margin: 10px 0; padding: 10px 12px; border: 1px solid #ded6ea; border-radius: 10px; background: #fff; }
.tt-vs-rank { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eee8f4; }
.tt-vs-rank.is-me { background: #f4eefb; }
.tt-vs-place { flex: none; width: 1.6em; color: #53386d; text-align: right; }
.tt-vs-points { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* 게임판 바로 위의 얇은 순위 한 줄: 한 줄 안에서 옆으로 밀어 볼 수 있다. */
.tt-vs-live { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 8px; padding: 4px 8px; border: 1px solid #d3c7e6; border-radius: 10px; background: #f6f1fd; color: #2c2541; font-size: .85rem; line-height: 1.3; }
.tt-vs-live-head { flex: none; color: #53386d; white-space: nowrap; }
.tt-vs-live.is-count .tt-vs-live-head { font-size: 1.3rem; }
.tt-vs-live-list { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; white-space: nowrap; scrollbar-width: none; }
.tt-vs-live-list::-webkit-scrollbar { display: none; }
.tt-vs-live-start { flex: none; min-height: 40px; padding: 4px 12px; font-size: .9rem; pointer-events: auto; }
/* 알림(누가 들어왔다 등)은 한 줄에 가두지 않고 눈에 띄게 줄바꿈해서 보인다. */
.tt-vs-live.is-alert { border-color: #b0561a; background: #fff1de; color: #5a2a05; }
.tt-vs-live.is-alert .tt-vs-live-head { color: #b0561a; }
.tt-vs-live.is-alert .tt-vs-live-list { overflow: visible; white-space: normal; }
.tt-vs-alert { font-weight: 700; }
.tt-vs-chip { flex: none; padding: 2px 8px; border: 1px solid #ded6ea; border-radius: 999px; background: #fff; }
.tt-vs-chip.is-me { border-color: #53386d; background: #ece3f8; font-weight: 700; }
.tt-vs-chip span { font-variant-numeric: tabular-nums; font-weight: 700; }
.tt-vs-chip i { margin-inline-start: 4px; color: #6b5a82; font-size: .78rem; font-style: normal; }

/* 가득 찬 화면(전체 화면): 큰 상자는 숨기고, 순위 줄은 판 위에 얹어 계속 보인다. */
.tt-arcade-full .tt-vs { display: none; }
.tt-arcade-full .tt-vs-live { margin: 0; border-color: rgba(255, 248, 231, .35); background: rgba(22, 16, 43, .82); color: #fff8e7; }
.tt-arcade-full .tt-vs-live-head { color: #ffe9a8; }
.tt-arcade-full .tt-vs-chip { border-color: rgba(255, 248, 231, .4); background: rgba(255, 248, 231, .14); }
.tt-arcade-full .tt-vs-chip.is-me { border-color: #ffe9a8; background: rgba(255, 233, 168, .28); }
.tt-arcade-full .tt-vs-chip i { color: #ffe9a8; }
.tt-arcade-full .tt-vs-live.is-alert { border-color: #ffb36b; background: rgba(90, 42, 5, .92); color: #fff1de; }
.tt-arcade-full .tt-vs-live.is-alert .tt-vs-live-head { color: #ffb36b; }
.tt-arcade-full .tt-arcade-view { position: relative; }
.tt-arcade-full .tt-arcade-view > .tt-vs-live { position: absolute; top: 4px; right: 4px; left: 4px; z-index: 1; pointer-events: none; }