/*
 * Death Tracker styles
 * --------------------------
 * Same toggle-button + sliding-panel shell as the Upgrade toggle
 * (Upgrades.css), reskinned red/black. Body is split into a left
 * column (level/player controls + player boxes) and a right column
 * holding the death log, which scrolls independently.
 * Depends on .right-panel { position: relative; }, defined in
 * style.css.
 */


.death-toggle-button {
    flex-shrink: 0;

    display: flex;

    align-items: center;
    gap: 0;

    padding: 12px 14px;
    overflow: hidden;

    /* Last stop now matches the first (#3d0000) instead of ending on
       #ae1313 - matching endpoints mean the strip of gradient
       visible right before the animation loops back to 0% matches
       the strip visible right after, so the loop reads as
       continuous motion instead of visibly popping at the seam
       every 5s. */
    background: linear-gradient(
        90deg,
        #3d0000 0%,
        #ae1313 20%,
        #ff2d2d 45%,
        #ff6b6b 60%,
        #3d0000 85%,
        #3d0000 100%
    );
    background-size: 260% auto;

    border: 1px solid rgba(255, 157, 157, 0.8);
    border-radius: 999px;

    color: #ffffff;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    cursor: pointer;
    user-select: none;

    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(174, 19, 19, 0.45),
        0 0 18px rgba(255, 45, 45, 0.25),
        0 0 26px rgba(0, 0, 0, 0.3);

    animation: death-toggle-hue-shift 8s linear infinite;

    transition:
        padding 0.35s ease,
        transform 0.18s,
        box-shadow 0.18s;
}


/* Loop fix: this button's gradient is 260% of its width, so one full
   tile is 2.6x the button. With background-position percentages the
   shift is (container - image) * pct = -1.6x * pct, so ending at 100%
   only slid it 1.6x - short of a whole tile, which made the colors
   snap back at the loop point. 162.5% (= 260 / 160) slides exactly one
   tile, so the end frame equals the start frame and the loop is
   seamless. Durations were stretched by the same 1.625 factor to keep
   the original pace. */
@keyframes death-toggle-hue-shift {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 162.5% 50%;
    }

}


.death-toggle-icon {
    display: inline-block;

    font-size: 12px;
    line-height: 1;

    transition: transform 0.25s ease;
}


.death-toggle-key {
    padding: 1px 6px;

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;

    color: #ffffff;
}


/* Collapsed by default down to just the icon (min visual clutter
   sitting over the curse pools) - label and key both start at zero
   width/opacity and only expand once the button is hovered or
   focused, mirroring .upgrade-toggle-button's behavior in
   Upgrades.css. max-width (rather than width) is what's animated
   since width: auto can't be transitioned, but a generous max-width
   can - overflow: hidden on the button clips anything still
   mid-transition so nothing spills out early. */
.death-toggle-button .btn-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;

    overflow: hidden;
    white-space: nowrap;

    transition:
        max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}


/* The keybind badge stays visible even while the button is
   collapsed to just its icon - only the text label expands on
   hover/focus. */
.death-toggle-button .death-toggle-key {
    max-width: 30px;
    margin-left: 6px;
    opacity: 1;

    overflow: hidden;
    white-space: nowrap;

    transition:
        max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}


.death-toggle-button:hover .btn-label,
.death-toggle-button:focus-visible .btn-label {
    max-width: 140px;
    margin-left: 8px;
    opacity: 1;
}


.death-toggle-button:hover,
.death-toggle-button:focus-visible {
    padding: 12px 18px;

    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.6),
        0 0 14px rgba(174, 19, 19, 0.6),
        0 0 24px rgba(255, 45, 45, 0.4),
        0 0 34px rgba(0, 0, 0, 0.35);
}


.death-toggle-button:hover .death-toggle-icon {
    transform: translateY(-2px) rotate(10deg);
}


.death-toggle-button.active {
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(174, 19, 19, 0.65),
        0 0 22px rgba(255, 45, 45, 0.45),
        0 0 32px rgba(0, 0, 0, 0.3);
}


.death-toggle-button.active .death-toggle-icon {
    transform: rotate(180deg);
}


.death-panel {
    position: absolute;
    inset: 0;

    z-index: 11;

    display: flex;

    align-items: stretch;
    justify-content: stretch;

    padding: 32px;

    background: linear-gradient(160deg, #0c0000 0%, #1a0303 100%);

    border-left: 1px solid rgba(255, 109, 109, 0.35);
    box-shadow: -24px 0 50px rgba(0, 0, 0, 0.6), inset 0 0 90px rgba(174, 19, 19, 0.06);

    transform: translateX(100%);
    opacity: 0;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease-out;

    pointer-events: none;
}


.death-panel.open {
    transform: translateX(0);
    opacity: 1;

    pointer-events: auto;
}


.death-panel-inner {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 109, 109, 0.35) transparent;
}


.death-panel-inner::-webkit-scrollbar {
    width: 6px;
}


.death-panel-inner::-webkit-scrollbar-track {
    background: transparent;
}


.death-panel-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 109, 109, 0.3);
    border-radius: 999px;
}


.death-panel-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 109, 109, 0.55);
}


/* ---- Header: title, total-deaths indicator, reset button ---- */

.death-panel-header {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 20px;
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255, 109, 109, 0.22);
}


.death-panel-heading {
    margin-right: auto;

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.5px;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ff6b6b 25%,
        #ffffff 50%,
        #ff6b6b 75%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    text-shadow: 0 0 20px rgba(255, 60, 60, 0.55);
}


.death-panel-total {
    display: flex;

    align-items: center;
    gap: 10px;

    padding: 9px 16px;

    background: rgba(255, 109, 109, 0.09);

    border: 2px solid rgba(255, 109, 109, 0.55);
    border-radius: 999px;

    box-shadow: 0 0 18px rgba(255, 109, 109, 0.3);
}


.death-panel-total-label {
    color: #ff9d9d;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.death-panel-total-value {
    background: linear-gradient(90deg, #ffffff, #ff6b6b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    font-size: 18px;
    font-weight: 900;
}


.death-header-buttons {
    display: flex;

    align-items: center;
    gap: 8px;

    flex-shrink: 0;
}


.death-reset-button {
    padding: 10px 16px;

    background: transparent;

    border: 1px solid rgba(255, 109, 109, 0.4);
    border-radius: 8px;

    color: #ff9d9d;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;

    cursor: pointer;

    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}


.death-reset-button:hover {
    background: rgba(255, 109, 109, 0.14);

    border-color: #ffe0e0;

    color: #ffffff;

    box-shadow: 0 0 18px rgba(255, 109, 109, 0.4);
}


/* ---- Two-column body: controls/players on the left, log on the right ---- */

.death-panel-body {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;

    gap: 20px;
}


.death-panel-main {
    flex: 1 1 auto;
    min-width: 0;
}


.death-panel-log-side {
    flex: 0 0 280px;
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding-left: 18px;

    border-left: 1px solid rgba(255, 109, 109, 0.2);
}


.death-log-heading {
    margin-bottom: 10px;

    color: #ffb0b0;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.death-log-list {
    max-height: 560px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    overflow-y: auto;

    padding-right: 4px;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 109, 109, 0.35) transparent;
}


.death-log-list::-webkit-scrollbar {
    width: 6px;
}


.death-log-list::-webkit-scrollbar-track {
    background: transparent;
}


.death-log-list::-webkit-scrollbar-thumb {
    background: rgba(255, 109, 109, 0.3);
    border-radius: 999px;
}


.death-log-entry {
    padding: 8px 11px;

    background: rgba(0, 0, 0, 0.22);

    border: 1px solid rgba(255, 109, 109, 0.15);
    border-radius: 6px;

    color: #ffe0e0;

    font-family: var(--font-modern);
    font-size: 11px;
    line-height: 1.4;
}


/* ---- Level tracking row: start level + advance ---- */

.death-level-controls {
    display: flex;

    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    margin-bottom: 16px;
    padding-bottom: 16px;

    border-bottom: 1px solid rgba(255, 109, 109, 0.15);
}


.death-control-label {
    display: block;

    margin-bottom: 7px;

    color: #ff9d9d;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


.death-level-block {
    flex: 0 0 110px;
}


.death-level-block input {
    width: 100%;
    box-sizing: border-box;

    padding: 9px 11px;

    background: #1a0505;

    border: 1px solid rgba(255, 109, 109, 0.35);
    border-radius: 8px;

    color: #ffe0e0;

    outline: none;

    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-modern);

    transition: border-color 0.15s, box-shadow 0.15s;
}


.death-level-block input:focus {
    border-color: #ff9d9d;
    box-shadow: 0 0 0 3px rgba(255, 109, 109, 0.18);
}


.death-next-level-button {
    flex-shrink: 0;

    padding: 11px 18px;

    background: linear-gradient(
        90deg,
        #ff6b6b 0%,
        #ae1313 25%,
        #ff9d9d 50%,
        #ae1313 75%,
        #ff6b6b 100%
    );
    background-size: 260% auto;

    border: 1px solid #ffb3b3;
    border-radius: 999px;

    color: #1a0000;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;

    cursor: pointer;

    box-shadow: 0 0 12px rgba(255, 45, 45, 0.4);

    animation: death-advance-gradient-shift 5.7s linear infinite;

    transition: transform 0.15s, box-shadow 0.15s;
}


/* Loop fix: this button's gradient is 260% of its width, so one full
   tile is 2.6x the button. With background-position percentages the
   shift is (container - image) * pct = -1.6x * pct, so ending at 100%
   only slid it 1.6x - short of a whole tile, which made the colors
   snap back at the loop point. 162.5% (= 260 / 160) slides exactly one
   tile, so the end frame equals the start frame and the loop is
   seamless. Durations were stretched by the same 1.625 factor to keep
   the original pace. */
@keyframes death-advance-gradient-shift {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 162.5% 50%;
    }

}


.death-next-level-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255, 45, 45, 0.55);
}


/* ---- Unlimited Deaths toggle ----
   Small label + track/thumb switch, matching the shape of the
   Nothing Curse / Progressive Mode toggles in the Upgrade panel but
   themed to this panel's red palette. Lives in the same
   .death-level-controls row as the Next Level button, since turning
   it on is what removes the need to keep clicking that button just
   to reset a player's per-level cap. */
.death-toggle-block {
    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.death-toggle-block-label {
    margin-bottom: 0;

    white-space: nowrap;
}


.death-switch {
    flex-shrink: 0;

    display: flex;

    align-items: center;
    gap: 8px;

    padding: 6px 10px 6px 6px;

    background: rgba(255, 109, 109, 0.06);

    border: 1px solid rgba(255, 109, 109, 0.35);
    border-radius: 999px;

    cursor: pointer;
    user-select: none;

    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}


.death-switch:hover {
    border-color: rgba(255, 109, 109, 0.65);
}


.death-switch.active {
    background: rgba(255, 109, 109, 0.16);

    border-color: #ff9d9d;
    box-shadow: 0 0 14px rgba(255, 109, 109, 0.35);
}


.death-switch-track {
    position: relative;

    flex-shrink: 0;

    width: 30px;
    height: 17px;

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 109, 109, 0.4);
    border-radius: 999px;

    transition: background 0.18s, border-color 0.18s;
}


.death-switch.active .death-switch-track {
    background: linear-gradient(90deg, #7a0e0e, #ff9d9d);

    border-color: #ff9d9d;
}


.death-switch-thumb {
    position: absolute;
    top: 1px;
    left: 1px;

    width: 13px;
    height: 13px;

    background: #ffe0e0;
    border-radius: 50%;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    transition: transform 0.18s ease;
}


.death-switch.active .death-switch-thumb {
    transform: translateX(13px);
}


.death-switch-label {
    color: #ff9d9d;

    font-family: var(--font-modern);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
}


.death-switch.active .death-switch-label {
    color: #ffe0e0;
}


/* ---- Player count / add-player row ---- */

.death-player-controls {
    display: flex;

    flex-wrap: wrap;
    align-items: flex-end;

    gap: 14px;

    margin-bottom: 16px;
}


.death-player-count-block {
    flex: 0 0 auto;
}


.death-player-count-row {
    display: flex;

    align-items: center;
    gap: 6px;
}


.death-player-count-row input {
    width: 64px;
    box-sizing: border-box;

    padding: 9px 10px;

    background: #1a0505;

    border: 1px solid rgba(255, 109, 109, 0.35);
    border-radius: 8px;

    color: #ffe0e0;

    outline: none;

    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-modern);

    text-align: center;

    transition: border-color 0.15s, box-shadow 0.15s;
}


.death-player-count-row input:focus {
    border-color: #ff9d9d;
    box-shadow: 0 0 0 3px rgba(255, 109, 109, 0.18);
}


.death-count-button {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    background: rgba(255, 109, 109, 0.12);

    border: 1px solid rgba(255, 109, 109, 0.4);
    border-radius: 50%;

    color: #ff9d9d;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}


.death-count-button:hover:not(:disabled) {
    background: rgba(255, 109, 109, 0.3);

    border-color: #ffe0e0;

    color: #ffffff;

    transform: scale(1.08);
}


.death-count-button:disabled {
    opacity: 0.3;

    cursor: not-allowed;
    transform: none;
}


.death-count-button--minus {
    background: rgba(120, 120, 130, 0.18);

    border-color: rgba(180, 184, 196, 0.4);

    color: #cfd2db;
}


.death-count-button--minus:hover:not(:disabled) {
    background: rgba(120, 120, 130, 0.32);

    border-color: #dfe1e8;

    color: #ffffff;
}


.death-player-hint {
    flex: 1 1 220px;
    min-width: 180px;

    padding: 9px 12px;

    color: #a96a6a;

    font-size: 10px;
    line-height: 1.5;

    border-left: 1px solid rgba(255, 109, 109, 0.25);
}


.death-player-hint strong {
    color: #ffb0b0;
}


/* ---- Player list: max 3 per row, boxes capped so they don't stretch ---- */

.death-player-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 220px));

    gap: 10px;
}


.death-player-row {
    min-width: 0;

    padding: 10px 12px;

    background: linear-gradient(160deg, rgba(50, 10, 10, 0.9) 0%, rgba(10, 2, 2, 0.95) 100%);

    border: 1px solid rgba(255, 109, 109, 0.25);
    border-radius: 8px;
}


.death-player-row-main {
    display: flex;
    flex-direction: column;

    align-items: stretch;
    gap: 8px;
}


/* Seamless / borderless by default - no tinted box, so the input
   reads as part of the card itself rather than a separate field.
   A gradient only kicks in once a name has actually been typed
   (see .death-player-name-input--filled below); until then it's
   just plain text sitting on the card. */
.death-player-name-input {
    width: 100%;
    min-width: 0;

    padding: 6px 2px;

    background: transparent;

    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;

    color: #ffe0e0;

    outline: none;

    text-align: center;

    font-family: var(--font-modern);
    font-size: 15px;
    font-weight: 700;

    transition: border-color 0.15s;
}


.death-player-name-input::placeholder {
    color: #7a4444;
}


.death-player-name-input:focus {
    border-bottom-color: rgba(255, 157, 157, 0.5);
}


/* Once the player has actually typed a name, the plain text swaps
   to a continuously-scrolling red / white / light-blue gradient -
   same background-position-scroll technique as the site's other
   animated gradient headings (.animated-header-text). The stop
   list is mirrored (red -> white -> blue -> white -> red) so that,
   combined with a 200%-wide background and animating position from
   0% to 100%, the loop has no visible seam or jump. */
.death-player-name-input--filled {
    background: linear-gradient(
        90deg,
        #ff6b6b 0%,
        #ffffff 25%,
        #8fd9ff 50%,
        #ffffff 75%,
        #ff6b6b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: death-name-gradient-scroll 4s linear infinite;
}


@keyframes death-name-gradient-scroll {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }

}


.death-player-death-controls {
    display: flex;

    align-items: center;
    justify-content: center;
    gap: 6px;

    flex-shrink: 0;
}


.death-player-death-count {
    min-width: 20px;

    text-align: center;

    color: #ffffff;

    font-family: var(--font-modern);
    font-size: 15px;
    font-weight: 900;

    text-shadow: 0 0 8px rgba(255, 60, 60, 0.5);
}


.death-empty-row {
    grid-column: 1 / -1;

    padding: 18px;

    border: 1px dashed rgba(255, 109, 109, 0.35);
    border-radius: 8px;

    color: #a35c5c;

    text-align: center;

    font-size: 11px;
}


@media (max-width: 900px) {

    .death-panel-body {
        flex-direction: column;
    }

    .death-panel-log-side {
        flex-basis: auto;

        padding-left: 0;
        padding-top: 16px;

        border-left: none;
        border-top: 1px solid rgba(255, 109, 109, 0.2);
    }

    .death-log-list {
        max-height: 260px;
    }

}


@media (max-width: 700px) {

    .death-level-controls,
    .death-player-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .death-player-hint {
        border-left: 0;
        border-top: 1px solid rgba(255, 109, 109, 0.2);

        padding: 10px 0 0;
    }

    .death-player-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 500px) {

    .death-toggle-button {
        padding: 10px 14px;
    }

    .death-player-list {
        grid-template-columns: 1fr;
    }

}