/* K window on desktop; Unity's violet check-in card on touch layouts. */
.ck-page, .ck-popup-body {
  --ck-bg: #fff8e8; --ck-card: #f3e8cc; --ck-line: #cdbb92; --ck-ink: #332c3e;
  --ck-dim: #75687a; --ck-active: #d9efff; --ck-blue: #327fc0; --ck-gold: #e8b443;
  color: var(--ck-ink); font-family: 'Mitr', sans-serif; font-size: max(13px, calc(16 * var(--u)));
}
.ck-page { padding: calc(14 * var(--u)); }
.ck-tabs { display: flex; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--ck-line); }
.ck-tabs button, .ck-popup-links button, .ck-makeup {
  cursor: pointer; border: 1px solid var(--ck-line); border-radius: 12px; background: var(--ck-card);
  color: var(--ck-ink); font: inherit; padding: 8px 16px; min-height: 40px;
}
.ck-tabs button.on { background: var(--ck-active); border-color: var(--ck-blue); color: var(--ck-blue); font-weight: 600; }
.ck-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.ck-heading h3 { margin: 0; font-size: max(18px, calc(24 * var(--u))); }
.ck-heading p, .ck-popup-month { color: var(--ck-dim); margin: 4px 0 0; }
.ck-progress { color: var(--ck-blue); white-space: nowrap; font-size: 20px; }
.ck-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ck-grid.first7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ck-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 100px; padding: 8px 4px; border: 2px solid var(--ck-line); border-radius: 12px;
  background: var(--ck-bg); color: var(--ck-ink); font: inherit; cursor: pointer;
}
.ck-day { font-size: 12px; white-space: nowrap; }
.ck-tile img { width: 38px; height: 38px; object-fit: contain; }
.ck-amount { font-size: 13px; font-weight: 600; }
.ck-tile.milestone { background: #fff0c4; border-color: #d2aa55; }
.ck-tile.final { background: #ffedba; }
.ck-tile.got { opacity: .65; }
.ck-tile.today { border-color: var(--ck-gold); box-shadow: inset 0 0 0 2px var(--ck-gold); opacity: 1; }
.ck-tile.selected { outline: 2px solid var(--ck-blue); outline-offset: 2px; }
.ck-stamp { position: absolute; top: 35%; right: 6px; color: #358344; font-size: 17px; font-weight: 700; }
.ck-tile.today .ck-stamp { top: -8px; bottom: auto; right: 4px; padding: 1px 6px; border-radius: 6px; color: #3c2b14; background: #ffda79; font-size: 11px; }
.ck-detail { display: grid; gap: 10px; margin-top: 14px; border: 1px solid var(--ck-line); border-radius: 12px; background: var(--ck-card); padding: 12px; }
.ck-detail > div, .ck-comeback > div { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.ck-reward { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ck-reward img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.ck-goal { padding: 10px 0; margin: 0; color: #976c23; }
.ck-goal small { color: var(--ck-dim); margin-left: 8px; }
.ck-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ck-line); padding-top: 14px; margin-top: 14px; }
.ck-page .ck-footer { position: sticky; bottom: -1px; z-index: 1; background: var(--ck-bg); padding-bottom: 10px; }
.ck-footer > span { font-size: 13px; color: var(--ck-dim); }
.ck-footer small { display: block; margin-top: 3px; font-size: 11px; }
.ck-claim { min-width: 170px; min-height: 44px; font-size: 16px; }
.ck-comeback { display: grid; gap: 8px; padding: 14px; margin: 12px 0; border: 1px solid var(--ck-gold); border-radius: 12px; background: var(--ck-card); }
.ck-comeback small { color: var(--ck-dim); }
.ck-makeup { margin-top: 12px; }
.ck-makeup:disabled { opacity: .55; cursor: default; }
.ck-message { padding: 10px 12px; border-radius: 10px; background: var(--ck-active); overflow-wrap: anywhere; }
.ck-message.error { color: #ab3546; background: #ffe1dd; }
.ck-empty { display: grid; justify-items: center; gap: 16px; padding: 40px 16px; font-size: 16px; }
.ck-rules { padding-left: 24px; line-height: 1.9; }
.ck-rules li { margin-bottom: 14px; }
.ck-overlay { z-index: 41; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(9, 10, 26, .7); }
.ck-popup { width: min(680px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.ck-popup > .kw-title { min-height: 48px; font-size: 25px; position: sticky; top: 0; z-index: 1; }
.ck-popup > .kw-title .kw-x { width: 34px; height: 34px; font-size: 16px; }
.ck-popup-body { padding: 20px; }
.ck-popup-month { font-size: 14px; margin: 0 0 16px; text-align: center; }
.ck-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ck-preview { padding: 14px; background: var(--ck-card); border: 2px solid var(--ck-line); border-radius: 16px; }
.ck-preview header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--ck-dim); }
.ck-preview header b { color: var(--ck-ink); }
.ck-preview > div { display: flex; flex-direction: column; gap: 10px; }
.ck-preview .ck-reward img { width: 40px; height: 40px; }
.ck-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.ck-week .ck-tile { min-height: 82px; }
.ck-week .ck-tile img { width: 28px; height: 28px; }
.ck-popup-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ck-popup-links button { border: 0; color: var(--ck-blue); padding: 8px 0; background: transparent; }
.ck-page button:focus-visible, .ck-overlay button:focus-visible { outline: 3px solid var(--ck-blue); outline-offset: 3px; }
html.mob .ck-page, html.mob .ck-popup-body {
  --ck-bg: #373052; --ck-card: #28233f; --ck-line: #615277; --ck-ink: #fff7ff;
  --ck-dim: #c4b9d6; --ck-active: #65509a; --ck-blue: #a8c7ff; --ck-gold: #ebc171;
}
html.mob .ck-page { background: var(--ck-bg); border-radius: 12px; }
html.mob .ck-overlay .ck-popup { background: #373052; border-color: #211b37; box-shadow: inset 0 0 0 2px #766397; }
html.mob .ck-overlay .kw-title { background: #7660b4; border-color: #211b37; }
html.mob .ck-tile.milestone, html.mob .ck-tile.final { background: #514061; border-color: #c19f65; }
html.mob .ck-goal { color: #f3d18a; }
html.mob .ck-claim { background: #567bd5; color: white; -webkit-text-stroke: 0; border-color: #211b37; }
@media (max-width: 600px) {
  .ck-page, .ck-popup-body { font-size: 14px; }
  .ck-page { padding: 8px; }
  .ck-tabs button { min-height: 44px; flex: 1; padding: 8px; }
  .ck-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .ck-grid.first7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ck-grid.first7 .final { grid-column: span 2; }
  .ck-tile { min-height: 84px; }
  .ck-tile img { width: 30px; height: 30px; }
  .ck-day { font-size: 11px; }
  .ck-footer { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .ck-claim { width: 100%; }
  .ck-previews { grid-template-columns: 1fr; }
  .ck-preview { padding: 10px; }
  .ck-preview > div { flex-direction: row; flex-wrap: wrap; }
  .ck-preview .ck-reward img { width: 30px; height: 30px; }
  .ck-preview header { margin-bottom: 8px; }
  .ck-popup-body { padding: 14px; }
  .ck-week { gap: 3px; }
  .ck-week { grid-template-columns: repeat(7, minmax(44px, 1fr)); overflow-x: auto; padding: 8px 0; }
  .ck-week .ck-tile { min-height: 72px; padding: 6px 2px; }
  .ck-week .ck-tile img { width: 23px; height: 23px; }
  .ck-week .ck-day, .ck-week .ck-amount { font-size: 10px; }
  .ck-popup-links button { min-height: 44px; font-size: 14px; }
}
@media (max-width: 360px) { .ck-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ck-overlay *, .ck-page * { scroll-behavior: auto; } }