.troll-theme {
    --scene-accent: #72b56f;
    --scene-deep: #142117;
}

.troll-attempt-card {
    border-color: #4f7d4d;
}

.troll-attempt-card.status {
    border-color: #d76a32;
}

.troll-attempt-card.locked {
    opacity: 0.5;
}

.battle-screen.troll-battle .monster-hp i {
    background: linear-gradient(90deg, #6ca653, #d1c25d);
}

.battle-screen.troll-battle .monster-card {
    border-color: #52784a;
}

.troll-reward-bank {
    position: relative;
    display: grid;
    gap: 3px;
    align-content: center;
    min-width: 0;
    padding: 6px 8px 9px;
    overflow: hidden;
    border: 1px solid #8f713d;
    border-radius: 10px;
    color: #f0d28e;
    background: linear-gradient(145deg, #2b261c, #181711);
}

.troll-reward-bank[hidden] {
    display: none;
}

.troll-reward-line {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.troll-reward-line b {
    color: #f0d28e;
    font-size: 9px;
    white-space: nowrap;
}

.troll-reward-line span {
    overflow: hidden;
    color: #e7dcc1;
    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.troll-reward-line.accumulated {
    padding-top: 2px;
    border-top: 1px solid #ffffff12;
}

.troll-reward-bank > small {
    color: #b5a47c;
    font-size: 8px;
    font-variant-numeric: tabular-nums;
}

.troll-reward-progress {
    position: absolute;
    right: 8px;
    bottom: 4px;
    left: 8px;
    height: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: #070705;
}

.troll-reward-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a97931, #f2cc6d);
    transition: width 0.3s ease;
}

.battle-screen.troll-battle .troll-reward-bank {
    grid-column: 2 / -1;
}

.battle-screen.troll-battle .troll-reward-line {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 7px;
}

.battle-screen.troll-battle .troll-reward-line span {
    font-size: 10px;
    text-align: right;
}

.battle-screen.troll-battle .troll-reward-line b {
    font-size: 10px;
}

.battle-screen.troll-battle .troll-reward-bank > small {
    font-size: 9px;
    text-align: right;
}