/* 친구와 대결 panel and the countdown, on the page's own skin */
.rc { display: grid; gap: 8px; padding: 10px 12px; margin: 10px 0; border: 1px dashed var(--line); border-radius: 10px; font-size: 13.5px; }
.rc.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.rc-dim { color: var(--muted); font-size: 12.5px; margin: 0; }
.rc-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rc-row input, .rc-row select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; }
.rc-row input[name="code"] { width: 110px; text-transform: uppercase; letter-spacing: 2px; }
.rc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-code { padding: 2px 10px; border-radius: 6px; background: var(--subtle); font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700; letter-spacing: 3px; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc-list li { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto auto; align-items: center; gap: 8px; }
.rc-list li.me .rc-name { font-weight: 700; }
.rc-list li.out { opacity: .6; }
.rc-list small { color: var(--muted); }
.rc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-place { margin-right: 4px; color: var(--accent); }
.rc-bar { height: 8px; border-radius: 4px; background: var(--subtle); overflow: hidden; }
.rc-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s; }
.rc-list li.fin .rc-bar i { background: #2da44e; }
.rc-res { font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.rc-msg { margin: 0; color: #cf222e; font-size: 12.5px; }
.rc-count { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; font-size: 120px; font-weight: 900; color: #fff; text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .25); pointer-events: none; animation: rc-pulse 1s ease-out infinite; }
.rc-count.go { color: #ffcf3f; font-size: 90px; }
@keyframes rc-pulse { from { transform: scale(1.3); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rc-count { animation: none; } }
/* the end of a round, and the others' boards */
.rc-end { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, .35); cursor: pointer; animation: rc-fade .2s; }
.rc-end div { display: grid; justify-items: center; gap: 6px; padding: 22px 34px; border-radius: 20px; background: #fffdf5; color: #3a2a14; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: rc-boom .45s cubic-bezier(.3, 1.6, .5, 1); }
.rc-end b { font-size: 72px; font-weight: 900; letter-spacing: 4px; line-height: 1; }
.rc-end.win b { color: #f5b301; text-shadow: 0 4px 0 #c47f00, 0 0 24px rgba(255, 200, 0, .6); }
.rc-end.lose b { color: #8a8f99; text-shadow: 0 4px 0 #5b606a; }
.rc-end span { font-size: 15px; font-weight: 600; }
.rc-peers { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-peer { margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.rc-peer figcaption { font-size: 12px; margin-bottom: 4px; }
.rc-peer.out { opacity: .55; }
.rc-peer.won { border-color: #2da44e; box-shadow: 0 0 0 2px rgba(45, 164, 78, .25); }
@keyframes rc-fade { from { opacity: 0; } }
@keyframes rc-boom { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
/* 지뢰찾기 seen from the other side */
.mines-peer { display: grid; grid-template-columns: repeat(var(--n), var(--s)); grid-auto-rows: var(--s); gap: 1px; }
.mines-peer i { display: grid; place-items: center; border-radius: 2px; background: color-mix(in srgb, var(--muted) 45%, var(--bg)); font-style: normal; font-size: calc(var(--s) * 0.75); font-weight: 700; line-height: 1; }
.mines-peer i.o { background: var(--subtle); }
.mines-peer i.f { background: #f2a33a; }
.mines-peer i.x { background: #e5484d; }
.mines-peer .n1 { color: #0969da; } .mines-peer .n2 { color: #1a7f37; } .mines-peer .n3 { color: #cf222e; } .mines-peer .n4 { color: #8250df; }
/* 랭크 대전: the tier card, the queue, the ranking */
.rc-rank .rc-head b { font-size: 14px; }
.rc-tier { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--bg)); font-weight: 700; font-size: 13px; }
.rc-tier.placing { background: var(--subtle); color: var(--muted); }
.rc-clock { font-variant-numeric: tabular-nums; color: var(--accent); }
.rc-end .rc-delta { font-size: 14px; padding: 3px 12px; border-radius: 999px; background: #f1ead6; }
.rc-end .rc-delta.up { color: #1a7f37; }
.rc-end .rc-delta.down { color: #cf222e; }
.rc-modal { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .35); }
.rc-modal > div { width: min(460px, 100%); max-height: 80vh; overflow: auto; display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.rc-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.rc-top li { display: grid; grid-template-columns: 28px 1fr auto 48px auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.rc-top li:nth-child(-n+3) > b { color: var(--accent); }
.rc-top li.me { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); font-weight: 700; }
.rc-top li > span:nth-of-type(3) { text-align: right; font-variant-numeric: tabular-nums; }
.rc-top small { color: var(--muted); }