/* ==========================================================================
   NEXTBALL — Daily Gift (monthly login calendar). Markup: logincal.js
   Tokens from arena.css (--bg-*, --fg-*, --orange*, --gold*, --f-display, --f-body)
   ========================================================================== */

/* ---- menu button (next to Discord / Invite) ---- */
.btn-dailygift { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; border-color: transparent !important; color: #2A1A00 !important;
    background: linear-gradient(135deg, #FFE08A 0%, #F2B632 45%, #E08A12 100%) !important; box-shadow: 0 0 0 1px rgba(255, 224, 138, .35), 0 4px 16px rgba(242, 182, 50, .35); }
.btn-dailygift:hover { filter: brightness(1.08); }
.btn-dailygift > svg { width: 17px; height: 17px; flex: none; color: #2A1A00; }
.btn-dailygift > span { font-weight: 800; }
.btn-dailygift .dg-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: #2A1A00; color: #FFD25A; font: 800 11px/1.2 var(--f-display, sans-serif); white-space: nowrap; }
.btn-dailygift .dg-chip:empty { display: none; }
.btn-dailygift .dg-chip .nbc { width: 11px; height: 11px; }
.btn-dailygift .dg-chip svg { width: 11px; height: 11px; color: #6BEA97; }
.btn-dailygift .dg-shine { position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.btn-dailygift.is-due { animation: dg-btn-glow 1.8s ease-in-out infinite; }
.btn-dailygift.is-due > svg { animation: dg-wiggle 2.4s ease-in-out infinite; transform-origin: 50% 85%; }
.btn-dailygift.is-due .dg-shine { opacity: 1; animation: dg-btn-shine 2.6s ease-in-out infinite; }
.btn-dailygift:not(.is-due) { background: linear-gradient(135deg, #5A4A22, #3A2F14) !important; color: #FFE08A !important; box-shadow: none; }
.btn-dailygift:not(.is-due) > svg { color: #FFD25A; }
@keyframes dg-btn-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 224, 138, .35), 0 4px 16px rgba(242, 182, 50, .3); } 50% { box-shadow: 0 0 0 3px rgba(255, 224, 138, .25), 0 4px 26px rgba(242, 182, 50, .7); } }
@keyframes dg-btn-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes dg-wiggle { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-8deg); } 86% { transform: rotate(5deg); } }
@media (max-width: 1000px) { .btn-dailygift > span { display: none; } }

/* ---- overlay + panel ---- */
.dg-ov { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 6, 9, .72); backdrop-filter: blur(6px); }
.dg-ov.open { display: flex; animation: dg-fade 220ms ease-out; }
.dg { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 18px; border-radius: 10px;
    background: linear-gradient(180deg, #17191F 0%, #111317 100%); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); color: var(--fg-0, #F2F3F5); font-family: var(--f-body, system-ui); }
.dg-ov.open .dg { animation: dg-pop 320ms cubic-bezier(.2, 1.2, .3, 1); }
@keyframes dg-fade { from { opacity: 0; } }
@keyframes dg-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.dg-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--fg-1, #C9CCD3); font-size: 14px; cursor: pointer; z-index: 3; }
.dg-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.dg-kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--f-display, inherit); letter-spacing: .2em; text-transform: uppercase; color: var(--orange, #FF6A13); }
.dg-kicker svg { width: 13px; height: 13px; }
.dg-kicker--gold { color: var(--gold, #E4B13A); }
.dg-hd h3 { margin: 8px 0 4px; font: 800 28px/1 var(--f-display, inherit); letter-spacing: .02em; text-transform: uppercase; }
.dg-hd p { margin: 0; color: var(--fg-2, #8D929C); font-size: 13px; }

.dg-prog { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; font-size: 12px; color: var(--fg-2, #8D929C); white-space: nowrap; }
.dg-prog b { color: var(--fg-0, #fff); font: 700 14px/1 var(--f-display, inherit); }
.dg-prog-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.dg-prog-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--orange, #FF6A13), var(--gold, #E4B13A)); transition: width 700ms cubic-bezier(.2, .8, .2, 1); }

/* ---- calendar ---- */
.dg-week, .dg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dg-week { margin-bottom: 6px; }
.dg-week span { text-align: center; font: 700 9px/1 var(--f-display, inherit); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2, #8D929C); opacity: .7; }
.dg-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; height: 74px; padding: 6px 4px 6px;
    border: 1px solid rgba(255, 255, 255, .06); border-radius: 7px; background: rgba(255, 255, 255, .03); color: var(--fg-1, #C9CCD3); font: inherit; cursor: default; transition: transform 160ms, border-color 160ms, background 160ms; }
.dg-n { align-self: flex-start; font: 700 11px/1 var(--f-display, inherit); color: var(--fg-2, #8D929C); }
.dg-ic { display: grid; place-items: center; width: 26px; height: 26px; }
.dg-ic svg { width: 22px; height: 22px; }
.dg-c { display: inline-flex; align-items: center; gap: 3px; font: 700 11px/1 var(--f-display, inherit); font-variant-numeric: tabular-nums; color: var(--gold, #E4B13A); }
.dg-c .nbc { width: 11px; height: 11px; }

.dg-day.is-big { border-color: rgba(228, 177, 58, .35); background: linear-gradient(160deg, rgba(228, 177, 58, .14), rgba(228, 177, 58, .03)); }
.dg-day.is-big .dg-ic svg { width: 26px; height: 26px; }
.dg-day.is-locked .dg-ic { color: rgba(255, 255, 255, .22); }
.dg-day.is-big.is-locked .dg-ic { color: rgba(228, 177, 58, .55); }
.dg-day.is-done { background: rgba(56, 214, 107, .07); border-color: rgba(56, 214, 107, .22); }
.dg-day.is-done .dg-ic { color: #38D66B; }
.dg-day.is-done .dg-c { color: var(--fg-2, #8D929C); }
.dg-day.is-missed { opacity: .38; }
.dg-day.is-missed .dg-ic { color: var(--fg-2, #8D929C); position: relative; }
.dg-day.is-missed .dg-ic::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: currentColor; transform: rotate(-35deg); border-radius: 1px; }
.dg-day.is-missed .dg-c { text-decoration: line-through; color: var(--fg-2, #8D929C); }
.dg-day.is-today { cursor: pointer; border-color: var(--orange, #FF6A13); background: linear-gradient(160deg, rgba(255, 106, 19, .28), rgba(255, 106, 19, .07)); animation: dg-glow 1.8s ease-in-out infinite; }
.dg-day.is-today .dg-ic { color: #fff; animation: dg-wiggle 2.2s ease-in-out infinite; transform-origin: 50% 85%; }
.dg-day.is-today:hover { transform: translateY(-2px); }
.dg-tag { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 3px 6px; border-radius: 3px; background: var(--orange, #FF6A13); color: var(--orange-ink, #1A0A00); font: 800 8px/1 var(--f-display, inherit); letter-spacing: .14em; text-transform: uppercase; }
.dg-day.is-just { animation: dg-flip 700ms cubic-bezier(.2, 1.2, .3, 1); }
@keyframes dg-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 19, .0), 0 0 18px rgba(255, 106, 19, .25); } 50% { box-shadow: 0 0 0 4px rgba(255, 106, 19, .12), 0 0 26px rgba(255, 106, 19, .45); } }
@keyframes dg-flip { 0% { transform: rotateY(90deg) scale(.9); } 100% { transform: none; } }

/* ---- perfect month ---- */
.dg-perfect { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 8px; border: 1px solid rgba(228, 177, 58, .3);
    background: radial-gradient(120% 140% at 0% 0%, rgba(228, 177, 58, .14), transparent 60%), rgba(255, 255, 255, .02); }
.dg-perfect.is-lost { filter: grayscale(.7); opacity: .65; }
.dg-perfect-art { position: relative; flex: none; width: 210px; }
.dg-perfect-card { width: 210px; height: 72px; border-radius: 6px; overflow: hidden; }
.dg-perfect-card .cos-art { display: block; width: 100%; height: 100%; }
.dg-perfect-card .cos-bg { width: 100%; height: 100%; }
.dg-ava { position: absolute; right: -14px; bottom: -16px; width: 52px; height: 52px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.dg-ava .cos-art { display: block; width: 100%; height: 100%; }
.dg-perfect-txt h4 { margin: 6px 0 4px; font: 800 16px/1.15 var(--f-display, inherit); text-transform: uppercase; letter-spacing: .02em; }
.dg-perfect-txt p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--fg-1, #C9CCD3); }
.dg-perfect-txt p b { color: var(--fg-0, #fff); }
.dg-perfect-txt .nbc { width: 12px; height: 12px; vertical-align: -1px; }
.dg-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 3px; font: 700 10px/1 var(--f-display, inherit); letter-spacing: .1em; text-transform: uppercase; }
.dg-pill svg { width: 12px; height: 12px; }
.dg-pill--on { background: rgba(255, 106, 19, .16); color: var(--orange-hi, #FF9A55); }
.dg-pill--ok { background: rgba(56, 214, 107, .16); color: #6BEA97; }
.dg-pill--off { background: rgba(255, 255, 255, .06); color: var(--fg-2, #8D929C); }

/* ---- footer ---- */
.dg-ft { margin-top: 16px; text-align: center; }
.dg-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 26px; border: 0; border-radius: 6px; background: var(--orange, #FF6A13); color: var(--orange-ink, #1A0A00);
    font: 800 14px/1 var(--f-display, inherit); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px rgba(255, 106, 19, .35); transition: transform 140ms, filter 140ms; }
.dg-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dg-cta svg { width: 18px; height: 18px; }
.dg-cta span { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(0, 0, 0, .2); }
.dg-cta .nbc { width: 14px; height: 14px; }
.dg-note { margin: 8px 0 0; font-size: 12px; color: var(--fg-2, #8D929C); }
.dg-done { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-1, #C9CCD3); }
.dg-done > svg { width: 18px; height: 18px; color: #38D66B; }
.dg-done b { display: inline-flex; align-items: center; gap: 3px; color: var(--gold, #E4B13A); }
.dg-done .nbc { width: 12px; height: 12px; }

/* ---- opening moment ---- */
.dg-fx { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: inherit; overflow: hidden;
    background: radial-gradient(70% 60% at 50% 45%, #2A1608 0%, #0E0F13 70%); opacity: 0; transition: opacity 240ms; --box: #FF6A13; --box-dk: #B8430A; --rib: #FFD27A; }
.dg-fx.is-gold { background: radial-gradient(70% 60% at 50% 45%, #2E2208 0%, #0E0F13 70%); --box: #E4B13A; --box-dk: #9C7414; --rib: #FFF1C4; }
.dg-fx.is-in { opacity: 1; }
.dg-rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: 0; transform: scale(.3);
    background: repeating-conic-gradient(from 0deg, rgba(255, 210, 122, .16) 0deg 9deg, transparent 9deg 22deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 60%); mask: radial-gradient(circle, #000 0 18%, transparent 60%); }
.dg-flash { position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; opacity: 0; }

.dg-box { position: relative; width: 120px; height: 110px; margin-top: -30px; transform: translateY(-60px) scale(.6); opacity: 0; transition: transform 420ms cubic-bezier(.2, 1.4, .4, 1), opacity 200ms; }
.dg-fx.is-in .dg-box { transform: none; opacity: 1; }
.dg-box-body { position: absolute; left: 8px; right: 8px; bottom: 0; height: 74px; border-radius: 4px 4px 8px 8px; background: linear-gradient(180deg, var(--box), var(--box-dk)); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .18), 0 18px 30px rgba(0, 0, 0, .5); }
.dg-box-lid { position: absolute; left: 0; right: 0; top: 14px; height: 30px; border-radius: 5px; background: linear-gradient(180deg, var(--box), var(--box-dk)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2); z-index: 2; transform-origin: 20% 100%; }
.dg-rib-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 16px; margin-left: -8px; background: var(--rib); opacity: .95; }
.dg-bow { position: absolute; left: 50%; top: -18px; width: 48px; height: 22px; margin-left: -24px; }
.dg-bow::before, .dg-bow::after { content: ''; position: absolute; top: 2px; width: 22px; height: 18px; border: 5px solid var(--rib); border-radius: 50% 50% 40% 40%; }
.dg-bow::before { left: 0; transform: rotate(-18deg); }
.dg-bow::after { right: 0; transform: rotate(18deg); }
.dg-fx.is-shake .dg-box { animation: dg-shake 1.1s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes dg-shake {
    0%, 100% { transform: none; } 10% { transform: rotate(-4deg); } 20% { transform: rotate(4deg); } 30% { transform: rotate(-6deg) translateY(-2px); } 40% { transform: rotate(6deg); }
    50% { transform: rotate(-9deg) translateY(-4px); } 60% { transform: rotate(9deg); } 70% { transform: rotate(-12deg) scale(1.04); } 80% { transform: rotate(12deg) scale(1.06); } 90% { transform: scale(1.1, .92); } }

.dg-fx.is-open .dg-box-lid { animation: dg-lid 700ms cubic-bezier(.2, .8, .3, 1) forwards; }
.dg-fx.is-open .dg-box { animation: dg-land 500ms cubic-bezier(.2, 1.4, .4, 1); }
.dg-fx.is-open .dg-rays { transition: opacity 400ms, transform 700ms cubic-bezier(.2, 1, .3, 1); opacity: 1; transform: scale(1); animation: dg-spin 14s linear infinite; }
.dg-fx.is-open .dg-flash { animation: dg-flash 600ms ease-out; }
@keyframes dg-lid { 0% { transform: none; } 100% { transform: translate(-70px, -120px) rotate(-55deg); opacity: 0; } }
@keyframes dg-land { 0% { transform: scale(1.12, .86); } 100% { transform: none; } }
@keyframes dg-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes dg-flash { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(80); } }

.dg-coins { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.dg-coins i { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4C8, #F2C443 45%, #B8860B); box-shadow: inset 0 0 0 2px rgba(120, 80, 0, .35);
    animation: dg-coin 1100ms cubic-bezier(.15, .7, .3, 1) var(--d) both; }
@keyframes dg-coin { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
    100% { transform: translate(calc(var(--x) * 1.1), calc(var(--y) + 90px)) rotate(var(--r)) scale(.8); opacity: 0; } }

.dg-win { position: relative; z-index: 2; margin-top: 26px; text-align: center; opacity: 0; transform: translateY(12px); }
.dg-fx.is-open .dg-win { transition: opacity 300ms 350ms, transform 400ms 350ms cubic-bezier(.2, 1.3, .4, 1); opacity: 1; transform: none; }
.dg-amt { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 4px; font: 800 44px/1 var(--f-display, inherit); color: var(--gold, #E4B13A); text-shadow: 0 4px 24px rgba(228, 177, 58, .45); font-variant-numeric: tabular-nums; }
.dg-amt .nbc { width: 34px; height: 34px; }
.dg-extra p { margin: 6px 0 0; font-size: 13px; color: var(--fg-1, #C9CCD3); }
.dg-extra p b { color: #fff; }
.dg-collect { margin-top: 16px; }
.dg-err { margin: 0; color: var(--fg-1, #C9CCD3); font-size: 14px; }
.dg-fx.is-err .dg-box { opacity: .35; }

/* ---- small screens ---- */
@media (max-width: 560px) {
    .dg { padding: 18px 12px 14px; }
    .dg-hd h3 { font-size: 22px; }
    .dg-week, .dg-grid { gap: 4px; }
    .dg-day { height: 52px; padding: 4px 2px; }
    .dg-ic, .dg-ic svg { width: 18px; height: 18px; }
    .dg-c { font-size: 9.5px; }
    .dg-perfect { flex-direction: column; align-items: stretch; }
    .dg-perfect-art, .dg-perfect-card { width: 100%; }
    .dg-perfect-card { height: 80px; }
    .dg-ava { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .dg-day.is-today, .dg-day.is-today .dg-ic, .btn-dailygift.is-due > svg, .btn-dailygift.is-due, .btn-dailygift .dg-shine, .dg-fx.is-open .dg-rays { animation: none; }
}

.dg.is-fx { overflow: hidden; }

/* ---- item days: the real item fills the box ---- */
.dg-day.is-item { padding: 0; overflow: hidden; justify-content: flex-end; border-color: rgba(228, 177, 58, .45); background: #0C0D11; }
.dg-day.is-item.is-today { border-color: var(--orange, #FF6A13); }
.dg-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.dg-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 30%, transparent 45%, rgba(0,0,0,.85) 100%); }
.dg-day.is-item .dg-n { position: absolute; top: 5px; left: 6px; z-index: 1; color: #fff; text-shadow: 0 1px 3px #000; }
.dg-badge { position: absolute; top: 4px; right: 4px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #38D66B; color: #08200F; }
.dg-badge svg { width: 12px; height: 12px; }
.dg-iname { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 0 4px 5px; font: 700 10px/1.1 var(--f-display, inherit); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
.dg-iname em { font-style: normal; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi, #FFE08A); }
.dg-day.is-item.is-missed { opacity: .45; filter: grayscale(.85); }
.dg-fxvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-cardbg { position: absolute; inset: 0; }
.dg-cardbg .cos-bg { width: 100%; height: 100%; }
.dg-frame .cos-av-wrap { position: relative; display: block; width: 30px; height: 30px; margin-top: -16px; font-size: 11px; }
.dg-frame .cos-av { width: 100%; height: 100%; }
.dg-banner { position: absolute; left: 50%; top: 38%; display: block; transform: translate(-50%, -50%) scale(.4); transform-origin: center; }
.dg-banner .banner-preview { min-width: 180px; justify-content: center; white-space: nowrap; }
.dg-nc { font: 800 13px/1 var(--f-display, inherit); margin-top: -14px; }
.dg-won-art { position: relative; width: 220px; height: 110px; margin: 0 auto 10px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #0C0D11; border: 1px solid rgba(228, 177, 58, .4); }
.dg-won-art .dg-banner { top: 50%; transform: translate(-50%, -50%) scale(.95); }
.dg-won-art .dg-frame .cos-av-wrap { width: 72px; height: 72px; margin: 0; }
.dg-won-art .dg-nc { font-size: 22px; margin: 0; }
.dg-fx .dg-box { transition: opacity 300ms, transform 420ms cubic-bezier(.2, 1.4, .4, 1); }
.dg-fx.is-open .dg-box { opacity: .0; }
@media (max-width: 560px) { .dg-day.is-item .dg-iname { font-size: 8px; } .dg-frame .cos-av-wrap { width: 28px; height: 28px; } .dg-banner { transform: translate(-50%, -50%) scale(.28); } }

/* ---- perfect month: Pixel Burst preview ---- */
.dg-pixel { position: relative; width: 210px; height: 118px; border-radius: 6px; overflow: hidden; background: #08070F; }
.dg-pixel-tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 3px; background: rgba(0, 0, 0, .65); font: 800 8px/1 var(--f-display, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi, #FFE08A); }
@media (max-width: 560px) { .dg-pixel { width: 100%; height: 150px; } }

.dg-fx[hidden] { display: none !important; }
.dg-day.is-today { cursor: pointer; }