.attendance-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  margin: auto;
  padding: 9px;
  background: rgba(2, 5, 20, .76);
  backdrop-filter: blur(3px) brightness(.52);
}

.attendance-modal {
  position: relative;
  display: flex;
  width: min(calc(100% - 4px), calc((100dvh - 18px) * .667), 470px);
  aspect-ratio: 2 / 3;
  max-height: calc(100dvh - 18px);
  flex-direction: column;
  padding: clamp(56px, 13vw, 70px) clamp(10px, 3vw, 16px) clamp(12px, 3vw, 17px);
  border: 2px solid #e9bd65;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(63, 79, 144, .38), transparent 35%),
    linear-gradient(155deg, #182b58 0%, #0b1635 46%, #07102b 100%);
  box-shadow:
    inset 0 0 0 3px #07112d,
    inset 0 0 0 4px rgba(255, 213, 120, .55),
    inset 0 0 38px rgba(23, 52, 112, .55),
    0 20px 54px rgba(0, 0, 0, .82),
    0 0 30px rgba(8, 19, 54, .9);
  color: #fff4cc;
  animation: attendance-rise .24s ease-out;
}

.attendance-modal::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 9px;
  border: 1px solid rgba(202, 144, 61, .5);
  border-radius: 20px;
}

.attendance-emblem {
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 50%;
  display: grid;
  width: clamp(62px, 17vw, 82px);
  height: clamp(62px, 17vw, 82px);
  place-items: center;
  border: 2px solid #ffe294;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffe987 0 14%, #e7a72f 42%, #9a570f 78%, #5b3107 100%);
  box-shadow: 0 0 0 7px #0d1b3b, 0 0 0 9px #d9a84f, 0 5px 18px rgba(0, 0, 0, .65);
  transform: translateX(-50%);
}

.attendance-paw {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 30px;
  color: currentColor;
}

.attendance-paw i,
.attendance-paw b {
  position: absolute;
  display: block;
  background: currentColor;
}

.attendance-paw i { width: 7px; height: 10px; border-radius: 50%; }
.attendance-paw i:nth-child(1) { left: 3px; top: 8px; transform: rotate(-25deg); }
.attendance-paw i:nth-child(2) { left: 10px; top: 1px; transform: rotate(-9deg); }
.attendance-paw i:nth-child(3) { right: 9px; top: 1px; transform: rotate(9deg); }
.attendance-paw i:nth-child(4) { right: 2px; top: 8px; transform: rotate(25deg); }
.attendance-paw b { left: 8px; bottom: 1px; width: 19px; height: 15px; border-radius: 52% 52% 45% 45%; }
.attendance-emblem .attendance-paw { color: #593008; filter: drop-shadow(0 1px 0 #ffd97b); }

.attendance-close {
  position: absolute;
  z-index: 3;
  top: 17px;
  right: 17px;
  display: grid;
  width: clamp(39px, 10vw, 48px);
  height: clamp(39px, 10vw, 48px);
  padding: 0 0 3px;
  place-items: center;
  border: 2px solid #d8a957;
  border-radius: 50%;
  background: linear-gradient(145deg, #263861, #0c1736);
  box-shadow: inset 0 0 0 3px #101a38, inset 0 0 0 4px rgba(255, 221, 143, .4), 0 4px 10px rgba(0, 0, 0, .5);
  color: #fff;
  font: 800 clamp(29px, 7vw, 37px)/1 Arial, sans-serif;
  text-shadow: 0 2px 2px #000;
}

.attendance-title {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 4vw, 22px);
  margin: 0 0 6px;
  color: #ffdb72;
  font-size: clamp(26px, 7vw, 39px);
  font-weight: 1000;
  letter-spacing: -1.5px;
  line-height: 1;
  text-shadow: 0 2px 0 #7f450d, 0 0 13px rgba(255, 194, 59, .35);
  white-space: nowrap;
}

.attendance-title span { font-size: .72em; }

.attendance-divider {
  z-index: 1;
  position: relative;
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  color: #d49128;
}

.attendance-divider::before,
.attendance-divider::after {
  content: "";
  width: 34%;
  height: 1px;
  margin: 0 10px;
  background: linear-gradient(90deg, transparent, #d49328);
}
.attendance-divider::after { background: linear-gradient(90deg, #d49328, transparent); }
.attendance-divider .attendance-paw { width: 34px; height: 30px; margin: -8px; transform: scale(.48); }

.attendance-grid {
  z-index: 1;
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 10px);
}

.attendance-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(9px, 2.5vw, 14px) 3px clamp(8px, 2vw, 12px);
  border: 1.5px solid #bd8540;
  border-radius: clamp(12px, 3vw, 18px);
  background: radial-gradient(circle at 50% 48%, #1b3262 0%, #111f46 57%, #091633 100%);
  box-shadow: inset 0 0 0 3px #0d1a39, inset 0 0 0 4px rgba(219, 158, 71, .46), 0 3px 8px rgba(0, 0, 0, .45);
}

.attendance-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 7px;
  border: 1px solid rgba(203, 140, 60, .32);
  border-radius: 9px;
}

.attendance-card.special { grid-column: span 2; }

.attendance-card.today {
  overflow: visible;
  border: 2px solid #ffe36b;
  background: radial-gradient(circle at 50% 44%, #273e77 0%, #142553 58%, #091735 100%);
  box-shadow: inset 0 0 0 3px #27305e, inset 0 0 0 5px #ffd34f, 0 0 16px #ffce42, 0 0 5px #fff4a9;
}

.attendance-card.claimed {
  border-color: #846775;
  background: linear-gradient(145deg, #54445d, #372f51);
  box-shadow: inset 0 0 0 3px #3a304b, inset 0 0 0 4px rgba(180, 119, 105, .35);
  color: #b69a96;
  filter: saturate(.72);
}

.attendance-day {
  z-index: 2;
  color: #e7bd7c;
  font-size: clamp(12px, 3.1vw, 18px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 2px #000;
  white-space: nowrap;
}
.attendance-card.today .attendance-day { color: #ffeb8e; }
.attendance-card.claimed .attendance-day { color: #a88b86; }

.attendance-art {
  z-index: 2;
  display: flex;
  min-height: 52%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.attendance-token {
  position: relative;
  display: grid;
  width: clamp(49px, 13vw, 68px);
  height: clamp(49px, 13vw, 68px);
  place-items: center;
  border: 2px solid #ffe781;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 25%, #fff3a3 0 10%, #fac747 30%, #d88b13 65%, #8e4e08 100%);
  box-shadow: inset 0 -4px 0 rgba(100, 47, 1, .32), inset 0 0 0 5px rgba(255, 221, 92, .25), 0 4px 6px rgba(0, 0, 0, .45);
  color: #8b4b09;
}
.attendance-token .attendance-paw { transform: scale(.72); filter: drop-shadow(0 1px 0 #ffe677); }

.attendance-diamond {
  width: clamp(74px, 20vw, 106px);
  height: clamp(70px, 18vw, 96px);
  background: linear-gradient(145deg, #fff 0 13%, #d9afff 26%, #8b73ff 48%, #554de3 68%, #bd70ff 88%);
  clip-path: polygon(50% 0, 100% 55%, 50% 100%, 0 55%);
  filter: drop-shadow(0 0 7px #a56cff) drop-shadow(0 0 1px #fff);
}

.attendance-check {
  display: grid;
  width: clamp(48px, 13vw, 66px);
  height: clamp(48px, 13vw, 66px);
  place-items: center;
  border: 2px solid #f3c45c;
  border-radius: 50%;
  background: radial-gradient(circle, #6d516d, #4c3959);
  box-shadow: inset 0 0 0 4px rgba(64, 41, 69, .75), 0 2px 5px #0007;
  color: #ffdb70;
  font: 1000 clamp(30px, 8vw, 42px)/1 Arial, sans-serif;
}

.attendance-taken {
  margin-top: 4px;
  color: #d0a17d;
  font-size: clamp(12px, 3vw, 17px);
  font-weight: 1000;
}

.attendance-reward {
  z-index: 2;
  display: flex;
  min-height: 31px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: #ffe486;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 2px #000;
}
.attendance-reward small { font-size: clamp(10px, 2.6vw, 15px); font-weight: 900; }
.attendance-reward b { font-size: clamp(13px, 3.6vw, 20px); font-weight: 1000; }
.attendance-card.claimed .attendance-reward { color: #a58a85; }

.attendance-ribbon {
  z-index: 5;
  position: absolute;
  top: clamp(35px, 9vw, 49px);
  left: -6px;
  width: calc(100% + 12px);
  padding: 4px 2px 5px;
  background: linear-gradient(180deg, #b356db, #77269e 62%, #541672);
  box-shadow: inset 0 1px rgba(255, 220, 255, .6), 0 3px 5px rgba(0, 0, 0, .55);
  color: #fff;
  font-size: clamp(12px, 3vw, 17px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 2px #421052;
}
.attendance-ribbon::before,
.attendance-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.attendance-ribbon::before { left: -8px; border-right: 8px solid #652080; }
.attendance-ribbon::after { right: -8px; border-left: 8px solid #652080; }

.attendance-claim {
  z-index: 2;
  display: flex;
  width: min(78%, 320px);
  min-height: clamp(48px, 11vw, 59px);
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(10px, 3vw, 17px) auto 0;
  border: 2px solid #ffd86b;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe17b, #d99125);
  box-shadow: inset 0 0 0 3px #bf7618, inset 0 0 0 5px rgba(255, 238, 144, .7), 0 5px 0 #71400b, 0 8px 13px rgba(0, 0, 0, .45);
  color: #3c2408;
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 1000;
  text-shadow: 0 1px #ffe99d;
}
.attendance-claim .attendance-paw { width: 34px; height: 30px; margin: -7px; transform: scale(.54); }
.attendance-claim:disabled { filter: grayscale(.68); opacity: .72; box-shadow: inset 0 0 0 3px #705f4e, 0 4px 0 #3d352e; }
.attendance-close:focus-visible,
.attendance-claim:focus-visible { outline: 3px solid #fff3a8; outline-offset: 3px; }

.attendance-toast {
  position: fixed;
  z-index: 70;
  top: 105px;
  left: 50%;
  padding: 10px 14px;
  border: 1px solid #fff8;
  border-radius: 999px;
  background: #2d2860ed;
  box-shadow: 0 4px 15px #0008;
  color: #fff7d3;
  font-size: 12px;
  font-weight: 900;
  transform: translateX(-50%);
  animation: attendance-toast 2.6s both;
  white-space: nowrap;
}

@keyframes attendance-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes attendance-toast { 0%,100% { opacity: 0; transform: translate(-50%,-10px); } 15%,82% { opacity: 1; transform: translate(-50%,0); } }

@media (max-width: 380px), (max-height: 720px) {
  .attendance-modal { padding-top: 50px; border-radius: 23px; }
  .attendance-title { font-size: 24px; }
  .attendance-divider { height: 18px; margin-bottom: 3px; }
  .attendance-close { top: 13px; right: 13px; }
  .attendance-emblem { width: 58px; height: 58px; }
  .attendance-card { padding-top: 8px; }
  .attendance-token { width: 44px; height: 44px; }
  .attendance-check { width: 44px; height: 44px; }
}

/* Reference-faithful attendance artwork */
.attendance-modal {
  width: min(calc(100% - 18px), calc((100dvh - 54px) * .69), 470px);
  aspect-ratio: .69;
  max-height: calc(100dvh - 54px);
  overflow: visible;
  padding: clamp(67px, 15.5vw, 84px) clamp(13px, 3.4vw, 19px) clamp(15px, 3.8vw, 22px);
  border-color: #edc06b;
  border-radius: 28px 28px 26px 26px;
  background:
    radial-gradient(ellipse at 50% 1%, rgba(67, 91, 159, .38), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(13, 36, 83, .52), transparent 58%),
    linear-gradient(150deg, #10234b 0%, #071632 48%, #061128 100%);
  box-shadow:
    inset 0 0 0 3px #07132d,
    inset 0 0 0 4px rgba(255, 214, 121, .76),
    inset 0 0 42px rgba(22, 49, 105, .52),
    0 20px 55px rgba(0, 0, 0, .88),
    0 0 26px rgba(10, 20, 51, .95);
}

.attendance-modal::after {
  inset: 8px;
  border-color: rgba(207, 143, 54, .64);
  border-radius: 20px;
}

.attendance-crown {
  position: absolute;
  z-index: 0;
  top: -53px;
  left: 50%;
  width: clamp(142px, 36vw, 172px);
  height: clamp(84px, 22vw, 102px);
  border: 2px solid #edc06b;
  border-bottom: 0;
  border-radius: 90px 90px 0 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(67, 91, 159, .4), transparent 48%),
    linear-gradient(150deg, #11244c, #081730 70%);
  box-shadow:
    inset 0 0 0 3px #07132d,
    inset 0 0 0 4px rgba(255, 214, 121, .7);
  transform: translateX(-50%);
}

.attendance-flourish {
  position: absolute;
  z-index: 2;
  top: 17px;
  width: 44px;
  height: 17px;
  border-top: 2px solid #b47b23;
  border-radius: 50%;
  opacity: .9;
}
.attendance-flourish::before,
.attendance-flourish::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid #b47b23;
  border-left-color: transparent;
  border-radius: 50%;
}
.attendance-flourish.left { left: calc(50% - 91px); transform: rotate(-8deg); }
.attendance-flourish.right { right: calc(50% - 91px); transform: scaleX(-1) rotate(-8deg); }
.attendance-flourish::before { left: -2px; }
.attendance-flourish::after { right: -2px; }

.attendance-emblem {
  top: -41px;
  width: clamp(68px, 17vw, 82px);
  height: clamp(68px, 17vw, 82px);
  border: 0;
  border-radius: 48%;
  background: repeating-conic-gradient(from 4deg, #ffd867 0deg 8deg, #b46b0e 8deg 12deg);
  box-shadow: 0 0 0 5px #0b1936, 0 0 0 7px #d9a84f, 0 6px 18px rgba(0, 0, 0, .7);
}
.attendance-emblem::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid #ffe589;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffe995 0 12%, #eaae31 42%, #b26b10 76%, #6c3707 100%);
  box-shadow: inset 0 0 0 3px rgba(112, 54, 3, .28), 0 0 9px #ffca40;
}
.attendance-emblem .attendance-paw { z-index: 2; transform: scale(1.04); }

.attendance-close {
  top: 17px;
  right: 17px;
  width: clamp(43px, 10.5vw, 51px);
  height: clamp(43px, 10.5vw, 51px);
  padding: 0;
  border-color: #dcb264;
  background: radial-gradient(circle at 40% 30%, #263a66, #0b1734 72%);
  box-shadow: inset 0 0 0 3px #07132d, inset 0 0 0 4px rgba(255, 221, 143, .48), 0 4px 10px #0009;
  color: transparent;
  font-size: 0;
}
.attendance-close::before,
.attendance-close::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 5px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 1px #0008;
}
.attendance-close::before { transform: rotate(45deg); }
.attendance-close::after { transform: rotate(-45deg); }

.attendance-title {
  gap: clamp(12px, 4.4vw, 23px);
  margin-bottom: 7px;
  color: #ffe071;
  font-size: clamp(27px, 7.2vw, 40px);
  letter-spacing: -1px;
  text-shadow: 0 2px 0 #713d08, 0 0 12px rgba(255, 196, 59, .5);
}
.attendance-title span { color: #ffe36f; font-size: .68em; }
.attendance-divider { height: 21px; margin-bottom: 6px; }
.attendance-divider::before,
.attendance-divider::after { width: 31%; height: 2px; }

.attendance-grid {
  grid-template-rows: 1.07fr 1fr;
  gap: clamp(7px, 1.9vw, 11px);
}

.attendance-card {
  padding: clamp(10px, 2.6vw, 15px) 3px clamp(9px, 2.2vw, 12px);
  border-color: #c38c43;
  border-radius: clamp(11px, 2.7vw, 16px);
  background:
    radial-gradient(circle at 8px 8px, #bd7d3f 0 1px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) 8px, #bd7d3f 0 1px, transparent 2px),
    radial-gradient(circle at 50% 45%, #172e5d 0%, #0b1c40 58%, #07142f 100%);
  box-shadow: inset 0 0 0 3px #091630, inset 0 0 0 4px rgba(224, 165, 78, .55), 0 3px 8px #0008;
}
.attendance-card::after { inset: 7px; border-color: rgba(207, 144, 65, .42); }

.attendance-card.today {
  border-color: #ffe16a;
  background: radial-gradient(circle at 50% 43%, #23396f 0%, #10234d 58%, #071630 100%);
  box-shadow: inset 0 0 0 3px #14234a, inset 0 0 0 5px #f5c535, 0 0 17px #ffcc3f, 0 0 6px #fff0a1;
}
.attendance-card.claimed {
  border-color: #92717a;
  background: linear-gradient(145deg, #584760, #3b3152);
  box-shadow: inset 0 0 0 3px #372d49, inset 0 0 0 4px rgba(199, 137, 121, .38);
}

.attendance-day { font-size: clamp(12px, 3.15vw, 18px); }
.attendance-art { min-height: 54%; }
.attendance-token {
  border-color: #ffdd69;
  background: radial-gradient(circle at 34% 24%, #fff5aa 0 9%, #f5bd35 30%, #d4830d 67%, #854504 100%);
  box-shadow: inset 0 0 0 4px #b66608, inset 0 0 0 6px rgba(255, 223, 89, .55), inset 0 -4px 0 rgba(92, 41, 0, .36), 0 4px 7px #0008;
}
.attendance-card.claimed .attendance-art {
  justify-content: flex-start;
  padding-top: clamp(8px, 2vw, 13px);
}
.attendance-check {
  border-color: #f5c659;
  background: radial-gradient(circle, #71526d, #4c3959 72%);
  box-shadow: inset 0 0 0 4px rgba(64, 41, 69, .76), 0 3px 7px #0009;
}
.attendance-claimed-echo {
  display: grid;
  height: clamp(25px, 6vw, 33px);
  margin-top: 3px;
  place-items: center;
  opacity: .28;
  transform: scale(.47);
  transform-origin: top center;
}
.attendance-claimed-echo .attendance-token { flex: 0 0 auto; }

.attendance-ribbon {
  top: clamp(36px, 9vw, 50px);
  left: -7px;
  width: calc(100% + 14px);
  padding: 5px 2px 6px;
  border-top: 1px solid #da80f1;
  border-bottom: 1px solid #4a0f63;
  background: linear-gradient(180deg, #b75dd9 0%, #8730ac 50%, #641a84 100%);
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  box-shadow: inset 0 1px rgba(255, 229, 255, .64), 0 4px 6px #0009;
  font-size: clamp(13px, 3.2vw, 18px);
}
.attendance-ribbon::before,
.attendance-ribbon::after {
  top: 2px;
  width: 16px;
  height: calc(100% - 4px);
  border: 0;
  background: #53136c;
}
.attendance-ribbon::before {
  left: -10px;
  clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%, 32% 50%);
}
.attendance-ribbon::after {
  right: -10px;
  clip-path: polygon(100% 0, 0 14%, 0 86%, 100% 100%, 68% 50%);
}

.attendance-card.special .attendance-art { position: relative; }
.attendance-card.special .attendance-art::before,
.attendance-card.special .attendance-art::after {
  content: "✦";
  position: absolute;
  top: 21%;
  color: #ffe474;
  font-size: clamp(14px, 4vw, 22px);
  text-shadow: 0 0 8px #f8c841;
}
.attendance-card.special .attendance-art::before { left: -24%; }
.attendance-card.special .attendance-art::after { right: -24%; }
.attendance-diamond {
  background:
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,.78) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255,255,255,.55) 49% 51%, transparent 52%),
    conic-gradient(from 45deg, #f3ceff, #886cf4, #5355dc, #b665ef, #fff, #8769ef, #514edf, #c876ff, #f3ceff);
}

.attendance-claim {
  width: min(76%, 315px);
  border-color: #ffe078;
  background: linear-gradient(180deg, #ffe37c 0%, #efb946 48%, #d98d20 100%);
  box-shadow: inset 0 0 0 3px #b86d14, inset 0 0 0 5px rgba(255, 242, 157, .72), 0 5px 0 #6c3b09, 0 8px 13px #0008;
}

@media (max-width: 380px), (max-height: 720px) {
  .attendance-modal {
    width: min(calc(100% - 16px), calc((100dvh - 42px) * .69));
    max-height: calc(100dvh - 42px);
    padding-top: 56px;
  }
  .attendance-crown { top: -43px; height: 78px; }
  .attendance-emblem { top: -34px; width: 61px; height: 61px; }
  .attendance-flourish { top: 13px; transform: scale(.84); }
  .attendance-flourish.left { left: calc(50% - 82px); }
  .attendance-flourish.right { right: calc(50% - 82px); transform: scaleX(-1) scale(.84); }
  .attendance-title { font-size: 24px; }
}

/* v6: approved artwork mapped directly from the reference mockup */
.attendance-backdrop {
  --attendance-reference: url("assets/generated/daily-attendance-approved-reference-v2.png");
  padding: 12px;
  background: rgba(1, 5, 20, .83);
  backdrop-filter: blur(4px) brightness(.42);
}

.attendance-modal {
  width: min(calc(100% - 6px), calc((100dvh - 112px) * .671), 430px);
  aspect-ratio: .671;
  max-height: calc(100dvh - 112px);
  padding: clamp(67px, 16vw, 76px) clamp(13px, 3.5vw, 18px) clamp(14px, 3.4vw, 18px);
  border: 2px solid #e1ad52;
  border-radius: 27px;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(53, 72, 128, .38), transparent 34%),
    radial-gradient(circle at 52% 48%, #132753 0%, #0a1838 57%, #061129 100%);
  box-shadow:
    inset 0 0 0 3px #07132c,
    inset 0 0 0 4px #c68e38,
    inset 0 0 0 7px #07132c,
    inset 0 0 0 8px rgba(224, 169, 76, .78),
    inset 0 0 40px rgba(34, 58, 112, .48),
    0 24px 54px rgba(0, 0, 0, .88);
}

.attendance-modal::after {
  inset: 10px;
  border-color: rgba(196, 133, 47, .42);
  border-radius: 18px;
}

.attendance-crown {
  top: -43px;
  width: clamp(142px, 36vw, 158px);
  height: clamp(80px, 20vw, 88px);
  border-color: #e1ad52;
  background: radial-gradient(circle at 50% 28%, #263b70 0%, #101f45 55%, #08142f 100%);
  box-shadow:
    inset 0 0 0 3px #07132c,
    inset 0 0 0 4px #c68e38,
    inset 0 0 0 7px #07132c,
    inset 0 0 0 8px rgba(224, 169, 76, .7);
}

.attendance-emblem {
  top: -34px;
  width: clamp(55px, 13.7vw, 61px);
  height: clamp(57px, 14.2vw, 63px);
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: var(--attendance-reference);
  background-repeat: no-repeat;
  background-size: 948.15% 1371.43%;
  background-position: 50% 13.76%;
  box-shadow: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55));
}
.attendance-emblem::before,
.attendance-emblem .attendance-paw { display: none; }

.attendance-flourish { top: 13px; width: 39px; height: 15px; }
.attendance-flourish.left { left: calc(50% - 87px); }
.attendance-flourish.right { right: calc(50% - 87px); }

.attendance-close {
  top: 16px;
  right: 17px;
  width: clamp(39px, 9.7vw, 43px);
  height: clamp(39px, 9.7vw, 43px);
}
.attendance-close::before,
.attendance-close::after { width: 22px; height: 4px; }

.attendance-title {
  gap: clamp(11px, 3.7vw, 17px);
  margin-bottom: 7px;
  font-size: clamp(27px, 7vw, 31px);
  letter-spacing: -1.2px;
  text-shadow: 0 2px 0 #6c3908, 0 0 12px rgba(255, 198, 61, .46);
}
.attendance-title span { font-size: .62em; }

.attendance-divider {
  height: 21px;
  margin-bottom: 5px;
}
.attendance-divider::before,
.attendance-divider::after { width: 31%; }

.attendance-grid {
  grid-template-rows: 1.07fr 1fr;
  gap: clamp(7px, 2vw, 10px);
}

.attendance-card {
  padding: clamp(10px, 2.7vw, 13px) 3px clamp(8px, 2.1vw, 11px);
  border: 1.5px solid #b67c35;
  border-radius: clamp(11px, 2.8vw, 15px);
  background:
    radial-gradient(circle at 50% 45%, rgba(33, 59, 112, .58), transparent 55%),
    linear-gradient(155deg, #142956, #091a3b 65%, #07152f);
  box-shadow:
    inset 0 0 0 3px #07152f,
    inset 0 0 0 4px rgba(214, 153, 64, .68),
    0 3px 8px rgba(0, 0, 0, .48);
}
.attendance-card::after {
  inset: 6px;
  border-color: rgba(199, 132, 48, .38);
  border-radius: 8px;
}
.attendance-card.today {
  border-color: #ffe16c;
  box-shadow:
    inset 0 0 0 3px #0a1733,
    inset 0 0 0 5px #f6c536,
    0 0 14px #ffc83f,
    0 0 4px #fff1a4;
}

.attendance-day {
  font-size: clamp(12px, 3.25vw, 15px);
  letter-spacing: -.2px;
}
.attendance-art { min-height: 55%; }

.attendance-token {
  width: clamp(50px, 13vw, 58px);
  height: clamp(50px, 13vw, 58px);
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: var(--attendance-reference);
  background-repeat: no-repeat;
  background-size: 914.29% 1371.43%;
  background-position: 82.24% 38.34%;
  box-shadow: none;
  clip-path: circle(49% at 50% 50%);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .52));
}
.attendance-token .attendance-paw { display: none; }

.attendance-diamond {
  width: clamp(72px, 18.5vw, 82px);
  height: clamp(72px, 18.5vw, 82px);
  background-color: transparent;
  background-image: var(--attendance-reference);
  background-repeat: no-repeat;
  background-size: 648.1% 972.15%;
  background-position: 70.21% 66.76%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 0 6px #a968ff) drop-shadow(0 2px 3px #0008);
}
.attendance-card.special .attendance-art::before,
.attendance-card.special .attendance-art::after {
  top: 22%;
  font-size: clamp(13px, 3.6vw, 18px);
}
.attendance-card.special .attendance-art::before { left: -20%; }
.attendance-card.special .attendance-art::after { right: -20%; }

.attendance-card.claimed {
  border-color: #92717c;
  background: linear-gradient(145deg, #59485f, #3c3151);
  box-shadow: inset 0 0 0 3px #382e49, inset 0 0 0 4px rgba(194, 128, 112, .38);
  filter: saturate(.64) brightness(.85);
}
.attendance-card.claimed .attendance-art { padding-top: clamp(7px, 1.8vw, 10px); }
.attendance-check {
  width: clamp(48px, 12.6vw, 56px);
  height: clamp(48px, 12.6vw, 56px);
  font-size: clamp(30px, 7.6vw, 35px);
}
.attendance-taken { margin-top: 4px; font-size: clamp(12px, 3vw, 14px); }
.attendance-claimed-echo {
  height: clamp(23px, 5.5vw, 27px);
  margin-top: 2px;
  opacity: .28;
  transform: scale(.43);
}

.attendance-ribbon {
  top: clamp(35px, 8.8vw, 39px);
  left: -7px;
  width: calc(100% + 14px);
  padding: 4px 2px 5px;
  border: 1px solid #8e30ad;
  border-radius: 3px;
  background: linear-gradient(180deg, #b760d7 0%, #8731a9 52%, #601779 100%);
  clip-path: none;
  box-shadow: inset 0 1px rgba(255, 228, 255, .68), 0 3px 5px #0008;
  font-size: clamp(12px, 3.15vw, 14px);
}
.attendance-ribbon::before,
.attendance-ribbon::after {
  z-index: -1;
  top: 3px;
  width: 14px;
  height: calc(100% - 2px);
  border: 0;
  background: #53116a;
}
.attendance-ribbon::before {
  left: -10px;
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%, 35% 50%);
}
.attendance-ribbon::after {
  right: -10px;
  clip-path: polygon(100% 0, 0 15%, 0 85%, 100% 100%, 65% 50%);
}
.attendance-card.special.today .attendance-ribbon {
  left: 23%;
  width: 54%;
}

.attendance-reward small { font-size: clamp(10px, 2.7vw, 12px); }
.attendance-reward b { font-size: clamp(14px, 3.8vw, 17px); }

.attendance-claim {
  width: min(58%, 250px);
  min-height: clamp(43px, 10.5vw, 48px);
  gap: 8px;
  margin-top: clamp(10px, 2.8vw, 14px);
  border: 2px solid #ffd972;
  background: linear-gradient(180deg, #ffe37d 0%, #efb441 48%, #d88c1e 100%);
  box-shadow:
    inset 0 0 0 3px #b86d13,
    inset 0 0 0 5px rgba(255, 242, 157, .78),
    0 4px 0 #6d3b09,
    0 7px 11px #0008;
  font-size: clamp(14px, 3.9vw, 18px);
}
.attendance-claim .attendance-paw {
  width: 31px;
  height: 28px;
  margin: -7px;
  transform: scale(.48);
}

@media (max-width: 380px), (max-height: 720px) {
  .attendance-modal {
    width: min(calc(100% - 4px), calc((100dvh - 78px) * .671));
    max-height: calc(100dvh - 78px);
    padding-top: 57px;
  }
  .attendance-crown { top: -37px; height: 72px; }
  .attendance-emblem { top: -30px; width: 51px; height: 53px; }
  .attendance-title { font-size: 23px; }
  .attendance-close { top: 13px; right: 14px; width: 37px; height: 37px; }
}

/* v7: the approved mockup itself supplies the frame, title, close art and CTA. */
.attendance-modal {
  width: min(calc(100% - 6px), calc((100dvh - 116px) * .714), 430px);
  aspect-ratio: .714;
  max-height: calc(100dvh - 116px);
  padding: 0;
  border: 0;
  border-radius: 27px;
  background: transparent;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .88);
}

.attendance-modal::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 27px;
  background-image: var(--attendance-reference);
  background-repeat: no-repeat;
  background-size: 122.78% 131.51%;
  background-position: 50% 65.76%;
  pointer-events: none;
}
.attendance-modal::after { display: none; }

.attendance-crown {
  z-index: 1;
  top: -7.15%;
  width: 22.1%;
  height: 10.5%;
  border: 0;
  border-radius: 50% 50% 0 0;
  background-image: var(--attendance-reference);
  background-repeat: no-repeat;
  background-size: 556.52% 1181.54%;
  background-position: 50% 11.45%;
  box-shadow: none;
}

.attendance-emblem,
.attendance-flourish,
.attendance-title,
.attendance-divider {
  opacity: 0;
  pointer-events: none;
}

.attendance-close {
  z-index: 8;
  top: 2.1%;
  right: 3.7%;
  width: 8.6%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.attendance-close::before,
.attendance-close::after { display: none; }

.attendance-grid {
  z-index: 3;
  position: absolute;
  top: 17.2%;
  right: 4.05%;
  bottom: 17.6%;
  left: 4.05%;
  gap: clamp(7px, 2.05vw, 10px);
}

.attendance-claim {
  z-index: 7;
  position: absolute;
  bottom: 6.25%;
  left: 50%;
  width: 53.5%;
  min-height: 0;
  height: 7.9%;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  transform: translateX(-50%);
}
.attendance-claim .attendance-paw { display: none; }
.attendance-claim:disabled { background: transparent; box-shadow: none; opacity: .68; }

@media (max-width: 380px), (max-height: 720px) {
  .attendance-modal {
    width: min(calc(100% - 4px), calc((100dvh - 82px) * .714));
    max-height: calc(100dvh - 82px);
    padding: 0;
  }
}