/**
 * assets/css/headsup.css – HeadsUp Direktvergleich
 *
 * Neue Tokens: --liga, --turnier, --liga-bg, --turnier-bg
 * Nutzt existierende Tokens: --accent, --win, --lose, --surface2, --border, --muted
 * Mobile-First (375px Basis)
 */

/* ── Neue Farb-Tokens ────────────────────────────────────────────────────── */
:root {
    --liga:       #5d4037;
    --liga-bg:    #efebe9;
    --turnier:    #1565c0;
    --turnier-bg: #e3f0ff;
    --win-bg:     #e8f5e9;
    --lose-bg:    #fdecea;
}

/* ── Seiten-Layout ───────────────────────────────────────────────────────── */
.hu-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 0 60px;
}

.hu-page-title {
    margin-bottom: 20px;
}

.hu-page-title h1 {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -0.5px;
    margin-bottom: 3px;
    color: var(--text, #1a1a1a);
}

.hu-hl {
    color: var(--accent, #C8382A);
}

.hu-page-sub {
    color: var(--muted, #7a7572);
    font-size: 14px;
}

/* ── Selector-Card ───────────────────────────────────────────────────────── */
.hu-selector-card {
    background: var(--surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--border, #e2e0dc);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    padding: 20px;
    margin-bottom: 20px;
}

/* VS-Zeile */
.hu-vs-row {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    gap: 10px;
    align-items: end;
}

.hu-vs-divider {
    display: flex;
    justify-content: center;
    padding-bottom: 2px;
}

.hu-vs-pill {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 900;
    font-size: 15px;
    color: var(--muted, #7a7572);
    background: var(--surface2, #f0efed);
    border: 1.5px solid var(--border, #e2e0dc);
    border-radius: 50px;
    width: 38px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Player-Felder */
.hu-player-field {}

.hu-field-label {
    display: block;
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted, #7a7572);
    margin-bottom: 6px;
}

/* Suchfeld A */
.hu-search-wrap {
    position: relative;
}

.hu-input {
    width: 100%;
    padding: 9px 10px;
    border: 1.5px solid var(--border, #e2e0dc);
    border-radius: 8px;
    background: var(--surface2, #f0efed);
    font-family: inherit;
    font-size: 14px;
    color: var(--text, #1a1a1a);
    transition: border-color 0.15s;
}

.hu-input:focus {
    outline: none;
    border-color: var(--accent, #C8382A);
    background: var(--surface, #fff);
}

.hu-input:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.hu-input--clearable {
    padding-right: 30px;
}

.hu-clear-btn {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--muted, #7a7572);
    font-size: 12px;
    line-height: 1;
    border-radius: 3px;
    transition: color .12s, background .12s;
}
.hu-clear-btn:hover {
    color: var(--text, #1a1a1a);
    background: var(--surface2, #f0efed);
}

.hu-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e0dc);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}

.hu-result-item {
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #e2e0dc);
    transition: background 0.1s;
}

.hu-result-item:last-child {
    border-bottom: none;
}

.hu-result-item:hover,
.hu-result-item.focused {
    background: var(--surface2, #f0efed);
}

.hu-result-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #1a1a1a);
}

.hu-result-meta {
    font-size: 11px;
    color: var(--muted, #7a7572);
    margin-top: 1px;
}

.hu-result-fed {
    display: inline-block;
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--surface2, #f0efed);
    border: 1px solid var(--border, #e2e0dc);
    color: var(--muted, #7a7572);
    margin-left: 4px;
    vertical-align: middle;
}

/* Select B */
.hu-select-wrap {
    position: relative;
}

.hu-select-wrap::after {
    content: '▾';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted, #7a7572);
    pointer-events: none;
    font-size: 11px;
}

.hu-select {
    width: 100%;
    padding: 9px 28px 9px 10px;
    border: 1.5px solid var(--border, #e2e0dc);
    border-radius: 8px;
    background: var(--surface2, #f0efed);
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: var(--text, #1a1a1a);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.hu-select:focus {
    outline: none;
    border-color: var(--accent, #C8382A);
    background: var(--surface, #fff);
}

.hu-select:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Hints */
.hu-field-hint {
    font-size: 11px;
    color: var(--muted, #7a7572);
    margin-top: 5px;
    min-height: 15px;
    font-style: italic;
}

.hu-field-hint.ok {
    color: var(--win, #2e7d32);
    font-style: normal;
    font-weight: 600;
}

/* ── Stat-Preview ────────────────────────────────────────────────────────── */
.hu-stat-preview {
    margin-top: 18px;
    border-top: 1px solid var(--border, #e2e0dc);
    padding-top: 18px;
    animation: huFadeIn 0.2s ease;
}

@keyframes huFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Schnell-Bilanz */
.hu-preview-scoreline {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.hu-preview-player {
    flex: 1;
    text-align: center;
}

#hu-prev-b {
    text-align: right;
}

.hu-preview-name {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.15;
    color: var(--text, #1a1a1a);
}

.hu-preview-name.leading {
    color: var(--win, #2e7d32);
}

.hu-preview-club {
    font-size: 11px;
    color: var(--muted, #7a7572);
    margin-top: 2px;
}

.hu-preview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
}

.hu-preview-score {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 900;
    font-size: 36px;
    letter-spacing: -1.5px;
    line-height: 1;
    color: var(--text, #1a1a1a);
}

.hu-preview-score .sep {
    color: var(--border, #e2e0dc);
    font-weight: 400;
    margin: 0 2px;
}

.hu-preview-score-sub {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted, #7a7572);
}

/* Meta-Zeile */
.hu-preview-meta {
    display: flex;
    justify-content: center;
    background: var(--surface2, #f0efed);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border, #e2e0dc);
    margin-bottom: 14px;
}

.hu-pm-item {
    flex: 1;
    text-align: center;
    padding: 9px 4px;
    border-right: 1px solid var(--border, #e2e0dc);
}

.hu-pm-item:last-child {
    border-right: none;
}

.hu-pm-val {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}

.hu-pm-lbl {
    font-size: 10px;
    color: var(--muted, #7a7572);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* Chips */
.hu-chips-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hu-chips-label {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted, #7a7572);
    flex-shrink: 0;
}

.hu-chip {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 50px;
    border: 1.5px solid var(--border, #e2e0dc);
    background: var(--surface, #fff);
    color: var(--muted, #7a7572);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    white-space: nowrap;
}

.hu-chip:hover {
    border-color: var(--text, #1a1a1a);
    color: var(--text, #1a1a1a);
}

.hu-chip--active {
    background: var(--accent, #C8382A);
    color: #fff;
    border-color: var(--accent, #C8382A);
    box-shadow: 0 2px 7px rgba(200,56,42,.2);
}

.hu-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hu-chip[data-f="alle"]    .hu-chip-dot { background: var(--muted, #7a7572); }
.hu-chip[data-f="liga"]    .hu-chip-dot { background: var(--liga); }
.hu-chip[data-f="turnier"] .hu-chip-dot { background: var(--turnier); }
.hu-chip--active .hu-chip-dot { background: rgba(255,255,255,.7); }

.hu-chip-n {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Ergebnis-Bereich ────────────────────────────────────────────────────── */

/* Score-Banner */
.hu-score-banner {
    background: var(--surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--border, #e2e0dc);
    box-shadow: 0 8px 32px rgba(0,0,0,.11);
    padding: 22px 20px 18px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.hu-score-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent, #C8382A), #e8744a);
}

.hu-score-grid {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.hu-side {}

.hu-player-name-lg {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
}

.hu-side--win .hu-player-name-lg {
    color: var(--win, #2e7d32);
}

.hu-player-club-sm {
    font-size: 11px;
    color: var(--muted, #7a7572);
    margin-top: 3px;
}

.hu-score-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hu-score-num {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 900;
    font-size: 46px;
    letter-spacing: -2px;
    line-height: 1;
}

.hu-score-num .sep {
    color: var(--border, #e2e0dc);
    font-weight: 400;
    margin: 0 2px;
}

.hu-score-sub {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted, #7a7572);
}

.hu-win-badge {
    display: inline-block;
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
    margin-top: 5px;
}

.hu-win-badge--lead  { background: var(--win-bg);    color: var(--win, #2e7d32); }
.hu-win-badge--trail { background: var(--lose-bg);   color: var(--lose, #C8382A); }
.hu-win-badge--even  { background: var(--surface2, #f0efed); color: var(--muted, #7a7572); }

/* Mini-Stats */
.hu-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border, #e2e0dc);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 18px;
}

.hu-mini-stat {
    background: var(--surface, #fff);
    padding: 10px 8px;
    text-align: center;
}

.hu-mini-val {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
}

.hu-mini-lbl {
    font-size: 10px;
    color: var(--muted, #7a7572);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Tab-Bar ─────────────────────────────────────────────────────────────── */
.hu-tab-bar {
    display: flex;
    background: var(--surface, #fff);
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--border, #e2e0dc);
    border-bottom: none;
    overflow: hidden;
}

.hu-tab-btn {
    flex: 1;
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 11px 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted, #7a7572);
    border-bottom: 3px solid transparent;
    transition: all 0.15s;
}

.hu-tab-btn:hover {
    background: var(--surface2, #f0efed);
    color: var(--text, #1a1a1a);
}

.hu-tab-btn--active {
    color: var(--accent, #C8382A);
    border-bottom-color: var(--accent, #C8382A);
}

.hu-tab-count {
    font-size: 11px;
    opacity: 0.65;
    margin-left: 3px;
}

/* ── Section-Card (Match-Liste) ──────────────────────────────────────────── */
.hu-section-card {
    background: var(--surface, #fff);
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--border, #e2e0dc);
    border-top: none;
    overflow: hidden;
    margin-bottom: 16px;
}

.hu-section-head {
    padding: 10px 18px;
    border-bottom: 1px solid var(--border, #e2e0dc);
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted, #7a7572);
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surface2, #f0efed);
    border-top: 1px solid var(--border, #e2e0dc);
}

.hu-section-head:first-child {
    border-top: none;
}

.hu-sdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #C8382A);
    flex-shrink: 0;
}

/* ── Match-Items ─────────────────────────────────────────────────────────── */
.hu-match-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border, #e2e0dc);
    transition: background 0.1s;
}

.hu-match-item:last-child {
    border-bottom: none;
}

.hu-match-item:hover {
    background: var(--surface2, #f0efed);
}

.hu-m-date {
    color: var(--muted, #7a7572);
    font-size: 11px;
    line-height: 1.45;
}

.hu-m-body {}

.hu-m-meta {
    font-size: 12px;
    color: var(--muted, #7a7572);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.hu-m-context {
    font-size: 12px;
    color: var(--muted, #7a7572);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hu-m-score {
    font-weight: 600;
    font-size: 12px;
    margin-top: 2px;
    color: var(--text, #1a1a1a);
}

.hu-m-partner {
    font-size: 11px;
    color: var(--muted, #7a7572);
    margin-top: 2px;
}

.hu-m-result {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hu-m-tag {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 13px;
}

.hu-m-tag--win  { color: var(--win, #2e7d32); }
.hu-m-tag--lose { color: var(--lose, #C8382A); }
.hu-m-tag--wo   { color: var(--muted, #7a7572); }

.hu-mdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hu-mdot--win  { background: var(--win, #2e7d32); }
.hu-mdot--lose { background: var(--lose, #C8382A); }
.hu-mdot--wo   { background: var(--muted, #7a7572); }

/* Quelle-Badge */
.hu-src-badge {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.hu-src-badge--liga    { background: var(--liga-bg);    color: var(--liga); }
.hu-src-badge--turnier { background: var(--turnier-bg); color: var(--turnier); }

/* Disziplin-Badge */
.hu-disc-badge {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 11px;
    background: var(--surface2, #f0efed);
    border: 1px solid var(--border, #e2e0dc);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text, #1a1a1a);
}

/* ── Doppel-Gruppen ──────────────────────────────────────────────────────── */
.hu-pair-group {
    border-bottom: 1px solid var(--border, #e2e0dc);
}

.hu-pair-group:last-child {
    border-bottom: none;
}

.hu-pair-header {
    padding: 10px 18px;
    background: var(--surface2, #f0efed);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border, #e2e0dc);
}

.hu-pair-names {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}

.hu-pair-names .vs {
    color: var(--muted, #7a7572);
    margin: 0 5px;
    font-weight: 400;
    font-size: 12px;
}

.hu-pair-record {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--muted, #7a7572);
    white-space: nowrap;
}

.hu-pair-record--ahead  { color: var(--win, #2e7d32); }
.hu-pair-record--behind { color: var(--lose, #C8382A); }

/* ── Letzte-Form ─────────────────────────────────────────────────────────── */
.hu-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border, #e2e0dc);
}

.hu-form-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted, #7a7572);
    width: 105px;
    flex-shrink: 0;
}

.hu-form-dots {
    display: flex;
    gap: 4px;
}

.hu-fdot {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: 10px;
    color: #fff;
    flex-shrink: 0;
}

.hu-fdot--w { background: var(--win, #2e7d32); }
.hu-fdot--l { background: var(--lose, #C8382A); }

/* ── Disziplin-Balken ────────────────────────────────────────────────────── */
.hu-dbar-row {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border, #e2e0dc);
}

.hu-dbar-row:last-child {
    border-bottom: none;
}

.hu-ds {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.hu-ds--l { color: var(--win, #2e7d32); }
.hu-ds--r { color: var(--muted, #7a7572); }

.hu-dbar-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hu-dlbl {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted, #7a7572);
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.hu-btrack {
    flex: 1;
    height: 7px;
    background: var(--border, #e2e0dc);
    border-radius: 50px;
    overflow: hidden;
}

.hu-bfill {
    height: 100%;
    border-radius: 50px;
    background: var(--accent, #C8382A);
    transition: width 0.45s cubic-bezier(.4,0,.2,1);
}

/* ── Leerer Zustand ──────────────────────────────────────────────────────── */
.hu-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--muted, #7a7572);
    font-size: 14px;
}

.hu-empty strong {
    display: block;
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text, #1a1a1a);
}

/* ── Loading + Error ─────────────────────────────────────────────────────── */
.hu-loading {
    text-align: center;
    padding: 32px;
}

.hu-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border, #e2e0dc);
    border-top-color: var(--accent, #C8382A);
    border-radius: 50%;
    animation: huSpin 0.7s linear infinite;
}

@keyframes huSpin {
    to { transform: rotate(360deg); }
}

.hu-error {
    background: var(--lose-bg, #fdecea);
    border: 1px solid var(--lose, #C8382A);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--lose, #C8382A);
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .hu-vs-row {
        grid-template-columns: 1fr 36px 1fr;
        gap: 6px;
    }

    .hu-vs-pill {
        width: 32px;
        height: 30px;
        font-size: 13px;
    }

    .hu-score-grid {
        grid-template-columns: 1fr 84px 1fr;
    }

    .hu-score-num {
        font-size: 36px;
    }

    .hu-player-name-lg {
        font-size: 15px;
    }

    .hu-preview-score {
        font-size: 30px;
    }

    .hu-match-item {
        grid-template-columns: 54px 1fr auto;
        padding: 9px 12px;
        gap: 6px;
    }

    .hu-chips-row {
        gap: 5px;
    }

    .hu-chip {
        padding: 4px 10px;
        font-size: 12px;
    }

    .hu-section-card,
    .hu-selector-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: -16px;
        margin-right: -16px;
    }

    .hu-score-banner {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: -16px;
        margin-right: -16px;
    }

    .hu-tab-bar {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: -16px;
        margin-right: -16px;
    }
}