.daily-loadout {
    margin: 1.6rem 0 2rem;
    padding: 1.2rem;
    border: 1px solid #444;
    border-radius: 0;
    background: #121212;
    text-align: left;
}
.loadout-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: .8rem; color: #aaa; }
.loadout-meta strong { display: inline-block; margin-left: .3rem; color: #e0e0e0; }
.loadout-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .4rem .75rem; margin-top: 1.2rem; }
.loadout-item { width: 112px; }
.loadout-button {
    display: block;
    width: 100%;
    padding: 0 4px 8px;
    background: none;
    color: inherit;
    font: inherit;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.loadout-button:hover, .loadout-button[aria-expanded="true"] { background: #1e1e1e; border-color: #444; }
.loadout-button:focus-visible { outline: 2px solid #bb86fc; outline-offset: 2px; }
.item-art { display: block; position: relative; width: 96px; height: 96px; margin: 24px auto 7px; }
.item-sprite { position: absolute; z-index: 1; background-repeat: no-repeat; image-rendering: pixelated; }
.item-frame { position: absolute; left: 0; top: 0; pointer-events: none; }
.item-name { display: block; min-height: 2.5em; font-size: .69rem; line-height: 1.3; overflow-wrap: anywhere; }
.item-tooltip {
    position: fixed;
    z-index: 50;
    box-sizing: border-box;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid #444;
    border-radius: 0;
    background: #121212;
    color: #fff;
    font-size: .85rem;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}
.loadout-knowledge-link { display: block; margin-top: .2rem; font-size: .75rem; text-align: center; }
.item-tooltip[hidden] { display: none !important; }
.tooltip-line { white-space: pre-wrap; }
.tooltip-line + .tooltip-line { margin-top: .35em; }
.tooltip-line:first-child { font-weight: 650; }
.tooltip-icon { vertical-align: -3px; max-width: none; }
.days-table-scroll { overflow-x: auto; margin-top: 1.5em; }
.days-table-scroll:focus-visible { outline: 2px solid #bb86fc; outline-offset: 2px; }
.days-table { margin-top: 0; min-width: 740px; font-size: .8rem; }
.days-table th, .days-table td { padding: 4px 6px; white-space: nowrap; overflow-wrap: normal; }
.days-table .day-loadout-cell { padding: 2px 4px; }
.days-table .day-winner a { display: block; max-width: 140px; margin: auto; white-space: normal; overflow-wrap: anywhere; }
.compact-loadout .loadout-meta { font-size: .7rem; gap: .6rem; }
.compact-loadout .loadout-items { width: max-content; flex-wrap: nowrap; margin: 0 auto; gap: 2px; }
.compact-loadout .loadout-item { width: 50px; }
.compact-loadout .loadout-button { padding: 0; }
.compact-loadout .item-art { width: 48px; height: 48px; margin: 12px auto 0; }
@media (max-width: 600px) {
    .container { box-sizing: border-box; width: calc(100% - 16px); padding: 16px 12px; margin: 8px auto; }
    .header-container .nav { position: static; padding: .4rem 0 1rem; gap: 1rem; }
    .daily-loadout { padding: 14px 12px; }
    .loadout-items { gap: .3rem; }
    .date-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem 1rem; }
    .date-nav a, .date-nav span { margin: 0; }
    .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; }
    .pagination a, .pagination span { margin: 0 .2rem; }
    th, td { padding: 8px; overflow-wrap: anywhere; }
}