/* 온라인 대결: 설명창 · 매칭 · 결과 */
.on-box{display:none;margin-top:10px;padding:14px;border-radius:16px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.sheet-body.onon .on-box{display:block}
.sheet-body.onon .ai-only{display:none}
.on-head{display:flex;gap:11px;align-items:center}
.on-head>svg{width:36px;height:36px;padding:8px;border-radius:12px;flex:none;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.on-head b{display:block;font-size:15px;font-weight:900}
.on-head span{display:block;font-size:12.5px;color:var(--t3);margin-top:2px}
.on-rec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--t2);font-weight:600}
.on-rec b{font-weight:900}
.on-head span b{display:inline;font-size:inherit;font-weight:900;color:var(--t1)}
.on-head .link{font-size:12.5px;padding:0;margin-left:2px}
/* 방 목록 */
.on-rooms-h{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px;font-size:13px}
.on-rooms-h b{font-weight:900}
.on-rooms-h span{color:var(--t3);font-weight:700;font-size:12px}
.on-rooms{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:236px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.on-rooms:empty::before{content:"불러오는 중…";display:block;padding:18px 0;text-align:center;font-size:12.5px;color:var(--t3)}
.on-room{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:14px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);text-align:left;animation:pop .35s var(--spring) both}
.on-room:active{transform:scale(.98)}
.on-room-n{flex:1;min-width:0;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.on-room-n small{display:block;margin-top:1px;font-size:11.5px;color:var(--t3);font-weight:700}
.on-tag{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:800;background:rgba(61,220,151,.14);color:var(--win);flex:none}
.on-tag.lock{background:rgba(255,203,87,.14);color:var(--draw)}
.on-tag svg{width:11px;height:11px}
.on-join{flex:none;height:30px;padding:0 12px;display:grid;place-items:center;border-radius:10px;font-size:12.5px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.on-empty{padding:16px 8px;text-align:center;font-size:12.5px;line-height:1.55;color:var(--t3);border-radius:14px;background:var(--s2)}
.on-empty b{color:var(--t1)}
.on-make{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.on-make .btn{height:44px;padding:0 10px;font-size:13.5px;gap:6px}
.on-make .btn svg{width:16px;height:16px}
.on-box small{display:block;margin-top:10px;font-size:11.5px;color:var(--t3);line-height:1.45}

/* 매칭 화면 */
.mm{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 4px}
.mm .cat{margin-top:14px;font-size:12px;font-weight:800;color:var(--c1);filter:brightness(1.25)}
.mm-radar{position:relative;width:176px;height:176px;display:grid;place-items:center}
.mm-radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c1);opacity:0;animation:mmPulse 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.mm-radar i:nth-child(2){animation-delay:.8s}
.mm-radar i:nth-child(3){animation-delay:1.6s}
@keyframes mmPulse{0%{transform:scale(.42);opacity:.9}100%{transform:scale(1);opacity:0}}
.mm-me{position:relative;z-index:1;display:grid;place-items:center;border-radius:50%;box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 22%,transparent),0 10px 30px rgba(0,0,0,.35)}
.mm-title{margin:4px 0 0;font-size:20px;font-weight:900}
.mm-sub{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 0;font-size:13px;color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums}
.mm-sub>i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.mm-sub svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.mm-code{display:flex;gap:8px;justify-content:center;margin-top:18px}
.mm-code span{width:52px;height:64px;display:grid;place-items:center;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1.5px var(--c1);font-size:32px;font-weight:900;font-variant-numeric:tabular-nums;animation:pop .45s var(--spring) both}
.mm-code span:nth-child(2){animation-delay:.05s}
.mm-code span:nth-child(3){animation-delay:.1s}
.mm-code span:nth-child(4){animation-delay:.15s}
.mm-label{margin:18px 0 0;font-size:12.5px;font-weight:800;color:var(--t2)}
.mm-label+.mm-code{margin-top:8px}
.mm-copy{margin-top:12px;height:38px;padding:0 14px;font-size:13px;gap:6px}
.mm-copy svg{width:16px;height:16px}
.mm-tip{margin:14px 0 0;font-size:12.5px;color:var(--t3);line-height:1.5;max-width:300px}
.mm-tip:empty{display:none}
.mm-vs{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px 0 10px;animation:pop .5s var(--spring) both}
.mm-p{display:flex;flex-direction:column;align-items:center;gap:8px;width:112px}
.mm-p b,.on-vs .p b{font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-p b{font-size:14px}
.mm-x{font-size:24px;font-weight:900;font-style:italic;background:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.3)}

/* 결과 */
.on-vs{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.on-vs .p{display:flex;flex-direction:column;align-items:center;gap:6px;width:96px}
.on-vs .p b{font-size:13px}
.on-vs .sc{font-size:30px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
#rmBtn.pulse{animation:rmPulse 1.2s ease-in-out infinite}
@keyframes rmPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c1) 60%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--c1) 0%,transparent)}}

/* 홈 카드 · 프로필 */
.card-live{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:99px;
  background:rgba(8,10,24,.42);color:#fff;font-size:10.5px;font-weight:800;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card-live svg{width:11px;height:11px}
.on-sum{display:flex;align-items:center;gap:8px;margin-top:10px;padding:13px 16px;border-radius:16px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:700;color:var(--t2)}
.on-sum>svg{width:18px;height:18px;color:var(--brand-2)}
.on-sum>span{flex:1}
.on-sum b{font-weight:900}
.on-sum em{font-style:normal;color:var(--t3);font-weight:700;margin-left:4px}