/* checkin-v3.css — Daily Check-in underwater/gold redesign (2026-07-28, design final).
   Shell mirrors the minigames v3 family: ≥980 centered 400px panel · <980 bottom sheet.
   Close ✕ = .ck3-close, member of the modal-close-unify.css roster (32px spec).
   Reuses family keyframes already loaded globally (fzWinPulse/fzBurstFlash/fzRaysSpin/
   fzShimmer/fzTwinkle from scratch-win-v3.css + golden-egg-v3.css). */

/* ── shell ─────────────────────────────────────────────────────── */
html body #modal-checkin.modal-backdrop {
  background: rgba(4, 8, 12, .8) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 210 !important;
}
html body #modal-checkin .modal {
  background:
    linear-gradient(180deg, rgba(9, 38, 50, .85), rgba(4, 14, 22, .94)),
    url('../img/bg/underwater-modal.jpg') center / cover no-repeat !important;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .65) !important;
  position: relative !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* mobile-phase1 .modal{align-items:flex-end} would right-collapse children */
  justify-content: flex-start !important;
  color: #fff;
}
@media (max-width: 979px) {
  html body #modal-checkin.modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  html body #modal-checkin .modal {
    width: 100% !important; max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important; border-bottom: none !important;
    max-height: 92vh !important; margin: 0 !important;
  }
}
@media (min-width: 980px) {
  html body #modal-checkin.modal-backdrop { align-items: center !important; padding: 24px !important; }
  html body #modal-checkin .modal {
    width: 100% !important; max-width: 400px !important;
    border-radius: 18px !important; margin: auto !important; max-height: 92vh !important;
  }
}

/* ── header (purple calendar badge) ────────────────────────────── */
#modal-checkin .ck3-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; flex: 0 0 auto; }
#modal-checkin .ck3-badge {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #2E1A5E;  /* calendar-check glyph (inline SVG — Tabler font icons banned: prod font subset) */
  background: radial-gradient(circle at 32% 28%, #E4D9FF, #A78BFA 48%, #6D28D9);
  border: 1px solid rgba(228, 217, 255, .55);
  box-shadow: 0 0 14px rgba(167, 139, 250, .45), inset 0 -2px 4px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .5);
}
#modal-checkin .ck3-title {
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fz-white, #fff); line-height: 1;
  text-shadow: 0 1px 12px rgba(245, 200, 66, .35);
}
#modal-checkin .ck3-sub { font-size: 11.5px; color: var(--fz-text-3, #6E7B88); margin-top: 3px; }

/* ── near-black stage ──────────────────────────────────────────── */
#modal-checkin .ck3-stage {
  position: relative; overflow: hidden; flex: 0 0 auto;
  margin: 14px 18px 10px; border-radius: 16px;
  border: 1px solid rgba(245, 200, 66, .35);
  background:
    radial-gradient(120% 110% at 50% 108%, rgba(199, 149, 23, .16), transparent 45%),
    radial-gradient(140% 110% at 50% -10%, rgba(9, 42, 56, .9), rgba(4, 14, 22, .97) 62%),
    #030B12;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
  padding: 12px 14px 18px;
}
#modal-checkin .ck3-spot {
  position: absolute; left: -25%; top: 0; width: 150%; height: 100%; pointer-events: none;
  background: conic-gradient(from 178deg at 50% 0%, transparent, rgba(255, 232, 150, .13) 8deg, rgba(255, 232, 150, .2) 12deg, rgba(255, 232, 150, .13) 16deg, transparent 24deg);
}
#modal-checkin .ck3-spark { position: absolute; color: rgba(255, 224, 130, .85); pointer-events: none; line-height: 0; }
#modal-checkin .ck3-spark1 { left: 8%; top: 44%; animation: fzTwinkle 2.4s ease-in-out infinite; }
#modal-checkin .ck3-spark2 { right: 7%; top: 30%; animation: fzTwinkle 3.1s ease-in-out .8s infinite; }

/* ① streak row */
#modal-checkin .ck3-streak { position: relative; display: flex; align-items: center; justify-content: space-between; }
#modal-checkin .ck3-streak-l { display: flex; align-items: center; gap: 8px; }
#modal-checkin .ck3-flamebadge {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #6B4A08;
  background: radial-gradient(circle at 32% 28%, #FFE082, var(--fz-gold, #F5C842) 48%, #8A6410);
  box-shadow: 0 0 10px rgba(245, 200, 66, .4), inset 0 2px 3px rgba(255, 255, 255, .5), inset 0 -2px 4px rgba(0, 0, 0, .3);
}
#modal-checkin .ck3-streak-t {
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 14px; font-weight: 800; color: var(--fz-gold, #F5C842); letter-spacing: .02em;
}
#modal-checkin .ck3-streak-r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fz-text-3, #6E7B88); }

/* ② journey track */
#modal-checkin .ck3-track { position: relative; margin-top: 16px; }
#modal-checkin .ck3-base {
  position: absolute; left: 18px; right: 18px; top: 12px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .08);
}
#modal-checkin .ck3-prog {
  position: absolute; left: 18px; top: 12px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--fz-gold-deep, #C08E1A), var(--fz-gold, #F5C842));
  box-shadow: 0 0 8px rgba(245, 200, 66, .6);
}
#modal-checkin .ck3-nodes { position: relative; display: flex; justify-content: space-between; }
#modal-checkin .ck3-col { width: 30px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#modal-checkin .ck3-node {
  display: flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto;
  margin-top: 0;
}
#modal-checkin .ck3-node.ck3-nd {          /* claimed day: green glass + white check */
  width: 24px; height: 24px; margin-top: 1px;
  color: #fff;
  background: radial-gradient(circle at 40% 30%, rgba(30, 213, 113, .4), rgba(10, 42, 30, .95));
  border: 1px solid rgba(30, 213, 113, .55);
}
#modal-checkin .ck3-node.ck3-nt {          /* today: gold coin, breathing */
  width: 30px; height: 30px; margin-top: -2px;
  color: #6B4A08;
  background: radial-gradient(circle at 32% 26%, #FFF3C4, #F5C842 45%, #C79517 78%, #9A7112);
  border: 1px solid rgba(255, 240, 184, .75);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(90, 58, 6, .5), 0 0 12px rgba(245, 200, 66, .55);
  animation: ck3PulseGold 2s ease-in-out infinite;
}
@keyframes ck3PulseGold {
  0%, 100% { box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(90, 58, 6, .5), 0 0 10px rgba(245, 200, 66, .45); }
  50% { box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(90, 58, 6, .5), 0 0 20px rgba(245, 200, 66, .85); }
}
#modal-checkin .ck3-node.ck3-nf {          /* future: dark groove + lock */
  width: 24px; height: 24px; margin-top: 1px;
  color: rgba(255, 255, 255, .35);
  background: radial-gradient(circle at 50% 32%, #10202B, #060E15 80%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
#modal-checkin .ck3-node.ck3-n7 {          /* final-day jackpot node */
  width: 28px; height: 28px; margin-top: -1px;
  color: var(--fz-gold, #F5C842);
  border: 1px solid rgba(245, 200, 66, .5);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 0 10px rgba(245, 200, 66, .3);
}
#modal-checkin .ck3-namt {
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 8px; font-weight: 800; color: rgba(255, 255, 255, .3); white-space: nowrap;
}
#modal-checkin .ck3-namt.ck3-ag { color: #4EF09A; }
#modal-checkin .ck3-namt.ck3-au { color: var(--fz-gold, #F5C842); }

/* ③ today hero */
#modal-checkin .ck3-hero { position: relative; text-align: center; margin-top: 16px; }
#modal-checkin .ck3-rays {
  position: absolute; left: 50%; top: 58%; width: 210px; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(rgba(255, 215, 0, .13) 0 11deg, transparent 11deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: fzRaysSpin 12s linear infinite;
}
#modal-checkin .ck3-flash {
  position: absolute; left: 50%; top: 56%; width: 200px; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 4;
  background: radial-gradient(circle, rgba(220, 255, 235, .9), rgba(30, 213, 113, .4) 45%, transparent 70%);
  animation: fzBurstFlash .7s ease-out forwards;
}
#modal-checkin .ck3-eyebrow {
  position: relative; z-index: 1;
  font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245, 200, 66, .78);
}
#modal-checkin .ck3-bigcoin {
  position: relative; z-index: 1;
  display: inline-flex; width: 74px; height: 74px; border-radius: 50%; margin-top: 10px;
  background: conic-gradient(from 210deg, #8A6410, #FFE9A8 14%, #C79517 30%, #8A6410 46%, #FFF3C4 60%, #B8860B 76%, #8A6410);
  box-shadow: 0 0 22px rgba(245, 200, 66, .45), 0 6px 16px rgba(0, 0, 0, .5);
  animation: fzWinPulse 2.2s ease-in-out infinite;
}
#modal-checkin .ck3-bc-face {
  position: absolute; inset: 4px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, #FFF3C4, #F5C842 42%, #C79517 72%, #9A7112);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -5px 9px rgba(90, 58, 6, .55);
}
#modal-checkin .ck3-bc-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: fzShimmer 3s linear infinite;
}
#modal-checkin .ck3-bc-ico {
  color: #6B4A08; line-height: 0;
  filter: drop-shadow(0 1px 0 rgba(255, 243, 196, .8));
}
#modal-checkin .ck3-amtrow {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 8px;
}
#modal-checkin .ck3-amt {
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 36px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #FFF3C4 10%, #F5C842 55%, #C79517);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(245, 200, 66, .45));
}
#modal-checkin .ck3-unit {
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245, 200, 66, .8);
}
#modal-checkin .ck3-wallet {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px;
  font-size: 11px; color: rgba(255, 255, 255, .55);
}
#modal-checkin .ck3-wallet svg { color: rgba(245, 200, 66, .7); flex: 0 0 auto; }

/* claimed: the whole hero turns green */
#modal-checkin .ck3-stage.ck3-donest .ck3-rays {
  background: repeating-conic-gradient(rgba(30, 213, 113, .14) 0 11deg, transparent 11deg 30deg);
}
#modal-checkin .ck3-stage.ck3-donest .ck3-eyebrow { color: #4EF09A; }
#modal-checkin .ck3-stage.ck3-donest .ck3-bigcoin {
  background: conic-gradient(from 210deg, #0A3A26, #9BF2C6 14%, #1ED571 30%, #0A3A26 46%, #C9F7DE 60%, #129050 76%, #0A3A26);
  box-shadow: 0 0 22px rgba(30, 213, 113, .5), 0 6px 16px rgba(0, 0, 0, .5);
}
#modal-checkin .ck3-stage.ck3-donest .ck3-bc-face {
  background: radial-gradient(circle at 40% 30%, rgba(30, 213, 113, .45), rgba(10, 42, 30, .96));
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .3), inset 0 -5px 9px rgba(0, 0, 0, .55);
}
#modal-checkin .ck3-stage.ck3-donest .ck3-bc-ico { color: #fff; filter: none; }
#modal-checkin .ck3-stage.ck3-donest .ck3-amt {
  background: linear-gradient(180deg, #D9FFEA 10%, #4EF09A 55%, #129050);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(30, 213, 113, .5));
}
#modal-checkin .ck3-stage.ck3-donest .ck3-unit { color: rgba(78, 240, 154, .85); }

/* ── button / tomorrow / info bar ──────────────────────────────── */
#modal-checkin .ck3-btn {
  height: 50px; border-radius: 14px; margin: 0 18px 8px; border: none; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fz-font-body, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: .03em;
  color: var(--fz-on-gold, #14110A);
  background: linear-gradient(180deg, #FFE082 0%, #F5C842 45%, #C08E1A 100%);
  box-shadow: 0 6px 18px rgba(245, 200, 66, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .15s ease, box-shadow .15s ease;
}
#modal-checkin .ck3-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245, 200, 66, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
#modal-checkin .ck3-btn:not(:disabled):active { transform: translateY(0) scale(.985); }
#modal-checkin .ck3-btn:disabled {
  opacity: .55; cursor: not-allowed; box-shadow: none;
  background: var(--fz-surface-2, #16333D);
  color: var(--fz-text-3, #6E7B88);
  filter: none;
}
#modal-checkin .ck3-loader { animation: ck3Rot 1s linear infinite; }
@keyframes ck3Rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#modal-checkin .ck3-tmr {
  text-align: center; margin: 0 18px 8px; font-size: 11px; color: rgba(255, 255, 255, .5); flex: 0 0 auto;
}
#modal-checkin .ck3-tmr b {
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-weight: 800; color: #4EF09A;
}
#modal-checkin .ck3-info {
  margin: 0 18px 18px; padding: 10px 12px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(167, 139, 250, .07);
  border: 1px solid rgba(167, 139, 250, .25);
  color: var(--fz-text-2, #A6B0BC); font-size: 10.5px; line-height: 1.55; text-align: center;
}

/* ── loading / disabled states ─────────────────────────────────── */
#modal-checkin .ck3-off { padding: 34px 24px 60px; text-align: center; }
#modal-checkin .ck3-off-ico { font-size: 40px; margin-bottom: 10px; opacity: .4; }
#modal-checkin .ck3-off-t { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .6); margin-bottom: 6px; }
#modal-checkin .ck3-off-s { font-size: 12px; color: rgba(255, 255, 255, .3); }

/* reduced motion: kill decorative loops */
@media (prefers-reduced-motion: reduce) {
  #modal-checkin .ck3-node.ck3-nt, #modal-checkin .ck3-bigcoin, #modal-checkin .ck3-bc-shine,
  #modal-checkin .ck3-rays, #modal-checkin .ck3-spark { animation: none !important; }
}