/* ===========================================================================
   Decibels, levels, trophies — and the card they live behind.
   ---------------------------------------------------------------------------
   Everything borrows the tokens already on .dkf-scope: the wine red, the ink,
   the hairline, the panel component. What it adds is one condensed display
   face for rank names, four tier metals, and one flame. Nothing existing is
   restyled to make room.
   ========================================================================= */

.dkf-scope{
	--dkf-tier-bronze:#9C6B3F;
	--dkf-tier-silver:#8E8C8A;
	--dkf-tier-gold:#B8860B;
	--dkf-tier-platinum:#5E6B74;
	/* A rank is a credit on a poster, not a body sentence: condensed, set in
	   capitals, tracked out. The chain ends at the theme's own heading face so
	   nothing new is downloaded for four words. */
	--dkf-rank-font:"Archivo Narrow","Arial Narrow",var(--global-heading-font-family,Spectral),Georgia,sans-serif;
	--dkf-flame-1:#FF4A2B;
	--dkf-flame-2:#FFB347;
}
.dkf-scope .dkf-flame--red{--dkf-flame-1:#FF3B22;--dkf-flame-2:#FFAE49}
.dkf-scope .dkf-flame--amber{--dkf-flame-1:#FFA318;--dkf-flame-2:#FFE27A}
.dkf-scope .dkf-flame--blue{--dkf-flame-1:#2E7BFF;--dkf-flame-2:#7FE7FF}
.dkf-scope .dkf-flame--violet{--dkf-flame-1:#8A3BFF;--dkf-flame-2:#F07BFF}

/* ------------------------------------------------------------- the rank */

/* One swatch per level, set from PHP as --dkf-rank-ink. The scale runs cool to
   hot, every step mid-toned: dark enough to carry white type on cream, bright
   enough to stay legible on charcoal. */
.dkf-scope .dkf-rank{
	display:inline-flex;align-items:center;
	margin:0 0 0 .85rem;padding:.3em .6em .27em;
	border:0;border-radius:4px;vertical-align:middle;
	font-family:var(--dkf-rank-font);
	font-size:.44em;font-weight:700;line-height:1;
	letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
	color:#fff;
	box-shadow:0 1px 2px rgba(23,19,15,.2);
}
/* The theme repaints any button it is given on hover, focus and while it is
   pressed - and a dialog leaves its opener focused, which is why the label
   went transparent after the card was closed and came back on the next click
   anywhere. Every state is spelled out here instead of being inherited. */
.dkf-scope .dkf-rank,
.dkf-scope .dkf-rank:hover,
.dkf-scope .dkf-rank:focus,
.dkf-scope .dkf-rank:focus-visible,
.dkf-scope .dkf-rank:focus-within,
.dkf-scope .dkf-rank:active,
.dkf-scope .dkf-rank[aria-haspopup]{
	background-color:var(--dkf-rank-ink,#6C7A86)!important;
	background-image:none!important;
	color:#fff!important;
}
.dkf-scope .dkf-rank--top,
.dkf-scope .dkf-rank--top:hover,
.dkf-scope .dkf-rank--top:focus,
.dkf-scope .dkf-rank--top:focus-visible,
.dkf-scope .dkf-rank--top:active{
	background-image:linear-gradient(135deg,#2A1B12,#5B3A17 55%,#B8860B)!important;
	color:#FFE9B8!important;
	box-shadow:0 1px 2px rgba(23,19,15,.3),inset 0 0 0 1px rgba(255,233,184,.28);
}
.dkf-scope .dkf-rank--live{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.dkf-scope .dkf-rank--live>span{display:inline-flex;align-items:center;gap:.35em}
.dkf-scope .dkf-rank--live>span::after{
	content:"";width:0;height:.62em;margin-left:0;
	background:currentColor;opacity:0;
	-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	transition:width .3s ease,opacity .3s ease,margin .3s ease;
}
.dkf-scope .dkf-rank--live:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:0 4px 12px rgba(23,19,15,.22)}
.dkf-scope .dkf-rank--live:is(:hover,:focus-visible)>span::after{width:.62em;opacity:.85;margin-left:.1em}
.dkf-scope .dkf-rank--live:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* A phone's heading is smaller, so the label can keep more of it. */
@media(min-width:783px){
	.dkf-scope .dkf-fan__name .dkf-rank{font-size:.38em;margin-left:1rem;padding:.32em .62em .29em}
}
.dkf-scope .dkf-rank--plain{margin-left:0;font-size:.82rem;padding:.4em .75em}

/* In a conversation: the words, quietly, with no box at all. */
/* A conversation row: the name takes the space, the rank takes what is left
   and never less than its own width. */
.dkf-scope .dkf-thread__name,
.dkf-scope .dkf-msgr__name{
	display:flex!important;align-items:center!important;gap:.5rem!important;
	min-width:0!important;flex-wrap:nowrap!important;
}
.dkf-scope .dkf-thread__who{
	min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dkf-scope .dkf-thread__name .dkf-rank,
.dkf-scope .dkf-msgr__name .dkf-rank{
	flex:0 1 auto;min-width:0;margin-left:0;
	padding:.24em .45em .22em;font-size:.56rem;letter-spacing:.1em;
	overflow:hidden;text-overflow:ellipsis;
}
.dkf-scope .dkf-thread__body{min-width:0}
.dkf-scope .dkf-thread__preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* ------------------------------------------------------------ the volume */

.dkf-scope .dkf-dbmeter__total{font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.dkf-scope .dkf-dbmeter__now{
	display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:0 0 1rem;
}
.dkf-scope .dkf-dbmeter__step{
	font-family:var(--dkf-rank-font);font-size:.72rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--dkt-ink-2,var(--dkf-muted));
}
.dkf-scope .dkf-volume__track{
	position:relative;height:12px;border-radius:999px;overflow:hidden;
	background:var(--dkt-surface-2,rgba(23,19,15,.08));
	box-shadow:inset 0 1px 2px rgba(23,19,15,.14);
}
.dkf-scope .dkf-volume__fill{
	position:relative;display:block;height:100%;border-radius:999px;
	background:linear-gradient(90deg,#6E1016,var(--dkf-crimson) 62%,#F0562F);
	box-shadow:0 0 12px rgba(196,34,41,.45);
	transition:width .6s cubic-bezier(.22,.61,.36,1);
	overflow:hidden;
}
/* One pass of light, every few seconds. It is the only motion in the panel,
   and it stops for anyone who asks for less of it. */
.dkf-scope .dkf-volume__fill>i{
	position:absolute;inset:0;
	background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
	transform:translateX(-120%);
	animation:dkf-volume-shine 4.5s ease-in-out infinite;
}
@keyframes dkf-volume-shine{0%,62%{transform:translateX(-120%)}92%,100%{transform:translateX(220%)}}
.dkf-scope .dkf-volume__read{
	display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
	flex-wrap:wrap;margin:.6rem 0 0;
}
.dkf-scope .dkf-volume__figure{
	font-family:var(--dkf-rank-font);font-size:1.5rem;font-weight:700;line-height:1;
	letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--dkt-ink,var(--dkf-ink));
}
.dkf-scope .dkf-volume__figure em{
	font-style:normal;font-size:.9rem;font-weight:600;margin-left:.25rem;
	color:var(--dkt-ink-2,var(--dkf-muted));
}
.dkf-scope .dkf-volume__figure small{
	font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	margin-left:.35rem;color:var(--dkt-ink-2,var(--dkf-muted));
}
.dkf-scope .dkf-volume__goal{
	font-family:var(--dkf-rank-font);font-size:.72rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--dkt-ink-2,var(--dkf-muted));
}

/* ----------------------------------------------------------- the shelf */

.dkf-scope .dkf-trophy-list{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.dkf-scope .dkf-trophy{
	display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,10rem);
	align-items:center;gap:.9rem;
	padding:.8rem 0;border-top:1px solid var(--dkt-line,var(--dkf-hairline));
	transition:transform .3s ease;
}
.dkf-scope .dkf-trophy:first-child{border-top:0;padding-top:.2rem}
.dkf-scope .dkf-trophy__art{display:grid;place-items:center;width:48px;height:48px;transition:transform .3s ease}
.dkf-scope .dkf-trophy:hover .dkf-trophy__art{transform:translateY(-2px) scale(1.06)}
.dkf-scope .dkf-trophy__art svg{width:42px;height:42px}
.dkf-scope .dkf-trophy__shell{fill:var(--dkf-tier-bronze)}
.dkf-scope .dkf-trophy__groove{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1}
.dkf-scope .dkf-trophy__win{fill:rgba(255,255,255,.72)}
.dkf-scope .dkf-trophy__hub{fill:rgba(23,19,15,.55)}
.dkf-scope .dkf-trophy__frame{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.55}
.dkf-scope .dkf-trophy--bronze{color:var(--dkf-tier-bronze)}
.dkf-scope .dkf-trophy--silver{color:var(--dkf-tier-silver)}
.dkf-scope .dkf-trophy--gold{color:var(--dkf-tier-gold)}
.dkf-scope .dkf-trophy--platinum{color:var(--dkf-tier-platinum)}
.dkf-scope .dkf-trophy--silver .dkf-trophy__shell{fill:#1B1A19}
.dkf-scope .dkf-trophy--gold .dkf-trophy__shell{fill:var(--dkf-tier-gold)}
.dkf-scope .dkf-trophy--platinum .dkf-trophy__shell{fill:var(--dkf-tier-platinum)}
/* Never earned: the same object as an outline. Shape, not only colour. */
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__art svg{opacity:.38}
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__shell{fill:none;stroke:var(--dkt-line,var(--dkf-rule));stroke-width:1.5}
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__win,
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__hub{fill:var(--dkt-line,var(--dkf-hairline))}
.dkf-scope .dkf-trophy__text{min-width:0}
.dkf-scope .dkf-trophy__name{display:block;font-size:1rem;font-weight:600;line-height:1.25}
.dkf-scope .dkf-trophy__tier{
	display:block;margin-top:.15rem;
	font-family:var(--dkf-rank-font);font-size:.68rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:currentColor;
}
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__tier{color:var(--dkt-ink-2,var(--dkf-muted))}
.dkf-scope .dkf-trophy__meter{display:block;min-width:0;text-align:right}
.dkf-scope .dkf-trophy__count{
	display:block;font-size:.76rem;color:var(--dkt-ink-2,var(--dkf-muted));
	font-variant-numeric:tabular-nums;margin-bottom:.35rem;
}
.dkf-scope .dkf-trophy__bar{
	display:block;height:5px;border-radius:999px;overflow:hidden;
	background:var(--dkt-surface-2,rgba(23,19,15,.08));
}
.dkf-scope .dkf-trophy__bar>span{
	display:block;height:100%;border-radius:999px;
	background:linear-gradient(90deg,var(--dkf-crimson-dark),var(--dkf-crimson));
	transition:width .5s ease;
}
.dkf-scope .dkf-trophy__next{
	display:block;margin-top:.35rem;font-size:.66rem;letter-spacing:.1em;
	text-transform:uppercase;color:var(--dkt-ink-2,var(--dkf-muted));
}
.dkf-scope .dkf-trophies__empty{margin:.8rem 0 0;font-size:.88rem;color:var(--dkt-ink-2,var(--dkf-muted))}

@media(max-width:680px){
	.dkf-scope .dkf-trophy{grid-template-columns:40px minmax(0,1fr);gap:.75rem;row-gap:.55rem}
	.dkf-scope .dkf-trophy__art{width:40px;height:40px}
	.dkf-scope .dkf-trophy__art svg{width:36px;height:36px}
	.dkf-scope .dkf-trophy__meter{grid-column:1/-1;text-align:left}
	.dkf-scope .dkf-volume__figure{font-size:1.3rem}
	.dkf-scope .dkf-ladder{grid-template-columns:1fr}
}

/* ------------------------------------------------ the flame and the thunder */

/* A ring of its own, behind the picture and outside its clip. The avatar crops
   itself to a circle, which is why the first attempt was invisible: it was a
   shadow on the cropped box.

   Three masked rings turn at different speeds, two of them against the third.
   That difference is the whole trick - one rotating ring reads as a border,
   three out of phase read as something burning. The stops are uneven so the
   tongues are never evenly spaced, and both edges of the band are feathered so
   nothing has an outline.

   Cost: three composited layers, no script, no image, no filter on the avatar
   itself. */
.dkf-scope .dkf-flamering{
	position:absolute;top:50%;left:50%;
	width:124%;height:124%;
	transform:translate(-50%,-50%);
	border-radius:50%;pointer-events:none;z-index:0;
	opacity:.95;
}
.dkf-scope .dkf-flamering i{
	position:absolute;inset:0;border-radius:50%;
	background:conic-gradient(from 0deg,
		transparent 0 2%, var(--dkf-flame-2) 5%, var(--dkf-flame-1) 8%, transparent 13% 19%,
		var(--dkf-flame-1) 22%, var(--dkf-flame-2) 26%, transparent 30% 47%,
		var(--dkf-flame-2) 52%, var(--dkf-flame-1) 55%, transparent 61% 68%,
		var(--dkf-flame-1) 73%, var(--dkf-flame-2) 77%, transparent 82% 96%,
		var(--dkf-flame-2) 99%, transparent 100%);
	-webkit-mask:radial-gradient(closest-side,transparent 70%,rgba(0,0,0,.7) 80%,#000 88%,transparent 100%);
	mask:radial-gradient(closest-side,transparent 70%,rgba(0,0,0,.7) 80%,#000 88%,transparent 100%);
	filter:blur(5px);
	animation:dkf-flame-turn 11s linear infinite;
	will-change:transform;
}
/* The second layer is sparser and turns the other way; the third is a thin,
   quick flicker that keeps the edge from ever looking solid. */
.dkf-scope .dkf-flamering i:nth-child(2){
	background:conic-gradient(from 140deg,
		transparent 0 9%, var(--dkf-flame-2) 14%, transparent 20% 42%,
		var(--dkf-flame-1) 47%, transparent 54% 76%,
		var(--dkf-flame-2) 81%, transparent 88% 100%);
	filter:blur(10px);opacity:.9;
	animation-duration:17s;animation-direction:reverse;
}
.dkf-scope .dkf-flamering i:nth-child(3){
	filter:blur(1.5px);opacity:.6;
	animation-duration:6.5s;
}
@keyframes dkf-flame-turn{to{transform:rotate(360deg)}}

/* The thunder, from Level 5: three arcs tracing the same circle, each drawn as
   a dash that runs round and vanishes on its own clock. Same four colours, so
   a member who picks violet gets violet fire and violet current. */
.dkf-scope .dkf-boltring{
	position:absolute;top:50%;left:50%;
	width:118%;height:118%;
	transform:translate(-50%,-50%);
	pointer-events:none;z-index:0;
}
.dkf-scope .dkf-boltring svg{width:100%;height:100%;overflow:visible}
.dkf-scope .dkf-boltring path{
	fill:none;stroke:var(--dkf-flame-2);stroke-width:1.6;stroke-linecap:round;
	filter:drop-shadow(0 0 3px var(--dkf-flame-1));
	stroke-dasharray:14 286;
	animation:dkf-bolt-run 2.6s linear infinite;
}
.dkf-scope .dkf-boltring path:nth-child(2){
	stroke-width:1.1;opacity:.75;stroke-dasharray:9 291;
	animation-duration:1.9s;animation-delay:-.7s;animation-direction:reverse;
}
.dkf-scope .dkf-boltring path:nth-child(3){
	stroke-width:.8;opacity:.6;stroke-dasharray:6 294;
	animation-duration:3.4s;animation-delay:-1.4s;
}
@keyframes dkf-bolt-run{
	from{stroke-dashoffset:300}
	to{stroke-dashoffset:0}
}

/* The picture sits above its own weather, always. */
.dkf-scope .dkf-charged .dkf-fan__avatar,
.dkf-scope .dkf-charged .dkf-profile__avatar,
.dkf-scope .dkf-charged .dkf-thread__media{position:relative;z-index:1}
.dkf-scope .dkf-fan__avatar-stack,
.dkf-scope .dkf-profile__avatarwrap,
.dkf-scope .dkf-thread__media{position:relative}
/* A moving picture is already busy; the effects step back rather than compete. */
.dkf-scope .dkf-avatar-live .dkf-flamering{opacity:.6}
.dkf-scope .dkf-avatar-live .dkf-boltring{opacity:.7}
@media(prefers-reduced-motion:reduce){
	.dkf-scope .dkf-flamering i,
	.dkf-scope .dkf-boltring path{animation:none}
	.dkf-scope .dkf-volume__fill>i{animation:none}
}

/* ------------------------------------------------------------- unlocks */

.dkf-scope .dkf-unlocks{margin:0 0 1.6rem}
.dkf-scope .dkf-unlocks h2{
	margin:0 0 .25rem;font-family:var(--dkf-rank-font);
	font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--dkt-ink-2,var(--dkf-muted));
}
.dkf-scope .dkf-unlocks__intro{margin:0 0 .8rem;font-size:.88rem;color:var(--dkt-ink-2,var(--dkf-muted))}
.dkf-scope .dkf-unlock-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.dkf-scope .dkf-unlock{
	display:grid;grid-template-columns:1.2rem minmax(0,1fr) auto;
	align-items:center;gap:.8rem;
	padding:.75rem .95rem;border-radius:12px;
	background:var(--dkt-surface,#fff);
	box-shadow:0 1px 2px rgba(23,19,15,.06),0 6px 18px rgba(23,19,15,.05);
	transition:box-shadow .3s ease;
}
.dkf-scope .dkf-unlock:hover{box-shadow:0 1px 2px rgba(23,19,15,.08),0 10px 26px rgba(23,19,15,.09)}
.dkf-scope .dkf-unlock.is-locked{opacity:.66;box-shadow:none;background:transparent;outline:1px dashed var(--dkt-line,var(--dkf-hairline));outline-offset:-1px}
.dkf-scope .dkf-unlock__state{font-size:.8rem;line-height:1;color:var(--dkt-ink-2,var(--dkf-muted))}
.dkf-scope .dkf-unlock.is-open .dkf-unlock__state{color:var(--dkf-crimson)}
.dkf-scope .dkf-unlock__text strong{display:block;font-size:.98rem;font-weight:600}
.dkf-scope .dkf-unlock__text small{display:block;font-size:.8rem;color:var(--dkt-ink-2,var(--dkf-muted))}
.dkf-scope .dkf-unlock__switch{
	display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
	font-family:var(--dkf-rank-font);font-size:.68rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--dkt-ink-2,var(--dkf-muted));
}
.dkf-scope .dkf-unlock__switch input{position:absolute;opacity:0;width:1px;height:1px}
.dkf-scope .dkf-unlock__track{
	position:relative;display:block;width:2.4rem;height:1.3rem;border-radius:999px;
	background:var(--dkt-line,var(--dkf-hairline));transition:background .3s ease;
}
.dkf-scope .dkf-unlock__track::after{
	content:"";position:absolute;top:2px;left:2px;width:1.05rem;height:1.05rem;
	border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(23,19,15,.25);
	transition:transform .3s ease;
}
.dkf-scope .dkf-unlock__switch input:checked + .dkf-unlock__track{background:var(--dkf-crimson)}
.dkf-scope .dkf-unlock__switch input:checked + .dkf-unlock__track::after{transform:translateX(1.1rem)}
.dkf-scope .dkf-unlock__switch input:focus-visible + .dkf-unlock__track{outline:2px solid var(--dkf-crimson);outline-offset:2px}
.dkf-scope .dkf-unlock__controls{display:inline-flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:flex-end}
.dkf-scope .dkf-unlock__colours{display:inline-flex;gap:.4rem}
.dkf-scope .dkf-hue{
	width:1.45rem;height:1.45rem;padding:0;border:0;border-radius:50%;cursor:pointer;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
	transition:transform .3s ease,box-shadow .3s ease;
}
/* The theme paints a background on every button it is given; these ARE their
   background, so each state is spelled out rather than left to be inherited -
   which is why they went blank the moment a mouse touched them. */
.dkf-scope .dkf-hue--red,
.dkf-scope .dkf-hue--red:is(:hover,:focus,:focus-visible,:active){background:radial-gradient(circle at 35% 30%,#FFAE49,#FF3B22 70%)}
.dkf-scope .dkf-hue--amber,
.dkf-scope .dkf-hue--amber:is(:hover,:focus,:focus-visible,:active){background:radial-gradient(circle at 35% 30%,#FFE27A,#FFA318 70%)}
.dkf-scope .dkf-hue--blue,
.dkf-scope .dkf-hue--blue:is(:hover,:focus,:focus-visible,:active){background:radial-gradient(circle at 35% 30%,#7FE7FF,#2E7BFF 70%)}
.dkf-scope .dkf-hue--violet,
.dkf-scope .dkf-hue--violet:is(:hover,:focus,:focus-visible,:active){background:radial-gradient(circle at 35% 30%,#F07BFF,#8A3BFF 70%)}
.dkf-scope .dkf-hue:is(:hover,:focus-visible){transform:scale(1.12)}
.dkf-scope .dkf-hue.is-on{box-shadow:0 0 0 2px var(--dkt-surface,#fff),0 0 0 4px var(--dkf-crimson)}
.dkf-scope .dkf-unlocks__status{margin:.6rem 0 0;font-size:.8rem;color:var(--dkt-ink-2,var(--dkf-muted))}
@media(max-width:620px){
	.dkf-scope .dkf-unlock{grid-template-columns:1.2rem minmax(0,1fr);row-gap:.6rem}
	.dkf-scope .dkf-unlock__switch{grid-column:2}
	.dkf-scope .dkf-unlock__colours{grid-column:2;margin-left:0}
}

/* ------------------------------------------------------------- the card */

.dkf-dbcard::backdrop{background:rgba(14,10,11,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.dkf-dbcard{
	width:min(30rem,calc(100vw - 2rem));max-width:none;
	padding:0;border:0;border-radius:18px;overflow:hidden;
	background:var(--dkt-surface,#FFFDFA);color:var(--dkt-ink,#1E1618);
	box-shadow:0 30px 80px rgba(14,10,11,.42);
	opacity:0;transform:translateY(12px) scale(.985);
	transition:opacity .3s ease,transform .3s ease;
}
.dkf-dbcard[open]{opacity:1;transform:none}
.dkf-dbcard .dkf-dbcard__top{
	position:relative;padding:1.5rem 1.6rem 1.35rem;
	background:linear-gradient(135deg,#1A1113 0%,#2E1A1C 52%,#5A1A20 100%);color:#F6EFEA;
}
.dkf-dbcard .dkf-dbcard__eyebrow{
	display:block;font-family:var(--dkf-rank-font);font-size:.64rem;font-weight:700;
	letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,234,.6);
}
.dkf-dbcard .dkf-dbcard__rank{
	display:block;margin:.3rem 0 0;font-family:var(--dkf-rank-font);
	font-size:1.85rem;font-weight:700;line-height:1.05;letter-spacing:.02em;
	text-transform:uppercase;
}
.dkf-dbcard .dkf-dbcard__step{
	display:block;margin-top:.3rem;font-size:.76rem;letter-spacing:.14em;
	text-transform:uppercase;color:rgba(246,239,234,.66);
}
.dkf-dbcard .dkf-dbcard__close{
	position:absolute;top:.9rem;right:.9rem;
	display:grid;place-items:center;
	width:2.1rem;height:2.1rem;padding:0;
	border:0;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.1);color:#F6EFEA;
	/* A glyph, not a character: an x set in whatever face the page happens to
	   use sits off-centre and then swings off-centre again when the button
	   turns. This one is drawn, centred by the grid, and rotates about its own
	   middle. */
	transition:background .3s ease;
}
.dkf-dbcard .dkf-dbcard__close::before{
	content:"";width:.85rem;height:.85rem;background:currentColor;
	-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	transition:transform .3s ease;
}
.dkf-dbcard .dkf-dbcard__close:is(:hover, :focus-visible){background:rgba(255,255,255,.2)}
.dkf-dbcard .dkf-dbcard__close:is(:hover, :focus-visible)::before{transform:rotate(90deg)}
.dkf-dbcard .dkf-dbcard__body{padding:1.4rem 1.6rem 1.1rem}
.dkf-dbcard .dkf-dbcard__count{
	display:block;margin:1.3rem 0 .1rem;padding:1.2rem 0 0;
	border-top:1px solid var(--dkt-line,rgba(23,19,15,.1));
	font-family:var(--dkf-rank-font);font-size:.68rem;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:var(--dkt-ink-2,#6B5D5C);
}
.dkf-dbcard .dkf-dbcard__shelf{
	list-style:none;margin:.5rem 0 0;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;
}
.dkf-dbcard .dkf-dbcard__trophy{
	display:grid;justify-items:center;gap:.45rem;text-align:center;
	padding:.7rem .4rem;border-radius:12px;
	transition:transform .3s ease,background .3s ease;
}
.dkf-dbcard .dkf-dbcard__trophy:hover{transform:translateY(-3px);background:var(--dkt-surface-2,rgba(23,19,15,.04))}
.dkf-dbcard .dkf-dbcard__trophy svg{width:40px;height:40px}
.dkf-dbcard .dkf-dbcard__tname{font-size:.78rem;font-weight:600;line-height:1.2}
.dkf-dbcard .dkf-dbcard__ttier{
	font-family:var(--dkf-rank-font);font-size:.6rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:currentColor;
}
.dkf-dbcard .dkf-dbcard__none{
	margin:1.3rem 0 0;padding:1.2rem 0 0;
	border-top:1px solid var(--dkt-line,rgba(23,19,15,.1));
	font-size:.86rem;color:var(--dkt-ink-2,#6B5D5C);text-align:center;
}
.dkf-dbcard .dkf-dbcard__foot{padding:0 1.6rem 1.5rem}
.dkf-dbcard .dkf-dbcard__cta{
	display:flex;align-items:center;justify-content:center;gap:.5rem;
	width:100%;padding:.95rem 1rem;border:0;border-radius:12px;cursor:pointer;
	background:linear-gradient(135deg,var(--dkf-crimson-dark),var(--dkf-crimson));
	color:#fff;font-family:var(--dkf-rank-font);font-size:.78rem;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;
	box-shadow:0 8px 22px rgba(196,34,41,.3);
	transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
}
.dkf-dbcard .dkf-dbcard__cta:is(:hover, :focus-visible){transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 12px 30px rgba(196,34,41,.38)}
@media(max-width:560px){
	.dkf-dbcard{width:calc(100vw - 1.5rem);border-radius:16px}
	.dkf-dbcard .dkf-dbcard__top{padding:1.25rem 1.2rem 1.15rem}
	.dkf-dbcard .dkf-dbcard__rank{font-size:1.5rem}
	.dkf-dbcard .dkf-dbcard__body{padding:1.15rem 1.2rem .9rem}
	.dkf-dbcard .dkf-dbcard__foot{padding:0 1.2rem 1.25rem}
	.dkf-dbcard .dkf-dbcard__shelf{gap:.4rem}
	.dkf-dbcard .dkf-dbcard__trophy svg{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
	.dkf-dbcard,.dkf-dbcard__cta,.dkf-dbcard__trophy,.dkf-rank--live{transition:none}
}

/* -------------------------------------------------------------- level up */

.dkf-levelup{
	position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
	z-index:100600;transform:translate(-50%,14px);opacity:0;
	display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.9rem;
	max-width:min(26rem,calc(100vw - 28px));
	padding:.9rem 1.15rem;border-radius:14px;
	background:linear-gradient(135deg,#1A1113,#2E1A1C 55%,#5A1A20);
	color:#F6EFEA;box-shadow:0 18px 48px rgba(0,0,0,.42);
	transition:opacity .3s ease,transform .3s ease;
}
.dkf-levelup.is-on{opacity:1;transform:translate(-50%,0)}
.dkf-levelup .dkf-levelup__kicker{
	display:block;font-family:var(--dkf-rank-font);font-size:.62rem;
	letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,234,.6);
}
.dkf-levelup .dkf-levelup__name{
	display:block;font-family:var(--dkf-rank-font);font-size:1.15rem;
	font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.2;
}
.dkf-levelup .dkf-levelup__note{display:block;margin-top:.2rem;font-size:.76rem;color:rgba(246,239,234,.72)}
.dkf-levelup .dkf-levelup__mark{
	display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
	background:radial-gradient(circle at 40% 35%,#FFD98A,#C42229 70%);
}
.dkf-levelup .dkf-levelup__mark svg{width:1.5rem;height:1.5rem;fill:#2A1206}
.dkf-levelup .dkf-levelup__close{
	position:absolute;top:.3rem;right:.45rem;width:1.6rem;height:1.6rem;
	border:0;background:transparent;color:rgba(246,239,234,.6);
	font-size:1rem;line-height:1;cursor:pointer;border-radius:50%;
}
.dkf-levelup .dkf-levelup__close:is(:hover, :focus-visible){color:#fff}
@media(prefers-reduced-motion:reduce){.dkf-levelup{transition:none}}

/* ------------------------------------------------------- the small shelf */

/* The preview in the profile's left column, built like the ones beside it. */
.dkf-scope .dkf-trophy-mini{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.dkf-scope .dkf-trophy-mini li{
	display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.7rem;
	font-size:.85rem;
}
.dkf-scope .dkf-trophy-mini svg{width:30px;height:30px;display:block}
.dkf-scope .dkf-trophy-mini__name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dkf-scope .dkf-trophy-mini__tier{
	font-family:var(--dkf-rank-font);font-size:.62rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:currentColor;white-space:nowrap;
}

/* ------------------------------------------- the profile's own buttons */

/* Edit Profile is one of a pair with Message and Follow; it was the only one
   filled in, which read as the page's main action when it is simply the way
   back to your own settings. */
.dkf-scope .dkf-fan__actions .dkc-profile-edit,
.dkf-scope .dkf-fan__actions .dkc-profile-edit:is(:hover,:focus-visible){
	background:transparent!important;
	color:var(--dkt-ink,var(--dkf-ink))!important;
	border:1px solid var(--dkt-line,var(--dkf-rule))!important;
	box-shadow:none!important;
}
.dkf-scope .dkf-fan__actions .dkc-profile-edit:is(:hover,:focus-visible){
	border-color:currentColor!important;
}

/* The formats keep their own colours: a disc is silver and a record is black
   however far up the shelf they sit, and only the framed one is gold. */
.dkf-scope .dkf-trophy__neck{fill:#C8A97E}
.dkf-scope .dkf-trophy__head{fill:#E7D9C2}
.dkf-scope .dkf-art-cd{fill:#D9DCE0}
.dkf-scope .dkf-art-cd-ring{fill:#EEF1F4}
.dkf-scope .dkf-art-vinyl{fill:#1B1A19}
.dkf-scope .dkf-art-vinyl-groove{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.dkf-scope .dkf-art-goldrec{fill:#C9A227}
.dkf-scope .dkf-art-goldrec-groove{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.dkf-scope .dkf-art-label{fill:#F4EFE8}
.dkf-scope .dkf-art-hole{fill:rgba(23,19,15,.55)}
/* Unearned, these become outlines like everything else. */
.dkf-scope .dkf-trophy.is-empty :is(.dkf-art-cd,.dkf-art-vinyl,.dkf-art-goldrec,.dkf-art-cd-ring,.dkf-art-label,.dkf-trophy__neck,.dkf-trophy__head){
	fill:none;stroke:var(--dkt-line,rgba(23,19,15,.16));stroke-width:1.4;
}
.dkf-scope .dkf-trophy.is-empty .dkf-art-hole{fill:var(--dkt-line,rgba(23,19,15,.16))}

/* ------------------------------------------------- the shelf, in groups */

/* dB, never DB: the unit is a name, and the panel's small caps were shouting
   at it. */
.dkf-scope .dkf-volume__figure small,
.dkf-scope .dkf-dbmeter__total{text-transform:none!important}

.dkf-scope .dkf-trophy-group + .dkf-trophy-group{
	margin-top:1.1rem;padding-top:1.1rem;
	border-top:1px solid var(--dkt-line,rgba(23,19,15,.12));
}
.dkf-scope .dkf-trophy-group__head{
	display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
	margin:0 0 .5rem;
}
.dkf-scope .dkf-trophy-group__name{
	font-family:var(--dkf-rank-font);font-size:.72rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--dkt-ink,#1E1618);
}
.dkf-scope .dkf-trophy-group__tally{
	font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--dkt-ink-2,#6B5D5C);
}
.dkf-scope .dkf-trophy-group .dkf-trophy{border-top:0;padding:.45rem 0}
.dkf-scope .dkf-trophy-group .dkf-trophy__meter{min-width:6rem}

/* The Backstage tab: two panels, not one tall one. */
.dkf-scope .dkf-dbmeter{margin-bottom:26px!important}

/* The preview grid: the objects, three across, nothing else. */
.dkf-scope .dkf-trophy-grid{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.dkf-scope .dkf-trophy-grid li{
	display:grid;place-items:center;
	aspect-ratio:1;padding:8px;border-radius:12px;
	background:var(--dkt-surface-2,rgba(23,19,15,.04));
	transition:transform .3s ease,background .3s ease;
}
.dkf-scope .dkf-trophy-grid li:hover{transform:translateY(-2px);background:var(--dkt-surface,#fff);box-shadow:0 6px 18px rgba(23,19,15,.08)}
.dkf-scope .dkf-trophy-grid svg{width:100%;height:100%;max-width:46px;max-height:46px}

/* The card lists everything won, in the same three-across grid. */
.dkf-dbcard .dkf-dbcard__shelf{grid-template-columns:repeat(3,minmax(0,1fr))}

/* The grid is icons only, so its labels are for screen readers alone - and
   they are hidden here rather than relying on the theme's own class being
   in scope. */
.dkf-scope .dkf-trophy-grid .screen-reader-text,
.dkf-scope .dkf-unlocks .screen-reader-text{
	position:absolute!important;width:1px!important;height:1px!important;
	margin:-1px!important;padding:0!important;overflow:hidden!important;
	clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
}

/* ------------------------------------------------ the shelf, in motion */

/* A record that has been won is a record being played. Only earned trophies
   turn: a locked one is an object sitting on a shelf, and it should look like
   one. The transform box is the shape's own, so each reel turns about its own
   centre rather than the middle of the drawing. */
.dkf-scope .dkf-spin{transform-box:fill-box;transform-origin:center;transform:rotate(0)}
.dkf-scope .dkf-trophy.is-earned .dkf-spin,
.dkf-scope .dkf-trophy-grid li .dkf-spin,
.dkf-dbcard .dkf-dbcard__trophy .dkf-spin{
	animation:dkf-spin-round 3.4s linear infinite;
}
.dkf-scope .dkf-trophy.is-earned .dkf-spin--slow,
.dkf-scope .dkf-trophy-grid li .dkf-spin--slow,
.dkf-dbcard .dkf-dbcard__trophy .dkf-spin--slow{animation-duration:4.6s}
@keyframes dkf-spin-round{to{transform:rotate(360deg)}}
/* A cone moves a little air. */
.dkf-scope .dkf-cone{transform-box:fill-box;transform-origin:center}
.dkf-scope .dkf-trophy.is-earned .dkf-cone,
.dkf-scope .dkf-trophy-grid li .dkf-cone,
.dkf-dbcard .dkf-dbcard__trophy .dkf-cone{animation:dkf-cone-push 1.6s ease-in-out infinite}
@keyframes dkf-cone-push{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){
	.dkf-scope .dkf-spin,.dkf-scope .dkf-cone{animation:none!important}
}

/* --------------------------------------------- the head, in both themes */

/* The count in a panel head is white on wine in one theme and dark on cream in
   the other, so it takes the head's own ink rather than a colour of its own -
   which is why the totals were invisible in the light theme. */
.dkf-scope .dkf-trophies .dkf-fanpanel__count,
.dkf-scope .dkf-dbmeter .dkf-fanpanel__count{
	background:rgba(128,128,128,.22)!important;
	/* The head is wine in the dark theme and cream in the light one, so the
	   count takes the theme's ink rather than a white of its own - which is
	   why the totals vanished against a pale head. */
	color:var(--dkt-ink,#1E1618)!important;
}
/* The question mark rides with the total, a size below it, so it reads as a
   footnote to that number rather than as another control on the panel. */
.dkf-scope .dkf-volume__help{
	display:inline-grid;place-items:center;vertical-align:.14em;
	width:1.25rem;height:1.25rem;margin-left:.5rem;padding:0;
	border:0;border-radius:50%;cursor:pointer;
	background:rgba(128,128,128,.22);color:var(--dkt-ink-2,#6B5D5C);
	font-family:var(--dkf-rank-font);font-size:.66rem;font-weight:700;line-height:1;
	transition:background .3s ease,transform .3s ease,color .3s ease;
}
.dkf-scope .dkf-volume__help:is(:hover,:focus-visible){background:rgba(128,128,128,.4);transform:scale(1.08)}

/* ------------------------------------------- the conversation list, again */

/* The label keeps its whole word; the name is what gives way. */
.dkf-scope .dkf-thread__name .dkf-rank,
.dkf-scope .dkf-msgr__name .dkf-rank{flex:0 0 auto!important;overflow:visible!important;text-overflow:clip!important}
.dkf-scope .dkf-thread__who{flex:0 1 auto}

/* --------------------------------------------------- the rules dialog */

.dkf-rules::backdrop{background:rgba(14,10,11,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.dkf-rules{
	width:min(28rem,calc(100vw - 2rem));padding:0;border:0;border-radius:18px;overflow:hidden;
	background:var(--dkt-surface,#FFFDFA);color:var(--dkt-ink,#1E1618);
	box-shadow:0 30px 80px rgba(14,10,11,.42);
	opacity:0;transform:translateY(12px) scale(.985);
	transition:opacity .3s ease,transform .3s ease;
}
.dkf-rules[open]{opacity:1;transform:none}
.dkf-rules .dkf-rules__top{
	position:relative;padding:1.3rem 1.5rem 1.15rem;
	background:linear-gradient(135deg,#1A1113 0%,#2E1A1C 52%,#5A1A20 100%);color:#F6EFEA;
}
.dkf-rules .dkf-rules__eyebrow{
	display:block;font-family:var(--dkf-rank-font);font-size:.62rem;font-weight:700;
	letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,234,.6);
}
.dkf-rules .dkf-rules__title{
	display:block;margin:.25rem 0 0;font-family:var(--dkf-rank-font);
	font-size:1.5rem;font-weight:700;line-height:1.1;text-transform:uppercase;
}
.dkf-rules .dkf-rules__lede{margin:.55rem 0 0;font-size:.84rem;color:rgba(246,239,234,.75);line-height:1.5}
.dkf-rules .dkf-rules__close{
	position:absolute;top:.9rem;right:.9rem;display:grid;place-items:center;
	width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.1);color:#F6EFEA;transition:background .3s ease;
}
.dkf-rules .dkf-rules__close::before{
	content:"";width:.85rem;height:.85rem;background:currentColor;
	-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	transition:transform .3s ease;
}
.dkf-rules .dkf-rules__close:is(:hover,:focus-visible){background:rgba(255,255,255,.2)}
.dkf-rules .dkf-rules__close:is(:hover,:focus-visible)::before{transform:rotate(90deg)}
.dkf-rules .dkf-rules__list{list-style:none;margin:0;padding:.9rem 1.5rem .6rem;display:grid;gap:0}
.dkf-rules .dkf-rules__row{
	display:grid;grid-template-columns:5.4rem minmax(0,1fr);align-items:baseline;gap:.9rem;
	padding:.6rem 0;border-top:1px solid var(--dkt-line,rgba(23,19,15,.1));
}
.dkf-rules .dkf-rules__row:first-child{border-top:0}
.dkf-rules .dkf-rules__db{
	font-family:var(--dkf-rank-font);font-size:1.05rem;font-weight:700;
	font-variant-numeric:tabular-nums;color:var(--dkf-crimson,#C42229);white-space:nowrap;
}
/* A range is two numbers and a dash, so it is set a size down to keep the
   column the same width as every other row's. */
.dkf-rules .dkf-rules__db--range{font-size:.85rem}
.dkf-rules .dkf-rules__db small{font-size:.6rem;letter-spacing:.12em;margin-left:.2rem;opacity:.7}
.dkf-rules .dkf-rules__what{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
.dkf-rules .dkf-rules__note{display:block;margin-top:.15rem;font-size:.8rem;color:var(--dkt-ink-2,#6B5D5C);line-height:1.45}
.dkf-rules .dkf-rules__foot{
	margin:0;padding:.9rem 1.5rem 1.3rem;font-size:.78rem;line-height:1.5;
	border-top:1px solid var(--dkt-line,rgba(23,19,15,.1));
	color:var(--dkt-ink-2,#6B5D5C);
}
@media(max-width:560px){
	.dkf-rules{width:calc(100vw - 1.5rem);border-radius:16px}
	.dkf-rules .dkf-rules__top{padding:1.1rem 1.15rem 1rem}
	.dkf-rules .dkf-rules__title{font-size:1.25rem}
	.dkf-rules .dkf-rules__list{padding:.9rem 1.15rem 1.2rem}
	.dkf-rules .dkf-rules__row{grid-template-columns:4.6rem minmax(0,1fr);gap:.7rem}
	.dkf-rules .dkf-rules__foot{padding:0 1.15rem 1.2rem}
}

/* --------------------------------------- the label, under the name on a phone */

/* On a narrow screen the heading wraps unpredictably - a short handle keeps the
   label beside it, a long one pushes it below - so it is put on its own line
   for everybody and the two look the same whoever is being viewed. */
@media(max-width:782px){
	.dkf-scope .dkf-fan__name{display:flex;flex-direction:column;align-items:center;gap:.45rem}
	.dkf-scope .dkf-fan__name .dkf-rank{margin-left:0}
}

/* A trophy not yet won is the same object with the colour drained out of it —
   which is the only thing that works now the artwork carries its own fills
   rather than the tier's. The word beside it says so too, so the state never
   rests on colour alone. */
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__art svg{filter:grayscale(1);opacity:.42}
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__name,
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__tier{color:var(--dkt-ink-2,#6B5D5C)}
.dkf-scope .dkf-trophy.is-empty .dkf-trophy__name::after{
	content:"";display:inline-block;width:.72em;height:.72em;margin-left:.45em;
	background:currentColor;opacity:.6;vertical-align:-.02em;
	-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2' fill='%23000'/%3E%3C/svg%3E");
	mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2' fill='%23000'/%3E%3C/svg%3E");
}
/* And its bar needs a track that shows on a dark background as well as a light
   one, or a small figure reads as no bar at all. */
.dkf-scope .dkf-trophy__bar{background:rgba(128,128,128,.28)!important;min-width:5rem}