/*
  Slim - the low one, and the one built for an OLED panel.

  The surface is true black, so on an OLED display the card has no lit box around it at all: the
  pixels are off and only the text, the icon and the accent tick emit light.

  It is the same width as every other preset in the set and about half the height. Being narrower as
  well would make switching presets shift the popup sideways, which is the one difference a user
  actually notices; being shorter is what keeps it the least intrusive one.

  Rendered by the shared preset engine (index.html); this file owns every pixel.
*/

:root {
  --ach-in: 380ms;
  --ach-out: 260ms;
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.7, 0, 0.84, 0);

  --surface: #000000;
  --text: #ffffff;
  --muted: #8b93a0;
  --accent: #6c91ff;
  --accent-soft: #b6c9ff;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.ach {
  position: fixed;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 452px;
  padding: 10px 14px 10px 11px;
  border-radius: 12px;
  background: var(--surface);
  /*
    A hairline instead of a drop shadow: on a black panel a shadow is invisible, and the edge is
    what tells the eye where the card stops.
  */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.12)),
    0 2px 7px rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}

/* The tick. The only lit shape on the card besides the type. */
.ach::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 26px;
  margin-top: -13px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 80%, transparent);
  transform: scaleY(0);
}

/* --- icon ------------------------------------------------------------------------------------ */

.ach .icon {
  flex: 0 0 auto;
}

.ach .icon img {
  display: block;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* --- text ------------------------------------------------------------------------------------ */

.ach .text_wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}

.ach .text_wrap:has(.marquee) {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0, #000 8px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0, #000 8px, #000 calc(100% - 20px), transparent 100%);
}

/*
  The eyebrow is dropped, not shrunk: at this size a third line of type is noise. The rarity chip
  stays, because it is the one thing a small card can say that the title cannot.
*/
.ach .meta {
  display: flex;
  align-items: center;
  max-width: 100%;
  line-height: 1;
}

.ach .meta[hidden] {
  display: none;
}

.ach .game {
  display: none;
}

.ach .rarity {
  flex: 0 0 auto;
  margin-bottom: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}

.ach .rarity[hidden] {
  display: none;
}

.ach .title {
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach .detail {
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach .title.marquee,
.ach .detail.marquee {
  display: inline-block;
  overflow: visible;
  text-overflow: clip;
  will-change: transform;
}

/* --- progress -------------------------------------------------------------------------------- */

.progress_line {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 5px;
  min-width: 0;
}

.progress_line[hidden] {
  display: none;
}

.progress_track {
  display: block;
  flex: 1 1 auto;
  min-width: 60px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #1c1c20;
}

.progress_meter {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.35s ease;
}

.progress_label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- states ---------------------------------------------------------------------------------- */

/*
  On black there is no surface to tint, so a state has to be carried by the lit parts: the tick, the
  hairline, the icon ring and the chip all take the colour together.
*/
.ach.state-rare {
  --accent: #ffcb45;
  --accent-soft: #ffe8a3;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 8px color-mix(in srgb, var(--accent) 26%, transparent),
    0 2px 7px rgba(0, 0, 0, 0.7);
}

.ach.state-rare.tier-silver {
  --accent: #c3d3e6;
  --accent-soft: #eef4fb;
}

.ach.state-rare.tier-bronze {
  --accent: #d08a4a;
  --accent-soft: #f0bd91;
}

/* 100%: the tick grows into a full left edge and the hairline brightens. */
.ach.state-platinum {
  --accent: #8ff0ff;
  --accent-soft: #e6fbff;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 8px color-mix(in srgb, var(--accent) 34%, transparent),
    0 2px 7px rgba(0, 0, 0, 0.7);
}

.ach.state-platinum::before {
  top: 8px;
  bottom: 8px;
  height: auto;
  margin-top: 0;
}

.ach.state-platinum .title {
  color: var(--accent-soft);
}

/* --- motion ---------------------------------------------------------------------------------- */

@keyframes aw_in {
  from {
    transform: translate(calc(-50% - 26px), -50%) scale(var(--scale, 1));
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(var(--scale, 1));
    opacity: 1;
  }
}

@keyframes aw_hold {
  from,
  to {
    transform: translate(-50%, -50%) scale(var(--scale, 1));
    opacity: 1;
  }
}

@keyframes aw_out {
  from {
    transform: translate(-50%, -50%) scale(var(--scale, 1));
    opacity: 1;
  }
  to {
    transform: translate(calc(-50% - 20px), -50%) scale(var(--scale, 1));
    opacity: 0;
  }
}

@keyframes aw_tick {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes aw_rise {
  from {
    transform: translateX(8px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ach.active {
  animation:
    aw_in var(--ach-in) var(--ease-in) forwards,
    aw_hold var(--ach-hold, 4360ms) forwards,
    aw_out var(--ach-out) var(--ease-out) forwards;
  animation-delay: 0s, var(--ach-in), calc(var(--ach-in) + var(--ach-hold, 4360ms));
}

.ach.active::before {
  animation: aw_tick 340ms var(--ease-in) 140ms forwards;
}

/* Never .title / .detail: the engine cancels their animations when it measures the marquee. */
.ach.active .text_wrap {
  animation: aw_rise 320ms var(--ease-in) 110ms both;
}