/* Word game's own styles, served from _content/Disentti.Modules.WordGame/.
   Shipped with the Module rather than added to the app's stylesheet, so removing the
   Module takes them with it and nothing is left behind styling elements that no longer
   exist. */

/* --- Member calendar -------------------------------------------------------------------
   A daily game is literally a day grid, so an unbroken run should be visible without
   counting anything.

   The four states have to be told apart at 14 pixels on a near-black page, which rules
   out relying on hue: Hit and Misfired are separated by lightness as well as colour, and
   the two that matter most to distinguish — Missed (a Round ran, they were not in it) and
   None (no Round ran) — are separated by fill against outline, because a dark fill on a
   dark page next to a dark outline is not a distinction anybody can see. */
.dis-calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-block: .5rem;
    max-width: 40rem;
}

.dis-calendar__day {
    width: 14px;
    height: 14px;
    border-radius: 2px;

    /* None: nothing ran. A faint outline and no fill, so an empty week reads as empty
       rather than as a week of failures. */
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default, #393939);
}

.dis-calendar__day--hit {
    background: var(--dis-wordgame-hit, #08bdba);
    border-color: var(--dis-wordgame-hit, #08bdba);
}

.dis-calendar__day--misfired {
    background: var(--dis-wordgame-misfire, #fdd13a);
    border-color: var(--dis-wordgame-misfire, #fdd13a);
}

/* Missed: light enough to be unmistakably a filled square against the outlined None
   beside it. The previous value sat at roughly 1.4:1 against the page and was
   indistinguishable from an empty day. */
.dis-calendar__day--missed {
    background: var(--dis-wordgame-missed, #8d8d8d);
    border-color: var(--dis-wordgame-missed, #8d8d8d);
}

.dis-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: .5rem 0 1.5rem;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary, #c6c6c6);
}

.dis-legend li {
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* Named for what they mean here rather than borrowed from the telemetry palette:
   retinting a memory chart should not silently repaint this grid. On the body, beside
   MudBlazor's own variables, which is where script and cascade both look. */
body {
    --dis-wordgame-hit: #08bdba;
    --dis-wordgame-misfire: #fdd13a;
    --dis-wordgame-missed: #8d8d8d;
}