/* ═══════════════════════════════════════════════════════════════════════════
   QUICK-REFERENCE RULES PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.qs-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qs-heading {
    font-family: 'Noto Serif', serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 4px;
    opacity: 0.80;
}

/* ── Piece rows ──────────────────────────────────────────────────────────── */
.qs-piece {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(197, 160, 89, 0.05);
    border: 1px solid rgba(197, 160, 89, 0.12);
    border-radius: 8px;
}

.qs-icon-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.qs-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: transparent;
    object-fit: cover;
}

.qs-icon-wrapper::after {
    display: none;
}

.qs-piece-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.qs-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.qs-zh {
    font-family: 'Noto Serif', serif;
    font-size: 0.75rem;
    color: var(--gold);
    font-weight: 400;
    margin-left: 5px;
    opacity: 0.80;
}

.qs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Small coloured tags */
.qtag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.qtag-palace  { background: rgba(120, 60, 180, 0.28); color: #c8a0ff; border: 1px solid rgba(120,60,180,0.40); }
.qtag-river   { background: rgba(30, 90, 180, 0.28);  color: #80b8ff; border: 1px solid rgba(30,90,180,0.40); }
.qtag-move    { background: rgba(197, 160, 89, 0.14); color: var(--gold); border: 1px solid rgba(197,160,89,0.30); }
.qtag-power   { background: rgba(180, 50, 50, 0.28);  color: #ff9090; border: 1px solid rgba(180,50,50,0.40); }
.qtag-unique  { background: rgba(30, 140, 110, 0.28); color: #70e0b8; border: 1px solid rgba(30,140,110,0.40); }
.qtag-warn    { background: rgba(180, 120, 20, 0.25); color: #f0c060; border: 1px solid rgba(180,120,20,0.40); }

/* ── Board fact rows ─────────────────────────────────────────────────────── */
.qs-fact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(240, 237, 232, 0.68);
    line-height: 1.50;
    padding: 6px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

.qs-fact-row:last-child { border-bottom: none; }

.qs-fact-icon {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.70;
}

.qs-fact-row strong { color: var(--text-main); }

/* ── Special rule rows ───────────────────────────────────────────────────── */
.qs-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    font-size: 0.77rem;
    color: rgba(240, 237, 232, 0.65);
    line-height: 1.55;
    padding: 6px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

.qs-rule:last-child { border-bottom: none; }

/* Text column — flex:1 keeps it from shrinking; text wraps at the same left
   edge, never under the badge; long words break rather than overflow */
.qs-rule > span:last-child {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.qs-rule strong { color: var(--text-main); }

/* Compact rule badge — fixed width aligns all description columns */
.qbadge {
    flex-shrink: 0;
    width: 60px;
    text-align: center;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.6;
    white-space: nowrap;  /* badge label never wraps inside the pill */
    align-self: center;
}

.qbadge-illegal  { background: rgba(180, 30, 30, 0.30); color: #ff8080; border: 1px solid rgba(180,30,30,0.45); }
.qbadge-banned   { background: rgba(180, 80, 20, 0.30); color: #ffb060; border: 1px solid rgba(180,80,20,0.45); }
.qbadge-draw     { background: rgba(60, 60, 180, 0.28); color: #9090ff; border: 1px solid rgba(60,60,180,0.40); }
.qbadge-warn     { background: rgba(180, 140, 20, 0.28); color: #f0cc60; border: 1px solid rgba(180,140,20,0.40); }
/* Enforcement-status badges */
.qbadge-ok       { background: rgba(30, 130, 50, 0.28); color: #80e898; border: 1px solid rgba(30,130,50,0.40); }
.qbadge-partial  { background: rgba(130, 100, 20, 0.28); color: #d4b860; border: 1px solid rgba(130,100,20,0.40); }
.qbadge-manual   { background: rgba(80, 80, 80, 0.25);  color: #909090; border: 1px solid rgba(80,80,80,0.38); }

/* ── Outcome rows ────────────────────────────────────────────────────────── */
.qs-outcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.50;
}

.qs-outcome-icon {
    font-size: 0.80rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.qs-outcome strong { display: inline; }

.qs-win  { background: rgba(30, 80, 30, 0.28);  border: 1px solid rgba(80,180,80,0.22);  color: rgba(240,237,232,0.72); }
.qs-draw { background: rgba(40, 40, 100, 0.28); border: 1px solid rgba(100,100,220,0.22); color: rgba(240,237,232,0.72); }
.qs-loss { background: rgba(80, 15, 15, 0.28);  border: 1px solid rgba(180,50,50,0.22);  color: rgba(240,237,232,0.72); }

.qs-win  .qs-outcome-icon { color: #7ddf7d; }
.qs-draw .qs-outcome-icon { color: #8888ff; }
.qs-loss .qs-outcome-icon { color: #e07070; }

.qs-win  strong { color: #7ddf7d; }
.qs-draw strong { color: #9898ff; }
.qs-loss strong { color: #e07070; }

/* ═══════════════════════════════════════════════════════════════════════════