:root {
    --mj-green-950: #0b2e22;
    --mj-green-800: #15563e;
    --mj-green-600: #23835d;
    --mj-red: #b4232f;
    --mj-gold: #d8a72d;
    --mj-ink: #17221d;
    --mj-muted: #66736d;
    --mj-paper: #fffdf7;
    --mj-line: rgba(19, 73, 52, 0.14);
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    color: var(--mj-ink);
    background-color: var(--mj-green-950) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(6, 33, 24, .72), rgba(14, 64, 45, .4));
    z-index: -1;
}

.app-shell { max-width: 1040px; }

.main-wrapper {
    padding: clamp(18px, 4vw, 38px) !important;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px !important;
    background: rgba(255, 253, 247, .96) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3) !important;
    backdrop-filter: blur(14px);
}

.imperial-title {
    font-size: clamp(2.65rem, 8vw, 4.75rem) !important;
    color: var(--mj-red) !important;
    letter-spacing: .08em !important;
    text-wrap: balance;
}

.imperial-subtitle { color: var(--mj-muted) !important; }

.top-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.25rem 0 1.5rem;
}

.top-actions .btn { min-width: 9rem; }

.btn {
    border-radius: 12px;
    font-weight: 700;
}

.btn-danger {
    background: var(--mj-red);
    border-color: var(--mj-red);
}

.btn-primary {
    background: var(--mj-green-600);
    border-color: var(--mj-green-600);
}

.card {
    border: 1px solid var(--mj-line);
    border-radius: 18px;
    overflow: hidden;
}

.card-header { padding: .9rem 1.1rem; }

.section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 2.25rem 0 1rem;
    font-size: 1.35rem;
    font-weight: 850;
}

.section-title::before {
    content: "";
    width: 5px;
    height: 1.45em;
    border-radius: 9px;
    background: var(--mj-red);
}

.announcement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(216, 167, 45, .55);
    border-radius: 14px;
    color: #6f4e00;
    background: linear-gradient(90deg, #fff7d9, #fffdf3, #fff7d9);
    font-weight: 800;
    text-align: center;
}

.tile-bar { opacity: .94; }

.player-row {
    margin-inline: 0;
    padding: .55rem;
    border: 1px solid var(--mj-line);
    border-radius: 12px;
    background: #f8fbf9;
}

.balance-panel {
    border-color: var(--mj-line) !important;
    border-radius: 14px;
    background: #f6faf7 !important;
}

.record-card {
    border: 1px solid var(--mj-line) !important;
    border-left: 5px solid var(--mj-red) !important;
}

.player-chip {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: var(--mj-line) !important;
    background: #f8fbf9 !important;
}

.score-positive { color: #1261a0 !important; }
.score-negative { color: #b4232f !important; }

.rank-table { border-radius: 16px; overflow: hidden; }
.rank-table th { background: var(--mj-green-950) !important; }
.top-winner { background: #fff8dd !important; }

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.page-heading h2 { margin: 0; color: var(--mj-red) !important; }

.form-control, .form-select {
    min-height: 44px;
    border-radius: 11px;
    border-color: rgba(19, 73, 52, .22);
}

.form-control:focus, .form-select:focus {
    border-color: var(--mj-green-600);
    box-shadow: 0 0 0 .2rem rgba(35, 131, 93, .15);
}

.footer-note {
    margin-top: 2rem;
    color: var(--mj-muted);
    text-align: center;
    font-size: .82rem;
}

@media (max-width: 767px) {
    .container { padding-inline: 12px; }
    .app-shell { padding-top: 12px !important; padding-bottom: 12px !important; }
    .main-wrapper { border-radius: 18px !important; }
    .imperial-subtitle { font-size: 1rem !important; }
    .imperial-subtitle span { display: inline-block; padding-inline: 1rem !important; }
    .tile-bar { overflow: hidden; white-space: nowrap; font-size: .95rem !important; }
    .top-actions .btn { flex: 1 1 40%; min-width: 0; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading .btn, .page-heading > div { width: 100%; }
    .page-heading > div { display: grid !important; grid-template-columns: 1fr 1fr; }
    .player-row { --bs-gutter-x: .5rem; }
    .player-row .col-5 { width: 45%; }
    .player-row .col-2 { width: 10%; padding: 0; }
    .record-card .card-body { padding: .9rem; }
    .record-meta { align-items: flex-start !important; flex-direction: column; gap: .6rem; }
    .history-actions { width: 100%; flex-wrap: wrap; }
    .history-actions .dong-badge { margin-right: auto; }
    .mobile-full { width: 100%; }
}