/* Shared chips, class cards, mode cards, match list (login / character creation / arena master): lavender paper cards, silver selection rim. */
.conn { font-size: var(--fs-body); font-weight: 700; padding: 3px 12px; border-radius: 12px; border: 2px solid; background: rgba(244, 243, 247, 0.6); }
.conn.ok { color: #1f6a2a; border-color: #3fa04a; }
.conn.bad { color: #9a1f24; border-color: #c2343a; }
.small { font-size: var(--fs-body); }
.class-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 700px) { .class-row { grid-template-columns: 1fr; } }
.class-card, .mode-card, .match { color: var(--ink); background: linear-gradient(#e0dfe9, #bbb8d0); border: 2px solid #716c94; border-radius: 8px; box-shadow: inset 0 1px 0 #f2f2f6, 0 2px 4px rgba(40, 38, 56, 0.3); }
.class-card { display: flex; gap: 10px; text-align: left; padding: 10px; transition: all 0.12s; }
.class-card:hover { border-color: #6a6395; background: linear-gradient(#e6e5ee, #c5c2d6); }
.class-card.on, .mode-card.on { border-color: #6a6395; background: linear-gradient(#dfdee9, #b6b3cc); box-shadow: inset 0 0 0 1px #d6d4e3, 0 0 14px rgba(143, 138, 177, 0.65); }
.cc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-body b { font-size: var(--fs-title); color: #282638; }
.cc-skills { display: flex; gap: 4px; margin: 3px 0; }
.cc-weap { font-size: var(--fs-small); color: #55526d; line-height: 1.3; }
.tag { align-self: flex-start; font-size: var(--fs-small); font-weight: 700; padding: 1px 8px; border-radius: 10px; color: #e1dfea; background: linear-gradient(#403c59, #2b283c); }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card { text-align: left; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: calc(12.5px * var(--ui-text)); color: #423f5c; }
.mode-card b { color: var(--ink); font-size: var(--fs-title); }
.mode-card.fire { background: linear-gradient(135deg, #f9d9b0, #e8c48f); }
.mode-card.sprite { background: linear-gradient(135deg, #cfe9c4, #b9d9ae); }
.mode-card.on { border-color: #6a6395; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { padding: 4px 13px; border-radius: 14px; font-size: var(--fs-strong); font-weight: 700; color: var(--ink); background: linear-gradient(#d4d2e1, #9691b6); border: 2px solid #524d73; }
.chip.on { background: linear-gradient(#c9c6d9, #8f8ab1 55%, #625c89); border-color: #312e45; }
.actions { margin: 16px 0 10px; }
.btn.big { width: 100%; padding: 13px; font-size: var(--fs-head); border-radius: 22px; }
.join-line { display: flex; gap: 8px; margin-bottom: 8px; }
.join-line input { flex: 1; text-transform: uppercase; }
.match-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 40vh; overflow: auto; }
.match { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; }
.m-main { display: flex; flex-direction: column; }
.blue { color: #2c5cc4; font-weight: 800; }
.red { color: #b3262b; font-weight: 800; }
div.empty { padding: 26px; text-align: center; color: #55526d; border: 2px dashed #716c94; border-radius: 8px; }