/* =====================================================================
 * 01 掼蛋计分升级 · 独立视觉：牌桌绿呢 / 双队升级阶梯
 * 记录台 + 四人牌桌俯视 + 13 级阶梯三栏，与批次4各页版式不共用。
 * ===================================================================== */

.hc.hc--gd { --hc-a: #2b684b; --hc-a-soft: #e5f0e9; --gd-felt: #1f4a37; }
:root[data-theme="dark"] .hc.hc--gd { --hc-a: #7cc79c; --hc-a-soft: #1a3227; --gd-felt: #10251c; }

.gd-hero { padding-top: 34px; }
.gd-head { max-width: 850px; }
.gd-bench { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.16fr) minmax(190px, .78fr); gap: 16px; margin-top: 26px; align-items: start; }

/* ---------- 记录台 ---------- */
.gd-console, .gd-ladder {
    padding: 18px; border: 1px solid var(--hc-line); border-radius: var(--hc-r);
    background: var(--hc-card); box-shadow: var(--hc-shadow);
}
.gd-panel-title {
    font-family: var(--hc-serif); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--hc-a); padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px dashed var(--hc-line);
}
.gd-rank-grid { display: grid; gap: 7px; }
.gd-rank {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 11px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm);
    background: var(--hc-card-2);
}
.gd-rank:nth-child(1) { border-left: 3px solid var(--hc-warm); }
.gd-rank:nth-child(4) { border-left: 3px solid var(--hc-danger); }
.gd-rank-n { font-size: 12.5px; font-weight: 650; color: var(--hc-ink-2); }
.gd-rank select { width: 96px; padding: 5px 8px; font-size: 12.5px; }
.gd-fields { grid-template-columns: 1fr 1fr; }
.gd-switches { display: grid; gap: 7px; margin-top: 14px; }
.gd-switches .hc-check { padding: 7px 10px; }
.gd-switches .hc-check b { font-size: 12.5px; }
.gd-console .hc-btn { flex: 1 1 auto; font-size: 12.5px; padding: 9px; }

/* ---------- 牌桌 ---------- */
.gd-table {
    border: 1px solid var(--hc-line); border-radius: var(--hc-r);
    background: var(--hc-card); box-shadow: var(--hc-shadow); overflow: hidden;
}
.gd-table-head, .gd-table-foot {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 11px 17px; font-family: var(--hc-serif); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-muted);
}
.gd-table-head { border-bottom: 1px solid var(--hc-line-2); }
.gd-table-foot { border-top: 1px solid var(--hc-line-2); font-family: var(--hc-sans); letter-spacing: 0; font-size: 11.5px; }
.gd-table-head span:last-child { font-family: var(--hc-sans); letter-spacing: 0; font-size: 12px; color: var(--hc-a); font-weight: 700; }
.gd-table-foot span:last-child { color: var(--hc-a); font-weight: 700; }
#gdSvg { display: block; width: 100%; height: auto; background: var(--hc-card-2); }
.gd-felt-outer { fill: #8a6a3c; opacity: .55; }
.gd-felt { fill: var(--gd-felt); stroke: rgba(255,255,255,.12); stroke-width: 2; }
.gd-seat circle { stroke-width: 2.5; transition: fill .25s, stroke .25s; }
.gd-seat--a circle { fill: #f0ded0; stroke: #b9603f; }
.gd-seat--b circle { fill: #dbe7f0; stroke: #3f72a8; }
.gd-seat.is-top circle { stroke: var(--hc-warm); stroke-width: 4; }
.gd-seat.is-last circle { stroke: var(--hc-danger); stroke-width: 4; }
.gd-seat-t { font-size: 12px; font-weight: 700; fill: var(--hc-ink); }
.gd-seat-r { font-size: 9.5px; fill: var(--hc-muted); }
.gd-card { fill: var(--hc-card); stroke: var(--hc-ink-2); stroke-width: 1.5; }
.gd-card-level { fill: var(--hc-ink); font-family: var(--hc-serif); font-size: 34px; font-weight: 700; }
.gd-card-suit { fill: #b8413c; font-size: 24px; }
.gd-card-note { fill: var(--hc-muted); font-size: 10px; }
.gd-table-note { fill: var(--hc-muted); font-size: 10.5px; }
.gd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.gd-dot--a { background: #b9603f; }
.gd-dot--b { background: #3f72a8; }

/* ---------- 阶梯 ---------- */
.gd-ladder { padding: 16px 14px; }
.gd-ladder-head, .gd-ladder-row {
    display: grid; grid-template-columns: 34px 1fr 1fr; gap: 5px; align-items: center;
}
.gd-ladder-head { font-size: 10.5px; color: var(--hc-muted); padding-bottom: 7px; border-bottom: 1px dashed var(--hc-line); text-align: center; }
.gd-ladder-rows { display: grid; gap: 3px; margin-top: 7px; }
.gd-ladder-row { font-size: 11.5px; }
.gd-ladder-row .lv { font-family: var(--hc-serif); font-weight: 700; color: var(--hc-ink-2); text-align: center; }
.gd-ladder-row .cell {
    height: 17px; border-radius: 4px; background: var(--hc-card-2);
    border: 1px solid var(--hc-line-2);
}
.gd-ladder-row.is-a .cell-a { background: var(--hc-a); border-color: var(--hc-a); }
.gd-ladder-row.is-b .cell-b { background: #3f72a8; border-color: #3f72a8; }
.gd-ladder-row.is-both .cell-a, .gd-ladder-row.is-both .cell-b { opacity: .85; }
.gd-ladder-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hc-line); font-size: 11px; line-height: 1.65; color: var(--hc-muted); }

/* ---------- 结果 ---------- */
.gd-verdict { margin-top: 14px; }
.gd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.gd-card-box { padding: 18px 19px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r); background: var(--hc-card); box-shadow: var(--hc-shadow-sm); }
.gd-card-box .tag { font-family: var(--hc-serif); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-a); }
.gd-card-box h3 { margin: 7px 0 9px; font-size: 17px; }
.gd-card-box p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--hc-ink-2); }
.gd-card-box ul { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--hc-ink-2); }
.gd-card-box li { margin-bottom: 5px; }

@media (max-width: 1100px) {
    .gd-bench { grid-template-columns: 1fr 1fr; }
    .gd-ladder { grid-column: 1 / -1; }
    .gd-ladder-rows { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .gd-bench { grid-template-columns: 1fr; }
    .gd-ladder { grid-column: auto; }
    .gd-ladder-rows { grid-template-columns: 1fr; }
    .gd-cards { grid-template-columns: 1fr; }
    .gd-console, .gd-ladder { padding: 15px; }
}