/* ===========================================================================
   Calculator — a small companion to the Dice Tower (sits just left of it).
   Theme variables come from app.css (:root).
   =========================================================================== */

.calc-fab {
    position: fixed; right: 5.2rem; bottom: 1.4rem; z-index: 9000;
    width: 3.4rem; height: 3.4rem; border: none; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #26242f, #14121a);
    color: var(--gold-soft); border-radius: 50%;
    display: grid; place-items: center; font-size: 1.4rem;
    box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 0 1px var(--line);
    transition: transform .18s ease, box-shadow .18s ease;
}
.calc-fab:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 34px rgba(0,0,0,.7), inset 0 0 0 1px var(--gold), 0 0 18px rgba(200,160,79,.3); }
.calc-fab:active { transform: scale(.94); }

.calc-panel {
    position: fixed; right: 5.2rem; bottom: 5.4rem; z-index: 9000;
    width: 15rem;
    background: linear-gradient(180deg, var(--panel), #14111d);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .8rem;
    transform-origin: bottom right;
    transform: translateY(12px) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .22s ease;
}
.calc-panel.is-open { transform: none; opacity: 1; pointer-events: auto; }

.calc-display {
    width: 100%; text-align: right; font-family: 'Cinzel', serif;
    background: #00000033; border: 1px solid var(--line); border-radius: .5rem;
    color: var(--ink); padding: .5rem .6rem; font-size: 1.2rem; margin-bottom: .2rem;
    overflow-x: auto;
}
.calc-display::placeholder { color: #6f685c; }
.calc-prev { text-align: right; color: var(--ink-soft); font-size: .74rem; min-height: 1rem; padding: 0 .2rem .4rem; overflow-x: auto; white-space: nowrap; }

.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.calc-key {
    cursor: pointer; border: 1px solid var(--line); background: #00000026; color: var(--ink);
    border-radius: .5rem; padding: .55rem 0; font-size: 1rem; font-family: 'Spectral', serif;
    transition: border-color .12s, background .12s, transform .08s;
}
.calc-key:hover { border-color: var(--gold); background: #c8a04f1a; }
.calc-key:active { transform: scale(.94); }
.calc-key.op { color: var(--gold-soft); }
.calc-key.fn { color: var(--ink-soft); }
.calc-key.eq { background: linear-gradient(180deg, #c8a04f33, #c8a04f14); border-color: var(--gold); color: var(--gold-soft); font-family: 'Cinzel', serif; }
.calc-key.eq:hover { background: #c8a04f2e; }

@media print { .calc-fab, .calc-panel { display: none !important; } }