/* Shared check-in dialog and arcade player-center components. */
.dc-card {
  box-sizing: border-box; min-width: 0; padding: 22px; margin: 0;
  border: 1px solid #405b72; border-radius: 8px;
  background: linear-gradient(130deg, #24394b, #1b2e3e);
  color: #ecf0f1; font: 14px/1.55 system-ui, -apple-system, sans-serif; text-align: left;
}
.dc-card *, .dc-detail * { box-sizing: border-box; }
.dc-dashboard { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 18px; }
.dc-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dc-heading h2, .dc-summary-card h2 { margin: 0; color: #f0f6fc; font-size: 23px; font-weight: 800; letter-spacing: .3px; }
.dc-heading h2::before { content: '▦'; color: #94b8d4; margin-right: 10px; font-weight: 500; }
.dc-muted { color: #afc3d4; font-size: 12px; }
.dc-eyebrow { color: #a5bdd0; font-size: 10px; letter-spacing: 2px; }
.dc-subtitle { color: #afc3d4; margin: 8px 0 24px; }
.dc-placeholder { color: #afc3d4; padding: 45px 0; font-size: 13px; }
.dc-medal { display: block; width: 116px; height: 116px; flex-shrink: 0; }
.dc-medal img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 7px #07192555); }
/* Locked SVG assets provide dimmed materials and disable their internal animations. */
.dc-pixel-number { display: block; width: fit-content; max-width: 100%; line-height: 1; color: #ecf0f1; }
.dc-pixel-number svg { display: block; width: auto; height: 48px; max-width: 100%; fill: currentColor; }
.dc-calendar-body { display: grid; grid-template-columns: minmax(115px,.7fr) minmax(0,1.5fr); gap: 20px; }
.dc-streak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding-right: 18px; border-right: 1px solid #40556880; text-align: center; }
.dc-streak .dc-medal { width: min(100%,160px); height: auto; aspect-ratio: 1; margin-bottom: 5px; filter: drop-shadow(0 0 10px #00ff9d20); }
.dc-streak-number { color: #00f5b0; }
.dc-streak-number svg { height: 48px; }
.dc-streak>strong { font-size: 16px; }
.dc-best-streak { font-size: 11px; color: #9ab4c9; }
.dc-calendar-main { min-width: 0; }
.dc-month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dc-month-nav strong { flex: 1; font-size: 14px; text-align: center; }
.dc-nav { display: grid; place-items: center; font-size: 23px; width: 32px; height: 30px; border: 1px solid #3a556b; background: #284155; color: #d6e7f3; border-radius: 4px; cursor: pointer; }
.dc-nav:disabled { opacity: .3; cursor: default; }
.dc-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; }
.dc-weekday { text-align: center; font-size: 11px; color: #a5bdd0; padding: 3px 0 6px; }
.dc-day { position: relative; min-width: 0; height: 29px; display: grid; place-items: center; border: 1px solid #354d6066; background: #1b3040; color: #c4d5e1; font: 500 12px system-ui; border-radius: 3px; cursor: pointer; }
.dc-day:hover:not(:disabled) { background: #2e4b5d; }
.dc-day.dc-attended { color: #36ffd0; background: #15443f; border-color: #249881; }
.dc-day.dc-today { border: 2px solid #37ffd0; color: #fff; }
.dc-day.dc-today::after { content: ''; position: absolute; right: 3px; top: 3px; width: 4px; height: 4px; background: #37ffd0; }
.dc-day:disabled { opacity: .3; cursor: default; }
.dc-day.dc-blank { background: transparent; border-color: transparent; }
.dc-calendar-legend { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 3px; color: #9cb6c9; font-size: 10px; }
.dc-calendar-legend .dc-text-button { font-size: 10px; padding: 4px 0; }
.dc-date-info { font-size: 11px; color: #b0c1ce; margin: 4px 0; }
.dc-date-info:empty { display: none; }
.dc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #00ff9d; border-radius: 5px; background: #20f5b2; color: #102d25; font: 750 13px/1.5 system-ui; cursor: pointer; padding: 11px 16px; text-decoration: none; transition: background .15s, border-color .15s; }
.dc-button:hover:not(:disabled) { background: #65ffcc; }
.dc-button:disabled { opacity: .6; cursor: default; }
.dc-calendar-main>.dc-button { width: 100%; margin: 8px 0 0; }
.dc-outline { background: #263f53; color: #e5f0f8!important; border-color: #597c99; }
.dc-outline:hover:not(:disabled) { background: #35556c; }
.dc-countdown { color: #a0b7c9; font-size: 10px; font-variant-numeric: tabular-nums; margin: 7px 0 0; text-align: center; }
.dc-progress { color: #bbd0df; font-size: 11px; margin: 6px 0 0; text-align: center; }
.dc-status { color: #58ffbf; margin: 8px 0 0; font-size: 12px; }
.dc-status:empty { display: none; }
.dc-error { color: #ffc3b5; }
.dc-text-button { border: 0; background: transparent; color: #b9d2e4; font: inherit; font-size: 12px; cursor: pointer; padding: 6px; }
.dc-text-button:hover { color: #38ffd0; }
.dc-text-button:disabled { opacity: .4; }
.dc-summary-card { position: relative; overflow: hidden; background-image: linear-gradient(#37557220 1px,transparent 1px),linear-gradient(90deg,#37557220 1px,transparent 1px),linear-gradient(130deg,#24394b,#1b2e3e); background-size: 28px 28px,28px 28px,100% 100%; }
.dc-summary-card>.dc-eyebrow { display: block; margin: 1px 0 9px; }
.dc-summary-card h2 { font-size: 22px; position: relative; z-index: 1; }
.dc-challenge-body { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 6px; min-height: 267px; }
.dc-challenge-stats { position: relative; z-index: 1; padding-top: 20px; }
.dc-challenge-stats>.dc-muted:first-child { margin: 0 0 16px; }
.dc-score-number svg { height: 46px; }
.dc-target { display: block; color: #9dbbd2; font: 600 16px/1.5 ui-monospace,monospace; margin: 9px 0 20px; }
.dc-challenge-stats>.dc-button { margin-top: 16px; min-width: 120px; }
.dc-challenge-art { border: 0; background: transparent; padding: 0; cursor: pointer; min-width: 0; transform: translateY(12px); }
.dc-challenge-art .dc-medal { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 0 18px #289dee30); }
.dc-card progress,.dc-detail progress { display: block; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 2px; overflow: hidden; accent-color: #39bdf8; background: #334b5e; }
.dc-card progress::-webkit-progress-bar,.dc-detail progress::-webkit-progress-bar { background: #334b5e; }
.dc-card progress::-webkit-progress-value,.dc-detail progress::-webkit-progress-value { background: #3cc5fb; }
.dc-card progress::-moz-progress-bar,.dc-detail progress::-moz-progress-bar { background: #3cc5fb; }
.dc-challenge-stats>progress { height: 12px; border: 2px solid #152738; box-shadow: 0 0 0 1px #4b6681; }
.dc-challenge-stats>progress::-webkit-progress-value { background: repeating-linear-gradient(90deg,#3cc5fb 0,#3cc5fb 23px,#20425d 23px,#20425d 26px); }
.dc-collection { grid-column: 1/-1; scroll-margin-top: 18px; }
.dc-collection-title { display: flex; align-items: center; gap: 18px; }
.dc-collection .dc-heading { margin-bottom: 10px; }
.dc-collection .dc-heading h2 { font-size: 20px; }
.dc-collection .dc-heading h2::before { content: '✦'; }
.dc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; border-bottom: 1px solid #405b7280; }
.dc-filter { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #b3c9db; padding: 10px 13px; font: 600 12px system-ui; cursor: pointer; }
.dc-filter[aria-pressed=true] { color: #28ffc0; border-bottom-color: #28ffc0; }
.dc-filters label { margin-left: auto; font-size: 11px; }
.dc-filters select { font: inherit; background: #203546; color: #bdd1df; padding: 5px; border: 1px solid #405568; border-radius: 4px; }
.dc-badge-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.dc-badge-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 215px; padding: 18px 12px 16px; background: #1a2d3d; border: 1px solid #3b5369; border-radius: 5px; color: #e5eff7; cursor: pointer; text-align: center; font: inherit; transition: border-color .15s,background .15s,transform .15s; }
.dc-badge-card:hover { border-color: #57b7cc; background: #243c50; transform: translateY(-3px); }
.dc-badge-card.dc-selected { border-color: #2e9b83; }
.dc-badge-visual { position: relative; display: grid; place-items: center; width: 100%; }
.dc-badge-visual>.dc-medal { width: min(100%,124px); height: auto; aspect-ratio: 1; }
.dc-rarity { position: absolute; top: 5px; left: 11px; color: #819db5; font-size: 20px; letter-spacing: 2px; line-height: 1; }
.dc-unlocked .dc-rarity { color: #24dabb; }
.dc-badge-card>.dc-badge-state { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; border: 1px solid #69849a; border-radius: 7px; padding: 0; background: #1b3040; color: #abc2d3; font-size: 15px; line-height: 1; box-shadow: 0 2px 6px #07131f55; }
.dc-badge-card>.dc-badge-state.dc-earned-label { background: #123f35; color: #80ffd0; border-color: #42c89b; }
.dc-badge-card>strong { font-size: 13px; line-height: 1.5; }
.dc-badge-card>.dc-muted { font-size: 10px; margin-top: auto; }
.dc-badge-card>progress { width: 85%; height: 4px; }
.dc-earned-label { color: #37f6be; border-color: #35b28d; }
.dc-profile-badge { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:3px 10px 3px 4px; border:1px solid #348772; border-radius:5px; background:#1b3b40; color:#8affd3; font:12px/1.4 system-ui; text-align:left; cursor:pointer; }
.dc-profile-badge:hover { background:#23504b; border-color:#58ffbf; }
.dc-profile-badge>.dc-medal { width:40px; height:40px; }
.dc-equipped-copy { display:flex; flex-direction:column; min-width:0; }
.dc-equipped-label { color:#a6c4c8; font-size:10px; letter-spacing:.5px; }
.dc-equipped-copy strong { font-size:12px; overflow-wrap:anywhere; }
.dc-collection>.dc-heading { flex-wrap:wrap; }
.account-identity .dc-profile-badge { margin:3px 0; }
.dc-play { display: inline-block; color: #58ffbf!important; font-size: 13px; margin-top: 18px; }
.dc-entry { font: 600 12px system-ui; padding: 8px 10px; border: 1px solid #568879; border-radius: 7px; background: #203b36; color: #b8ffe3; cursor: pointer; white-space: nowrap; }
.dc-entry[hidden] { display: none; }
.dc-floating { position: fixed; right: 16px; bottom: 76px; z-index: 1000; }
.dc-dialog { color-scheme: dark; position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px,calc(100% - 24px)); max-height: 85dvh; padding: 0; border: 1px solid #405568; border-radius: 10px; background: #243442; color: #ecf0f1; overflow: auto; }
.dc-dialog::backdrop { background: #0c1724c9; backdrop-filter: blur(4px); }
.dc-dialog .dc-card { margin: 0; border: 0; padding-top: 44px; }
.dc-close { position: absolute; right: 10px; top: 7px; background: transparent; border: 0; color: #b0c1ce; font-size: 26px; cursor: pointer; width: 36px; height: 36px; }
.dc-compact { align-items: center; }
.dc-compact .dc-streak .dc-medal { width: 110px; }
.dc-detail { box-sizing: border-box; padding: 32px 28px 28px; text-align: center; font: 14px/1.6 system-ui; max-width: 420px; }
.dc-detail>.dc-medal { margin: auto; width: 150px; height: 150px; }
.dc-detail h2 { font-size: 24px; color: #ecf0f1; margin: 8px 0; }
.dc-detail>.dc-button { margin-top: 16px; }
.dc-detail>.dc-muted { line-height: 1.8; }
.dc-card :focus-visible,.dc-entry:focus-visible,.dc-close:focus-visible,.dc-detail :focus-visible { outline: 2px solid #58ffbf; outline-offset: 3px; }
.dc-game-rewards { color: #58ffbf; background: #203b36; padding: 12px; border-radius: 8px; font: 13px/1.6 system-ui; }
@media(min-width:1400px) { .dc-card { padding: 24px; } .dc-calendar-body { gap: 24px; } .dc-day { height: 31px; } .dc-challenge-body { min-height: 280px; } }
@media(max-width:1100px) { .dc-dashboard { grid-template-columns: 1fr; } .dc-calendar-body { grid-template-columns: minmax(150px,1fr) minmax(0,2fr); } .dc-streak .dc-medal { width: 150px; } .dc-challenge-body { min-height: 220px; grid-template-columns: 1fr 1fr; } .dc-challenge-art { max-width: 240px; justify-self: center; } .dc-badge-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  .dc-card { padding: 18px 14px; } .dc-heading h2,.dc-summary-card h2 { font-size: 20px; }
  .dc-calendar-body { grid-template-columns: 1fr; gap: 16px; }
  .dc-streak { display: grid; grid-template-columns: 75px auto 1fr; grid-template-rows: auto auto; column-gap: 13px; row-gap: 4px; border-right: 0; border-bottom: 1px solid #40556880; padding: 0 0 15px; text-align: left; }
  .dc-streak .dc-medal { grid-row: 1/3; width: 75px; margin: 0; }
  .dc-streak-number { grid-row: 1; grid-column: 2; align-self: end; }.dc-streak-number svg { height: 30px; }
  .dc-streak>strong { grid-column: 2; font-size: 12px; } .dc-streak>.dc-muted { align-self: end; }.dc-best-streak { grid-column: 3; }
  .dc-day { height: 35px; }.dc-month-nav strong { font-size: 15px; }
  .dc-challenge-body { min-height: 220px; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
  .dc-score-number svg { height: 34px; }.dc-target { font-size: 13px; margin-bottom: 16px; }
  .dc-challenge-stats { padding-top: 12px; }.dc-challenge-stats>.dc-muted:first-child { font-size: 11px; }
  .dc-challenge-stats>.dc-button { min-width: 100px; margin-top: 12px; }
  .dc-badge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .dc-badge-card { min-height: 210px; padding: 16px 9px 12px; }.dc-badge-card>strong { font-size: 13px; }
  .dc-collection-title { gap: 4px; flex-direction: column; align-items: flex-start; }
  .dc-collection-title .dc-muted { padding-left: 25px; font-size: 10px; }
  .dc-collection .dc-heading h2 { font-size: 18px; }.dc-collection .dc-text-button { font-size: 11px; }
  .dc-filters { gap: 0; }.dc-filter { padding: 10px 7px; font-size: 11px; }
  .dc-filters label { width: 100%; margin: 4px 0 9px; text-align: right; }
  .dc-compact { grid-template-columns: 1fr; }.dc-compact .dc-streak .dc-medal { width: 75px; }
}
@media(prefers-reduced-motion:reduce) { .dc-button,.dc-badge-card { transition: none; }.dc-badge-card:hover { transform: none; } }
.dc-is-locked { width:23px; height:23px; }
.dc-is-locked::before { content:''; position:absolute; width:7px; height:6px; left:7px; top:10px; border:1px solid #abc2d3; border-radius:1px; }
.dc-is-locked::after { content:''; position:absolute; width:5px; height:5px; left:8px; top:5px; border:1px solid #abc2d3; border-bottom:0; border-radius:4px 4px 0 0; }

.dc-series-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.dc-series-filters .dc-filter { padding:6px 12px; border:1px solid #405d73; border-radius:4px; font-size:12px; }
.dc-series-filters .dc-filter[aria-pressed=true] { background:#23483f; border-color:#30bfa0; }
.dc-badge-rule { color:#8caabd; font-size:10px; margin:5px 0 8px; }
.dc-badge-card.dc-apex.dc-unlocked { border-color:#b49a55; background:radial-gradient(ellipse at 50% 28%,#5a493644,transparent 75%),#1a2f40; }
.dc-apex.dc-unlocked .dc-rarity { color:#ffe29b; }

/* Empty account metrics retain the same visual hierarchy as pixel numbers. */
.is-guest .dc-streak-number, .is-guest .dc-score-number { font-size: 48px; line-height: 1; font-weight: 750; }

/* Both states share the original artwork; only unearned badges have an overlay. */
.dc-medal { position: relative; }
.dc-medal.dc-locked::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: rgb(128 128 128 / 45%); pointer-events: none; }

.dc-earned-label { background: #123f35; color: #80ffd0; border: 1px solid #42c89b; font-weight: 700; padding: 3px 7px; border-radius: 5px; }
.dc-unlocked-tag { display: inline-block; margin: 4px 0; }