body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

main { flex: 1; }

.classic-section {
    display: grid;
    gap: 24px;
    padding-block: clamp(22px, 4vw, 46px) clamp(42px, 6vw, 72px);
}

.classic-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.classic-card, .classic-empty { padding: clamp(18px, 3vw, 30px); }
.classic-empty { margin: 0; }
.classic-card h2 { margin: 5px 0 10px; font: 700 clamp(24px, 3vw, 31px) var(--serif); }
.classic-card p { color: #a8bbc9; margin: 0; max-width: 66ch; line-height: 1.65; }

#task-shop, #vip { scroll-margin-top: 104px; }
.classic-card p + p, .classic-card form { margin-top: 12px; }

.classic-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.classic-table :is(th, td) {
    padding: 13px clamp(10px, 2.3vw, 26px);
    text-align: start;
}

.classic-table thead { background: #13232d; color: #b3c8d7; font-size: .82rem; }
.classic-table tbody tr { border-top: 1px solid #203946; }
.classic-table tbody tr:hover { background: #162832; }
.classic-table tbody th { overflow-wrap: anywhere; }
.classic-table small { display: block; margin-top: 3px; color: #9ab0c1; font-weight: 400; }
.classic-table .classic-number { text-align: end; font-variant-numeric: tabular-nums; }
.classic-table td.classic-number { white-space: nowrap; }
.classic-table .classic-price { color: var(--gold2); font-weight: 700; }
.classic-ranking th:first-child { width: 1%; }
.classic-ranking .classic-number, .classic-shop .classic-number { width: 12%; }

@media (max-width: 600px) {
    .classic-feature-grid { grid-template-columns: 1fr; gap: 12px; }
    .classic-table { font-size: .9rem; }
    .classic-table :is(th, td) { padding-block: 11px; }
    .classic-section { gap: 16px; }
}