/* Class Points. The grid's column count and tile size come from JS
   (--cols, --tw, --th); each tile is a size container for its contents. */

.cp {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: clamp(6px, 1.8cqmin, 20px);
  padding: clamp(8px, 2.4cqmin, 28px);
}

/* ---- header: class total and goal, sort, whole class ---- */
.cp-head { flex: none; display: flex; align-items: center; gap: clamp(6px, 1.6cqmin, 18px); }
.cp-goal {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .45em;
  min-height: clamp(36px, 8.4cqmin, 84px); padding: 0 .9em 0 .45em; border-radius: 999px;
  background: color-mix(in srgb, var(--cat) 9%, var(--stage-bg));
  border: 1px solid color-mix(in srgb, var(--cat) 26%, transparent);
  font: 650 clamp(15px, 4.4cqmin, 52px)/1 var(--font-display);
}
.cp-star { flex: none; display: grid; place-items: center; }
.cp-star .icon { width: 1.25em; height: 1.25em; fill: #f7c948; stroke: #c98f00; stroke-width: 1.6; }
.cp-score { flex: none; display: inline-flex; align-items: baseline; gap: .3em; font-variant-numeric: tabular-nums; }
.cp-of { font-size: .55em; font-weight: 600; color: color-mix(in srgb, var(--stage-ink) 55%, transparent); white-space: nowrap; }
.cp-bar {
  flex: 1; min-width: 30px; height: .42em; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--stage-ink) 10%, transparent);
}
.cp-bar-fill {
  height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 55%, #f7c948));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.cp.is-goal .cp-bar-fill {
  background: linear-gradient(90deg, #f2b705, #ffe27a, #f2b705); background-size: 200% 100%;
  animation: cp-shine 2.2s linear infinite;
}
.cp.is-goal .cp-goal { border-color: #f2b705; background: color-mix(in srgb, #f7c948 16%, var(--stage-bg)); }
@keyframes cp-shine { to { background-position: -200% 0; } }

/* ---- the grid of students ---- */
.cp-grid {
  flex: 1 1 auto; min-height: 0;
  display: grid; justify-content: center; align-content: center;
  grid-template-columns: repeat(var(--cols, 6), var(--tw, 120px));
  grid-auto-rows: var(--th, 100px); gap: var(--gap, 10px);
}
.cp-tile { --tint: var(--cat); position: relative; container-type: size; border-radius: clamp(8px, 1.6cqmin, 20px); }
.cp-hit {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  display: grid; grid-template: "av" auto "name" auto "pts" auto / 100%;
  align-content: center; justify-items: center; row-gap: 2.5cqh; padding: 5cqh 6cqw;
  border-radius: inherit; cursor: pointer; color: var(--stage-ink);
  background: color-mix(in srgb, var(--tint) 13%, var(--stage-bg));
  border: 1px solid color-mix(in srgb, var(--tint) 38%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tint) 32%, transparent), var(--shadow-sm);
  transition: transform .08s, background .15s, box-shadow .15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.cp-hit:hover { background: color-mix(in srgb, var(--tint) 22%, var(--stage-bg)); }
.cp-hit:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tint) 32%, transparent); }
.cp-hit:focus-visible { outline: 3px solid var(--cat); outline-offset: 2px; }
.cp-av { grid-area: av; width: min(46cqh, 72cqw); aspect-ratio: 1; display: block; }
.cp-av-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cp-av-shadow { fill: rgba(0, 0, 0, .13); }
.cp-name {
  --nf: 1;
  grid-area: name; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 clamp(10px, calc(13cqh * var(--nf)), 42px)/1.15 var(--font-display);
}
.cp-name.is-long { --nf: .85; }
.cp-name.is-xlong { --nf: .78; }
.cp-pts {
  grid-area: pts; display: inline-flex; align-items: center; gap: .18em;
  font: 750 clamp(12px, 17cqh, 64px)/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.cp-pts .icon { width: .78em; height: .78em; fill: #f7c948; stroke: #c98f00; stroke-width: 1.6; }
.cp-tile.is-zero .cp-pts { opacity: .5; }

/* Square-ish tiles: monster and score side by side, the name underneath. */
@container (min-aspect-ratio: 1 / 1) {
  .cp-hit { grid-template: "av pts" auto "name name" auto / 1fr 1fr; column-gap: 5cqw; row-gap: 2cqh; padding: 6cqh 6cqw; }
  .cp-av { width: min(56cqh, 44cqw); justify-self: end; }
  .cp-pts { justify-self: start; font-size: clamp(12px, 30cqh, 84px); }
  .cp-name { font-size: clamp(10px, calc(19cqh * var(--nf)), 52px); }
}
/* Wide tiles: monster on the left, name and score on the right. */
@container (min-aspect-ratio: 19 / 10) {
  .cp-hit { grid-template: "av name" auto "av pts" auto / auto minmax(0, 1fr); justify-items: start; column-gap: 5cqw; row-gap: 3cqh; padding: 6cqh 7cqw; }
  .cp-av { width: min(74cqh, 42cqw); align-self: center; justify-self: auto; }
  .cp-name { font-size: clamp(10px, calc(19cqh * var(--nf)), 50px); }
  .cp-pts { font-size: clamp(12px, 27cqh, 76px); }
}
/* Small tiles: no monster, just the name and the score. */
@container (max-height: 58px) {
  .cp-av { display: none; }
  .cp-hit { grid-template: "name" auto "pts" auto / 100%; justify-items: center; row-gap: 4cqh; padding: 4cqh 5cqw; }
  .cp-name { font-size: clamp(10px, calc(25cqh * var(--nf)), 30px); }
  .cp-pts { font-size: clamp(11px, 32cqh, 40px); justify-self: center; }
}

.cp-minus {
  position: absolute; top: 4cqmin; right: 4cqmin; z-index: 2;
  width: clamp(22px, 26cqmin, 44px); height: clamp(22px, 26cqmin, 44px); padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--stage-bg) 80%, transparent); color: var(--stage-ink);
  border: 1px solid color-mix(in srgb, var(--tint) 40%, transparent);
  opacity: .45; transition: opacity .15s, background .15s;
}
.cp-minus .icon { width: 60%; height: 60%; }
.cp-tile:hover .cp-minus, .cp-minus:focus-visible { opacity: 1; }
.cp-minus:hover { background: var(--danger); color: #fff; border-color: transparent; }
@media (hover: none) { .cp-minus { opacity: .8; } }
@container (max-height: 58px) { .cp-minus { display: none; } }

/* +1 floating up, a bump on the score, a shake at zero. */
.cp-float {
  position: absolute; left: 50%; top: 22%; z-index: 3; pointer-events: none;
  font: 800 clamp(16px, 34cqmin, 80px)/1 var(--font-display); color: var(--cat);
  text-shadow: 0 2px 0 var(--stage-bg), 0 0 12px var(--stage-bg);
  animation: cp-float .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.cp-float.is-minus { color: var(--danger); animation-name: cp-sink; }
@keyframes cp-float {
  0% { transform: translate(-50%, 10%) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -10%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1); opacity: 0; }
}
@keyframes cp-sink {
  0% { transform: translate(-50%, -20%) scale(.6); opacity: 0; }
  20% { transform: translate(-50%, 0) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, 60%) scale(.9); opacity: 0; }
}
.cp-tile.is-bump .cp-pts { animation: cp-bump .38s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cp-tile.is-shake .cp-hit { animation: cp-shake .32s ease-in-out; }
@keyframes cp-shake { 25% { transform: translateX(-4%); } 75% { transform: translateX(4%); } }

/* ---- goal reached ---- */
.cp-banner {
  position: absolute; left: 50%; top: 50%; z-index: 10; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: .4em; padding: .45em 1.1em; border-radius: 999px;
  font: 750 clamp(22px, 9cqmin, 130px)/1 var(--font-display); white-space: nowrap; pointer-events: none;
  color: #4a3200; background: linear-gradient(180deg, #ffe58a, #f7c948);
  box-shadow: 0 6px 0 #c98f00, 0 24px 60px rgba(0, 0, 0, .3);
}
.cp-banner .icon { width: 1.1em; height: 1.1em; }

.cp-empty { max-width: 70%; }

/* ---- small widgets ---- */
@container (max-width: 700px) {
  .cp-sort span { display: none; }
  .cp-sort { width: clamp(36px, 8.4cqmin, 84px); padding: 0; }
}
@container (max-width: 430px) {
  .cp-all span { display: none; }
  .cp-all { min-width: 0; width: clamp(36px, 8.4cqmin, 84px); padding: 0; }
  .cp-of { display: none; }
}
@container (max-height: 300px) {
  .cp { padding: 6px; gap: 6px; }
}