/*
 * dailylogin.css — Monthly Daily Login calendar modal (js/dailylogin.js).
 * Reuses shell.css's .ui-modal-overlay/.ui-modal/.ui-modal-close primitives
 * for the frame; everything below is just the 30-day grid + claim button.
 */

.dl-overlay { z-index: 1200; } /* above the normal .ui-modal-overlay (1000) — this can be opened from any page, including one already showing a modal */
.dl-modal { max-width: 480px; text-align: center; position: relative; }

.dl-title { font-size: 17px; font-weight: 800; color: #2c1a08; letter-spacing: 1px; margin-bottom: 4px; }
.dl-sub { font-size: 12.5px; color: #8a6a48; margin-bottom: 16px; }

.dl-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
    max-height: 340px; overflow-y: auto; margin-bottom: 16px;
    scrollbar-width: none;
}
.dl-grid::-webkit-scrollbar { display: none; }

.dl-day {
    border-radius: 8px; padding: 6px 3px 7px; text-align: center;
    background: rgba(58,36,16,.05); border: 1.5px solid rgba(58,36,16,.15);
    transition: transform .15s;
}
.dl-day-num { font-size: 8px; letter-spacing: .5px; color: #8a6a48; font-family: var(--font-mono); }
.dl-day-icon { font-size: 20px; margin: 3px 0 2px; }
.dl-day-amt { font-size: 11.5px; font-weight: 800; color: #2c1a08; font-family: var(--font-mono); }
.dl-day-lbl { font-size: 8px; color: #8a6a48; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dl-day-locked { opacity: .45; }
.dl-day-claimed { background: rgba(43,138,62,.1); border-color: rgba(43,138,62,.35); }
.dl-day-claimed .dl-day-icon { color: #2b8a3e; }
.dl-day-available {
    background: rgba(200,100,26,.14); border-color: rgba(200,100,26,.6);
    box-shadow: 0 0 0 1px rgba(200,100,26,.3);
}
.dl-day-pulse { animation: dl-pulse 1.3s ease-in-out infinite; }
@keyframes dl-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.dl-claim-btn { width: 100%; padding: 13px 6px; font-size: 12px; }

.dl-flash {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    padding: 8px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
    white-space: nowrap; z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    animation: dl-flash-in .2s ease both;
}
.dl-flash-success { background: #2b8a3e; color: #fff8ec; }
.dl-flash-error   { background: #a3291d; color: #fff8ec; }
@keyframes dl-flash-in {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@container (max-width: 480px) {
    .dl-grid { grid-template-columns: repeat(5, 1fr); }
}