﻿.tracker-grid {
    --tracker-background: rgba(0, 0, 99);
    --tracker-border-color: white;
    width: 140px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(4, 32px);
    grid-template-rows: repeat(5, 32px);
    row-gap: 3px;
    column-gap: 3px;
    grid-template-areas:
        "Crystal        Pass        Hook        DarknessCrystal"
        "EarthCrystal   TwinHarp    Package     SandRuby"
        "BaronKey       MagmaKey    TowerKey    LucaKey"
        "Adamant        LegendSword Pan         Spoon"
        ".              RatTail     PinkTail    Count";
    justify-items: center;
    align-items: center;
    margin: 5px;
    border: 2px ridge var(--tracker-border-color);
    border-radius: 5px 5px;
    background-color: var(--tracker-background);
}

.hidden {
    visibility: hidden;
}

.completed-objective {
    text-decoration: line-through;
}

.Crystal {
    grid-area: Crystal;
}

.Pass {
    grid-area: Pass;
}

.Hook {
    grid-area: Hook;
}

.DarknessCrystal {
    grid-area: DarknessCrystal;
}

.EarthCrystal {
    grid-area: EarthCrystal;
}

.TwinHarp {
    grid-area: TwinHarp;
}

.Package {
    grid-area: Package;
}

.SandRuby {
    grid-area: SandRuby;
}

.BaronKey {
    grid-area: BaronKey;
}

.MagmaKey {
    grid-area: MagmaKey;
}

.TowerKey {
    grid-area: TowerKey;
}

.LucaKey {
    grid-area: LucaKey;
}

.Adamant {
    grid-area: Adamant;
}

.LegendSword {
    grid-area: LegendSword;
}

.Pan {
    grid-area: Pan;
}

.Spoon {
    grid-area: Spoon;
}

.RatTail {
    grid-area: RatTail;
}

.PinkTail {
    grid-area: PinkTail;
}

.Count {
    grid-area: Count;
}