/* 대전 공통 UI — pvp-test.html 에서 추출 */


.card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:20px;margin-bottom:16px;
}
.card h2{font-size:.95rem;margin-bottom:12px}

.pvp label{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:4px}
.pvp input{
  width:100%;font-family:inherit;font-size:1rem;padding:11px 13px;
  border:1px solid var(--rule);border-radius:9px;
  background:var(--paper);color:var(--ink);margin-bottom:12px;
}
.pvp input:focus{outline:none;border-color:var(--ink)}
.pvp input.code{
  font-family:var(--font-num);font-size:1.3rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;text-align:center;
}

.btn{
  font-family:inherit;font-size:.93rem;font-weight:600;
  padding:12px 18px;border-radius:9px;cursor:pointer;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--full{width:100%}
.btn:disabled{opacity:.35;cursor:default}
.btn+.btn{margin-top:8px}

.mycode{
  font-family:var(--font-num);font-weight:900;
  font-size:2.4rem;letter-spacing:.2em;text-align:center;
  padding:18px 0;background:var(--paper);
  border:1px dashed var(--rule);border-radius:12px;margin-bottom:12px;
}

.seats{display:flex;gap:10px;margin-bottom:14px}
.seat{
  flex:1;border:1px solid var(--rule);border-radius:10px;
  padding:12px;text-align:center;background:var(--paper);
}
.seat[data-me="1"]{border-color:var(--ink)}
.seat-name{font-weight:700;font-size:.95rem}
.seat-tag{font-size:.74rem;color:var(--ink-soft);margin-top:2px}
.seat-score{
  font-family:var(--font-num);font-weight:900;font-size:1.6rem;margin-top:6px;
}

/* 대전 패널 */
.arena{
  width:100%;aspect-ratio:16/10;min-height:220px;
  border:none;border-radius:14px;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;cursor:pointer;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  font-family:inherit;text-align:center;padding:20px;
  transition:background-color .06s linear;
}
.arena[data-p="wait"]{background:var(--sig-wait);cursor:default}
.arena[data-p="go"]{background:var(--sig-go);color:#0B2716}
.arena[data-p="bad"]{background:var(--sig-bad);color:#2A1B05}
.arena-h{font-size:clamp(1.2rem,4.4vw,1.9rem);font-weight:700;letter-spacing:-.02em}
.arena-s{font-size:.85rem;opacity:.72}

.log{
  margin-top:14px;font-size:.82rem;color:var(--ink-soft);
  max-height:160px;overflow-y:auto;
}
.log div{padding:4px 0;border-bottom:1px solid var(--rule)}
.log div:last-child{border-bottom:none}

.after{margin-top:14px}
.wait-msg{
  font-size:.86rem;color:var(--ink-soft);
  padding:10px 13px;background:var(--paper);
  border:1px solid var(--rule);border-radius:9px;margin-bottom:10px;
}
.rating-box{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:12px 14px; margin-bottom:12px;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
}
.rating-box span{ font-size:.82rem; color:var(--ink-soft); }
.rating-box b{ font-family:var(--font-num); font-weight:900; font-size:1.3rem; }

.note{ font-size:.83rem; color:var(--ink-soft); margin-bottom:12px; }

.spin{
  width:34px; height:34px; margin:6px auto 14px;
  border:3px solid var(--rule); border-top-color:var(--ink);
  border-radius:50%; animation:sp .9s linear infinite;
}
@keyframes sp{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spin{ animation:none; } }

.wait-line{ text-align:center; font-size:.95rem; margin-bottom:6px; }

.rating-delta{
  font-family:var(--font-num); font-weight:700; font-size:.9rem;
  padding:8px 12px; margin-top:12px;
  border:1px solid var(--rule); border-radius:9px; text-align:center;
}
.rating-delta.up{ color:#17663a; border-color:#17663a; }
.rating-delta.down{ color:var(--sig-wait); border-color:var(--sig-wait); }

.hide{display:none !important}
.err{
  background:#FBEAE8;border:1px solid #D9A9A3;color:#7E2A22;
  padding:10px 13px;border-radius:9px;font-size:.86rem;margin-bottom:12px;
}
.note{font-size:.8rem;color:var(--ink-soft);margin-top:10px}

/* 모드 탭 */
.mode-tabs{margin-bottom:14px;align-items:center}
.mode-tabs .tab{font-size:.95rem;padding:9px 18px}
.conn{
  margin-left:auto;font-size:.76rem;padding:4px 10px;
  border:1px solid var(--rule);border-radius:999px;color:var(--ink-soft);
}
.conn[data-on="1"]{border-color:var(--accent);color:var(--accent)}

/* a 태그로 쓰는 버튼 */
a.btn{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;
}
a.btn--full{width:100%}
a.btn+a.btn{margin-top:8px}

.pvp-timer{
  text-align:center;font-family:var(--font-num),monospace;
  font-weight:900;font-size:1.6rem;margin-bottom:12px;
}