.py-calc {
    --calc-blue: #5f72c6;
    --calc-cyan: #63b8b2;
    --calc-orange: #df8c36;
}

.py-calc-hero {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.py-calc-save-card {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 17px;
    border: 3px solid #17130b;
    border-radius: 7px;
    background:
        linear-gradient(rgba(23, 19, 11, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 19, 11, .08) 1px, transparent 1px),
        var(--ref-gold);
    background-size: 13px 13px;
    color: #17130b;
    box-shadow: inset 0 0 0 3px #ffe678, 6px 6px 0 #9c3a08;
}

.py-calc-save-card::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(23, 19, 11, .28);
    pointer-events: none;
}

.py-calc-save-card > * {
    position: relative;
}

.py-calc-save-card > span {
    color: #514013;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
}

.py-calc-save-card > strong {
    color: #262963;
    font-size: 20px;
    font-weight: 950;
}

.py-calc-save-card p {
    margin: 0;
    color: #584212;
    font-size: 9px;
    line-height: 1.45;
}

.py-calc-save-card label {
    display: grid;
    gap: 3px;
    color: #53410f;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.py-calc-save-card select,
.py-calc-save-card button {
    min-width: 0;
    border: 2px solid #17130b;
    border-radius: 4px;
    color: #17130b;
    font-size: 9px;
    font-weight: 900;
}

.py-calc-save-card select {
    width: 100%;
    padding: 7px;
    background: #fff6cf;
}

.py-calc-save-card button {
    padding: 7px 9px;
    background: #fff0a6;
    cursor: pointer;
}

.py-calc-save-card a {
    color: #313678;
    font-size: 8px;
    font-weight: 950;
    text-decoration: underline;
}

.py-calc-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.py-calc-tabs button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 9px;
    align-items: center;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid #635024;
    border-radius: 7px;
    background: #2a2214;
    color: #c1af79;
    text-align: left;
    cursor: pointer;
}

.py-calc-tabs button > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 2px solid #6c5725;
    border-radius: 50%;
    color: #9e8a54;
    font-size: 9px;
    font-weight: 950;
}

.py-calc-tabs strong,
.py-calc-tabs small {
    min-width: 0;
}

.py-calc-tabs strong {
    color: #f7edca;
    font-size: 11px;
}

.py-calc-tabs small {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.py-calc-tabs button.is-active {
    border-color: #d4ad28;
    background: linear-gradient(135deg, rgba(246, 207, 60, .16), transparent 68%), #372d18;
    box-shadow: inset 0 -3px var(--ref-gold);
}

.py-calc-tabs button.is-active > span {
    border-color: #17130b;
    background: var(--ref-gold);
    color: #17130b;
}

.py-calc-workbench {
    margin-top: 12px;
}

.py-calc-panel {
    display: grid;
    gap: 11px;
}

.py-calc-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #5f4c24;
    border-radius: 8px;
    background:
        linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
        #2a2214;
    background-size: 100% 5px;
    box-shadow: inset 0 0 0 1px rgba(255, 246, 207, .025);
}

.py-calc-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    min-width: 0;
    margin-bottom: 11px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(246, 207, 60, .15);
}

.py-calc-card > header > span {
    color: var(--ref-gold);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .11em;
}

.py-calc-card > header small {
    color: #ae9b64;
    font-size: 8px;
    font-weight: 850;
}

.py-calc-card button,
.py-calc-stat-output button {
    padding: 5px 7px;
    border: 1px solid #725c29;
    border-radius: 4px;
    background: #211a0e;
    color: #d9bd5c;
    font-size: 7px;
    font-weight: 900;
    cursor: pointer;
}

.py-calc-battle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
    gap: 9px;
}

.py-calc-mon-card.is-attacker {
    border-top: 4px solid var(--calc-blue);
}

.py-calc-mon-card.is-defender {
    border-top: 4px solid var(--ref-red);
}

.py-calc-move-card {
    border-top: 4px solid var(--ref-gold);
}

.py-calc-mon-ident {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.py-calc-mon-ident img,
.py-calc-stat-species img {
    width: 82px;
    height: 82px;
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .25));
}

.py-calc-mon-ident > div,
.py-calc-stat-species {
    min-width: 0;
}

.py-calc-mon-ident label,
.py-calc-move-select,
.py-calc-stat-species label,
.py-calc-exp-fields label {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: #aa9864;
    font-size: 8px;
    font-weight: 850;
}

.py-calc-mon-ident label + label {
    margin-top: 6px;
}

.py-calc select,
.py-calc input[type="number"] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 8px;
    border: 1px solid #665326;
    border-radius: 4px;
    background: #19140b;
    color: #fff3c4;
    font-size: 9px;
    font-weight: 800;
}

.py-calc select option {
    background: #211a0e;
    color: #fff3c4;
}

.py-calc-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.py-calc-field-grid label {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: #9d8a56;
    font-size: 7px;
    font-weight: 850;
}

.py-calc-field-grid output {
    display: grid;
    align-items: center;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid #5a4822;
    border-radius: 4px;
    background: #211a0e;
    color: var(--ref-gold);
    font-size: 12px;
    font-weight: 950;
}

.py-calc-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.py-calc-switch-row.is-stacked {
    display: grid;
}

.py-calc-switch-row label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    flex: 1;
    padding: 7px;
    border: 1px solid #594820;
    border-radius: 5px;
    background: rgba(20, 16, 8, .55);
    cursor: pointer;
}

.py-calc-switch-row input {
    accent-color: var(--ref-gold);
}

.py-calc-switch-row span,
.py-calc-switch-row strong,
.py-calc-switch-row small {
    display: block;
    min-width: 0;
}

.py-calc-switch-row strong {
    color: #eadcae;
    font-size: 8px;
}

.py-calc-switch-row small {
    margin-top: 2px;
    color: #8f7f51;
    font-size: 7px;
    line-height: 1.35;
}

.py-calc-move-select select {
    margin-top: 4px;
}

.py-calc-move-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}

.py-calc-move-facts > div,
.py-calc-exp-summary > div {
    padding: 7px;
    border: 1px solid #5b4820;
    border-radius: 5px;
    background: #211a0e;
}

.py-calc-move-facts span,
.py-calc-move-facts strong,
.py-calc-exp-summary span,
.py-calc-exp-summary strong {
    display: block;
}

.py-calc-move-facts span,
.py-calc-exp-summary span {
    color: #8e7e50;
    font-size: 7px;
    font-weight: 850;
    text-transform: uppercase;
}

.py-calc-move-facts strong,
.py-calc-exp-summary strong {
    margin-top: 3px;
    color: #fff1bd;
    font-size: 10px;
}

.py-calc-move-card > p {
    margin: 9px 0 0;
    color: #a79563;
    font-size: 8px;
    line-height: 1.45;
}

.py-calc-damage-result {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
    border: 2px solid #9b7828;
    border-radius: 9px;
    background:
        radial-gradient(circle at 15% 0, rgba(246, 207, 60, .13), transparent 42%),
        #211a0e;
    box-shadow: inset 0 0 0 3px #17130b;
}

.py-calc-roll {
    display: grid;
    align-content: center;
    padding: 12px;
    border: 2px solid #17130b;
    border-radius: 6px;
    background: var(--ref-gold);
    color: #17130b;
    box-shadow: inset 0 0 0 2px #ffe680;
}

.py-calc-roll > span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.py-calc-roll > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: #2c2d63;
    font-size: 39px;
    font-weight: 950;
    line-height: 1;
}

.py-calc-roll b,
.py-calc-roll i {
    font-style: normal;
}

.py-calc-roll i {
    color: #8d6d18;
    font-size: 20px;
}

.py-calc-roll small {
    margin-top: 7px;
    color: #624a12;
    font-size: 8px;
    font-weight: 800;
}

.py-calc-result-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.py-calc-result-facts > div {
    min-width: 0;
    padding: 9px;
    border: 1px solid #5e4b22;
    border-radius: 5px;
    background: #2a2214;
}

.py-calc-result-facts span,
.py-calc-result-facts strong {
    display: block;
}

.py-calc-result-facts span {
    color: #8e7d4d;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.py-calc-result-facts strong {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #f7e9b4;
    font-size: 10px;
}

.py-calc-roll-strip {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    gap: 2px;
    height: 38px;
    padding-top: 7px;
    border-top: 1px solid rgba(246, 207, 60, .13);
}

.py-calc-roll-strip i {
    min-width: 2px;
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(#ffe36a, #a9791f);
}

.py-calc-rule-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.py-calc-rule-notes article {
    padding: 10px;
    border: 1px solid #59461f;
    border-radius: 6px;
    background: #251e11;
}

.py-calc-rule-notes span,
.py-calc-rule-notes strong {
    display: block;
}

.py-calc-rule-notes span {
    color: var(--ref-gold);
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .09em;
}

.py-calc-rule-notes strong {
    margin-top: 4px;
    color: #f1e4b5;
    font-size: 9px;
}

.py-calc-rule-notes p,
.py-calc-inline-note {
    margin: 4px 0 0;
    color: #958452;
    font-size: 8px;
    line-height: 1.45;
}

.py-calc-stats-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 10px;
}

.py-calc-stat-builder > header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.py-calc-stat-species {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 9px;
}

.py-calc-dv-table {
    display: grid;
    gap: 4px;
    margin-top: 12px;
}

.py-calc-dv-table > div {
    display: grid;
    grid-template-columns: minmax(85px, 1.2fr) 70px minmax(70px, .8fr) minmax(115px, 1.1fr) 80px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid #51411e;
    border-radius: 4px;
    background: #211a0e;
}

.py-calc-dv-table .is-head {
    border: 0;
    background: transparent;
    color: #8d7c4d;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.py-calc-dv-table strong {
    color: #eaddad;
    font-size: 9px;
}

.py-calc-dv-table b,
.py-calc-dv-table output {
    color: #9d8c58;
    font-size: 9px;
    font-weight: 850;
}

.py-calc-dv-table em {
    color: var(--ref-gold);
    font-size: 13px;
    font-style: normal;
    font-weight: 950;
    text-align: right;
}

.py-calc-stat-output {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 14px;
    border: 2px solid #817024;
    border-radius: 8px;
    background: #211a0e;
}

.py-calc-stat-total {
    padding: 13px;
    border: 3px solid #17130b;
    border-radius: 6px;
    background: var(--ref-gold);
    color: #17130b;
    box-shadow: inset 0 0 0 2px #ffe883;
}

.py-calc-stat-total span,
.py-calc-stat-total strong,
.py-calc-stat-total small {
    display: block;
}

.py-calc-stat-total span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .1em;
}

.py-calc-stat-total strong {
    color: #2c2d63;
    font-size: 44px;
    line-height: 1;
}

.py-calc-stat-total small {
    margin-top: 5px;
    color: #644d13;
    font-size: 8px;
    font-weight: 800;
}

.py-calc-stat-bars {
    display: grid;
    gap: 7px;
}

.py-calc-stat-bars > div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 6px;
    color: #aa9864;
    font-size: 8px;
    font-weight: 850;
}

.py-calc-stat-bars i {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #17130b;
}

.py-calc-stat-bars b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--calc-blue), var(--ref-gold));
}

.py-calc-stat-bars em {
    color: #fff0bb;
    font-style: normal;
    text-align: right;
}

.py-calc-stat-insight {
    padding: 10px;
    border: 1px solid #594820;
    border-radius: 5px;
    background: #2a2214;
    color: #a99864;
    font-size: 8px;
    line-height: 1.5;
}

.py-calc-stat-output > button {
    padding: 9px;
    border-color: #a98622;
    background: #3b3016;
    color: #ffe36b;
    font-size: 8px;
}

.py-calc-exp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.py-calc-exp-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.py-calc-exp-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.py-calc-exp-progress {
    height: 9px;
    margin-top: 9px;
    overflow: hidden;
    border: 2px solid #17130b;
    border-radius: 999px;
    background: #4c3e1d;
}

.py-calc-exp-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: repeating-linear-gradient(90deg, var(--ref-gold) 0 14px, #d69d25 14px 28px);
}

.py-calc-battle-yield {
    margin-top: 10px;
    padding: 12px;
    border: 2px solid #17130b;
    border-radius: 6px;
    background: var(--calc-blue);
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
}

.py-calc-battle-yield span,
.py-calc-battle-yield strong,
.py-calc-battle-yield small {
    display: block;
}

.py-calc-battle-yield span {
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .1em;
}

.py-calc-battle-yield strong {
    font-size: 34px;
    line-height: 1.1;
}

.py-calc-battle-yield small {
    margin-top: 4px;
    color: #e2e7ff;
    font-size: 8px;
}

.py-calc-stat-exp-yield {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.py-calc-stat-exp-yield span {
    padding: 4px 6px;
    border: 1px solid #59471f;
    border-radius: 999px;
    background: #211a0e;
    color: #ad9a62;
    font-size: 7px;
    font-weight: 850;
}

.py-calc-level-table-card {
    overflow: hidden;
}

.py-calc-level-table {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #55431e;
    border-radius: 5px;
}

.py-calc-level-table > div {
    display: grid;
    grid-template-columns: 75px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 520px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(246, 207, 60, .1);
    background: #211a0e;
    color: #a99762;
    font-size: 8px;
}

.py-calc-level-table > div:nth-child(even) {
    background: #261f12;
}

.py-calc-level-table > div.is-head {
    position: sticky;
    z-index: 1;
    top: 0;
    background: #3b3018;
    color: var(--ref-gold);
    font-weight: 950;
    text-transform: uppercase;
}

.py-calc-level-table strong {
    color: #f2e5b6;
}

@media (max-width: 1180px) {
    .py-calc-battle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .py-calc-move-card {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .py-calc-stats-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 900px) {
    .py-calc-hero {
        grid-template-columns: 1fr;
    }

    .py-calc-tabs,
    .py-calc-rule-notes {
        grid-template-columns: 1fr;
    }

    .py-calc-tabs button {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .py-calc-stats-layout,
    .py-calc-exp-grid,
    .py-calc-damage-result {
        grid-template-columns: 1fr;
    }

    .py-calc-roll-strip {
        grid-column: 1;
    }

    .py-calc-stat-output {
        grid-template-columns: minmax(180px, .65fr) minmax(0, 1fr);
    }

    .py-calc-stat-output > button,
    .py-calc-stat-insight {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .py-ref.py-calc {
        padding: 10px;
    }

    .py-calc-battle-grid {
        grid-template-columns: 1fr;
    }

    .py-calc-move-card {
        grid-column: 1;
        grid-row: auto;
    }

    .py-calc-field-grid,
    .py-calc-move-facts,
    .py-calc-result-facts,
    .py-calc-exp-fields,
    .py-calc-exp-summary {
        grid-template-columns: 1fr;
    }

    .py-calc-stat-species {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .py-calc-stat-species img {
        grid-row: 1 / 3;
        width: 72px;
        height: 72px;
    }

    .py-calc-dv-table {
        overflow-x: auto;
    }

    .py-calc-dv-table > div {
        min-width: 610px;
    }

    .py-calc-stat-output {
        grid-template-columns: 1fr;
    }

    .py-calc-stat-output > button,
    .py-calc-stat-insight {
        grid-column: 1;
    }
}