/* Box stock and countdown (boxes.js), on the home and booster pages. */
.box-allowance{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin:14px auto 0;padding:9px 15px;border:1px solid #a1b78c33;border-radius:30px;background:#101e17cc;font:11px monospace;letter-spacing:.5px;color:#b9c9ad}
a.box-allowance{color:#b9c9ad;text-decoration:none;transition:border-color .2s}a.box-allowance:hover{border-color:#a1b78c80}
.hero-copy .box-allowance{margin:16px 0 0}
.box-pips{display:inline-flex;gap:4px}
.box-pips i{width:12px;height:9px;border-radius:2px;border:1px solid #8fa77d88;background:transparent}
.box-pips i.full{background:linear-gradient(135deg,#d9ecbb,#9ec47f);border-color:#d9ecbb;box-shadow:0 0 6px #c8e7ab44}
.box-count{color:#e5eddf;font-weight:600}
.box-timer{color:#8fa585;font-variant-numeric:tabular-nums}
.box-allowance.is-empty .box-count{color:#f0cfa6}

/* No box left: the closed box rests, sealed, until the next one comes back. */
.box-stage.depleted .box{animation:none;filter:grayscale(.65) brightness(.75) drop-shadow(0 35px 25px #0009)}
.box-stage.depleted .seal{background:#8c9a7f;color:#1d2c20;font-variant-numeric:tabular-nums}
.no-box{max-width:470px;margin:10px auto 0;padding:22px 26px;border:1px dashed #a1b78c44;border-radius:16px;background:#101e1799}
.no-box h2{font:normal 26px/1.2 Georgia,serif;margin:8px 0 10px}
.no-box p{color:#99ac9b;font-size:13px;line-height:1.7;margin:0 0 14px}
.no-box strong{color:#e5eddf;font-variant-numeric:tabular-nums}
.no-box .secondary{display:inline-block}
.no-box:not([hidden]){animation:no-box-in .45s ease both}
@keyframes no-box-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.no-box:not([hidden]){animation:none}}

html[data-theme=cream] :is(.box-allowance,a.box-allowance){background:#fffaf0cc;border-color:#cfcbb7;color:#616b58}
html[data-theme=cream] .box-pips i{border-color:#9aa58a}
html[data-theme=cream] .box-pips i.full{background:linear-gradient(135deg,#4f8a66,#315f49);border-color:#315f49;box-shadow:none}
html[data-theme=cream] .box-count{color:#283e32}
html[data-theme=cream] .box-timer{color:#616b58}
html[data-theme=cream] .box-allowance.is-empty .box-count{color:#9a5a2b}
html[data-theme=cream] .no-box{background:#fffaf0;border-color:#cfcbb7}
html[data-theme=cream] .no-box p{color:#616b58}
html[data-theme=cream] .no-box strong{color:#283e32}