/* Shared chips, class cards, mode cards, match list (login / character creation / arena master): parchment cards, gold selection rim. */
.conn { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 12px; border: 2px solid; background: rgba(255, 250, 235, 0.6); }
.conn.ok { color: #1f6a2a; border-color: #3fa04a; }
.conn.bad { color: #9a1f24; border-color: #c2343a; }
.small { font-size: 12px; }
.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(#f6edd2, #e0d0a8); border: 2px solid #a88a58; border-radius: 8px; box-shadow: inset 0 1px 0 #fffbe9, 0 2px 4px rgba(74, 47, 20, 0.3); }
.class-card { display: flex; gap: 10px; text-align: left; padding: 10px; transition: all 0.12s; }
.class-card:hover { border-color: #d98f1f; background: linear-gradient(#fbf2d8, #ead9ae); }
.class-card.on, .mode-card.on { border-color: #d98f1f; background: linear-gradient(#fff3c8, #f3d98c); box-shadow: inset 0 0 0 1px #fff3b8, 0 0 14px rgba(241, 192, 74, 0.65); }
.cc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-body b { font-size: 16px; color: #4a2f14; }
.cc-skills { display: flex; gap: 4px; margin: 3px 0; }
.cc-weap { font-size: 11px; color: #7a6544; line-height: 1.3; }
.tag { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; color: #f7ecd2; background: linear-gradient(#6b4a2a, #4b3219); }
.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: 12.5px; color: #6a5230; }
.mode-card b { color: var(--ink); font-size: 16px; }
.mode-card.fire { background: linear-gradient(135deg, #f9d9b0, #e8c48f); }
.mode-card.sprite { background: linear-gradient(135deg, #cfe9c4, #b9d9ae); }
.mode-card.on { border-color: #d98f1f; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { padding: 4px 13px; border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--ink); background: linear-gradient(#f4e6bf, #cdb27a); border: 2px solid #8a6636; }
.chip.on { background: linear-gradient(#ffe9a0, #f1c04a 55%, #c98a1c); border-color: #5b3a18; }
.actions { margin: 16px 0 10px; }
.btn.big { width: 100%; padding: 13px; font-size: 18px; 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: #7a6544; border: 2px dashed #a88a58; border-radius: 8px; }