#content {
        --ink: #21232e;
        --muted: #6a6d80;
        --panel: #fff;
        --panel-2: #f4f4fa;
        --line: #e4e3ef;
        --doom: #e0483d;
        --slot: #eceaf6;
        --die-face: #fff;
        --die-edge: #cfcfda;
        --die-pip: #232733;
    }

    .dark #content {
        --ink: #ecedf6;
        --muted: #9a9cb2;
        --panel: #1c1c28;
        --panel-2: #12121a;
        --line: #2c2c3c;
        --slot: #23233255;
        --die-face: #2b2b3a;
        --die-edge: #3a3a4e;
        --die-pip: #ecedf6;
    }

    /* dice + columns */
    #content .d {
        width: 34px;
        height: 34px;
    }

    #content .df {
        fill: var(--die-face);
        stroke: var(--die-edge);
        stroke-width: 3;
    }

    #content .d circle {
        fill: var(--die-pip);
    }

    #content .col {
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        padding: 6px;
        border-radius: 12px;
        background: var(--panel-2);
    }

    #content .cell {
        display: grid;
        place-items: center;
    }

    #content .cell.doom .d .df {
        stroke: var(--doom);
        stroke-width: 4;
    }

    #content .slot {
        width: 34px;
        height: 34px;
        border: 2px dashed var(--line);
        border-radius: 8px;
        background: var(--slot);
    }

    #content .combos {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 6px;
    }

    #content .combo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    #content .cscore {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--accent-color);
        font-variant-numeric: tabular-nums;
    }

    #content .clabel {
        font-size: .8rem;
        color: var(--muted);
    }

    #content .destroy {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px;
        margin-top: 6px;
    }

    #content .darrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--muted);
        font-size: .85rem;
    }

    #content .darrow .big {
        font-size: 1.4rem;
        color: var(--accent-color);
        line-height: 1;
    }

    #content .dgroup {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    #content .dcap {
        font-size: .8rem;
        color: var(--muted);
    }